react native checkbox tree

reaksi-asli-kotak centang-pohon

Pohon kotak centang yang sederhana dan elegan untuk React Native. Diimplementasikan menggunakan ikon vektor-asli-reaksi

Memulai

    npm install react - native - checkbox - tree -- save

atau

    yarn add react - native - checkbox - tree

Sekarang kita perlu menginstal ikon reaksi-asli-vektor.

    npm install react - native - vector - icons -- save

atau

    yarn add react - native - vector - icons 

Demo kode sumber

react-native-template-components Template cantik untuk React Native.

Demo

Alat peraga

Alat peraga	Param	diperlukan	Keterangan
data	Himpunan	Ya	Data adalah array biasa
bidang teks	Rangkaian	Ya	Ekstrak label dari item data
bidang anak	Rangkaian	Ya	Ekstrak anak bidang dari item data
diPilih	(barang[])=> batal	Ya	Panggilan balik seleksi
gaya	Gaya Tampilan	TIDAK	Styling untuk tampilan kontainer
gaya teks	Gaya Teks	TIDAK	Gaya untuk teks
ikonUkuran	Nomor	TIDAK	Sesuaikan ukuran ikon
ikonWarna	Rangkaian	TIDAK	Sesuaikan warna ikon
autoSelectChilds	Boolean	TIDAK	Pilih anak secara otomatis saat memilih item, defaultnya benar
autoSelectParents	Boolean	TIDAK	Pilih induk secara otomatis ketika semua anak dipilih, defaultnya benar
ikon terbuka	Elemen	TIDAK	Sesuaikan ikon terbuka. Hanya menggunakan ikon reaksi-asli-vektor
tutupIkon	Elemen	TIDAK	Sesuaikan ikon tutup. Hanya menggunakan ikon reaksi-asli-vektor
periksaIkon	Elemen	TIDAK	Sesuaikan ikon centang. Hanya menggunakan ikon reaksi-asli-vektor
hapus centangIkon	Elemen	TIDAK	Sesuaikan ikon hapus centang. Hanya menggunakan ikon reaksi-asli-vektor
renderItem	(item, isSelect, isOpen, onOpen, onClose, onSelect)=> Elemen	TIDAK	Mengambil item dari data dan merendernya ke dalam daftar

Metode

API	Keterangan
jernih	Segarkan data
setItem yang Dipilih	Nilai input adalah hasil yang dikembalikan dari onSelect

Contoh 1

 import React , { useEffect , useRef , useState } from 'react' ;
import { StyleSheet , Text , TouchableOpacity , View } from 'react-native' ;
import CheckboxTree from 'react-native-checkbox-tree' ;
import AntDesign from 'react-native-vector-icons/AntDesign' ;
import Ionicons from 'react-native-vector-icons/Ionicons' ;

const recursiveData = [
  {
    shopReportName : 'Name 1' ,
    shopCode : '00001' ,
    shopType : '2' ,
    shopId : 1 ,
    shopName : 'Name 1' ,
    childs : [
      {
        shopReportName : 'Name 2' ,
        shopCode : '00002' ,
        shopType : '3' ,
        shopId : 2 ,
        shopName : 'Name 2' ,
        childs : [
          {
            shopReportName : 'Name 3' ,
            shopCode : '00003' ,
            shopType : '4' ,
            shopId : 3 ,
            shopName : 'Name 3' ,
            childs : [
              {
                shopReportName : 'Name 4' ,
                shopCode : '00004' ,
                shopType : '4' ,
                shopId : 4 ,
                shopName : 'Name 4' ,
              } ,
              {
                shopReportName : 'Name 5' ,
                shopCode : '00005' ,
                shopType : '4' ,
                shopId : 5 ,
                shopName : 'Name 5' ,
                childs : [
                  {
                    shopReportName : 'Name 6' ,
                    shopCode : '00006' ,
                    shopType : '4' ,
                    shopId : 7 ,
                    shopName : 'Name 6' ,
                    childs : [
                      {
                        shopReportName : 'Name 7' ,
                        shopCode : '00007' ,
                        shopType : '4' ,
                        shopId : 7 ,
                        shopName : 'Name 7' ,
                      } ,
                    ] ,
                  } ,
                ] ,
              } ,
              {
                shopReportName : 'Name 8' ,
                shopCode : '00008' ,
                shopType : '4' ,
                shopId : 8 ,
                shopName : 'Name 8' ,
              } ,
            ] ,
          } ,
        ] ,
      } ,
    ] ,
  } ,
] ;

export interface Props { }

