zent/es/collapse/Collapse.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Children, cloneElement, Component } from 'react';
import cx from 'classnames';
import kindOf from '../utils/kindOf';
import Panel from './Panel';
import { isElement } from 'react-is';
var Collapse = (function (_super) {
    __extends(Collapse, _super);
    function Collapse() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onChange = function (key, active) {
            if (_this.props.accordion) {
                var _a = _this.props, onChange = _a.onChange, activeKey = _a.activeKey;
                if (activeKey !== key && active) {
                    onChange(key);
                }
                else if (activeKey === key && !active) {
                    onChange(null);
                }
            }
            else {
                var _b = _this.props, activeKey = _b.activeKey, onChange = _b.onChange;
                var activeKeyArray = [].concat(activeKey !== null && activeKey !== void 0 ? activeKey : []);
                var keyIndex = activeKeyArray.indexOf(key);
                if (active) {
                    keyIndex === -1 && activeKeyArray.push(key);
                }
                else {
                    keyIndex !== -1 && activeKeyArray.splice(keyIndex, 1);
                }
                onChange(activeKeyArray);
            }
        };
        return _this;
    }
    Collapse.prototype.render = function () {
        var _this = this;
        var _a = this.props, className = _a.className, bordered = _a.bordered, panelTitleBackground = _a.panelTitleBackground, showContentBackground = _a.showContentBackground, children = _a.children, activeKey = _a.activeKey;
        return (_jsx("div", __assign({ className: cx('zent-collapse', className, {
                'zent-collapse--has-border': bordered,
                'zent-collapse--no-border': !bordered,
            }), "data-zv": '10.0.17' }, { children: Children.map(children, function (c, idx) {
                var _a;
                if (!isElement(c) || !kindOf(c.type, Panel)) {
                    throw new Error("Invalid children supplied to Collapse. Each child should be a Panel.");
                }
                var key = (_a = c.key) === null || _a === void 0 ? void 0 : _a.toString();
                return cloneElement(c, {
                    onChange: _this.onChange,
                    active: isPanelActive(activeKey, key),
                    panelKey: key,
                    panelTitleBackground: panelTitleBackground,
                    showContentBackground: showContentBackground,
                    isLast: idx === Children.count(children) - 1,
                    bordered: bordered,
                });
            }) }), void 0));
    };
    Collapse.defaultProps = {
        bordered: true,
        panelTitleBackground: 'default',
        accordion: false,
    };
    Collapse.Panel = Panel;
    return Collapse;
}(Component));
export { Collapse };
function isPanelActive(activeKey, key) {
    if (typeof activeKey === 'string') {
        return activeKey === key;
    }
    if (Array.isArray(activeKey)) {
        return key !== undefined && activeKey.indexOf(key) !== -1;
    }
    return false;
}
export default Collapse;