Grid List

This topic describes the properties and example of the IP camera (IPC) grid list component TYIpcGridList. You can set the number of buttons to be displayed on each row. The component automatically displays all buttons evenly with the same width.

Preview

Properties and methods

Example

import { TYIpcGridList } from '@tuya/tuya-panel-ipc-sdk';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface itemInterface {
  item: any;
  index: number;
  buttonWidth: number;
}

const IpcGridList: React.FunctionComponent = () => {
  const handlePress = (item: { name: string }) => {
    console.log('click', item.name);
  };

  const renderButton = () => {
    const renderItem = (itemObj: itemInterface) => {
      const { item } = itemObj;
      return (
        <View style={styles.button}>
          <Text style={styles.text}>{item.name}</Text>
        </View>
      );
    };

    const data = [
      { name: 'Button1' },
      { name: 'Button2' },
      { name: 'Button3' },
      { 
        name: 'Button4', 
        prop: { disabled: true } 
        // The `prop` property in the source data indicates the properties that are inherited by the buttons in the component.
      },
      { name: 'Button5' },
    ];

    return (
      <TYIpcGridList
        onPress={handlePress}
        keyExtractor={(item: { name: string }) => item.name}
        containerVerticalWidth={10}
        data={data}
        renderItem={renderItem}
        rowNumber={2}
      />
    );
  };

  return (
    <View style={styles.container}>
      {renderButton()}
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 5,
    flexDirection: 'row',
    height: 40,
    justifyContent: 'space-between',
    paddingLeft: 5,
    paddingRight: 5,
  },
  container: {
    backgroundColor: '#f8f8f8',
    flex: 1,
  },
  text: {
    color: '#333',
    fontSize: 16,
    marginLeft: 5,
  },
});

export default IpcGridList;