zarm/lib/collapse/Collapse.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _bem = require("@zarm-design/bem");

var _includes = _interopRequireDefault(require("lodash/includes"));

var _react = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

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.default.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 = (0, _objectWithoutProperties2.default)(props, ["className", "onChange", "animated", "activeKey", "defaultActiveKey", "children", "multiple"]);
  var hasActiveKeys = ('activeKey' in props);

  var collapseRef = ref || /*#__PURE__*/_react.default.createRef();

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

  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _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 ((0, _includes.default)(tempActiveKey, key)) {
        newActiveKey = tempActiveKey.filter(function (i) {
          return i !== key;
        });
      } else {
        newActiveKey = [].concat((0, _toConsumableArray2.default)(tempActiveKey), [key]);
      }

      isActive = (0, _includes.default)(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 _react.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 ? (0, _includes.default)(activeKeyState || [], key) : activeKeyState === key;
      return /*#__PURE__*/(0, _react.cloneElement)(ele, {
        animated: animated,
        isActive: isActive,
        onChange: function onChange() {
          return !disabled && onItemChange(itemOnChange, key);
        }
      });
    });
  };

  var cls = bem([{
    animated: animated
  }, className]);

  _react.default.useEffect(function () {
    setActiveKey(getActiveKey({
      multiple: multiple,
      activeKey: activeKey,
      defaultActiveKey: defaultActiveKey,
      hasActiveKeys: hasActiveKeys
    }));
  }, [multiple, activeKey, defaultActiveKey, hasActiveKeys]);

  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: cls
  }, rest, {
    ref: collapseRef
  }), renderItems());
});

Collapse.displayName = 'Collapse';
Collapse.defaultProps = {
  multiple: false,
  animated: false
};
var _default = Collapse;
exports.default = _default;