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

33
components/collapse/CollapsePanel.tsx
View File

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