react native checkbox tree

رد الفعل الأصلي شجرة مربع الاختيار

شجرة مربعات اختيار بسيطة وأنيقة لـ React Native. تم التنفيذ باستخدام أيقونات ناقل التفاعل الأصلي

ابدء

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

أو

    yarn add react - native - checkbox - tree

نحن الآن بحاجة إلى تثبيت أيقونات ناقل التفاعل الأصلي.

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

أو

    yarn add react - native - vector - icons 

عرض كود المصدر

React-native-template-components قالب جميل لـ React Native.

تجريبي

الدعائم

الدعائم	بارامس	يتطلب	وصف
بيانات	صفيف	نعم	البيانات عبارة عن مصفوفة عادية
textField	خيط	نعم	قم باستخراج التسمية من عنصر البيانات
ChildField	خيط	نعم	استخراج أطفال الحقل من عنصر البيانات
onSelect	(العنصر[])=> باطل	نعم	رد الاتصال التحديد
أسلوب	فيو ستايل	لا	التصميم لعرض الحاوية
textStyle	TextStyle	لا	التصميم للنص
IconSize	رقم	لا	تخصيص حجم الرمز
IconColor	خيط	لا	تخصيص لون الرمز
autoSelectChilds	منطقية	لا	تحديد الأطفال تلقائيا عند تحديد عنصر، الافتراضي هو صحيح
autoSelectParents	منطقية	لا	تحديد الأصل تلقائيًا عند تحديد جميع الأطفال، ويكون الإعداد الافتراضي صحيحًا
openIcon	عنصر	لا	تخصيص أيقونة مفتوحة. فقط باستخدام أيقونات ناقل التفاعل الأصلي
CloseIcon	عنصر	لا	تخصيص أيقونة الإغلاق. فقط باستخدام أيقونات ناقل التفاعل الأصلي
checkIcon	عنصر	لا	تخصيص أيقونة الاختيار. فقط باستخدام أيقونات ناقل التفاعل الأصلي
unCheckIcon	عنصر	لا	تخصيص أيقونة إلغاء التحديد. فقط باستخدام أيقونات ناقل التفاعل الأصلي
renderItem	(العنصر، isSelect، isOpen، onOpen، onClose، onSelect) => العنصر	لا	يأخذ عنصرًا من البيانات ويعرضه في القائمة

طريقة

واجهة برمجة التطبيقات	وصف
واضح	تحديث البيانات
setSelectedItem	قيمة الإدخال هي النتيجة التي يتم إرجاعها من onSelect

مثال 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 ,
  } ,
} ) ; 

مثال 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
    }
  } ) ;