mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor(collapse): rewrite with hook (#24477)

Browse Source
This commit is contained in:
Tom Xu 2020-05-26 20:55:39 +08:00 committed by GitHub
parent 1bf9959062
commit 5290421ac9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
components/collapse/Collapse.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import RightOutlined from '@ant-design/icons/RightOutlined'; import RightOutlined from '@ant-design/icons/RightOutlined';
import CollapsePanel from './CollapsePanel'; import CollapsePanel from './CollapsePanel';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
import animation from '../_util/openAnimation'; import animation from '../_util/openAnimation';
import { cloneElement } from '../_util/reactNode'; import { cloneElement } from '../_util/reactNode';
@ -36,23 +36,25 @@ interface PanelProps {
extra?: React.ReactNode; extra?: React.ReactNode;
} }
export default class Collapse extends React.Component<CollapseProps, any> { interface CollapseInterface extends React.FC<CollapseProps> {
static Panel = CollapsePanel; Panel: typeof CollapsePanel;
}
static defaultProps = { const Collapse: CollapseInterface = props => {
bordered: true, const { getPrefixCls, direction } = React.useContext(ConfigContext);
}; const { prefixCls: customizePrefixCls, className = '', bordered } = props;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
getIconPosition(direction: string = 'ltr') { const getIconPosition = () => {
const { expandIconPosition } = this.props; const { expandIconPosition } = props;
if (expandIconPosition !== undefined) { if (expandIconPosition !== undefined) {
return expandIconPosition; return expandIconPosition;
} }
return direction === 'rtl' ? 'right' : 'left'; return direction === 'rtl' ? 'right' : 'left';
} };
renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { const renderExpandIcon = (panelProps: PanelProps = {}) => {
const { expandIcon } = this.props; const { expandIcon } = props;
const icon = (expandIcon ? ( const icon = (expandIcon ? (
expandIcon(panelProps) expandIcon(panelProps)
) : ( ) : (
@ -64,32 +66,32 @@ export default class Collapse extends React.Component<CollapseProps, any> {
})); }));
}; };
renderCollapse = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const iconPosition = getIconPosition();
const { prefixCls: customizePrefixCls, className = '', bordered } = this.props; const collapseClassName = classNames(
const prefixCls = getPrefixCls('collapse', customizePrefixCls); {
const iconPosition = this.getIconPosition(direction); [`${prefixCls}-borderless`]: !bordered,
const collapseClassName = classNames( [`${prefixCls}-icon-position-${iconPosition}`]: true,
{ [`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered, },
[`${prefixCls}-icon-position-${iconPosition}`]: true, className,
[`${prefixCls}-rtl`]: direction === 'rtl', );
}, const openAnimation = { ...animation, appear() {} };
className,
);
const openAnimation = { ...animation, appear() {} };
return ( return (
<RcCollapse <RcCollapse
openAnimation={openAnimation} openAnimation={openAnimation}
{...this.props} {...props}
expandIcon={(panelProps: PanelProps) => this.renderExpandIcon(panelProps, prefixCls)} expandIcon={(panelProps: PanelProps) => renderExpandIcon(panelProps)}
prefixCls={prefixCls} prefixCls={prefixCls}
className={collapseClassName} className={collapseClassName}
/> />
); );
}; };
render() { Collapse.Panel = CollapsePanel;
return <ConfigConsumer>{this.renderCollapse}</ConfigConsumer>;
} Collapse.defaultProps = {
} bordered: true,
};
export default Collapse;

33
components/collapse/CollapsePanel.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import RcCollapse from 'rc-collapse'; import RcCollapse from 'rc-collapse';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
export interface CollapsePanelProps { export interface CollapsePanelProps {
key: string | number; key: string | number;
@ -16,22 +16,17 @@ export interface CollapsePanelProps {
extra?: React.ReactNode; extra?: React.ReactNode;
} }
export default class CollapsePanel extends React.Component<CollapsePanelProps, {}> { const CollapsePanel: React.FC<CollapsePanelProps> = props => {
renderCollapsePanel = ({ getPrefixCls }: ConfigConsumerProps) => { const { getPrefixCls } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className = '', showArrow = true } = this.props; const { prefixCls: customizePrefixCls, className = '', showArrow = true } = props;
const prefixCls = getPrefixCls('collapse', customizePrefixCls); const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const collapsePanelClassName = classNames( const collapsePanelClassName = classNames(
{ {
[`${prefixCls}-no-arrow`]: !showArrow, [`${prefixCls}-no-arrow`]: !showArrow,
}, },
className, className,
); );
return ( return <RcCollapse.Panel {...props} prefixCls={prefixCls} className={collapsePanelClassName} />;
<RcCollapse.Panel {...this.props} prefixCls={prefixCls} className={collapsePanelClassName} /> };
);
};
render() { export default CollapsePanel;
return <ConfigConsumer>{this.renderCollapsePanel}</ConfigConsumer>;
}
}