const CheckboxTreeScreen : React . FC < Props > = _props = > {
  const [ data ] = useState < any [ ] > ( recursiveData ) ;
  const ref : any = useRef ( ) ;

  useEffect ( ( ) => {
    if ( ref && ref . current ) {
      ref . current . setSelectedItem ( [
        {
          shopReportName : 'Name 1' ,
          shopCode : '00001' ,
          shopType : '2' ,
          shopId : 1 ,
          shopName : 'Name 1' ,
        } ,
        {
          shopReportName : 'Name 2' ,
          shopCode : '00002' ,
          shopType : '3' ,
          shopId : 2 ,
          shopName : 'Name 2' ,
        } ,
      ] ) ;
    }
  } , [ ref ] ) ;

  return (
    < View style = { styles . container } >
      < CheckboxTree
        ref = { ref }
        data = { data }
        textField = "shopName"
        childField = "childs"
        textStyle = { { color : 'black' } }
        iconColor = "black"
        iconSize = { 26 }
        openIcon = { < AntDesign name = "arrowdown" size = { 26 } /> }
        closeIcon = { < AntDesign name = "arrowright" size = { 26 } /> }
        renderItem = { ( { item , isSelect , isOpen , onOpen , onClose , onSelect } ) => (
          < View style = { styles . wrapItem } >
            { isOpen ? (
              < TouchableOpacity onPress = { onClose } >
                < AntDesign size = { 30 } name = "arrowright" />
              </ TouchableOpacity >
            ) : (
              < TouchableOpacity onPress = { onOpen } >
                < AntDesign size = { 30 } name = "arrowdown" />
              </ TouchableOpacity >
            ) }
            < TouchableOpacity onPress = { onSelect } >
              < Ionicons
                size = { 26 }
                name = { isSelect ? 'checkbox-outline' : 'square-outline' }
              />
            </ TouchableOpacity >
            < Text style = { styles . name } > { item . shopName } </ Text >
          </ View >
        ) }
        onSelect = { item => {
          console . log ( `Selected ${ item . length } item` ) ;
        } }
      />
    </ View >
  ) ;
} ;

export default CheckboxTreeScreen ;

const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    padding : 20 ,
  } ,
  wrapItem : {
    flexDirection : 'row' ,
    alignItems : 'center' ,
    marginVertical : 8 ,
  } ,
  icon : {
    marginHorizontal : 8 ,
  } ,
  name : {
    fontSize : 20 ,
    marginLeft : 8 ,
  } ,
} ) ; 

Contoh 2

  import React from 'react' ;
  import { StyleSheet , View } from 'react-native' ;
  import CheckboxTree from 'react-native-checkbox-tree' ;
  import AntDesign from 'react-native-vector-icons/AntDesign' ;

  const recursiveData = [
    {
      shopReportName : 'Name 1' ,
      shopCode : '00001' ,
      shopType : '2' ,
      shopId : 1 ,
      shopName : 'Name 1' ,
      childs : [
        {
          shopReportName : 'Name 2' ,
          shopCode : '00002' ,
          shopType : '3' ,
          shopId : 2 ,
          shopName : 'Name 2' ,
          childs : [
            {
              shopReportName : 'Name 3' ,
              shopCode : '00003' ,
              shopType : '4' ,
              shopId : 3 ,
              shopName : 'Name 3' ,
              childs : [
                {
                  shopReportName : 'Name 4' ,
                  shopCode : '00004' ,
                  shopType : '4' ,
                  shopId : 4 ,
                  shopName : 'Name 4' ,
                } ,
                {
                  shopReportName : 'Name 5' ,
                  shopCode : '00005' ,
                  shopType : '4' ,
                  shopId : 5 ,
                  shopName : 'Name 5' ,
                  childs : [
                    {
                      shopReportName : 'Name 6' ,
                      shopCode : '00006' ,
                      shopType : '4' ,
                      shopId : 7 ,
                      shopName : 'Name 6' ,
                      childs : [
                        {
                          shopReportName : 'Name 7' ,
                          shopCode : '00007' ,
                          shopType : '4' ,
                          shopId : 7 ,
                          shopName : 'Name 7' ,
                        } ,
                      ] ,
                    } ,
                  ] ,
                } ,
                {
                  shopReportName : 'Name 8' ,
                  shopCode : '00008' ,
                  shopType : '4' ,
                  shopId : 8 ,
                  shopName : 'Name 8' ,
                } ,
              ] ,
            } ,
          ] ,
        } ,
      ] ,
    } ,
  ] ;

  const CheckboxTreenScreen = _props => {
    return (
      < View style = { styles . container } >
        < CheckboxTree
          data = { recursiveData }
          textField = "shopName"
          childField = "childs"
          textStyle = { { color : 'black' } }
          iconColor = "black"
          iconSize = { 26 }
          openIcon = { < AntDesign name = "arrowdown" size = { 26 } /> }
          closeIcon = { < AntDesign name = "arrowright" size = { 26 } /> }
          checkIcon = { < View /> }
          unCheckIcon = { < View /> }
          renderItem = { item => (
            < View style = { styles . wrapItem } >
              < AntDesign
                style = { styles . iconItem }
                name = "folderopen"
                size = { 20 }
              />
              < Text style = { styles . text } > { item . shopName } </ Text >
            </ View >
          ) }
          onSelect = { item => {
            console . log ( `Selected ${ item . length } item` ) ;
          } }
        />
      </ View >
    ) ;
  } ;

  export default CheckboxTreenScreen ;

  const styles = StyleSheet . create ( {
    container : {
      flex : 1 ,
      paddingVertical : 40 ,
    } ,
    wrapItem : {
      flexDirection : 'row' ,
      marginVertical : 8
    } ,
    text : {
      fontSize : 18
    } ,
    iconItem : {
      marginHorizontal : 8
    }
  } ) ;