@uiw/react-native/lib/Form/comps/tree.js

UIW for React Native

import Tree from '../../Tree';
import React, { useState } from 'react';
import { Pressable, SafeAreaView, View, StyleSheet, ScrollView } from 'react-native';
import Ellipsis from '../../Ellipsis';
import Modal from '../../Modal';
import Icon from '../../Icon';
import { useTheme } from '@shopify/restyle';
const FormTree = ({
  value,
  onChange,
  options = [],
  // ...others,
  disabled,
  placeholder = '请选择',
  contentStyle,
  extra,
  showClear,
  ...attr
}) => {
  const [visible, setVisible] = useState(false);
  const theme = useTheme();
  const style = createStyles({
    disabled: theme.colors.disabled,
    backgroundColor: theme.colors.mask,
    title: theme.colors.primary_text
  });
  function treeToArray(tree) {
    var res = [];
    for (const item of tree) {
      const {
        children,
        ...i
      } = item;
      if (children && children.length) {
        res = res.concat(treeToArray(children));
      }
      res.push(i);
    }
    return res;
  }
  let arrTools = treeToArray(options).filter(filItem => value?.some(somItem => Object.is(filItem.value, somItem)));
  const labelVal = arrTools.map(a => {
    return a.label;
  });
  const extraContent = React.useMemo(() => {
    if (React.isValidElement(extra)) {
      return extra;
    }
    if (value && showClear) {
      return <Pressable onPress={() => onChange} style={{
        paddingRight: 3
      }} disabled={disabled}>
          <Icon name="circle-close-o" size={18} color={theme.colors.primary_text || '#ccc'} />
        </Pressable>;
    }
    return <Icon name="right" size={18} color={theme.colors.text || '#ccc'} />;
  }, [extra, value, showClear]);
  return <SafeAreaView>
      <Pressable onPress={() => {
      if (disabled) return;
      setVisible(true);
    }}>
        <View style={[disabled ? style.disabled : style.content, contentStyle]}>
          <Ellipsis style={[style.contentTitle]} maxLen={30}>
            {labelVal.length > 0 && labelVal || placeholder}
          </Ellipsis>
          {extraContent}
        </View>
      </Pressable>
      <Modal visible={visible} placement="bottom" onClosed={() => setVisible(false)}>
        <ScrollView style={{
        height: 400
      }}>
          <Tree defaultCheckedKeys={value} treeData={options} defaultExpandAll onCheck={value => {
          onChange?.(value);
        }} />
        </ScrollView>
      </Modal>
    </SafeAreaView>;
};
export default FormTree;
function createStyles({
  backgroundColor = '#fff',
  disabled = '#f5f5f5',
  title = '#000'
}) {
  return StyleSheet.create({
    content: {
      flexDirection: 'row',
      height: 35,
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingRight: 5,
      backgroundColor: backgroundColor,
      paddingHorizontal: 16
    },
    disabled: {
      flexDirection: 'row',
      height: 35,
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingRight: 5,
      backgroundColor: disabled,
      paddingHorizontal: 16
    },
    contentTitle: {
      fontSize: 16,
      color: title
    }
  });
}