import * as React from 'react'; import RcCollapse from 'rc-collapse'; import classNames from 'classnames'; import CollapsePanel from './CollapsePanel'; import Icon from '../icon'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import animation from '../_util/openAnimation'; export type ExpandIconPosition = 'left' | 'right'; export interface CollapseProps { activeKey?: Array | string; defaultActiveKey?: Array; /** 手风琴效果 */ accordion?: boolean; destroyInactivePanel?: boolean; onChange?: (key: string | string[]) => void; style?: React.CSSProperties; className?: string; bordered?: boolean; prefixCls?: string; expandIcon?: (panelProps: PanelProps) => React.ReactNode; expandIconPosition?: ExpandIconPosition; } interface PanelProps { isActive?: boolean; header?: React.ReactNode; className?: string; style?: React.CSSProperties; showArrow?: boolean; forceRender?: boolean; disabled?: boolean; extra?: React.ReactNode; } export default class Collapse extends React.Component { static Panel = CollapsePanel; static defaultProps = { bordered: true, openAnimation: { ...animation, appear() {} }, expandIconPosition: 'left', }; renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { const { expandIcon } = this.props; const icon = expandIcon ? ( expandIcon(panelProps) ) : ( ); return React.isValidElement(icon) ? React.cloneElement(icon as any, { className: `${prefixCls}-arrow`, }) : icon; }; renderCollapse = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', bordered, expandIconPosition, } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-icon-position-${expandIconPosition}`]: true, }, className, ); return ( this.renderExpandIcon(panelProps, prefixCls)} prefixCls={prefixCls} className={collapseClassName} /> ); }; render() { return {this.renderCollapse}; } }