chowa
Version:
UI component library based on React
104 lines (103 loc) • 4.57 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const icon_1 = require("../icon");
const transition_1 = require("../transition");
class CollapsePanel extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
selfActive: props.active
};
this.collpaseHandler = this.collpaseHandler.bind(this);
}
componentDidMount() {
this.parentAccordionUpdate();
}
componentDidUpdate(preProps) {
if (this.props.active !== preProps.active && this.props.active !== this.state.selfActive) {
this.setState({ selfActive: this.props.active });
}
}
collpaseHandler() {
this.setState({
selfActive: !this.state.selfActive
}, () => {
this.parentAccordionUpdate();
});
}
parentAccordionUpdate() {
const { index, accordionUpdate } = this.props;
if (this.state.selfActive && accordionUpdate) {
const cb = () => {
this.setState({
selfActive: false
});
};
accordionUpdate(index, cb);
}
}
render() {
const { children, style, className, title, showArrow, arrowPosition, extra, bordered, disabled } = this.props;
const { selfActive } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('collapse-panel')]: true,
[utils_1.preClass('collapse-panel-bordered')]: bordered,
[utils_1.preClass('collapse-panel-disabled')]: disabled,
[utils_1.preClass('collapse-panel-active')]: selfActive,
[className]: utils_1.isExist(className)
});
const arrowClass = classnames_1.default({
[utils_1.preClass('collapse-panel-arrow')]: true,
[utils_1.preClass('collapse-panel-arrow-active')]: selfActive
});
return (React.createElement("div", { className: componentClass, style: style },
(utils_1.isExist(title) || utils_1.isExist(extra)) &&
React.createElement("div", { className: utils_1.preClass('collapse-panel-header'), onClick: disabled ? null : this.collpaseHandler },
React.createElement("div", { className: utils_1.preClass('collapse-panel-header-left') },
showArrow && arrowPosition === 'left' &&
React.createElement("span", { className: arrowClass },
React.createElement(icon_1.default, { type: 'arrow-right' })),
React.createElement("div", { className: utils_1.preClass('collapse-panel-title') }, title)),
React.createElement("div", { className: utils_1.preClass('collapse-panel-header-right') },
utils_1.isExist(extra) &&
React.createElement("div", { className: utils_1.preClass('collapse-panel-extra') }, extra),
showArrow && arrowPosition === 'right' &&
React.createElement("span", { className: arrowClass },
React.createElement(icon_1.default, { type: 'arrow-right' })))),
React.createElement(transition_1.default, { appear: utils_1.preClass('slide-down-appear'), leave: utils_1.preClass('slide-down-leave'), enter: utils_1.preClass('slide-down-enter'), visible: selfActive },
React.createElement("div", { className: utils_1.preClass('collapse-panel-body') }, children))));
}
}
CollapsePanel.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
title: PropTypes.node,
bordered: PropTypes.bool,
index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
showArrow: PropTypes.bool,
extra: PropTypes.node,
arrowPosition: PropTypes.oneOf(['left', 'right']),
active: PropTypes.bool,
disabled: PropTypes.bool,
accordionUpdate: PropTypes.func
};
CollapsePanel.defaultProps = {
bordered: false,
showArrow: true,
arrowPosition: 'right',
active: true,
disabled: false
};
exports.default = CollapsePanel;