You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
205 lines
6.5 KiB
205 lines
6.5 KiB
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
|
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
|
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
|
|
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
|
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _shallowequal = _interopRequireDefault(require("shallowequal"));
|
|
|
|
var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
|
|
|
|
var _Panel = _interopRequireDefault(require("./Panel"));
|
|
|
|
/* eslint-disable react/prop-types */
|
|
function getActiveKeysArray(activeKey) {
|
|
var currentActiveKey = activeKey;
|
|
|
|
if (!Array.isArray(currentActiveKey)) {
|
|
var activeKeyType = (0, _typeof2.default)(currentActiveKey);
|
|
currentActiveKey = activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
|
|
}
|
|
|
|
return currentActiveKey.map(function (key) {
|
|
return String(key);
|
|
});
|
|
}
|
|
|
|
var Collapse = /*#__PURE__*/function (_React$Component) {
|
|
(0, _inherits2.default)(Collapse, _React$Component);
|
|
|
|
var _super = (0, _createSuper2.default)(Collapse);
|
|
|
|
function Collapse(_props) {
|
|
var _this;
|
|
|
|
(0, _classCallCheck2.default)(this, Collapse);
|
|
_this = _super.call(this, _props);
|
|
|
|
_this.onClickItem = function (key) {
|
|
var activeKey = _this.state.activeKey;
|
|
|
|
if (_this.props.accordion) {
|
|
activeKey = activeKey[0] === key ? [] : [key];
|
|
} else {
|
|
activeKey = (0, _toConsumableArray2.default)(activeKey);
|
|
var index = activeKey.indexOf(key);
|
|
var isActive = index > -1;
|
|
|
|
if (isActive) {
|
|
// remove active state
|
|
activeKey.splice(index, 1);
|
|
} else {
|
|
activeKey.push(key);
|
|
}
|
|
}
|
|
|
|
_this.setActiveKey(activeKey);
|
|
};
|
|
|
|
_this.getNewChild = function (child, index) {
|
|
if (!child) return null;
|
|
var activeKey = _this.state.activeKey;
|
|
var _this$props = _this.props,
|
|
prefixCls = _this$props.prefixCls,
|
|
openMotion = _this$props.openMotion,
|
|
accordion = _this$props.accordion,
|
|
rootDestroyInactivePanel = _this$props.destroyInactivePanel,
|
|
expandIcon = _this$props.expandIcon,
|
|
collapsible = _this$props.collapsible; // If there is no key provide, use the panel order as default key
|
|
|
|
var key = child.key || String(index);
|
|
var _child$props = child.props,
|
|
header = _child$props.header,
|
|
headerClass = _child$props.headerClass,
|
|
destroyInactivePanel = _child$props.destroyInactivePanel,
|
|
childCollapsible = _child$props.collapsible;
|
|
var isActive = false;
|
|
|
|
if (accordion) {
|
|
isActive = activeKey[0] === key;
|
|
} else {
|
|
isActive = activeKey.indexOf(key) > -1;
|
|
}
|
|
|
|
var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
|
|
var props = {
|
|
key: key,
|
|
panelKey: key,
|
|
header: header,
|
|
headerClass: headerClass,
|
|
isActive: isActive,
|
|
prefixCls: prefixCls,
|
|
destroyInactivePanel: destroyInactivePanel !== null && destroyInactivePanel !== void 0 ? destroyInactivePanel : rootDestroyInactivePanel,
|
|
openMotion: openMotion,
|
|
accordion: accordion,
|
|
children: child.props.children,
|
|
onItemClick: mergeCollapsible === 'disabled' ? null : _this.onClickItem,
|
|
expandIcon: expandIcon,
|
|
collapsible: mergeCollapsible
|
|
}; // https://github.com/ant-design/ant-design/issues/20479
|
|
|
|
if (typeof child.type === 'string') {
|
|
return child;
|
|
}
|
|
|
|
return /*#__PURE__*/React.cloneElement(child, props);
|
|
};
|
|
|
|
_this.getItems = function () {
|
|
var children = _this.props.children;
|
|
return (0, _toArray.default)(children).map(_this.getNewChild);
|
|
};
|
|
|
|
_this.setActiveKey = function (activeKey) {
|
|
if (!('activeKey' in _this.props)) {
|
|
_this.setState({
|
|
activeKey: activeKey
|
|
});
|
|
}
|
|
|
|
_this.props.onChange(_this.props.accordion ? activeKey[0] : activeKey);
|
|
};
|
|
|
|
var _activeKey = _props.activeKey,
|
|
defaultActiveKey = _props.defaultActiveKey;
|
|
var currentActiveKey = defaultActiveKey;
|
|
|
|
if ('activeKey' in _props) {
|
|
currentActiveKey = _activeKey;
|
|
}
|
|
|
|
_this.state = {
|
|
activeKey: getActiveKeysArray(currentActiveKey)
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass2.default)(Collapse, [{
|
|
key: "shouldComponentUpdate",
|
|
value: function shouldComponentUpdate(nextProps, nextState) {
|
|
return !(0, _shallowequal.default)(this.props, nextProps) || !(0, _shallowequal.default)(this.state, nextState);
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _classNames;
|
|
|
|
var _this$props2 = this.props,
|
|
prefixCls = _this$props2.prefixCls,
|
|
className = _this$props2.className,
|
|
style = _this$props2.style,
|
|
accordion = _this$props2.accordion;
|
|
var collapseClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, true), (0, _defineProperty2.default)(_classNames, className, !!className), _classNames));
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: collapseClassName,
|
|
style: style,
|
|
role: accordion ? 'tablist' : null
|
|
}, this.getItems());
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps) {
|
|
var newState = {};
|
|
|
|
if ('activeKey' in nextProps) {
|
|
newState.activeKey = getActiveKeysArray(nextProps.activeKey);
|
|
}
|
|
|
|
return newState;
|
|
}
|
|
}]);
|
|
return Collapse;
|
|
}(React.Component);
|
|
|
|
Collapse.defaultProps = {
|
|
prefixCls: 'rc-collapse',
|
|
onChange: function onChange() {},
|
|
accordion: false,
|
|
destroyInactivePanel: false
|
|
};
|
|
Collapse.Panel = _Panel.default;
|
|
var _default = Collapse;
|
|
exports.default = _default; |