@rc-component/collapse/es/hooks/useItems.js

rc-collapse ui component for react

import _extends from "@babel/runtime/helpers/esm/extends";
import toArray from "@rc-component/util/es/Children/toArray";
import React from 'react';
import CollapsePanel from "../Panel";
const convertItemsToNodes = (items, props) => {
  const {
    prefixCls,
    accordion,
    collapsible,
    destroyOnHidden,
    onItemClick,
    activeKey,
    openMotion,
    expandIcon,
    classNames: collapseClassNames,
    styles
  } = props;
  return items.map((item, index) => {
    const {
      children,
      label,
      key: rawKey,
      collapsible: rawCollapsible,
      onItemClick: rawOnItemClick,
      destroyOnHidden: rawDestroyOnHidden,
      ...restProps
    } = item;

    // You may be puzzled why you want to convert them all into strings, me too.
    // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
    const key = String(rawKey ?? index);
    const mergeCollapsible = rawCollapsible ?? collapsible;
    const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
    const handleItemClick = value => {
      if (mergeCollapsible === 'disabled') {
        return;
      }
      onItemClick(value);
      rawOnItemClick?.(value);
    };
    let isActive = false;
    if (accordion) {
      isActive = activeKey[0] === key;
    } else {
      isActive = activeKey.indexOf(key) > -1;
    }
    return /*#__PURE__*/React.createElement(CollapsePanel, _extends({}, restProps, {
      classNames: collapseClassNames,
      styles: styles,
      prefixCls: prefixCls,
      key: key,
      panelKey: key,
      isActive: isActive,
      accordion: accordion,
      openMotion: openMotion,
      expandIcon: expandIcon,
      header: label,
      collapsible: mergeCollapsible,
      onItemClick: handleItemClick,
      destroyOnHidden: mergedDestroyOnHidden
    }), children);
  });
};

/**
 * @deprecated The next major version will be removed
 */
const getNewChild = (child, index, props) => {
  if (!child) {
    return null;
  }
  const {
    prefixCls,
    accordion,
    collapsible,
    destroyOnHidden,
    onItemClick,
    activeKey,
    openMotion,
    expandIcon,
    classNames: collapseClassNames,
    styles
  } = props;
  const key = child.key || String(index);
  const {
    header,
    headerClass,
    destroyOnHidden: childDestroyOnHidden,
    collapsible: childCollapsible,
    onItemClick: childOnItemClick
  } = child.props;
  let isActive = false;
  if (accordion) {
    isActive = activeKey[0] === key;
  } else {
    isActive = activeKey.indexOf(key) > -1;
  }
  const mergeCollapsible = childCollapsible ?? collapsible;
  const handleItemClick = value => {
    if (mergeCollapsible === 'disabled') {
      return;
    }
    onItemClick(value);
    childOnItemClick?.(value);
  };
  const childProps = {
    key,
    panelKey: key,
    header,
    headerClass,
    classNames: collapseClassNames,
    styles,
    isActive,
    prefixCls,
    destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
    openMotion,
    accordion,
    children: child.props.children,
    onItemClick: handleItemClick,
    expandIcon,
    collapsible: mergeCollapsible
  };

  // https://github.com/ant-design/ant-design/issues/20479
  if (typeof child.type === 'string') {
    return child;
  }
  Object.keys(childProps).forEach(propName => {
    if (typeof childProps[propName] === 'undefined') {
      delete childProps[propName];
    }
  });
  return /*#__PURE__*/React.cloneElement(child, childProps);
};
function useItems(items, rawChildren, props) {
  if (Array.isArray(items)) {
    return convertItemsToNodes(items, props);
  }
  return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
}
export default useItems;