@ant-design/x/es/thought-chain/hooks/useCollapsible.js

Craft AI-driven interfaces effortlessly

import useMergedState from "rc-util/es/hooks/useMergedState";
import React from 'react';
import initCollapseMotion from "../../_util/motion";
const useCollapsible = (collapsible, prefixCls, rootPrefixCls) => {
  // ============================ Collapsible ============================
  const [enableCollapse, customizeExpandedKeys, customizeOnExpand] = React.useMemo(() => {
    let baseConfig = {
      expandedKeys: [],
      onExpand: () => {}
    };
    if (!collapsible) {
      return [false, baseConfig.expandedKeys, baseConfig.onExpand];
    }
    if (typeof collapsible === 'object') {
      baseConfig = {
        ...baseConfig,
        ...collapsible
      };
    }
    return [true, baseConfig.expandedKeys, baseConfig.onExpand];
  }, [collapsible]);

  // ============================ ExpandedKeys ============================
  const [mergedExpandedKeys, setMergedExpandedKeys] = useMergedState([], {
    value: customizeExpandedKeys,
    onChange: customizeOnExpand
  });

  // ============================ Event ============================
  const onItemExpand = curKey => {
    setMergedExpandedKeys(preKeys => {
      const keys = preKeys.includes(curKey) ? preKeys.filter(key => key !== curKey) : [...preKeys, curKey];
      customizeOnExpand?.(keys);
      return keys;
    });
  };

  // ============================ Motion ============================
  const collapseMotion = React.useMemo(() => {
    if (!enableCollapse) return {};
    return {
      ...initCollapseMotion(rootPrefixCls),
      motionAppear: false,
      leavedClassName: `${prefixCls}-content-hidden`
    };
  }, [rootPrefixCls, prefixCls, enableCollapse]);

  // ============================ Return ============================
  return [enableCollapse, mergedExpandedKeys, enableCollapse ? onItemExpand : undefined, collapseMotion];
};
export default useCollapsible;