@td-design/react-native-picker/lib/module/cascade-picker/useCascader.js

基于 @td-design/react-native 的 picker 组件

import { useImperativeHandle, useMemo } from 'react';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
import arrayTreeFilter from 'array-tree-filter';
export default function useCascader(_ref) {
  let {
    data,
    cols = 3,
    value,
    onChange,
    ref
  } = _ref;
  const [stateValue, setStateValue] = useSafeState(generateNextValue(data, value, cols));
  const [visible, setVisible] = useSafeState(false);
  useImperativeHandle(ref, () => ({
    show: () => {
      setVisible(true);
    },
    hide: () => {
      setVisible(false);
    }
  }));
  const handleValueChange = (value, index) => {
    const newValue = [...stateValue];
    // 修改当前的值，然后把后面的值都清掉
    newValue[index] = value.value;
    newValue.length = index + 1;
    const nextValue = generateNextValue(data, newValue, cols);
    setStateValue(nextValue);
  };
  const handleOk = () => {
    onChange === null || onChange === void 0 ? void 0 : onChange(stateValue);
    setVisible(false);
  };
  const handleClose = () => {
    const nextValue = generateNextValue(data, value, cols);
    setStateValue(nextValue);
    setVisible(false);
  };
  const childrenTree = useMemo(() => {
    const childrenTree = arrayTreeFilter(data, (c, level) => {
      return c.value === stateValue[level];
    }).map(c => c.children);

    // in case the users data is async get when select change
    const needPad = cols - childrenTree.length;
    if (needPad > 0) {
      for (let i = 0; i < needPad; i++) {
        childrenTree.push([]);
      }
    }
    childrenTree.length = cols - 1;
    childrenTree.unshift(data);
    return childrenTree;
  }, [data, stateValue, cols]);
  return {
    stateValue,
    childrenTree,
    visible,
    handleValueChange: useMemoizedFn(handleValueChange),
    handleOk: useMemoizedFn(handleOk),
    handleClose: useMemoizedFn(handleClose)
  };
}
function generateNextValue(data, value, cols) {
  let d = data;
  let level = 0;
  const nextValue = [];
  if (value && value.length) {
    do {
      const index = d.findIndex(item => item.value === value[level]);
      if (index < 0) {
        break;
      }
      nextValue[level] = value[level];
      level += 1;
      d = d[index].children || [];
    } while (d.length > 0);
  }
  for (let i = level; i < cols; i++) {
    if (d && d.length) {
      nextValue[i] = d[0].value;
      d = d[0].children || [];
    } else {
      break;
    }
  }
  return nextValue;
}
//# sourceMappingURL=useCascader.js.map