zarm/es/collapse/Collapse.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import { createBEM } from '@zarm-design/bem';
import includes from 'lodash/includes';
import React, { Children, cloneElement, useState } from 'react';
import { ConfigContext } from '../config-provider';

var getActiveKey = function getActiveKey(props) {
  var multiple = props.multiple,
      activeKey = props.activeKey,
      defaultActiveKey = props.defaultActiveKey,
      hasActiveKeys = props.hasActiveKeys;
  var value;

  if (typeof activeKey !== 'undefined') {
    value = activeKey;
  }

  if (!hasActiveKeys && typeof defaultActiveKey !== 'undefined') {
    value = defaultActiveKey;
  }

  if (value) {
    return multiple ? [].concat(value) : value;
  }

  return multiple ? [] : undefined;
};

var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var className = props.className,
      onChange = props.onChange,
      animated = props.animated,
      activeKey = props.activeKey,
      defaultActiveKey = props.defaultActiveKey,
      children = props.children,
      multiple = props.multiple,
      rest = _objectWithoutProperties(props, ["className", "onChange", "animated", "activeKey", "defaultActiveKey", "children", "multiple"]);

  var hasActiveKeys = ('activeKey' in props);
  var collapseRef = ref || /*#__PURE__*/React.createRef();

  var _useState = useState(getActiveKey({
    multiple: multiple,
    activeKey: activeKey,
    defaultActiveKey: defaultActiveKey,
    hasActiveKeys: hasActiveKeys
  })),
      _useState2 = _slicedToArray(_useState, 2),
      activeKeyState = _useState2[0],
      setActiveKey = _useState2[1];

  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('collapse', {
    prefixCls: prefixCls
  });

  var onItemChange = function onItemChange(onItemChangeProps, key) {
    if (!key) {
      return;
    }

    var isActive;
    var newActiveKey;
    var tempActiveKey = activeKeyState;

    if (multiple) {
      newActiveKey = [];
      tempActiveKey = tempActiveKey || [];

      if (includes(tempActiveKey, key)) {
        newActiveKey = tempActiveKey.filter(function (i) {
          return i !== key;
        });
      } else {
        newActiveKey = [].concat(_toConsumableArray(tempActiveKey), [key]);
      }

      isActive = includes(newActiveKey, key);
    } else {
      tempActiveKey = tempActiveKey;
      newActiveKey = tempActiveKey === key ? undefined : key;
      isActive = tempActiveKey === key;
    }

    if (!('activeKey' in props)) {
      setActiveKey(newActiveKey);
    }

    typeof onItemChangeProps === 'function' && onItemChangeProps(isActive);
    typeof onChange === 'function' && onChange(newActiveKey);
  };

  var renderItems = function renderItems() {
    return Children.map(children, function (ele) {
      var _ele$props = ele.props,
          disabled = _ele$props.disabled,
          itemOnChange = _ele$props.onChange;
      var key = ele.key;
      var isActive = multiple ? includes(activeKeyState || [], key) : activeKeyState === key;
      return /*#__PURE__*/cloneElement(ele, {
        animated: animated,
        isActive: isActive,
        onChange: function onChange() {
          return !disabled && onItemChange(itemOnChange, key);
        }
      });
    });
  };

  var cls = bem([{
    animated: animated
  }, className]);
  React.useEffect(function () {
    setActiveKey(getActiveKey({
      multiple: multiple,
      activeKey: activeKey,
      defaultActiveKey: defaultActiveKey,
      hasActiveKeys: hasActiveKeys
    }));
  }, [multiple, activeKey, defaultActiveKey, hasActiveKeys]);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cls
  }, rest, {
    ref: collapseRef
  }), renderItems());
});
Collapse.displayName = 'Collapse';
Collapse.defaultProps = {
  multiple: false,
  animated: false
};
export default Collapse;