@td-design/react-native/lib/module/menu/useMenu.js

react-native UI组件库

import { useEffect, useMemo } from 'react';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
export default function useMenu(_ref) {
  let {
    data,
    onSelect,
    selectedKey,
    defaultSelectedKey,
    multiple
  } = _ref;
  const [currentKey, setCurrentKey] = useSafeState();
  const [openKeys, setOpenKeys] = useSafeState([]);
  const flattenItems = useMemo(() => {
    const flattenItems = [];
    const flatten = (items, parentId) => {
      items.forEach(item => {
        const flattenedItem = {
          ...item,
          parentId
        };
        flattenItems.push(flattenedItem);
        if (item.items) {
          flatten(item.items, item.id);
        }
      });
    };
    flatten(data);
    return flattenItems;
  }, [data]);

  /** 设置当前选中的子菜单 */
  useEffect(() => {
    setCurrentKey(selectedKey || defaultSelectedKey);
  }, [selectedKey, defaultSelectedKey]);

  /** 设置当前展开的菜单组 */
  useEffect(() => {
    const openKeys = new Set();
    const findOpenKeys = key => {
      const item = flattenItems.find(item => item.id === key);
      if (item !== null && item !== void 0 && item.parentId) {
        openKeys.add(item.parentId);
        findOpenKeys(item.parentId);
      }
    };
    if (currentKey) {
      findOpenKeys(currentKey);
    }
    if (multiple) {
      setOpenKeys(keys => [...openKeys, ...keys]);
    } else {
      setOpenKeys([...openKeys]);
    }
  }, [currentKey, flattenItems]);
  const handleSelect = key => {
    setCurrentKey(key);
    onSelect === null || onSelect === void 0 ? void 0 : onSelect(key);
  };
  return {
    currentKey,
    openKeys,
    handleSelect: useMemoizedFn(handleSelect),
    setOpenKeys
  };
}
//# sourceMappingURL=useMenu.js.map