From b7befc511703b04276ae626c5cf852c1f1f673bf Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Sat, 30 Nov 2019 15:06:56 +0330 Subject: [PATCH 01/10] add rtl direction to picker --- assets/index.less | 11 +++++ src/Picker.tsx | 7 +++ src/PickerPanel.tsx | 4 ++ src/PickerTrigger.tsx | 14 +++++- src/RangePicker.tsx | 105 +++++++++++++++++++++++++++--------------- 5 files changed, 103 insertions(+), 38 deletions(-) diff --git a/assets/index.less b/assets/index.less index 0fec86fc3..99caa7830 100644 --- a/assets/index.less +++ b/assets/index.less @@ -7,6 +7,8 @@ &-focused { border: 1px solid blue; + &-rtl { + direction: rtl; } &-panel { @@ -18,6 +20,10 @@ &-focused { border-color: blue; } + + &-rtl { + direction: rtl; + } } // ===================== Shared Panel ===================== @@ -285,6 +291,11 @@ top: 0; cursor: pointer; + .@{prefix-cls}-rtl & { + right: auto; + left: 4px; + } + &-btn::after { content: '×'; } diff --git a/src/Picker.tsx b/src/Picker.tsx index 45ae66e3f..72fe3c227 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -85,6 +85,8 @@ export interface PickerSharedProps extends React.AriaAttributes { // WAI-ARIA role?: string; name?: string; + + direction?: 'ltr' | 'rtl'; } type OmitPanelProps = Omit< @@ -158,6 +160,7 @@ function InnerPicker(props: PickerProps) { onMouseLeave, onContextMenu, onClick, + direction, } = props as MergedPickerProps; const inputRef = React.useRef(null); @@ -357,6 +360,7 @@ function InnerPicker(props: PickerProps) { locale={locale} tabIndex={-1} onChange={setSelectedValue} + direction={direction} /> ); @@ -394,6 +398,7 @@ function InnerPicker(props: PickerProps) { triggerOpen(false, true); } }; + const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; return ( (props: PickerProps) { dropdownAlign={dropdownAlign} getPopupContainer={getPopupContainer} transitionName={transitionName} + popupPlacement={popupPlacement} >
{ onMouseDown?: React.MouseEventHandler; onOk?: (date: DateType) => void; + direction?: 'ltr' | 'rtl'; + /** @private This is internal usage. Do not use in your production env */ hideHeader?: boolean; /** @private This is internal usage. Do not use in your production env */ @@ -144,6 +146,7 @@ function PickerPanel(props: PickerPanelProps) { onPickerValueChange, onOk, components, + direction, } = props as MergedPickerPanelProps; const needConfirmButton: boolean = @@ -478,6 +481,7 @@ function PickerPanel(props: PickerPanelProps) { rangedValue && rangedValue[0] && rangedValue[1], [`${prefixCls}-panel-has-range-hover`]: hoverRangedValue && hoverRangedValue[0] && hoverRangedValue[1], + [`${prefixCls}-panel-rtl`]: direction === 'rtl', })} style={style} onKeyDown={onInternalKeyDown} diff --git a/src/PickerTrigger.tsx b/src/PickerTrigger.tsx index 550809861..6278fa804 100644 --- a/src/PickerTrigger.tsx +++ b/src/PickerTrigger.tsx @@ -20,6 +20,14 @@ const BUILT_IN_PLACEMENTS = { adjustY: 1, }, }, + bottomRight: { + points: ['tr', 'br'], + offset: [0, 4], + overflow: { + adjustX: 0, + adjustY: 1, + }, + }, topLeft: { points: ['bl', 'tl'], offset: [0, -4], @@ -38,6 +46,8 @@ const BUILT_IN_PLACEMENTS = { }, }; +type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; + export interface PickerTriggerProps { prefixCls: string; visible: boolean; @@ -49,6 +59,7 @@ export interface PickerTriggerProps { getPopupContainer?: (node: HTMLElement) => HTMLElement; dropdownAlign?: AlignType; range?: boolean; + popupPlacement?: Placement; } function PickerTrigger({ @@ -62,6 +73,7 @@ function PickerTrigger({ getPopupContainer, children, range, + popupPlacement, }: PickerTriggerProps) { const dropdownPrefixCls = `${prefixCls}-dropdown`; @@ -69,7 +81,7 @@ function PickerTrigger({ { onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; onOk?: (dates: RangeValue) => void; + direction?: 'ltr' | 'rtl'; } type OmitPickerProps = Omit< @@ -212,6 +213,7 @@ function InnerRangePicker(props: RangePickerProps) { onBlur, onOk, components, + direction, } = props as MergedRangePickerProps; const needConfirmButton: boolean = @@ -932,39 +934,8 @@ function InnerRangePicker(props: RangePickerProps) { } }; - return ( - - -
-
( +
(props: RangePickerProps) { {...inputSharedProps} />
-
- {separator} -
-
( +
(props: RangePickerProps) { {...inputSharedProps} />
+ ); + + const renderDatePickerByDirection = () => { + if (direction === 'rtl') { + return ( +
+ {endDatePicker()} +
+ {separator} +
+ {startDatePicker()} +
+ ); + } + return ( +
+ {startDatePicker()} +
+ {separator} +
+ {endDatePicker()} +
+ ); + }; + + return ( + + +
+ {renderDatePickerByDirection()} + +
Date: Sat, 30 Nov 2019 15:32:07 +0330 Subject: [PATCH 02/10] add rtl demo --- assets/index.less | 5 ++ examples/rtl.tsx | 204 ++++++++++++++++++++++++++++++++++++++++++++ src/RangePicker.tsx | 8 +- 3 files changed, 213 insertions(+), 4 deletions(-) create mode 100644 examples/rtl.tsx diff --git a/assets/index.less b/assets/index.less index 99caa7830..a12867f90 100644 --- a/assets/index.less +++ b/assets/index.less @@ -243,6 +243,11 @@ display: block; width: 100%; text-align: left; + + .@{prefix-cls}-panel-rtl & { + padding: 0 12px 0 0; + text-align: right; + } } } } diff --git a/examples/rtl.tsx b/examples/rtl.tsx new file mode 100644 index 000000000..1d3da4280 --- /dev/null +++ b/examples/rtl.tsx @@ -0,0 +1,204 @@ +import React from 'react'; +import moment, { Moment } from 'moment'; +import Picker from '../src/Picker'; +import RangePicker from '../src/RangePicker'; +import PickerPanel from '../src/PickerPanel'; +import momentGenerateConfig from '../src/generate/moment'; +import zhCN from '../src/locale/zh_CN'; +import enUS from '../src/locale/en_US'; +import jaJP from '../src/locale/ja_JP'; +import '../assets/index.less'; + +// const defaultValue = moment('2019-09-03 05:02:03'); +const defaultValue = moment('2019-11-28 01:02:03'); + +export default () => { + const [value, setValue] = React.useState(defaultValue); + const weekRef = React.useRef>(null); + + const onSelect = (newValue: Moment) => { + console.log('Select:', newValue); + }; + + const onChange = (newValue: Moment | null, formatString?: string) => { + console.log('Change:', newValue, formatString); + setValue(newValue); + }; + + const sharedProps = { + generateConfig: momentGenerateConfig, + value, + onSelect, + onChange, + direction: 'rtl', + }; + + return ( +
+

Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}

+ +
+
+

Basic

+ {...sharedProps} locale={zhCN} /> +
+ +
+

Uncontrolled

+ + generateConfig={momentGenerateConfig} + locale={zhCN} + onChange={onChange} + defaultValue={moment('2000-01-01', 'YYYY-MM-DD')} + /> +
+ +
+

1 Month earlier

+ + {...sharedProps} + defaultPickerValue={defaultValue.clone().subtract(1, 'month')} + locale={enUS} + /> +
+ +
+

Week Picker CN

+ {...sharedProps} locale={zhCN} picker="week" /> +
+ +
+

Month Picker

+ {...sharedProps} locale={zhCN} picker="month" /> +
+ +
+

Week Picker US

+ {...sharedProps} locale={enUS} picker="week" /> +
+ +
+

Time

+ {...sharedProps} locale={jaJP} mode="time" /> +
+
+

Time AM/PM

+ + {...sharedProps} + locale={jaJP} + mode="time" + showTime={{ + use12Hours: true, + showSecond: false, + format: 'hh:mm A', + }} + /> +
+
+

Datetime

+ {...sharedProps} locale={zhCN} showTime /> +
+
+ +
+
+

Basic

+ {...sharedProps} locale={zhCN} /> +
+
+

Uncontrolled

+ + generateConfig={momentGenerateConfig} + locale={zhCN} + allowClear + /> +
+
+

Datetime

+ + {...sharedProps} + locale={zhCN} + defaultPickerValue={defaultValue.clone().subtract(1, 'month')} + showTime={{ + showSecond: false, + defaultValue: moment('11:28:39', 'HH:mm:ss'), + }} + showToday + disabledTime={date => { + if (date && date.isSame(defaultValue, 'date')) { + return { + disabledHours: () => [1, 3, 5, 7, 9, 11], + }; + } + return {}; + }} + /> +
+
+

Uncontrolled Datetime

+ generateConfig={momentGenerateConfig} locale={zhCN} /> +
+
+

Week

+ + {...sharedProps} + locale={zhCN} + format="YYYY-Wo" + allowClear + picker="week" + renderExtraFooter={() => 'I am footer!!!'} + ref={weekRef} + /> + + +
+
+

Week

+ + generateConfig={momentGenerateConfig} + locale={zhCN} + picker="week" + /> +
+
+

Time

+ {...sharedProps} locale={zhCN} picker="time" /> +
+
+

Time 12

+ + {...sharedProps} + locale={zhCN} + picker="time" + use12Hours + /> +
+
+

Year

+ {...sharedProps} locale={zhCN} picker="year" /> +
+
+ +
+
+

Basic RangePicker

+ + {...sharedProps} + locale={zhCN} + allowClear + placeholder={['start...', 'end...']} + /> +
+
+
+ ); +}; diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index f8a27c18d..a99b4b0a6 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -982,23 +982,23 @@ function InnerRangePicker(props: RangePickerProps) { const renderDatePickerByDirection = () => { if (direction === 'rtl') { return ( -
+ {endDatePicker()}
{separator}
{startDatePicker()} -
+ ); } return ( -
+ {startDatePicker()}
{separator}
{endDatePicker()} -
+ ); }; From f3d84936857f982c9d2b87b22fbbc2a3648bd046 Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Sat, 30 Nov 2019 15:38:12 +0330 Subject: [PATCH 03/10] add rtl tests --- tests/__snapshots__/picker.spec.tsx.snap | 4 ++++ tests/panel.spec.tsx | 3 +++ tests/picker.spec.tsx | 5 +++++ tests/range.spec.tsx | 5 +++++ 4 files changed, 17 insertions(+) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 4bd116f34..67efa6b62 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -29,6 +29,9 @@ exports[`Picker.Basic icon 1`] = ` exports[`Picker.Basic pass data- & aria- & role 1`] = `
diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index fdfce2d97..e5fe0230e 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -427,6 +427,9 @@ describe('Picker.Panel', () => { expect(wrapper.find('.rc-picker-header')).toHaveLength(0); }); }); + it('should render correctly in rtl', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); }); it('onOk to trigger', () => { diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index b874e7af5..bcb67bb7e 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -523,4 +523,9 @@ describe('Picker.Basic', () => { wrapper.closePicker(); expect(wrapper.find('input').props().value).toEqual(''); }); + + it('should render correctly in rtl', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); + }); }); diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index d331d1417..197c7d50f 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -583,6 +583,11 @@ describe('Picker.Range', () => { expect(isSame(onPanelChange.mock.calls[0][0][1], '1998-09-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['month', 'month']); }); + + it('should render correctly in rtl', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); + }); }); it('type can not change before start time', () => { From 7084402770a036f4883c44a8ccc49a48307c12c6 Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Sat, 30 Nov 2019 15:59:52 +0330 Subject: [PATCH 04/10] update readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 06c961136..edbae61a3 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ render(, mountNode); | onOpenChange | Function(open:boolean) | | called when open/close picker | | onFocus | (evnet:React.FocusEventHandler) => void | | called like input's on focus | | onBlur | (evnet:React.FocusEventHandler) => void | | called like input's on blur | +| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | ### PickerPanel @@ -99,6 +100,7 @@ render(, mountNode); | onSelect | Function(date: moment) | | a callback function, can be executed when the selected time | | onPanelChange | Function(value: moment, mode) | | callback when picker panel mode is changed | | onMouseDown | (evnet:React.MouseEventHandler) => void | | callback when executed onMouseDown evnent | +| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | ### RangePicker @@ -125,6 +127,7 @@ render(, mountNode); | disabled | Boolean | false | whether the range picker is disabled | | onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing | | onCalendarChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the start time or the end time of the range is changing | +| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | ### showTime-options From 91a1802eb6da01880d3082f479f5eb6fe6b85ef6 Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Sun, 1 Dec 2019 10:11:17 +0330 Subject: [PATCH 05/10] updateSn --- tests/__snapshots__/picker.spec.tsx.snap | 18 +++++++++++++++--- tests/panel.spec.tsx | 8 +++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index 67efa6b62..33f3c980d 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -29,9 +29,6 @@ exports[`Picker.Basic icon 1`] = ` exports[`Picker.Basic pass data- & aria- & role 1`] = `
+
+`; + +exports[`Basic should render correctly in rtl 1`] = ` +
+
+ { errSpy.mockRestore(); }); + it('should render correctly in rtl', () => { + const wrapper = mount(); + expect(wrapper.render()).toMatchSnapshot(); + }); + describe('hideHeader', () => { ['decade', 'year', 'month', 'date', 'time'].forEach(mode => { it(mode, () => { @@ -427,9 +432,6 @@ describe('Picker.Panel', () => { expect(wrapper.find('.rc-picker-header')).toHaveLength(0); }); }); - it('should render correctly in rtl', () => { - const wrapper = mount(); - expect(wrapper.render()).toMatchSnapshot(); }); it('onOk to trigger', () => { From 49236305b9b6e8bf09f93b041471addfc04241bc Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Thu, 12 Dec 2019 10:14:45 +0330 Subject: [PATCH 06/10] fix overwriten property --- src/PickerTrigger.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/PickerTrigger.tsx b/src/PickerTrigger.tsx index 6278fa804..4c1fe2559 100644 --- a/src/PickerTrigger.tsx +++ b/src/PickerTrigger.tsx @@ -20,14 +20,6 @@ const BUILT_IN_PLACEMENTS = { adjustY: 1, }, }, - bottomRight: { - points: ['tr', 'br'], - offset: [0, 4], - overflow: { - adjustX: 0, - adjustY: 1, - }, - }, topLeft: { points: ['bl', 'tl'], offset: [0, -4], From b27dc5b1bedcbc1f7da4569e33d07efaf75d4a1e Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Fri, 13 Dec 2019 18:33:47 +0330 Subject: [PATCH 07/10] fix breaking changes --- assets/index.less | 30 +++++++-- examples/rtl.tsx | 18 ++++- src/Picker.tsx | 1 + src/PickerTrigger.tsx | 5 +- src/RangePicker.tsx | 150 ++++++++++++++++++------------------------ 5 files changed, 110 insertions(+), 94 deletions(-) diff --git a/assets/index.less b/assets/index.less index a12867f90..fddf02b28 100644 --- a/assets/index.less +++ b/assets/index.less @@ -5,12 +5,13 @@ .@{prefix-cls} { display: inline-flex; - &-focused { - border: 1px solid blue; &-rtl { direction: rtl; } + &-focused { + border: 1px solid blue; + } &-panel { border: 1px solid #666; background: @background-color; @@ -285,6 +286,10 @@ display: inline-flex; width: 100%; + .@{prefix-cls}-rtl & { + text-align: right; + } + > input { width: 100%; } @@ -322,13 +327,15 @@ // Panel @arrow-size: 10px; - &-placement-topLeft { + &-placement-topLeft, + &-placement-topRight { .@{prefix-cls}-range-arrow { bottom: @arrow-size / 2 + 1px; transform: rotate(135deg); } } - &-placement-bottomLeft { + &-placement-bottomLeft, + &-placement-bottomright { .@{prefix-cls}-range-arrow { top: @arrow-size / 2 + 1px; transform: rotate(-45deg); @@ -342,7 +349,14 @@ z-index: 1; left: @arrow-size; margin-left: 10px; - transition: left 0.3s; + transition: all 0.3s; + + .@{prefix-cls}-dropdown-rtl& { + right: @arrow-size; + left: auto; + margin-left: 0; + margin-right: 10px; + } &::before, &::after { @@ -352,6 +366,12 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + + .@{prefix-cls}-dropdown-rtl& { + right: 50%; + left: auto; + transform: translate(50%, -50%); + } } &::before { diff --git a/examples/rtl.tsx b/examples/rtl.tsx index 1d3da4280..a41e8644b 100644 --- a/examples/rtl.tsx +++ b/examples/rtl.tsx @@ -9,11 +9,15 @@ import enUS from '../src/locale/en_US'; import jaJP from '../src/locale/ja_JP'; import '../assets/index.less'; -// const defaultValue = moment('2019-09-03 05:02:03'); const defaultValue = moment('2019-11-28 01:02:03'); +function formatDate(date: Moment | null) { + return date ? date.format('YYYY-MM-DD HH:mm:ss') : 'null'; +} + export default () => { const [value, setValue] = React.useState(defaultValue); + const weekRef = React.useRef>(null); const onSelect = (newValue: Moment) => { @@ -33,9 +37,14 @@ export default () => { direction: 'rtl', }; + const rangePickerRef = React.useRef>(null); + return ( -
-

Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}

+
+

+ Value:{' '} + {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'} +

@@ -193,8 +202,11 @@ export default () => {

Basic RangePicker

{...sharedProps} + value={undefined} locale={zhCN} allowClear + ref={rangePickerRef} + defaultValue={[moment('1990-09-03'), moment('1989-11-28')]} placeholder={['start...', 'end...']} />
diff --git a/src/Picker.tsx b/src/Picker.tsx index 72fe3c227..4418a6287 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -420,6 +420,7 @@ function InnerPicker(props: PickerProps) { getPopupContainer={getPopupContainer} transitionName={transitionName} popupPlacement={popupPlacement} + direction={direction} >
(props: RangePickerProps) { } } + const arrowPositionStyle = + direction === 'rtl' ? { right: arrowLeft } : { left: arrowLeft }; + function renderPanels() { let panels: React.ReactNode; const extraNode = getExtraFooter( @@ -808,25 +811,28 @@ function InnerRangePicker(props: RangePickerProps) { const currentMode = mergedModes[activePickerIndex]; const showDoublePanel = currentMode === picker; + const leftPanel = renderPanel(showDoublePanel ? 'left' : false, { + pickerValue: viewDate, + onPickerValueChange: newViewDate => { + setViewDate(newViewDate, activePickerIndex); + }, + }); + const rightPanel = renderPanel('right', { + pickerValue: nextViewDate, + onPickerValueChange: newViewDate => { + setViewDate( + getClosingViewDate(newViewDate, picker, generateConfig, -1), + activePickerIndex, + ); + }, + }); panels = ( <> - {renderPanel(showDoublePanel ? 'left' : false, { - pickerValue: viewDate, - onPickerValueChange: newViewDate => { - setViewDate(newViewDate, activePickerIndex); - }, - })} - {showDoublePanel && - renderPanel('right', { - pickerValue: nextViewDate, - onPickerValueChange: newViewDate => { - setViewDate( - getClosingViewDate(newViewDate, picker, generateConfig, -1), - activePickerIndex, - ); - }, - })} + {direction === 'rtl' ? rightPanel : leftPanel} + {direction === 'rtl' + ? showDoublePanel && leftPanel + : showDoublePanel && rightPanel} ); } else { @@ -859,7 +865,7 @@ function InnerRangePicker(props: RangePickerProps) { )} style={{ minWidth: popupMinWidth }} > -
+
{renderPanels()}
@@ -918,7 +924,8 @@ function InnerRangePicker(props: RangePickerProps) { activeBarWidth = endInputDivRef.current.offsetWidth; } } - + const activeBarPositionStyle = + direction === 'rtl' ? { right: activeBarLeft } : { left: activeBarLeft }; // ============================ Return ============================= const onContextSelect = ( date: DateType, @@ -934,8 +941,41 @@ function InnerRangePicker(props: RangePickerProps) { } }; - const startDatePicker = () => ( -
+ +
+
(props: RangePickerProps) { {...inputSharedProps} />
- ); - - const endDatePicker = () => ( -
+ {separator} +
+
(props: RangePickerProps) { {...inputSharedProps} />
- ); - - const renderDatePickerByDirection = () => { - if (direction === 'rtl') { - return ( - - {endDatePicker()} -
- {separator} -
- {startDatePicker()} - - ); - } - return ( - - {startDatePicker()} -
- {separator} -
- {endDatePicker()} - - ); - }; - - return ( - - -
- {renderDatePickerByDirection()} - -
Date: Fri, 13 Dec 2019 18:39:11 +0330 Subject: [PATCH 08/10] update tests --- tests/__snapshots__/panel.spec.tsx.snap | 541 +++++++++++++++++++++++ tests/__snapshots__/picker.spec.tsx.snap | 2 +- tests/__snapshots__/range.spec.tsx.snap | 36 ++ 3 files changed, 578 insertions(+), 1 deletion(-) diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap index 05751d76e..e066f37f6 100644 --- a/tests/__snapshots__/panel.spec.tsx.snap +++ b/tests/__snapshots__/panel.spec.tsx.snap @@ -1,5 +1,546 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Picker.Panel should render correctly in rtl 1`] = ` +
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+
+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+
+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+
+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+
+
+
+
+`; + exports[`Picker.Panel time disabled columns 1`] = `
`; -exports[`Basic should render correctly in rtl 1`] = ` +exports[`Picker.Basic should render correctly in rtl 1`] = `
diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index 385871bd7..097cd531f 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -49,3 +49,39 @@ exports[`Picker.Range icon 1`] = `
`; + +exports[`Picker.Range onPanelChange is array args should render correctly in rtl 1`] = ` +
+
+ +
+
+ ~ +
+
+ +
+
+
+`; From bddd7f78d4cb0f412b55544a56ae4b3f99cda869 Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Tue, 17 Dec 2019 22:11:47 +0330 Subject: [PATCH 09/10] pass direction context to Panel from RangePicker --- src/RangePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 80153b1bf..d7359dc8c 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -720,6 +720,7 @@ function InnerRangePicker(props: RangePickerProps) { mode={mergedModes[activePickerIndex]} generateConfig={generateConfig} style={undefined} + direction={direction} disabledDate={ activePickerIndex === 0 ? disabledStartDate : disabledEndDate } From 07b8957fa091c996c0dcc4174467b56af6d9ce65 Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Tue, 17 Dec 2019 22:18:44 +0330 Subject: [PATCH 10/10] default popupPlacement on rtl direction --- src/PickerTrigger.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/PickerTrigger.tsx b/src/PickerTrigger.tsx index 08b9f1289..ccf9e5d9b 100644 --- a/src/PickerTrigger.tsx +++ b/src/PickerTrigger.tsx @@ -71,11 +71,18 @@ function PickerTrigger({ }: PickerTriggerProps) { const dropdownPrefixCls = `${prefixCls}-dropdown`; + const getPopupPlacement = () => { + if (popupPlacement !== undefined) { + return popupPlacement; + } + return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + }; + return (