zent
Version:
一套前端设计语言和基于React的实现
60 lines (59 loc) • 4.24 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import { AnimateHeight } from '../utils/component/AnimateHeight';
import LazyMount from '../utils/component/LazyMount';
import { EASE_IN_CUBIC, EASE_IN_OUT, EASE_OUT_CUBIC, } from '../utils/timingFunctions';
import { DisabledContext } from '../disabled';
import isNil from '../utils/isNil';
import Icon from '../icon/Icon';
var NO_BOTTOM_BORDER = {
borderBottomWidth: 0,
borderBottomColor: 'rgba(255, 255, 255, 0)',
transition: "border-bottom-width 200ms " + EASE_IN_OUT + ", border-bottom-color 200ms " + EASE_IN_OUT,
};
var NO_STYLE = {};
var CollapsePanel = (function (_super) {
__extends(CollapsePanel, _super);
function CollapsePanel() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
animateAppear: !_this.props.active,
};
_this.toggle = function () {
var _a = _this.props, onChange = _a.onChange, panelKey = _a.panelKey, active = _a.active, _b = _a.disabled, disabled = _b === void 0 ? _this.context.value : _b;
if (!disabled && !isNil(panelKey)) {
onChange === null || onChange === void 0 ? void 0 : onChange(panelKey, !active);
}
};
return _this;
}
CollapsePanel.prototype.render = function () {
var _a = this.props, children = _a.children, title = _a.title, style = _a.style, active = _a.active, _b = _a.disabled, disabled = _b === void 0 ? this.context.value : _b, showArrow = _a.showArrow, className = _a.className, isLast = _a.isLast, bordered = _a.bordered, extra = _a.extra, panelTitleBackground = _a.panelTitleBackground, showContentBackground = _a.showContentBackground;
var animateAppear = this.state.animateAppear;
var isBorderedLast = bordered && isLast;
var titleStyle = isBorderedLast && !active ? NO_BOTTOM_BORDER : NO_STYLE;
var contentBoxStyle = isBorderedLast || !active ? NO_BOTTOM_BORDER : NO_STYLE;
return (_jsxs("div", __assign({ className: cx('zent-collapse-panel', className, {
'zent-collapse-panel--has-arrow': showArrow,
'zent-collapse-panel--active': active,
'zent-collapse-panel--inactive': !active,
'zent-collapse-panel--disabled': disabled,
}), style: style, "data-zv": '10.0.17' }, { children: [_jsxs("div", __assign({ className: cx('zent-collapse-panel__title', {
'zent-collapse-panel__title--bg-none': panelTitleBackground === 'none',
'zent-collapse-panel__title--bg-default': panelTitleBackground === 'default',
}), style: titleStyle, onClick: this.toggle, "data-zv": '10.0.17' }, { children: [_jsxs("div", __assign({ className: "zent-collapse-panel__title__content", "data-zv": '10.0.17' }, { children: [showArrow && (_jsx(Icon, { type: "down", className: "zent-collapse-panel__arrow" }, void 0)), title] }), void 0), _jsx("div", __assign({ className: "zent-collapse-panel__title__extra", "data-zv": '10.0.17' }, { children: extra }), void 0)] }), void 0), _jsx(LazyMount, __assign({ mount: active }, { children: _jsx(AnimateHeight, __assign({ appear: animateAppear, duration: 160, height: active ? 'auto' : 0, transitionPrototype: "all", easing: active ? EASE_OUT_CUBIC : EASE_IN_CUBIC, className: cx('zent-collapse-panel__content-box', {
'zent-collapse-panel__content-box--inactive': !active,
'zent-collapse-panel__content-box--active': active,
'zent-collapse-panel__content_box--show-background': showContentBackground,
}), style: contentBoxStyle }, { children: _jsx("div", __assign({ className: "zent-collapse-panel__content", "data-zv": '10.0.17' }, { children: children }), void 0) }), void 0) }), void 0)] }), void 0));
};
CollapsePanel.defaultProps = {
showArrow: true,
};
CollapsePanel.contextType = DisabledContext;
return CollapsePanel;
}(Component));
export { CollapsePanel };
export default CollapsePanel;