From 2aa293995d50fb22a9dcff14b12aaa9bd8cc459e Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 17:22:35 +0800 Subject: [PATCH 1/7] fix: collapse default position in rtl --- components/collapse/Collapse.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 0fe9c532218a..605d611a9f9e 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -40,7 +40,6 @@ export default class Collapse extends React.Component { static defaultProps = { bordered: true, - expandIconPosition: 'left' as CollapseProps['expandIconPosition'], }; renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { @@ -66,10 +65,16 @@ export default class Collapse extends React.Component { expandIconPosition, } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); + let iconPosition; + if (expandIconPosition !== undefined) { + iconPosition = expandIconPosition; + } else { + iconPosition = direction === 'rtl' ? 'right' : 'left'; + } const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, - [`${prefixCls}-icon-position-${expandIconPosition}`]: true, + [`${prefixCls}-icon-position-${iconPosition}`]: true, [`${prefixCls}-rtl`]: direction === 'rtl', }, className, From d2056515106888514470fd064c0c177eaf62a9d4 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 17:34:37 +0800 Subject: [PATCH 2/7] update snap --- components/collapse/__tests__/__snapshots__/index.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/collapse/__tests__/__snapshots__/index.test.js.snap b/components/collapse/__tests__/__snapshots__/index.test.js.snap index a99a2e8047a5..f530d2a4efdc 100644 --- a/components/collapse/__tests__/__snapshots__/index.test.js.snap +++ b/components/collapse/__tests__/__snapshots__/index.test.js.snap @@ -51,7 +51,7 @@ exports[`Collapse could override default openAnimation 1`] = ` exports[`Collapse rtl render component should be rendered correctly in RTL direction 1`] = `
`; From 8cbf6863d798d280bb313b447a4c1c3e18f30642 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 20:28:39 +0800 Subject: [PATCH 3/7] up --- components/collapse/Collapse.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 605d611a9f9e..909b3631c496 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -7,7 +7,7 @@ import CollapsePanel from './CollapsePanel'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import animation from '../_util/openAnimation'; -export type ExpandIconPosition = 'left' | 'right'; +export type ExpandIconPosition = 'left' | 'right' | undefined; export interface CollapseProps { activeKey?: Array | string | number; @@ -42,6 +42,13 @@ export default class Collapse extends React.Component { bordered: true, }; + getIconPosition(isRTL: boolean, expandIconPosition: ExpandIconPosition) { + if (expandIconPosition !== undefined) { + return expandIconPosition; + } + return isRTL ? 'right' : 'left'; + } + renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { const { expandIcon } = this.props; const icon = (expandIcon ? ( @@ -65,16 +72,13 @@ export default class Collapse extends React.Component { expandIconPosition, } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); - let iconPosition; - if (expandIconPosition !== undefined) { - iconPosition = expandIconPosition; - } else { - iconPosition = direction === 'rtl' ? 'right' : 'left'; - } const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, - [`${prefixCls}-icon-position-${iconPosition}`]: true, + [`${prefixCls}-icon-position-${this.getIconPosition( + direction === 'rtl', + expandIconPosition, + )}`]: true, [`${prefixCls}-rtl`]: direction === 'rtl', }, className, From 832bdeab9866de508dfb28d0afe0f034db22299d Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 20:50:00 +0800 Subject: [PATCH 4/7] fix --- components/collapse/Collapse.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 909b3631c496..77a167a14493 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -72,13 +72,11 @@ export default class Collapse extends React.Component { expandIconPosition, } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); + const iconPosition = this.getIconPosition(direction === 'rtl', expandIconPosition); const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, - [`${prefixCls}-icon-position-${this.getIconPosition( - direction === 'rtl', - expandIconPosition, - )}`]: true, + [`${prefixCls}-icon-position-${iconPosition}`]: true, [`${prefixCls}-rtl`]: direction === 'rtl', }, className, From 0d9098832c6279c8c7fbc3039fe282efc55fbe51 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 20:52:46 +0800 Subject: [PATCH 5/7] fix --- components/collapse/Collapse.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 77a167a14493..88d0f8323354 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -72,7 +72,8 @@ export default class Collapse extends React.Component { expandIconPosition, } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); - const iconPosition = this.getIconPosition(direction === 'rtl', expandIconPosition); + const isRTL = direction === 'rtl'; + const iconPosition = this.getIconPosition(isRTL, expandIconPosition); const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, From 271e995fba3a16dda31b18e20d049ffc01427671 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 21:06:01 +0800 Subject: [PATCH 6/7] fix var --- components/collapse/Collapse.tsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 88d0f8323354..7d943c961938 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -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, ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import animation from '../_util/openAnimation'; export type ExpandIconPosition = 'left' | 'right' | undefined; @@ -42,12 +42,14 @@ export default class Collapse extends React.Component { bordered: true, }; - getIconPosition(isRTL: boolean, expandIconPosition: ExpandIconPosition) { + getIconPosition = () => { + const { expandIconPosition } = this.props; + const { direction } = React.useContext(ConfigContext); if (expandIconPosition !== undefined) { return expandIconPosition; } - return isRTL ? 'right' : 'left'; - } + return direction === 'rtl' ? 'right' : 'left'; + }; renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { const { expandIcon } = this.props; @@ -65,15 +67,9 @@ export default class Collapse extends React.Component { }; renderCollapse = ({ getPrefixCls, direction }: ConfigConsumerProps) => { - const { - prefixCls: customizePrefixCls, - className = '', - bordered, - expandIconPosition, - } = this.props; + const { prefixCls: customizePrefixCls, className = '', bordered } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); - const isRTL = direction === 'rtl'; - const iconPosition = this.getIconPosition(isRTL, expandIconPosition); + const iconPosition = this.getIconPosition(); const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered, From 2bf199dfceabc3f525531d76544758cb030ff02e Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Tue, 21 Apr 2020 21:14:53 +0800 Subject: [PATCH 7/7] fix --- components/collapse/Collapse.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 7d943c961938..7317c77aeaa3 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import RightOutlined from '@ant-design/icons/RightOutlined'; import CollapsePanel from './CollapsePanel'; -import { ConfigContext, ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import animation from '../_util/openAnimation'; export type ExpandIconPosition = 'left' | 'right' | undefined; @@ -42,14 +42,13 @@ export default class Collapse extends React.Component { bordered: true, }; - getIconPosition = () => { + getIconPosition(direction: string = 'ltr') { const { expandIconPosition } = this.props; - const { direction } = React.useContext(ConfigContext); if (expandIconPosition !== undefined) { return expandIconPosition; } return direction === 'rtl' ? 'right' : 'left'; - }; + } renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => { const { expandIcon } = this.props; @@ -69,7 +68,7 @@ export default class Collapse extends React.Component { renderCollapse = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', bordered } = this.props; const prefixCls = getPrefixCls('collapse', customizePrefixCls); - const iconPosition = this.getIconPosition(); + const iconPosition = this.getIconPosition(direction); const collapseClassName = classNames( { [`${prefixCls}-borderless`]: !bordered,