hoaphantn7604 / react-native-checkbox-tree Goto Github PK

renderItem(({ item, onSelect, onOpen, onClose, isOpen }) => (
  <View>
     <Checkbox onCheck={onSelect} />
     <Text>{item.label}</Text>
     {isOpen ? (
        <TouchableOpacity onPress={onClose}>
           <Icon name="arrow-up" />
        </TouchableOpacity>
     ) : (
         <TouchableOpacity onPress={onOpen}>
           <Icon name="arrow-down" />
        </TouchableOpacity>
     )}
  </View>
)

import {StyleSheet, View} from 'react-native';
import CheckboxTree from 'react-native-checkbox-tree';
import ArrowDown from './arrowDown';
import RightArrow from './rightArrow';
import Check from './check';
import Uncheck from './uncheck';

const recursiveData = [
  {
    shopReportName: 'Name 1',
    shopCode: '00001',
    shopType: '2',
    shopId: 1,
    shopName: 'Name 1',
  },
  {
    shopReportName: 'Name 11',
    shopCode: '00002',
    shopType: '2',
    shopId: 11,
    shopName: 'Name 11',
  },
];

const ApplyJobScreen = () => {
  const checkboxTreeRef = useRef();

  const intialSelect = () => {
    checkboxTreeRef.current.setSelectedItem([{shopName: 'Name 11'}]);
  };

  useEffect(() => {
    if (checkboxTreeRef.current) {
      intialSelect();
    }
  }, [checkboxTreeRef.current]);

  return (
    <View style={styles.treeContainer}>
      <View style={styles.container}>
        <CheckboxTree
          ref={checkboxTreeRef}
          data={recursiveData}
          textField="shopName"
          childField="childs"
          textStyle={{color: 'black'}}
          iconColor="black"
          openIcon={
            <ArrowDown
              style={{marginVertical: 8}}
              fill="#000"
              width="15"
              height="15"
            />
          }
          closeIcon={
            <RightArrow
              style={{marginVertical: 8}}
              fill="#000"
              width="15"
              height="15"
            />
          }
          checkIcon={
            <Check
              style={{marginHorizontal: 8}}
            />
          }
          unCheckIcon={
            <Uncheck
              fill="#000"
              style={{marginHorizontal: 8}}
            />
          }
          onSelect={item => {
            console.log(`Selected ${item.length} item`);
          }}
        />
      </View>
    </View>
  );
};