2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2017-06-21 15:39:08 +08:00
|
|
|
import RcCollapse from 'rc-collapse';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import animation from '../_util/openAnimation';
|
2017-12-13 23:23:38 +08:00
|
|
|
import CollapsePanel from './CollapsePanel';
|
2018-08-21 20:03:48 +08:00
|
|
|
import Icon from '../icon';
|
2017-06-21 15:39:08 +08:00
|
|
|
|
|
|
|
export interface CollapseProps {
|
|
|
|
activeKey?: Array<string> | string;
|
|
|
|
defaultActiveKey?: Array<string>;
|
|
|
|
/** 手风琴效果 */
|
|
|
|
accordion?: boolean;
|
2018-08-07 16:40:22 +08:00
|
|
|
destroyInactivePanel?: boolean;
|
2017-12-13 23:23:38 +08:00
|
|
|
onChange?: (key: string | string[]) => void;
|
2017-06-21 15:39:08 +08:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
className?: string;
|
|
|
|
bordered?: boolean;
|
|
|
|
prefixCls?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default class Collapse extends React.Component<CollapseProps, any> {
|
2017-12-13 23:23:38 +08:00
|
|
|
static Panel = CollapsePanel;
|
2017-06-21 15:39:08 +08:00
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-collapse',
|
|
|
|
bordered: true,
|
2017-12-13 23:23:38 +08:00
|
|
|
openAnimation: { ...animation, appear() { } },
|
2017-06-21 15:39:08 +08:00
|
|
|
};
|
|
|
|
|
2018-08-21 20:03:48 +08:00
|
|
|
renderExpandIcon = () => {
|
|
|
|
return (
|
2018-09-01 19:51:46 +08:00
|
|
|
<Icon type="right" className={`arrow`} />
|
2018-08-21 20:03:48 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-06-21 15:39:08 +08:00
|
|
|
render() {
|
|
|
|
const { prefixCls, className = '', bordered } = this.props;
|
|
|
|
const collapseClassName = classNames({
|
|
|
|
[`${prefixCls}-borderless`]: !bordered,
|
|
|
|
}, className);
|
2018-08-21 20:03:48 +08:00
|
|
|
return (
|
|
|
|
<RcCollapse
|
|
|
|
{...this.props}
|
|
|
|
className={collapseClassName}
|
|
|
|
expandIcon={this.renderExpandIcon}
|
|
|
|
/>
|
|
|
|
);
|
2017-06-21 15:39:08 +08:00
|
|
|
}
|
|
|
|
}
|