gui-one-nutui-react-taro/dist/esm/collapse.taro-13cde270.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { memo, useState, useEffect } from 'react';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  activeName: ['0'],
  accordion: false,
  icon: '',
  iconSize: '16px',
  iconColor: '',
  rotate: 180
};
function areEqual(prevProps, nextProps) {
  return JSON.stringify(prevProps.activeName) === JSON.stringify(nextProps.activeName);
}
var Collapse = memo(function (props) {
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    className = _defaultProps$props.className,
    style = _defaultProps$props.style,
    children = _defaultProps$props.children,
    activeName = _defaultProps$props.activeName,
    accordion = _defaultProps$props.accordion,
    icon = _defaultProps$props.icon,
    rotate = _defaultProps$props.rotate,
    iconSize = _defaultProps$props.iconSize,
    iconColor = _defaultProps$props.iconColor,
    onChange = _defaultProps$props.onChange;
  var childrenDom = React__default.Children.toArray(children);
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    defaultOpenIndex = _useState2[0],
    setDefaultOpenIndex = _useState2[1];
  var handleActiveName = function handleActiveName() {
    var activeArr = [];
    if (!Array.isArray(activeName)) {
      activeArr.push(activeName.toString());
    } else {
      // 数组
      if (accordion && activeName.length > 1) {
        console.warn('手风琴模式不支持传递多个打开页签');
      }
      var activeNameStr = activeName.map(function (item) {
        return item.toString();
      });
      activeArr = _toConsumableArray(activeNameStr);
    }
    return activeArr;
  };
  var colBem = cn('collapse');
  useEffect(function () {
    var activeArr = handleActiveName();
    setDefaultOpenIndex(activeArr);
  }, [activeName]);
  var _onToggle = function onToggle(isOpen, name) {
    var newOpenIndex = _toConsumableArray(defaultOpenIndex);
    if (isOpen) {
      // 当前状态为true，则变为false,闭合
      var removeIndex = newOpenIndex.findIndex(function (value) {
        return value === name;
      });
      newOpenIndex.splice(removeIndex, 1);
    } else {
      // 当前状态为false，变为true，展开
      // eslint-disable-next-line no-lonely-if
      if (accordion) {
        newOpenIndex = [name];
      } else {
        newOpenIndex.push(name);
      }
    }
    setDefaultOpenIndex(newOpenIndex);
    onChange && onChange(!isOpen, name);
  };
  return React__default.createElement("div", {
    className: "".concat(colBem(), " ").concat(className),
    style: style
  }, childrenDom.map(function (item) {
    return React__default.cloneElement(item, {
      isOpen: defaultOpenIndex.includes(item.props.name),
      onToggle: function onToggle(isOpen, name) {
        return _onToggle(isOpen, name);
      },
      icon: icon,
      rotate: rotate,
      iconSize: iconSize,
      iconColor: iconColor
    });
  }));
}, areEqual);
Collapse.defaultProps = defaultProps;
Collapse.displayName = 'NutCollapse';
export { Collapse as C };