From 676de29eb42b42a31ef67f6ec2a17007490996c3 Mon Sep 17 00:00:00 2001 From: Saeed Rahimi Date: Thu, 2 Jan 2020 14:40:16 +0330 Subject: [PATCH] feat: added rtl direction to all of ant-design components (#19380) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 --- components/affix/__tests__/Affix.test.js | 3 + .../__snapshots__/Affix.test.js.snap | 9 + .../__snapshots__/index.test.js.snap | 14 + components/alert/__tests__/index.test.js | 3 + components/alert/index.tsx | 3 +- components/alert/style/index.less | 34 + .../__snapshots__/index.test.js.snap | 30 + .../auto-complete/__tests__/index.test.js | 2 + components/avatar/__tests__/Avatar.test.js | 2 + .../__snapshots__/Avatar.test.js.snap | 12 + .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/avatar/demo/badge.md | 14 +- .../__snapshots__/index.test.js.snap | 3 + components/back-top/__tests__/index.test.js | 2 + components/back-top/index.tsx | 6 +- components/back-top/style/index.less | 5 + .../__snapshots__/index.test.js.snap | 6 + components/badge/__tests__/index.test.js | 2 + components/badge/demo/basic.md | 4 + components/badge/demo/no-wrapper.md | 4 + components/badge/demo/title.md | 6 + components/badge/index.tsx | 9 +- components/badge/style/index.less | 51 + .../breadcrumb/__tests__/Breadcrumb.test.js | 2 + .../__snapshots__/Breadcrumb.test.js.snap | 6 + .../__snapshots__/index.test.js.snap | 39 + components/button/__tests__/index.test.js | 8 + components/button/button-group.tsx | 3 +- components/button/button.tsx | 3 +- components/button/style/index.less | 41 + components/button/style/mixin.less | 31 + .../__snapshots__/index.test.js.snap | 950 ++++++++++++++++++ components/calendar/__tests__/index.test.js | 2 + .../__snapshots__/index.test.js.snap | 10 + components/card/__tests__/index.test.js | 2 + components/card/index.tsx | 3 +- components/card/style/index.less | 24 + .../__snapshots__/index.test.js.snap | 19 + components/carousel/__tests__/index.test.js | 2 + components/carousel/index.tsx | 9 +- components/carousel/style/index.less | 93 +- .../__snapshots__/index.test.js.snap | 401 ++++++++ components/cascader/__tests__/index.test.js | 133 +++ components/cascader/index.tsx | 39 +- components/cascader/style/index.less | 49 + .../__snapshots__/checkbox.test.js.snap | 19 + .../__snapshots__/group.test.js.snap | 6 + .../checkbox/__tests__/checkbox.test.js | 2 + components/checkbox/__tests__/group.test.js | 2 + components/collapse/Collapse.tsx | 3 +- .../__snapshots__/index.test.js.snap | 6 + components/collapse/__tests__/index.test.js | 2 + components/collapse/style/index.less | 22 + .../__tests__/__snapshots__/demo.test.js.snap | 4 +- .../__snapshots__/index.test.js.snap | 25 + components/comment/__tests__/index.test.js | 2 + components/comment/demo/basic.md | 17 +- components/comment/index.tsx | 7 +- components/comment/style/index.less | 29 + components/config-provider/context.tsx | 1 + components/config-provider/demo/direction.md | 613 +++++++++++ components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 + components/config-provider/index.zh-CN.md | 1 + .../__snapshots__/mount.test.js.snap | 188 ++++ .../date-picker/__tests__/mount.test.js | 6 + components/date-picker/generatePicker.tsx | 6 +- components/date-picker/style/index.less | 34 + components/date-picker/style/panel.less | 76 ++ components/descriptions/index.tsx | 3 +- components/descriptions/style/index.less | 8 + components/drawer/__tests__/Drawer.test.js | 2 + .../__snapshots__/Drawer.test.js.snap | 2 + components/drawer/demo/multi-level-drawer.md | 24 +- components/drawer/index.tsx | 7 +- components/drawer/style/drawer.less | 17 + .../dropdown-button.test.js.snap | 42 + .../__tests__/dropdown-button.test.js | 8 + components/dropdown/dropdown.tsx | 21 +- components/dropdown/style/index.less | 40 + .../__snapshots__/index.test.js.snap | 151 +++ components/empty/__tests__/index.test.js | 14 +- components/empty/index.tsx | 3 +- components/empty/style/index.less | 4 + components/form/Form.tsx | 3 +- .../__snapshots__/index.test.js.snap | 20 + components/form/__tests__/index.test.js | 4 + components/form/style/index.less | 39 + components/form/style/inline.less | 5 + components/form/style/vertical.less | 3 + .../__snapshots__/index.test.js.snap | 12 + components/grid/__tests__/index.test.js | 4 + components/grid/col.tsx | 3 +- components/grid/row.tsx | 3 +- components/grid/style/index.less | 8 + components/grid/style/mixin.less | 39 + .../__snapshots__/index.test.js.snap | 81 ++ .../input-number/__tests__/index.test.js | 2 + components/input/ClearableLabeledInput.tsx | 6 +- components/input/Group.tsx | 3 +- components/input/Input.tsx | 10 +- components/input/Search.tsx | 7 +- components/input/__tests__/Password.test.js | 2 + components/input/__tests__/Search.test.js | 2 + .../__snapshots__/Password.test.js.snap | 41 + .../__snapshots__/Search.test.js.snap | 37 + .../__snapshots__/index.test.js.snap | 14 + components/input/__tests__/index.test.js | 4 + components/input/style/index.less | 6 + components/input/style/mixin.less | 81 ++ components/input/style/search-input.less | 19 + .../__snapshots__/index.test.js.snap | 23 + components/layout/__tests__/index.test.js | 5 + components/layout/layout.tsx | 7 +- components/list/__tests__/Item.test.js | 26 +- .../__tests__/__snapshots__/Item.test.js.snap | 57 ++ .../__snapshots__/index.test.js.snap | 72 ++ components/list/__tests__/index.test.js | 4 + components/list/index.tsx | 3 +- components/list/style/index.less | 54 + components/list/style/responsive.less | 20 + .../__snapshots__/index.test.js.snap | 11 + components/mentions/__tests__/index.test.js | 2 + components/menu/MenuContext.tsx | 1 + components/menu/MenuItem.tsx | 5 +- .../__snapshots__/index.test.js.snap | 38 + components/menu/__tests__/index.test.js | 9 + components/menu/index.tsx | 30 +- components/menu/style/index.less | 79 ++ components/modal/Modal.tsx | 8 +- components/modal/__tests__/Modal.test.js | 2 + .../__snapshots__/Modal.test.js.snap | 2 + components/modal/style/modal.less | 23 + .../__snapshots__/index.test.js.snap | 22 + .../page-header/__tests__/index.test.js | 13 + components/page-header/index.tsx | 23 +- components/page-header/style/index.less | 59 +- components/pagination/Pagination.tsx | 32 +- .../__snapshots__/index.test.js.snap | 192 ++++ components/pagination/__tests__/index.test.js | 14 + components/pagination/style/index.less | 39 + .../__snapshots__/index.test.js.snap | 2 + components/popconfirm/__tests__/index.test.js | 2 + .../__snapshots__/index.test.js.snap | 39 + components/popover/__tests__/index.test.js | 14 +- components/popover/style/index.less | 20 + .../__snapshots__/index.test.js.snap | 27 + components/progress/__tests__/index.test.js | 2 + components/progress/demo/format.md | 5 + components/progress/progress.tsx | 3 +- components/progress/style/index.less | 22 + .../__snapshots__/radio.test.js.snap | 42 + components/radio/__tests__/radio.test.js | 5 + components/radio/group.tsx | 3 +- components/radio/radio.tsx | 3 +- components/radio/style/index.less | 23 + .../__snapshots__/index.test.js.snap | 310 ++++++ components/rate/__tests__/index.test.js | 2 + components/rate/index.tsx | 12 +- components/rate/style/index.less | 19 + .../__snapshots__/index.test.js.snap | 35 + components/result/__tests__/index.test.js | 2 + components/result/index.tsx | 6 +- components/result/style/index.less | 13 + .../__snapshots__/index.test.js.snap | 58 ++ components/select/__tests__/index.test.js | 2 + components/select/index.tsx | 8 +- components/select/style/index.less | 17 + components/select/style/multiple.less | 26 + components/select/style/single.less | 18 + components/skeleton/Skeleton.tsx | 3 +- .../__snapshots__/index.test.js.snap | 24 + components/skeleton/__tests__/index.test.js | 2 + components/skeleton/style/index.less | 27 + .../__snapshots__/index.test.js.snap | 80 ++ components/slider/__tests__/index.test.js | 12 + components/slider/index.tsx | 13 +- components/slider/style/index.less | 44 + .../__snapshots__/index.test.js.snap | 23 + components/spin/__tests__/index.test.js | 2 + components/spin/index.tsx | 3 +- components/spin/style/index.less | 15 + components/statistic/Statistic.tsx | 7 +- .../__snapshots__/index.test.js.snap | 20 + components/statistic/__tests__/index.test.js | 2 + components/statistic/style/index.less | 14 + .../__snapshots__/index.test.js.snap | 7 + components/steps/__tests__/index.test.js | 2 + components/steps/index.tsx | 16 +- components/steps/style/custom-icon.less | 5 + components/steps/style/index.less | 43 + components/steps/style/nav.less | 23 + components/steps/style/progress-dot.less | 50 + components/steps/style/small.less | 10 + components/steps/style/vertical.less | 17 + components/style/themes/default.less | 1 + .../__snapshots__/index.test.js.snap | 13 + components/switch/__tests__/index.test.js | 2 + components/switch/index.tsx | 3 +- components/switch/style/index.less | 44 +- components/table/Table.tsx | 10 +- components/table/__tests__/Table.test.js | 2 + .../__snapshots__/Table.test.js.snap | 173 ++++ components/table/style/index.less | 57 ++ components/tabs/TabBar.tsx | 16 +- .../__snapshots__/index.test.js.snap | 131 +++ components/tabs/__tests__/index.test.js | 6 + components/tabs/index.tsx | 3 +- components/tabs/style/card-style.less | 9 + components/tabs/style/index.less | 34 + .../__snapshots__/index.test.js.snap | 12 + components/tag/__tests__/index.test.js | 3 + components/tag/index.tsx | 3 +- components/tag/style/index.less | 12 + .../__snapshots__/index.test.js.snap | 44 + .../time-picker/__tests__/index.test.js | 2 + components/timeline/Timeline.tsx | 3 +- .../__snapshots__/index.test.js.snap | 23 + components/timeline/__tests__/index.test.js | 3 + components/timeline/style/index.less | 67 ++ .../__snapshots__/tooltip.test.js.snap | 2 + components/tooltip/__tests__/tooltip.test.js | 2 + components/tooltip/index.tsx | 6 + components/tooltip/style/index.less | 8 + .../__snapshots__/index.test.js.snap | 237 +++++ components/transfer/__tests__/index.test.js | 2 + components/transfer/index.tsx | 4 +- components/transfer/operation.tsx | 6 +- components/transfer/style/index.less | 43 + .../__snapshots__/index.test.js.snap | 58 ++ .../tree-select/__tests__/index.test.js | 2 + components/tree-select/index.tsx | 5 + components/tree-select/style/index.less | 19 + components/tree/DirectoryTree.tsx | 6 +- components/tree/Tree.tsx | 3 +- .../__snapshots__/directory.test.js.snap | 52 + components/tree/__tests__/directory.test.js | 4 + components/tree/style/index.less | 17 + components/typography/Base.tsx | 3 +- components/typography/Editable.tsx | 10 +- components/typography/Typography.tsx | 8 +- .../__snapshots__/index.test.js.snap | 22 + components/typography/__tests__/index.test.js | 5 + components/typography/style/index.less | 24 + components/upload/Upload.tsx | 3 +- components/upload/UploadList.tsx | 3 +- .../__snapshots__/upload.test.js.snap | 27 + components/upload/__tests__/upload.test.js | 2 + components/upload/demo/picture-style.md | 4 + components/upload/style/index.less | 112 +++ package.json | 6 +- site/theme/static/common.less | 16 + site/theme/static/demo.less | 56 ++ site/theme/static/footer.less | 14 + site/theme/static/header.less | 60 +- site/theme/static/markdown.less | 35 + site/theme/static/responsive.less | 3 +- site/theme/static/toc.less | 27 + site/theme/template/Content/ComponentDoc.jsx | 2 +- site/theme/template/Layout/Header.jsx | 30 + site/theme/template/Layout/index.jsx | 26 +- tests/shared/rtlTest.js | 25 + 262 files changed, 7560 insertions(+), 168 deletions(-) create mode 100644 components/affix/__tests__/__snapshots__/Affix.test.js.snap create mode 100644 components/auto-complete/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/avatar/__tests__/__snapshots__/Avatar.test.js.snap create mode 100644 components/back-top/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap create mode 100644 components/comment/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/config-provider/demo/direction.md create mode 100644 components/date-picker/__tests__/__snapshots__/mount.test.js.snap create mode 100644 components/empty/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/input-number/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/list/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/mentions/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/pagination/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/rate/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/result/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/steps/__tests__/__snapshots__/index.test.js.snap mode change 100755 => 100644 components/table/Table.tsx create mode 100644 components/timeline/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/typography/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/upload/__tests__/__snapshots__/upload.test.js.snap create mode 100644 tests/shared/rtlTest.js diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js index 2caa5f4348..ddf03c9028 100644 --- a/components/affix/__tests__/Affix.test.js +++ b/components/affix/__tests__/Affix.test.js @@ -4,6 +4,7 @@ import Affix from '..'; import { getObserverEntities } from '../utils'; import Button from '../../button'; import { spyElementPrototype } from '../../__tests__/util/domHook'; +import rtlTest from '../../../tests/shared/rtlTest'; const events = {}; @@ -40,6 +41,8 @@ class AffixMounter extends React.Component { } describe('Affix Render', () => { + rtlTest(Affix); + let wrapper; let domMock; diff --git a/components/affix/__tests__/__snapshots__/Affix.test.js.snap b/components/affix/__tests__/__snapshots__/Affix.test.js.snap new file mode 100644 index 0000000000..bd230c7ac4 --- /dev/null +++ b/components/affix/__tests__/__snapshots__/Affix.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Affix Render rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+`; diff --git a/components/alert/__tests__/__snapshots__/index.test.js.snap b/components/alert/__tests__/__snapshots__/index.test.js.snap index 81d743625e..b257146da9 100644 --- a/components/alert/__tests__/__snapshots__/index.test.js.snap +++ b/components/alert/__tests__/__snapshots__/index.test.js.snap @@ -21,3 +21,17 @@ exports[`Alert ErrorBoundary 1`] = `
`; + +exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = ` +
+ + +
+`; diff --git a/components/alert/__tests__/index.test.js b/components/alert/__tests__/index.test.js index 8b88773869..c943db3f2f 100644 --- a/components/alert/__tests__/index.test.js +++ b/components/alert/__tests__/index.test.js @@ -1,10 +1,13 @@ import React from 'react'; import { mount } from 'enzyme'; import Alert from '..'; +import rtlTest from '../../../tests/shared/rtlTest'; const { ErrorBoundary } = Alert; describe('Alert', () => { + rtlTest(Alert); + beforeAll(() => { jest.useFakeTimers(); }); diff --git a/components/alert/index.tsx b/components/alert/index.tsx index a3bf3eb9a0..9253ebaddb 100755 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -95,7 +95,7 @@ export default class Alert extends React.Component { (this.props.afterClose || noop)(); }; - renderAlert = ({ getPrefixCls }: ConfigConsumerProps) => { + renderAlert = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { description, prefixCls: customizePrefixCls, @@ -133,6 +133,7 @@ export default class Alert extends React.Component { [`${prefixCls}-no-icon`]: !showIcon, [`${prefixCls}-banner`]: !!banner, [`${prefixCls}-closable`]: closable, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/alert/style/index.less b/components/alert/style/index.less index e7cbf863e5..416be69914 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -11,18 +11,33 @@ word-wrap: break-word; border-radius: @border-radius-base; + &-rtl { + padding: 8px 37px 8px 15px; + direction: rtl; + } + &&-no-icon { padding: 8px 15px; } &&-closable { padding-right: 30px; + + .@{alert-prefix-cls}-rtl& { + padding-right: 15px; + padding-left: 30px; + } } &-icon { position: absolute; top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2; left: 16px; + + .@{alert-prefix-cls}-rtl & { + right: 16px; + left: auto; + } } &-description { @@ -81,6 +96,11 @@ outline: none; cursor: pointer; + .@{alert-prefix-cls}-rtl & { + right: auto; + left: 16px; + } + .@{iconfont-css-prefix}-close { color: @alert-close-color; transition: color 0.3s; @@ -104,6 +124,10 @@ color: @alert-text-color; line-height: @line-height-base; border-radius: @border-radius-base; + + .@{alert-prefix-cls}-rtl& { + padding: 15px 64px 15px 15px; + } } &-with-description&-no-icon { @@ -115,6 +139,11 @@ top: 16px; left: 24px; font-size: 24px; + + .@{alert-prefix-cls}-rtl& { + right: 24px; + left: auto; + } } &-with-description &-close-icon { @@ -123,6 +152,11 @@ right: 16px; font-size: @font-size-base; cursor: pointer; + + .@{alert-prefix-cls}-rtl& { + right: auto; + left: 16px; + } } &-with-description &-message { diff --git a/components/auto-complete/__tests__/__snapshots__/index.test.js.snap b/components/auto-complete/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..cf292e7c55 --- /dev/null +++ b/components/auto-complete/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AutoComplete with Custom Input Element Render rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ + + + +
+
+`; diff --git a/components/auto-complete/__tests__/index.test.js b/components/auto-complete/__tests__/index.test.js index 56b1245647..946dc559c9 100644 --- a/components/auto-complete/__tests__/index.test.js +++ b/components/auto-complete/__tests__/index.test.js @@ -2,9 +2,11 @@ import React from 'react'; import { mount } from 'enzyme'; import AutoComplete from '..'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('AutoComplete with Custom Input Element Render', () => { mountTest(AutoComplete); + rtlTest(AutoComplete); it('AutoComplete with custom Input render perfectly', () => { const wrapper = mount( diff --git a/components/avatar/__tests__/Avatar.test.js b/components/avatar/__tests__/Avatar.test.js index 6380a7bd90..faceb7f08f 100644 --- a/components/avatar/__tests__/Avatar.test.js +++ b/components/avatar/__tests__/Avatar.test.js @@ -2,9 +2,11 @@ import React from 'react'; import { mount } from 'enzyme'; import Avatar from '..'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('Avatar Render', () => { mountTest(Avatar); + rtlTest(Avatar); let originOffsetWidth; beforeAll(() => { diff --git a/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap b/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap new file mode 100644 index 0000000000..34a6ce2e49 --- /dev/null +++ b/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Avatar Render rtl render component should be rendered correctly in RTL direction 1`] = ` + + + +`; diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap index 3fb9ed6976..fd646bf689 100644 --- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap @@ -3,7 +3,7 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
- + } /> @@ -33,3 +33,15 @@ ReactDOM.render( mountNode, ); ``` + +```css +/* tile uploaded pictures */ +.avatar-item { + margin-right: 24px; +} + +[class*='-col-rtl'] .avatar-item { + margin-right: 0; + margin-left: 24px; +} +``` diff --git a/components/back-top/__tests__/__snapshots__/index.test.js.snap b/components/back-top/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..d61834c396 --- /dev/null +++ b/components/back-top/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BackTop rtl render component should be rendered correctly in RTL direction 1`] = `null`; diff --git a/components/back-top/__tests__/index.test.js b/components/back-top/__tests__/index.test.js index 6029049d06..e3dd8b7b85 100644 --- a/components/back-top/__tests__/index.test.js +++ b/components/back-top/__tests__/index.test.js @@ -2,10 +2,12 @@ import React from 'react'; import { mount } from 'enzyme'; import { sleep } from '../../../tests/utils'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; import BackTop from '..'; describe('BackTop', () => { mountTest(BackTop); + rtlTest(BackTop); it('should scroll to top after click it', async () => { const wrapper = mount(); diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index c1255b98f5..ec2e75f55d 100755 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -65,10 +65,12 @@ export default class BackTop extends React.Component { }); }; - renderBackTop = ({ getPrefixCls }: ConfigConsumerProps) => { + renderBackTop = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', children } = this.props; const prefixCls = getPrefixCls('back-top', customizePrefixCls); - const classString = classNames(prefixCls, className); + const classString = classNames(prefixCls, className, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); const defaultElement = (
diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less index 7318a74976..f630d5f655 100644 --- a/components/back-top/style/index.less +++ b/components/back-top/style/index.less @@ -14,6 +14,11 @@ height: 40px; cursor: pointer; + &-rtl { + right: auto; + left: 100px; + } + &-content { width: 40px; height: 40px; diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap index d2ca4b512e..828a0447ea 100644 --- a/components/badge/__tests__/__snapshots__/index.test.js.snap +++ b/components/badge/__tests__/__snapshots__/index.test.js.snap @@ -724,6 +724,12 @@ exports[`Badge render correct with negative number 1`] = `
`; +exports[`Badge rtl render component should be rendered correctly in RTL direction 1`] = ` + +`; + exports[`Badge should be compatible with borderColor style 1`] = ` { mountTest(Badge); + rtlTest(Badge); beforeEach(() => { jest.useFakeTimers(); diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md index e155a142f0..225190f718 100644 --- a/components/badge/demo/basic.md +++ b/components/badge/demo/basic.md @@ -37,6 +37,10 @@ ReactDOM.render( .ant-badge:not(.ant-badge-not-a-wrapper) { margin-right: 20px; } +.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) { + margin-right: 0; + margin-left: 20px; +} .head-example { width: 42px; height: 42px; diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md index df0821cdf9..c7b4cb3f7c 100644 --- a/components/badge/demo/no-wrapper.md +++ b/components/badge/demo/no-wrapper.md @@ -40,6 +40,10 @@ ReactDOM.render( .ant-badge-not-a-wrapper:not(.ant-badge-status) { margin-right: 8px; } +.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) { + margin-right: 0; + margin-left: 20px; +} [data-theme="dark"] .site-badge-count-4 .ant-badge-count { background-color: #141414; box-shadow: 0 0 0 1px #434343 inset; diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md index fdf4c06221..5884b3f281 100644 --- a/components/badge/demo/title.md +++ b/components/badge/demo/title.md @@ -31,6 +31,12 @@ ReactDOM.render( .ant-badge:not(.ant-badge-not-a-wrapper) { margin-right: 20px; } + +.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) { + margin-right: 0; + margin-left: 20px; +} + .head-example { width: 42px; height: 42px; diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 8b403ea678..70981eb620 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -74,11 +74,12 @@ export default class Badge extends React.Component { : style; } - getBadgeClassName(prefixCls: string) { + getBadgeClassName(prefixCls: string, direction: string = 'ltr') { const { className, children } = this.props; return classNames(className, prefixCls, { [`${prefixCls}-status`]: this.hasStatus(), [`${prefixCls}-not-a-wrapper`]: !children, + [`${prefixCls}-rtl`]: direction === 'rtl', }) as string; } @@ -156,7 +157,7 @@ export default class Badge extends React.Component { ); } - renderBadge = ({ getPrefixCls }: ConfigConsumerProps) => { + renderBadge = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, scrollNumberPrefixCls: customizeScrollNumberPrefixCls, @@ -200,7 +201,7 @@ export default class Badge extends React.Component { return ( @@ -212,7 +213,7 @@ export default class Badge extends React.Component { } return ( - + {children} { mountTest(Breadcrumb); + rtlTest(Breadcrumb); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap index c2ec43d09a..73d60d3f5b 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap @@ -32,6 +32,12 @@ exports[`Breadcrumb filter React.Fragment 1`] = `
`; +exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = ` +
+`; + exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
`; +exports[`Button rtl render component should be rendered correctly in RTL direction 1`] = ` +); expect(wrapper).toMatchSnapshot(); diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index e5c1a74e86..a4285a3d24 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -12,7 +12,7 @@ export interface ButtonGroupProps { const ButtonGroup: React.SFC = props => ( - {({ getPrefixCls }: ConfigConsumerProps) => { + {({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, size, className, ...others } = props; const prefixCls = getPrefixCls('btn-group', customizePrefixCls); @@ -34,6 +34,7 @@ const ButtonGroup: React.SFC = props => ( prefixCls, { [`${prefixCls}-${sizeCls}`]: sizeCls, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/button/button.tsx b/components/button/button.tsx index f0760bb89e..149acf37b0 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -201,7 +201,7 @@ class Button extends React.Component { return React.Children.count(children) === 1 && !icon && type !== 'link'; } - renderButton = ({ getPrefixCls, autoInsertSpaceInButton }: ConfigConsumerProps) => { + renderButton = ({ getPrefixCls, autoInsertSpaceInButton, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, type, @@ -252,6 +252,7 @@ class Button extends React.Component { [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace, [`${prefixCls}-block`]: block, [`${prefixCls}-dangerous`]: !!danger, + [`${prefixCls}-rtl`]: direction === 'rtl', }); const iconNode = loading ? : icon || null; diff --git a/components/button/style/index.less b/components/button/style/index.less index 23cba3260d..d68f06986f 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -24,6 +24,9 @@ .btn; .btn-default; + &-rtl { + direction: rtl; + } // Make sure that the target of Button's click event always be `button` // Ref: https://github.com/ant-design/ant-design/issues/7034 > i, @@ -48,6 +51,7 @@ .@{btn-prefix-cls}-group &:first-child { &:not(:last-child) { border-right-color: @btn-group-border; + &[disabled] { border-right-color: @btn-default-border; } @@ -57,8 +61,18 @@ .@{btn-prefix-cls}-group &:last-child:not(:first-child), .@{btn-prefix-cls}-group & + & { border-left-color: @btn-group-border; + + .@{btn-prefix-cls}-group-rtl& { + border-right-color: @btn-group-border; + border-left-color: @btn-default-border; + } &[disabled] { border-left-color: @btn-default-border; + + .@{btn-prefix-cls}-group-rtl& { + border-right-color: @btn-default-border; + border-left-color: @btn-group-border; + } } } } @@ -155,15 +169,37 @@ &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) { padding-left: 29px; + + .@{btn-prefix-cls}-rtl& { + padding-right: 29px; + padding-left: @padding-md - 1px; + } + .@{iconfont-css-prefix}:not(:last-child) { margin-left: -14px; + + .@{btn-prefix-cls}-rtl& { + margin-right: -14px; + margin-left: 0; + } } } &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) { padding-left: 24px; + + .@{btn-prefix-cls}-rtl& { + padding-right: 24px; + padding-left: @padding-xs - 1px; + } + .@{iconfont-css-prefix} { margin-left: -17px; + + .@{btn-prefix-cls}-rtl& { + margin-right: -17px; + margin-left: 0; + } } } @@ -181,6 +217,11 @@ > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} { margin-left: 8px; + + .@{btn-prefix-cls}-rtl& { + margin-right: 8px; + margin-left: 0; + } } &-background-ghost { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index cd38bd290e..b316f0f79a 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -400,6 +400,10 @@ & + .@{btnClassName}, & + & { margin-left: -1px; + .@{btnClassName}-rtl& { + margin-right: -1px; + margin-left: auto; + } } .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) { border-left-color: transparent; @@ -407,6 +411,9 @@ .@{btnClassName} { border-radius: 0; } + &.@{btnClassName}-group-rtl { + direction: rtl; + } > .@{btnClassName}:first-child, > span:first-child > .@{btnClassName} { margin-left: 0; @@ -421,11 +428,23 @@ > span:first-child:not(:last-child) > .@{btnClassName} { border-top-left-radius: @btn-border-radius-base; border-bottom-left-radius: @btn-border-radius-base; + .@{btnClassName}-group-rtl& { + border-top-left-radius: 0; + border-top-right-radius: @btn-border-radius-base; + border-bottom-right-radius: @btn-border-radius-base; + border-bottom-left-radius: 0; + } } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { border-top-right-radius: @btn-border-radius-base; border-bottom-right-radius: @btn-border-radius-base; + .@{btnClassName}-group-rtl& { + border-top-left-radius: @btn-border-radius-base; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: @btn-border-radius-base; + } } &-sm { > .@{btnClassName}:only-child { @@ -438,11 +457,23 @@ > span:first-child:not(:last-child) > .@{btnClassName} { border-top-left-radius: @btn-border-radius-sm; border-bottom-left-radius: @btn-border-radius-sm; + .@{btnClassName}-group-rtl& { + border-top-left-radius: 0; + border-top-right-radius: @btn-border-radius-sm; + border-bottom-right-radius: @btn-border-radius-sm; + border-bottom-left-radius: 0; + } } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { border-top-right-radius: @btn-border-radius-sm; border-bottom-right-radius: @btn-border-radius-sm; + .@{btnClassName}-group-rtl& { + border-top-left-radius: @btn-border-radius-sm; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: @btn-border-radius-sm; + } } } & > & { diff --git a/components/calendar/__tests__/__snapshots__/index.test.js.snap b/components/calendar/__tests__/__snapshots__/index.test.js.snap index 74dd50d29a..726a4f9cdb 100644 --- a/components/calendar/__tests__/__snapshots__/index.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/index.test.js.snap @@ -951,3 +951,953 @@ exports[`Calendar Calendar should support locale 1`] = `
`; + +exports[`Calendar rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+
+ + + + + 2000 + +
+ +
+
+
+ + + + + Sep + +
+ +
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+
+
+`; diff --git a/components/calendar/__tests__/index.test.js b/components/calendar/__tests__/index.test.js index d7be188f06..b7a80a3243 100644 --- a/components/calendar/__tests__/index.test.js +++ b/components/calendar/__tests__/index.test.js @@ -9,9 +9,11 @@ import Select from '../../select'; import Group from '../../radio/group'; import Button from '../../radio/radioButton'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('Calendar', () => { mountTest(Calendar); + rtlTest(Calendar, true); function openSelect(wrapper, className) { wrapper diff --git a/components/card/__tests__/__snapshots__/index.test.js.snap b/components/card/__tests__/__snapshots__/index.test.js.snap index 18216decda..3fc36d6673 100644 --- a/components/card/__tests__/__snapshots__/index.test.js.snap +++ b/components/card/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Card rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+`; + exports[`Card should still have padding when card which set padding to 0 is loading 1`] = `
{ mountTest(Card); + rtlTest(Card); beforeAll(() => { jest.useFakeTimers(); diff --git a/components/card/index.tsx b/components/card/index.tsx index 29dc63648e..adbccbf610 100644 --- a/components/card/index.tsx +++ b/components/card/index.tsx @@ -76,7 +76,7 @@ export default class Card extends React.Component { return containGrid; } - renderCard = ({ getPrefixCls }: ConfigConsumerProps) => { + renderCard = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, @@ -108,6 +108,7 @@ export default class Card extends React.Component { [`${prefixCls}-contain-tabs`]: tabList && tabList.length, [`${prefixCls}-${size}`]: size !== 'default', [`${prefixCls}-type-${type}`]: !!type, + [`${prefixCls}-rtl`]: direction === 'rtl', }); const loadingBlockStyle = diff --git a/components/card/style/index.less b/components/card/style/index.less index 7e9c3cdc16..a29238250b 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -17,6 +17,10 @@ border-radius: @card-radius; transition: all 0.3s; + &-rtl { + direction: rtl; + } + &-hoverable { cursor: pointer; &:hover { @@ -76,6 +80,11 @@ color: @text-color; font-weight: normal; font-size: @font-size-base; + + .@{card-prefix-cls}-rtl & { + margin-right: auto; + margin-left: 0; + } } &-body { @@ -98,6 +107,11 @@ 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset; transition: all 0.3s; + + .@{card-prefix-cls}-rtl & { + float: right; + } + &-hoverable { &:hover { position: relative; @@ -142,6 +156,10 @@ color: @text-color-secondary; text-align: center; + .@{card-prefix-cls}-rtl & { + float: right; + } + > span { position: relative; display: block; @@ -205,6 +223,12 @@ &-avatar { float: left; padding-right: 16px; + + .@{card-prefix-cls}-rtl & { + float: right; + padding-right: 0; + padding-left: 16px; + } } &-detail { diff --git a/components/carousel/__tests__/__snapshots__/index.test.js.snap b/components/carousel/__tests__/__snapshots__/index.test.js.snap index 84ebf14cc8..50e2519af5 100644 --- a/components/carousel/__tests__/__snapshots__/index.test.js.snap +++ b/components/carousel/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Carousel rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+
+
+
+
+`; + exports[`Carousel should works for dotPosition bottom 1`] = `
{ mountTest(Carousel); + rtlTest(Carousel); beforeEach(() => { jest.useFakeTimers(); diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index f53a01c110..2e19fae986 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import debounce from 'lodash/debounce'; import { Settings } from '@ant-design/react-slick'; +import classNames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; // Use require over import (will be lifted up) @@ -92,7 +93,7 @@ export default class Carousel extends React.Component { this.slick.slickGoTo(slide, dontAnimate); } - renderCarousel = ({ getPrefixCls }: ConfigConsumerProps) => { + renderCarousel = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const props = { ...this.props, }; @@ -101,11 +102,15 @@ export default class Carousel extends React.Component { props.fade = true; } - const className = getPrefixCls('carousel', props.prefixCls); + const prefixCls = getPrefixCls('carousel', props.prefixCls); const dotsClass = 'slick-dots'; const dotPosition = this.getDotPosition(); props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`; + const className = classNames(prefixCls, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); + return (
diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index a8376fd25d..9a422d4955 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -1,9 +1,15 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -.@{ant-prefix}-carousel { +@carousel-prefix-cls: ~'@{ant-prefix}-carousel'; + +.@{carousel-prefix-cls} { .reset-component; + &-rtl { + direction: rtl; + } + .slick-slider { position: relative; display: block; @@ -47,6 +53,11 @@ left: 0; display: block; + .@{carousel-prefix-cls}-rtl & { + right: 0; + left: auto; + } + &::before, &::after { display: table; @@ -66,9 +77,7 @@ float: left; height: 100%; min-height: 1px; - [dir='rtl'] & { - float: right; - } + img { display: block; } @@ -131,9 +140,19 @@ .slick-prev { left: -25px; + &::before { content: '←'; } + + .@{carousel-prefix-cls}-rtl & { + right: -25px; + left: auto; + + &::before { + content: '→'; + } + } } .slick-next { @@ -141,18 +160,34 @@ &::before { content: '→'; } + + .@{carousel-prefix-cls}-rtl & { + right: auto; + left: -25px; + &::before { + content: '←'; + } + } } // Dots .slick-dots { position: absolute; - display: block; - width: 100%; - height: @carousel-dot-height; - margin: 0; - padding: 0; - text-align: center; + right: 0; + bottom: 0; + left: 0; + z-index: 15; + display: flex !important; + justify-content: center; + margin-right: 15%; + margin-left: 15%; + padding-right: 0; list-style: none; + + .@{carousel-prefix-cls}-rtl& { + flex-direction: row-reverse; + } + &-bottom { bottom: 12px; } @@ -162,13 +197,21 @@ li { position: relative; display: inline-block; + flex: 0 1 auto; + box-sizing: content-box; + width: @carousel-dot-width; + height: @carousel-dot-height; margin: 0 2px; + margin-right: 3px; + margin-left: 3px; padding: 0; text-align: center; + text-indent: -999px; vertical-align: top; + transition: all 0.5s; button { display: block; - width: @carousel-dot-width; + width: 100%; height: @carousel-dot-height; padding: 0; color: transparent; @@ -185,10 +228,12 @@ opacity: 0.75; } } - &.slick-active button { + &.slick-active { width: @carousel-dot-active-width; - background: @component-background; - opacity: 1; + & button { + background: @component-background; + opacity: 1; + } &:hover, &:focus { opacity: 1; @@ -202,25 +247,41 @@ .slick-dots { top: 50%; bottom: auto; + flex-direction: column; width: @carousel-dot-height; height: auto; + margin: 0; transform: translateY(-50%); + + .@{carousel-prefix-cls}-rtl& { + flex-direction: column; + } + &-left { + right: auto; left: 12px; } &-right { right: 12px; + left: auto; } li { - margin: 0 2px; + width: @carousel-dot-height; + height: @carousel-dot-width; + margin: 4px 2px; vertical-align: baseline; button { width: @carousel-dot-height; height: @carousel-dot-width; } - &.slick-active button { + &.slick-active { width: @carousel-dot-height; height: @carousel-dot-active-width; + + button { + width: @carousel-dot-height; + height: @carousel-dot-active-width; + } } } } diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap index ca0cc21764..35c3d29116 100644 --- a/components/cascader/__tests__/__snapshots__/index.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/index.test.js.snap @@ -360,6 +360,243 @@ exports[`Cascader can be selected 3`] = `
`; +exports[`Cascader can be selected in RTL direction 1`] = ` +
+
+
+
    + + +
+
    + +
+
+
+
+`; + +exports[`Cascader can be selected in RTL direction 2`] = ` +
+
+
+
    + + +
+
    + +
+
    + +
+
+
+
+`; + exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
`; +exports[`Cascader popup correctly with defaultValue RTL 1`] = ` +
+
+
+
    + + +
+
    + +
+
    + +
+
+
+
+`; + +exports[`Cascader rtl render component should be rendered correctly in RTL direction 1`] = ` + + + + + + + +`; + exports[`Cascader should highlight keyword and filter when search in Cascader 1`] = ` { focusTest(Cascader); mountTest(Cascader); + rtlTest(Cascader); it('popup correctly when panel is hidden', () => { const wrapper = mount(); @@ -442,4 +445,134 @@ describe('Cascader', () => { }); expect(wrapper.find('input').prop('placeholder')).toBe(customPlaceholder); }); + it('popup correctly with defaultValue RTL', () => { + const wrapper = mount( + + + , + ); + wrapper + .find('Cascader') + .find('input') + .simulate('click'); + expect( + render( + wrapper + .find('Cascader') + .find('Trigger') + .instance() + .getComponent(), + ), + ).toMatchSnapshot(); + }); + it('can be selected in RTL direction', () => { + const options2 = [ + { + value: 'zhejiang', + label: 'Zhejiang', + children: [ + { + value: 'hangzhou', + label: 'Hangzhou', + children: [ + { + value: 'xihu', + label: 'West Lake', + }, + ], + }, + ], + }, + { + value: 'jiangsu', + label: 'Jiangsu', + children: [ + { + value: 'nanjing', + label: 'Nanjing', + children: [ + { + value: 'zhonghuamen', + label: 'Zhong Hua Men', + }, + ], + }, + ], + }, + ]; + const onChange = jest.fn(); + const wrapper = mount( + + + , + ); + + wrapper + .find('Cascader') + .find('input') + .simulate('click'); + let popupWrapper = mount( + wrapper + .find('Cascader') + .find('Trigger') + .instance() + .getComponent(), + ); + popupWrapper + .find('.ant-cascader-menu') + .at(0) + .find('.ant-cascader-menu-item') + .at(0) + .simulate('click'); + expect( + render( + wrapper + .find('Cascader') + .find('Trigger') + .instance() + .getComponent(), + ), + ).toMatchSnapshot(); + popupWrapper = mount( + wrapper + .find('Cascader') + .find('Trigger') + .instance() + .getComponent(), + ); + popupWrapper + .find('.ant-cascader-menu') + .at(1) + .find('.ant-cascader-menu-item') + .at(0) + .simulate('click'); + expect( + render( + wrapper + .find('Cascader') + .find('Trigger') + .instance() + .getComponent(), + ), + ).toMatchSnapshot(); + popupWrapper = mount( + wrapper + .find('Cascader') + .find('Trigger') + .instance() + .getComponent(), + ); + popupWrapper + .find('.ant-cascader-menu') + .at(2) + .find('.ant-cascader-menu-item') + .at(0) + .simulate('click'); + expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything()); + }); }); diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index db878c3fef..80a7ef2c36 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -4,7 +4,13 @@ import arrayTreeFilter from 'array-tree-filter'; import classNames from 'classnames'; import omit from 'omit.js'; import KeyCode from 'rc-util/lib/KeyCode'; -import { CloseCircleFilled, DownOutlined, RightOutlined, RedoOutlined } from '@ant-design/icons'; +import { + CloseCircleFilled, + DownOutlined, + RightOutlined, + RedoOutlined, + LeftOutlined, +} from '@ant-design/icons'; import Input from '../input'; import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider'; @@ -211,7 +217,6 @@ function warningValueNotExist(list: CascaderOptionType[], fieldNames: FieldNames class Cascader extends React.Component { static defaultProps = { transitionName: 'slide-up', - popupPlacement: 'bottomLeft', options: [], disabled: false, allowClear: true, @@ -414,8 +419,21 @@ class Cascader extends React.Component { this.input.blur(); } + getPopupPlacement(direction: string = 'ltr') { + const { popupPlacement } = this.props; + if (popupPlacement !== undefined) { + return popupPlacement; + } + return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + } + renderCascader = ( - { getPopupContainer: getContextPopupContainer, getPrefixCls, renderEmpty }: ConfigConsumerProps, + { + getPopupContainer: getContextPopupContainer, + getPrefixCls, + renderEmpty, + direction, + }: ConfigConsumerProps, locale: CascaderLocale, ) => { const { props, state } = this; @@ -432,11 +450,14 @@ class Cascader extends React.Component { showSearch = false, suffixIcon, notFoundContent, + popupClassName, ...otherProps } = props; const { value, inputFocused } = state; + const isRtlLayout = direction === 'rtl'; + const prefixCls = getPrefixCls('cascader', customizePrefixCls); const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); @@ -453,6 +474,7 @@ class Cascader extends React.Component { [`${prefixCls}-picker-arrow-expand`]: state.popupVisible, }); const pickerCls = classNames(className, `${prefixCls}-picker`, { + [`${prefixCls}-picker-rtl`]: isRtlLayout, [`${prefixCls}-picker-with-value`]: state.inputValue, [`${prefixCls}-picker-disabled`]: disabled, [`${prefixCls}-picker-${size}`]: !!size, @@ -552,7 +574,10 @@ class Cascader extends React.Component { ); - const expandIcon = ; + let expandIcon = ; + if (isRtlLayout) { + expandIcon = ; + } const loadingIcon = ( @@ -562,7 +587,9 @@ class Cascader extends React.Component { const getPopupContainer = props.getPopupContainer || getContextPopupContainer; const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon']); - + const rcCascaderRtlPopupClassName = classNames(popupClassName, { + [`${prefixCls}-menu-${direction}`]: direction === 'rtl', + }); return ( { dropdownMenuColumnStyle={dropdownMenuColumnStyle} expandIcon={expandIcon} loadingIcon={loadingIcon} + popupClassName={rcCascaderRtlPopupClassName} + popupPlacement={this.getPopupPlacement(direction)} > {input} diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 09e696803b..b99938e9f2 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -3,6 +3,8 @@ @import '../../input/style/mixin'; @cascader-prefix-cls: ~'@{ant-prefix}-cascader'; +@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl'; +@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl'; .@{cascader-prefix-cls} { .reset-component; @@ -17,6 +19,12 @@ // because input.less will compile after cascader.less background-color: transparent !important; cursor: pointer; + + .@{picker-rtl-cls} & { + padding-right: @input-padding-horizontal-base; + padding-left: 24px; + text-align: right; + } } &-picker-show-search &-input.@{ant-prefix}-input { @@ -67,6 +75,11 @@ line-height: 20px; white-space: nowrap; text-overflow: ellipsis; + + .@{picker-rtl-cls} & { + padding: 0 @control-padding-horizontal 0 20px; + text-align: right; + } } &-clear { @@ -87,6 +100,11 @@ &:hover { color: @text-color-secondary; } + + .@{picker-rtl-cls} & { + right: auto; + left: @control-padding-horizontal; + } } &:hover &-clear { @@ -109,6 +127,11 @@ &&-expand { transform: rotate(180deg); } + + .@{picker-rtl-cls} & { + right: auto; + left: @control-padding-horizontal; + } } } @@ -120,6 +143,11 @@ &-picker-small &-picker-clear, &-picker-small &-picker-arrow { right: @control-padding-horizontal-sm; + + .@{picker-rtl-cls} & { + right: auto; + left: @control-padding-horizontal; + } } &-menus { @@ -182,6 +210,17 @@ &:only-child { border-radius: @border-radius-base; } + &-rtl { + direction: rtl; + border-right: none; + border-left: @border-width-base @border-style-base @border-color-split; + &:last-child { + margin-right: 0; + margin-left: -1px; + border-left-color: transparent; + border-radius: 0 0 4px 4px; + } + } } &-menu-item { padding: @cascader-dropdown-vertical-padding @control-padding-horizontal; @@ -209,6 +248,11 @@ &-expand { position: relative; padding-right: 24px; + + .@{menu-rtl-cls} & { + padding-right: @control-padding-horizontal; + padding-left: 24px; + } } &-expand &-expand-icon, @@ -218,6 +262,11 @@ position: absolute; right: @control-padding-horizontal; color: @text-color-secondary; + + .@{menu-rtl-cls} & { + right: auto; + left: @control-padding-horizontal; + } } & &-keyword { diff --git a/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap b/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap new file mode 100644 index 0000000000..8e6d96fb87 --- /dev/null +++ b/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox rtl render component should be rendered correctly in RTL direction 1`] = ` + +`; diff --git a/components/checkbox/__tests__/__snapshots__/group.test.js.snap b/components/checkbox/__tests__/__snapshots__/group.test.js.snap index 4fbd6d0d50..7655989f14 100644 --- a/components/checkbox/__tests__/__snapshots__/group.test.js.snap +++ b/components/checkbox/__tests__/__snapshots__/group.test.js.snap @@ -44,3 +44,9 @@ exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
`; + +exports[`CheckboxGroup rtl render component should be rendered correctly in RTL direction 1`] = ` +
+`; diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js index f3bf80bc62..e9d5437d01 100644 --- a/components/checkbox/__tests__/checkbox.test.js +++ b/components/checkbox/__tests__/checkbox.test.js @@ -4,10 +4,12 @@ import Checkbox from '..'; import focusTest from '../../../tests/shared/focusTest'; import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('Checkbox', () => { focusTest(Checkbox); mountTest(Checkbox); + rtlTest(Checkbox); it('responses hover events', () => { const onMouseEnter = jest.fn(); diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.js index 45d3340d3b..ba29f315a7 100644 --- a/components/checkbox/__tests__/group.test.js +++ b/components/checkbox/__tests__/group.test.js @@ -2,9 +2,11 @@ import React from 'react'; import { mount, render } from 'enzyme'; import Checkbox from '../index'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('CheckboxGroup', () => { mountTest(Checkbox.Group); + rtlTest(Checkbox.Group); it('should work basically', () => { const onChange = jest.fn(); diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 08da752a43..e176329c26 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -59,7 +59,7 @@ export default class Collapse extends React.Component { : icon; }; - renderCollapse = ({ getPrefixCls }: ConfigConsumerProps) => { + renderCollapse = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', @@ -71,6 +71,7 @@ export default class Collapse extends React.Component { { [`${prefixCls}-borderless`]: !bordered, [`${prefixCls}-icon-position-${expandIconPosition}`]: true, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/collapse/__tests__/__snapshots__/index.test.js.snap b/components/collapse/__tests__/__snapshots__/index.test.js.snap index 051517bc56..9ef78e569a 100644 --- a/components/collapse/__tests__/__snapshots__/index.test.js.snap +++ b/components/collapse/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Collapse rtl render component should be rendered correctly in RTL direction 1`] = ` +
+`; + exports[`Collapse should render extra node of panel 1`] = `
{ // Fix css-animation deps on these @@ -17,6 +18,7 @@ describe('Collapse', () => { // eslint-disable-next-line global-require const Collapse = require('..').default; mountTest(Collapse); + rtlTest(Collapse); it('should support remove expandIcon', () => { const wrapper = mount( diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 066403e04c..036e6b1604 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -11,6 +11,10 @@ border-bottom: 0; border-radius: @collapse-panel-border-radius; + &-rtl { + direction: rtl; + } + & > &-item { border-bottom: @border-width-base @border-style-base @border-color-base; @@ -30,6 +34,11 @@ cursor: pointer; transition: all 0.3s; + .@{collapse-prefix-cls}-rtl & { + padding: @collapse-header-padding; + padding-right: @collapse-header-padding-extra; + } + .@{collapse-prefix-cls}-arrow { .iconfont-mixin(); @@ -42,11 +51,19 @@ & svg { transition: transform 0.24s; + + .@{collapse-prefix-cls}-rtl& { + transform: rotate(180deg); + } } } .@{collapse-prefix-cls}-extra { float: right; + + .@{collapse-prefix-cls}-rtl& { + float: left; + } } &:focus { @@ -57,6 +74,11 @@ &.@{collapse-prefix-cls}-no-arrow { > .@{collapse-prefix-cls}-header { padding-left: 12px; + + .@{collapse-prefix-cls}-rtl& { + padding-right: 12px; + padding-left: 0; + } } } } diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap index a67fdf23f7..d27cc5b608 100644 --- a/components/comment/__tests__/__snapshots__/demo.test.js.snap +++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap @@ -74,7 +74,7 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = ` 0 @@ -104,7 +104,7 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = ` 0 diff --git a/components/comment/__tests__/__snapshots__/index.test.js.snap b/components/comment/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..c30d2f1fa5 --- /dev/null +++ b/components/comment/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Comment rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+
+
+
+
+
+
+`; diff --git a/components/comment/__tests__/index.test.js b/components/comment/__tests__/index.test.js index 8eb7b8fc37..272d085d66 100644 --- a/components/comment/__tests__/index.test.js +++ b/components/comment/__tests__/index.test.js @@ -1,6 +1,8 @@ import Comment from '../index'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('Comment', () => { mountTest(Comment); + rtlTest(Comment); }); diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md index 7ac6d2afa7..cbb17a0e3c 100644 --- a/components/comment/demo/basic.md +++ b/components/comment/demo/basic.md @@ -51,7 +51,7 @@ class App extends React.Component { onClick: this.like, })} - {likes} + {likes} , @@ -59,7 +59,7 @@ class App extends React.Component { onClick: this.dislike, })} - {dislikes} + {dislikes} , Reply to, ]; @@ -93,3 +93,16 @@ class App extends React.Component { ReactDOM.render(, mountNode); ``` + +```css +/* tile uploaded pictures */ +.comment-action { + padding-left: 8px; + cursor: 'auto'; +} + +[class*='-col-rtl'] .comment-action { + padding-right: 8px; + padding-left: 0; +} +``` diff --git a/components/comment/index.tsx b/components/comment/index.tsx index 6de7e7dc15..3287d24ecc 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -37,7 +37,7 @@ export default class Comment extends React.Component { return
{children}
; }; - renderComment = ({ getPrefixCls }: ConfigConsumerProps) => { + renderComment = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { actions, author, @@ -86,8 +86,11 @@ export default class Comment extends React.Component {
); + const cls = classNames(prefixCls, className, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); return ( -
+
{comment} {children ? this.renderNested(prefixCls, children) : null}
diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 411597c4b9..43085d4b7e 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -7,6 +7,10 @@ position: relative; background-color: @comment-bg; + &-rtl { + direction: rtl; + } + &-inner { display: flex; padding: @comment-padding-base; @@ -17,6 +21,11 @@ flex-shrink: 0; margin-right: 12px; cursor: pointer; + + .@{comment-prefix-cls}-rtl & { + margin-right: 0; + margin-left: 12px; + } img { width: 32px; height: 32px; @@ -42,6 +51,11 @@ padding-right: 8px; font-size: @comment-font-size-sm; line-height: 18px; + + .@{comment-prefix-cls}-rtl & { + padding-right: 0; + padding-left: 8px; + } } &-name { @@ -71,6 +85,10 @@ &-actions { margin-top: 12px; padding-left: 0; + + .@{comment-prefix-cls}-rtl & { + padding-right: 0; + } > li { display: inline-block; color: @comment-action-color; @@ -81,6 +99,12 @@ cursor: pointer; transition: color 0.3s; user-select: none; + + .@{comment-prefix-cls}-rtl & { + padding-right: 0; + padding-left: 10px; + } + &:hover { color: @comment-action-hover-color; } @@ -90,5 +114,10 @@ &-nested { margin-left: @comment-nest-indent; + + .@{comment-prefix-cls}-rtl & { + margin-right: @comment-nest-indent; + margin-left: 0; + } } } diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx index 531c285d0e..a57198740a 100644 --- a/components/config-provider/context.tsx +++ b/components/config-provider/context.tsx @@ -17,6 +17,7 @@ export interface ConfigConsumerProps { pageHeader?: { ghost: boolean; }; + direction?: 'ltr' | 'rtl'; } export const ConfigContext = React.createContext({ diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md new file mode 100644 index 0000000000..50a4070780 --- /dev/null +++ b/components/config-provider/demo/direction.md @@ -0,0 +1,613 @@ +--- +order: 2 +title: + zh-CN: 方向 + en-US: Direction +--- + +## zh-CN + +这里列出了支持 `rtl` 方向的组件，您可以在演示中切换方向。 + +## en-US + +Components which support rtl direction are listed here, you can toggle the direction in the demo. + +```jsx +import { + Input, + Col, + Row, + Select, + InputNumber, + ConfigProvider, + Cascader, + Radio, + Switch, + Tree, + TreeSelect, + Modal, + Button, + Pagination, + Steps, + Rate, + Badge, +} from 'antd'; + +import { + SearchOutlined as SearchIcon, + SmileOutlined, + DownloadOutlined, + LeftOutlined, + RightOutlined, + MinusOutlined, + PlusOutlined, +} from '@ant-design/icons'; + +const InputGroup = Input.Group; +const ButtonGroup = Button.Group; +const { Option } = Select; +const { TreeNode } = Tree; +const { Search } = Input; +const { Step } = Steps; + +const cascaderOptions = [ + { + value: 'tehran', + label: 'تهران', + children: [ + { + value: 'tehran-c', + label: 'تهران', + children: [ + { + value: 'saadat-abad', + label: 'سعادت آیاد', + }, + ], + }, + ], + }, + { + value: 'ardabil', + label: 'اردبیل', + children: [ + { + value: 'ardabil-c', + label: 'اردبیل', + children: [ + { + value: 'primadar', + label: 'پیرمادر', + }, + ], + }, + ], + }, + { + value: 'gilan', + label: 'گیلان', + children: [ + { + value: 'rasht', + label: 'رشت', + children: [ + { + value: 'district-3', + label: 'منطقه ۳', + }, + ], + }, + ], + }, +]; + +class Page extends React.Component { + state = { + currentStep: 0, + modalVisible: false, + + badgeCount: 5, + showBadge: true, + }; + + selectBefore = ( + + ); + + selectAfter = ( + + ); + + // ==== Cascader ==== + cascaderFilter = (inputValue, path) => { + return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); + }; + + onCascaderChange = value => { + console.log(value); + }; + // ==== End Cascader ==== + + // ==== Modal ==== + showModal = () => { + this.setState({ + modalVisible: true, + }); + }; + + handleOk = e => { + console.log(e); + this.setState({ + modalVisible: false, + }); + }; + + handleCancel = e => { + console.log(e); + this.setState({ + modalVisible: false, + }); + }; + // ==== End Modal ==== + + onStepsChange = currentStep => { + console.log('onChange:', currentStep); + this.setState({ currentStep }); + }; + + // ==== Badge ==== + + increaseBadge = () => { + const badgeCount = this.state.badgeCount + 1; + this.setState({ badgeCount }); + }; + + declineBadge = () => { + let badgeCount = this.state.badgeCount - 1; + if (badgeCount < 0) { + badgeCount = 0; + } + this.setState({ badgeCount }); + }; + + onChangeBadge = showBadge => { + this.setState({ showBadge }); + }; + // ==== End Badge ==== + + render() { + const { currentStep } = this.state; + return ( +
+ + +

Cascader example:

+ } + options={cascaderOptions} + onChange={this.onCascaderChange} + placeholder="یک مورد انتخاب کنید" + popupPlacement={this.props.popupPlacement} + /> +      With search: + } + options={cascaderOptions} + onChange={this.onCascaderChange} + placeholder="Select an item" + popupPlacement={this.props.popupPlacement} + showSearch={this.cascaderFilter} + /> + + +
+ + +

Switch example:

+    + +    + +    + + + +

Radio Group example:

+ + + تهران + + اصفهان + + فارس + خوزستان + + + +
+ + +

Button example:

+
+ + +
+ + + + + + +
+ + +

Tree example:

+ + + + + + + + sss} key="0-0-1-0" /> + + + + + +
+ + +

Input (Input Group) example:

+ + + + + + + + + + +
+ + + + +
+ + + + + +
+ +
+
+
+ +
+
+ + + +

Select example:

+ + + + + + +

TreeSelect example:

+
+ + + + + + + + sss} + key="random3" + /> + + + +
+ + +
+ + +

Modal example:

+
+ + +

نگاشته‌های خود را اینجا قراردهید

+

نگاشته‌های خود را اینجا قراردهید

+

نگاشته‌های خود را اینجا قراردهید

+ +
+ + +
+ + +

Steps example:

+
+ + + + + +
+ + + + + +
+ + +
+ + +

Rate example:

+
+ +
+ * Note: Half star not implemented in RTL direction, it will be + supported after rc-rate{' '} + implement rtl support. +
+ + +

Badge example:

+ + + + + + +
+
+ + +

Pagination example:

+ + + +
+ + +

Grid System example:

+
+
+

+ * Note: Every calculation in RTL grid system is from right side + (offset, push, etc.) +

+ + col-8 + + col-8 + + + + + col-6 col-offset-6 + + + col-6 col-offset-6 + + + + + col-12 col-offset-6 + + + + + col-18 col-push-6 + + + col-6 col-pull-18 + + +
+
+ + +
+ ); + } +} + +class App extends React.Component { + state = { + direction: 'ltr', + popupPlacement: 'bottomLeft', + }; + + changeDirection = e => { + const directionValue = e.target.value; + this.setState({ direction: directionValue }); + if (directionValue === 'rtl') { + this.setState({ popupPlacement: 'bottomRight' }); + } else { + this.setState({ popupPlacement: 'bottomLeft' }); + } + }; + + render() { + const { direction } = this.state; + return ( +
+
+ Change direction of components: + + + LTR + + + RTL + + +
+ + + +
+ ); + } +} + +ReactDOM.render(, mountNode); +``` + +```css +.direction-components { + padding-top: 16px; + border-top: 1px solid rgba(150, 150, 150, 0.5); +} + +.example { + margin: 16px 0; +} + +.example > * { + margin-right: 8px; +} + +.change-direction { + margin-bottom: 16px; +} +.demo-block-title { + margin: 0 8px 18px 8px; + border-bottom: 1px solid rgba(150, 150, 150, 0.5); +} +.button-demo .ant-btn, +.button-demo .ant-btn-group { + margin-right: 8px; + margin-bottom: 12px; +} +.button-demo .ant-btn-group > .ant-btn, +.button-demo .ant-btn-group > span > .ant-btn { + margin-right: 0; + margin-left: 0; +} +.head-example { + display: inline-block; + width: 42px; + height: 42px; + vertical-align: middle; + background: #eee; + border-radius: 4px; +} + +.ant-badge:not(.ant-badge-not-a-wrapper) { + margin-right: 20px; +} +.ant-badge-rtl:not(.ant-badge-not-a-wrapper) { + margin-right: 0; + margin-left: 20px; +} +``` diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 16d8d72f5d..952b27bd93 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -45,6 +45,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | | | prefixCls | set prefix class | string | ant | | | pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | | +| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | string: 'ltr', 'rtl' | ltr | | ## FAQ diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 7022d9a9f3..7731cefbd0 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -36,6 +36,7 @@ export interface ConfigProviderProps { pageHeader?: { ghost: boolean; }; + direction?: 'ltr' | 'rtl'; } class ConfigProvider extends React.Component { @@ -57,6 +58,7 @@ class ConfigProvider extends React.Component { form, locale, pageHeader, + direction, } = this.props; const config: ConfigConsumerProps = { @@ -65,6 +67,7 @@ class ConfigProvider extends React.Component { csp, autoInsertSpaceInButton, locale: locale || legacyLocale, + direction, }; if (getPopupContainer) { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 5395751b63..b4ae3eacaf 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -46,6 +46,7 @@ return ( | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | | | prefixCls | 设置统一样式前缀 | string | ant | | | pageHeader | 统一设置 pageHeader 的 ghost，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | | +| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | string: 'ltr', 'rtl' | ltr | | ## FAQ diff --git a/components/date-picker/__tests__/__snapshots__/mount.test.js.snap b/components/date-picker/__tests__/__snapshots__/mount.test.js.snap new file mode 100644 index 0000000000..0d7a784b52 --- /dev/null +++ b/components/date-picker/__tests__/__snapshots__/mount.test.js.snap @@ -0,0 +1,188 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`mount rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ + + + + + +
+
+`; + +exports[`mount rtl render component should be rendered correctly in RTL direction 2`] = ` +
+
+ + + + + + +
+
+`; + +exports[`mount rtl render component should be rendered correctly in RTL direction 3`] = ` +
+
+ + + + + + +
+
+`; + +exports[`mount rtl render component should be rendered correctly in RTL direction 4`] = ` +
+
+ +
+
+ + → + +
+
+ +
+
+ + + + + +
+`; diff --git a/components/date-picker/__tests__/mount.test.js b/components/date-picker/__tests__/mount.test.js index 80ec394e79..55aa7b8e74 100644 --- a/components/date-picker/__tests__/mount.test.js +++ b/components/date-picker/__tests__/mount.test.js @@ -1,5 +1,6 @@ import DatePicker from '..'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; const { MonthPicker, WeekPicker, RangePicker } = DatePicker; @@ -8,4 +9,9 @@ describe('mount', () => { mountTest(MonthPicker); mountTest(WeekPicker); mountTest(RangePicker); + + rtlTest(DatePicker); + rtlTest(MonthPicker); + rtlTest(WeekPicker); + rtlTest(RangePicker); }); diff --git a/components/date-picker/generatePicker.tsx b/components/date-picker/generatePicker.tsx index 130b8e5a85..12c492f3af 100644 --- a/components/date-picker/generatePicker.tsx +++ b/components/date-picker/generatePicker.tsx @@ -142,7 +142,7 @@ function generatePicker(generateConfig: GenerateConfig) { }; renderPicker = (locale: any) => { - const { getPrefixCls } = this.context; + const { getPrefixCls, direction } = this.context; const { prefixCls: customizePrefixCls, className, size, ...restProps } = this.props; const { format, showTime } = this.props as any; const prefixCls = getPrefixCls('picker', customizePrefixCls); @@ -187,6 +187,7 @@ function generatePicker(generateConfig: GenerateConfig) { superPrevIcon={} superNextIcon={} components={Components} + direction={direction} /> ); }; @@ -247,7 +248,7 @@ function generatePicker(generateConfig: GenerateConfig) { }; renderPicker = (locale: any) => { - const { getPrefixCls } = this.context; + const { getPrefixCls, direction } = this.context; const { prefixCls: customizePrefixCls, className, size, ...restProps } = this.props; const { format, showTime, picker } = this.props as any; const prefixCls = getPrefixCls('picker', customizePrefixCls); @@ -282,6 +283,7 @@ function generatePicker(generateConfig: GenerateConfig) { superPrevIcon={} superNextIcon={} components={Components} + direction={direction} /> ); }; diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 6060c2e73f..da5288ac87 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -32,6 +32,10 @@ border-radius: @border-radius-base; transition: border @animation-duration-slow, box-shadow @animation-duration-slow; + &-rtl { + direction: rtl; + } + &:hover, &-focused { .hover(); @@ -99,6 +103,11 @@ margin-left: @padding-xs / 2; color: @disabled-color; pointer-events: none; + + .@{picker-prefix-cls}-rtl & { + margin-right: @padding-xs / 2; + margin-left: 0; + } } &-clear { @@ -115,6 +124,11 @@ &:hover { color: @text-color-secondary; } + + .@{picker-prefix-cls}-rtl & { + right: auto; + left: 0; + } } &-separator { @@ -126,6 +140,11 @@ font-size: @font-size-lg; line-height: @font-size-lg; text-align: center; + + .@{picker-prefix-cls}-rtl & { + transform: rotate(180deg); + transform-origin: 50% 60%; + } } // ======================== Range ========================= @@ -136,6 +155,11 @@ // Clear .@{picker-prefix-cls}-clear { right: @input-padding-horizontal-base; + + .@{picker-prefix-cls}-rtl& { + right: auto; + left: @input-padding-horizontal-base; + } } &:hover { @@ -211,6 +235,10 @@ text-align: left; list-style: none; + .@{picker-prefix-cls}-dropdown-rtl & { + text-align: right; + } + > li { display: inline-block; } @@ -222,6 +250,12 @@ .@{picker-prefix-cls}-ok { float: right; margin-left: @padding-xs; + + .@{picker-prefix-cls}-dropdown-rtl & { + float: left; + margin-right: @padding-xs; + margin-left: 0; + } } } diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less index a37d0c63df..a1e30d8059 100644 --- a/components/date-picker/style/panel.less +++ b/components/date-picker/style/panel.less @@ -16,6 +16,10 @@ border-radius: @border-radius-base; outline: none; + &-rtl { + direction: rtl; + } + &-focused { border-color: @primary-color; } @@ -126,11 +130,19 @@ &-prev-icon, &-super-prev-icon { transform: rotate(-45deg); + + .@{picker-prefix-cls}-panel-rtl & { + transform: rotate(135deg); + } } &-next-icon, &-super-next-icon { transform: rotate(135deg); + + .@{picker-prefix-cls}-panel-rtl & { + transform: rotate(-45deg); + } } // ======================== Body ======================== @@ -226,9 +238,19 @@ &-in-view&-range-start::before { left: 50%; + + .@{picker-prefix-cls}-panel-rtl & { + right: 50%; + left: 0; + } } &-in-view&-range-end::before { right: 50%; + + .@{picker-prefix-cls}-panel-rtl & { + right: 0; + left: 50%; + } } // >>> Range Hover @@ -289,18 +311,38 @@ .@{cellClassName}::after { right: -6px - @border-width-base; left: 0; + + .@{picker-prefix-cls}-panel-rtl & { + right: 0; + left: -6px - @border-width-base; + } } .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after { right: 0; left: -6px - @border-width-base; + + .@{picker-prefix-cls}-panel-rtl & { + right: -6px - @border-width-base; + left: 0; + } } // Hover with range start & end &-range-hover&-range-start::after { right: 50%; + + .@{picker-prefix-cls}-panel-rtl & { + right: 0; + left: 50%; + } } &-range-hover&-range-end::after { left: 50%; + + .@{picker-prefix-cls}-panel-rtl & { + right: 50%; + left: 0; + } } // Edge start @@ -312,6 +354,15 @@ border-left: @border-width-base dashed @picker-date-hover-range-border-color; border-top-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base; + + .@{picker-prefix-cls}-panel-rtl & { + right: 6px; + left: 0; + border-right: @border-width-base dashed @picker-date-hover-range-border-color; + border-left: none; + border-top-right-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; + } } // Edge end @@ -323,6 +374,15 @@ border-right: @border-width-base dashed @picker-date-hover-range-border-color; border-top-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base; + + .@{picker-prefix-cls}-panel-rtl & { + right: 0; + left: 6px; + border-right: none; + border-left: @border-width-base dashed @picker-date-hover-range-border-color; + border-top-left-radius: @border-radius-base; + border-bottom-left-radius: @border-radius-base; + } } // >>> Disabled @@ -451,11 +511,23 @@ left: @hover-cell-fixed-distance; border-left: @border-width-base dashed @picker-date-hover-range-border-color; border-radius: @border-radius-base 0 0 @border-radius-base; + + .@{picker-prefix-cls}-panel-rtl & { + right: @hover-cell-fixed-distance; + border-right: @border-width-base dashed @picker-date-hover-range-border-color; + border-radius: 0 @border-radius-base @border-radius-base 0; + } } .@{picker-prefix-cls}-cell-range-hover-end::after { right: @hover-cell-fixed-distance; border-right: @border-width-base dashed @picker-date-hover-range-border-color; border-radius: 0 @border-radius-base @border-radius-base 0; + + .@{picker-prefix-cls}-panel-rtl & { + left: @hover-cell-fixed-distance; + border-left: @border-width-base dashed @picker-date-hover-range-border-color; + border-radius: @border-radius-base 0 0 @border-radius-base; + } } } @@ -548,6 +620,10 @@ width: auto; min-width: auto; + .@{picker-prefix-cls}-panel-rtl & { + direction: ltr; + } + .@{picker-prefix-cls}-content { display: flex; flex: auto; diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 2e7e3c90a9..beae4c8adb 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -224,7 +224,7 @@ class Descriptions extends React.Component< render() { return ( - {({ getPrefixCls }: ConfigConsumerProps) => { + {({ getPrefixCls, direction }: ConfigConsumerProps) => { const { className, prefixCls: customizePrefixCls, @@ -258,6 +258,7 @@ class Descriptions extends React.Component< className={classNames(prefixCls, className, { [`${prefixCls}-${size}`]: size !== 'default', [`${prefixCls}-bordered`]: !!bordered, + [`${prefixCls}-rtl`]: direction === 'rtl', })} style={style} > diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index dae1baeb76..c55da141c3 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -8,6 +8,10 @@ @descriptions-small-padding: 8px 16px; .@{descriptions-prefix-cls} { + &-rtl { + direction: rtl; + } + &-title { margin-bottom: 20px; color: @heading-color; @@ -48,6 +52,10 @@ top: -0.5px; margin: 0 8px 0 2px; content: ' '; + + .@{descriptions-prefix-cls}-rtl & { + margin: 0 2px 0 8px; + } } } diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js index 9c40518e3c..387975e629 100644 --- a/components/drawer/__tests__/Drawer.test.js +++ b/components/drawer/__tests__/Drawer.test.js @@ -2,9 +2,11 @@ import React from 'react'; import { render } from 'enzyme'; import Drawer from '..'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('Drawer', () => { mountTest(Drawer); + rtlTest(Drawer); it('render correctly', () => { const wrapper = render( diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap index b9cff5616e..b46e59259e 100644 --- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap +++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap @@ -350,6 +350,8 @@ exports[`Drawer render top drawer 1`] = `
`; +exports[`Drawer rtl render component should be rendered correctly in RTL direction 1`] = `null`; + exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
- + @@ -102,6 +95,21 @@ ReactDOM.render(, mountNode); border-radius: 0 0 4px 4px; background: #fff; } + +.site-multi-level-drawer-footer button:first-child { + margin-right: 8px; +} + +[class*='-drawer-rtl'] .site-multi-level-drawer-footer { + text-align: left; + right: 0; + left: auto; +} + +[class*='-drawer-rtl'] .site-multi-level-drawer-footer button:first-child { + margin-right: 0; + margin-left: 8px; +} ``` diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 997a7b030c..b7e644f935 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -92,7 +92,7 @@ export default class Progress extends React.Component { ); } - renderProgress = ({ getPrefixCls }: ConfigConsumerProps) => { + renderProgress = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { props } = this; const { prefixCls: customizePrefixCls, @@ -133,6 +133,7 @@ export default class Progress extends React.Component { [`${prefixCls}-status-${progressStatus}`]: true, [`${prefixCls}-show-info`]: showInfo, [`${prefixCls}-${size}`]: size, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/progress/style/index.less b/components/progress/style/index.less index eced1d33b1..4a6f949df7 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -8,6 +8,10 @@ display: inline-block; + &-rtl { + direction: rtl; + } + &-line { position: relative; width: 100%; @@ -42,6 +46,13 @@ .@{progress-prefix-cls}-show-info & { margin-right: ~'calc(-2em - 8px)'; padding-right: ~'calc(2em + 8px)'; + + .@{progress-prefix-cls}-rtl& { + margin-right: 0; + margin-left: ~'calc(-2em - 8px)'; + padding-right: 0; + padding-left: ~'calc(2em + 8px)'; + } } } @@ -82,6 +93,11 @@ top: 0; left: 0; background-color: @success-color; + + .@{progress-prefix-cls}-rtl & { + right: 0; + left: auto; + } } &-text { @@ -98,6 +114,12 @@ .@{iconfont-css-prefix} { font-size: @font-size-base; } + + .@{progress-prefix-cls}-rtl & { + margin-right: 8px; + margin-left: 0; + text-align: right; + } } &-status-active { diff --git a/components/radio/__tests__/__snapshots__/radio.test.js.snap b/components/radio/__tests__/__snapshots__/radio.test.js.snap index f97e6af4c9..78523004d5 100644 --- a/components/radio/__tests__/__snapshots__/radio.test.js.snap +++ b/components/radio/__tests__/__snapshots__/radio.test.js.snap @@ -1,5 +1,47 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Radio rtl render component should be rendered correctly in RTL direction 1`] = ` + +`; + +exports[`Radio rtl render component should be rendered correctly in RTL direction 2`] = ` +
+`; + +exports[`Radio rtl render component should be rendered correctly in RTL direction 3`] = ` + +`; + exports[`Radio should render correctly 1`] = `
{ const genSkeleton = props => @@ -15,6 +16,7 @@ describe('Skeleton', () => { const genSkeletonInput = props => mount(); mountTest(Skeleton); + rtlTest(Skeleton); it('should without avatar and paragraph', () => { const wrapperSmall = genSkeleton({ avatar: false, paragraph: false }); diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index de38c80423..ff4bb1b974 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -12,11 +12,21 @@ display: table; width: 100%; + &-rtl { + direction: rtl; + } + &-header { display: table-cell; padding-right: 16px; vertical-align: top; + .@{skeleton-prefix-cls}-rtl & { + padding-right: 0; + padding-left: 16px; + } + + // Avatar .@{skeleton-avatar-prefix-cls} { .skeleton-element-avatar(); } @@ -77,11 +87,19 @@ .@{skeleton-title-prefix-cls}, .@{skeleton-paragraph-prefix-cls} > li { .skeleton-color(); + + .@{skeleton-prefix-cls}-rtl& { + animation-name: ~'@{skeleton-prefix-cls}-loading-rtl'; + } } } .@{skeleton-avatar-prefix-cls} { .skeleton-color(); + + .@{skeleton-prefix-cls}-rtl& { + animation-name: ~'@{skeleton-prefix-cls}-loading-rtl'; + } } .@{skeleton-button-prefix-cls} { @@ -212,3 +230,12 @@ background-position: 0 50%; } } + +@keyframes ~"@{skeleton-prefix-cls}-loading-rtl" { + 0% { + background-position: 0% 50%; + } + 100% { + background-position: 100% 50%; + } +} diff --git a/components/slider/__tests__/__snapshots__/index.test.js.snap b/components/slider/__tests__/__snapshots__/index.test.js.snap index f79a188d8c..22197726e4 100644 --- a/components/slider/__tests__/__snapshots__/index.test.js.snap +++ b/components/slider/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,85 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Slider rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`Slider should render in RTL direction 1`] = ` +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; + exports[`Slider should show tooltip when hovering slider handler 1`] = `
{ mountTest(Slider); + rtlTest(Slider); it('should show tooltip when hovering slider handler', () => { const wrapper = mount(); @@ -65,4 +68,13 @@ describe('Slider', () => { wrapper = mount(); expect(wrapper.find('.ant-tooltip-content').length).toBe(0); }); + + it('should render in RTL direction', () => { + const wrapper = mount( + + + , + ); + expect(render(wrapper)).toMatchSnapshot(); + }); }); diff --git a/components/slider/index.tsx b/components/slider/index.tsx index b770123d17..75247d7177 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import RcSlider from 'rc-slider/lib/Slider'; import RcRange from 'rc-slider/lib/Range'; import RcHandle from 'rc-slider/lib/Handle'; +import classNames from 'classnames'; import Tooltip, { TooltipPlacement } from '../tooltip'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; @@ -126,19 +127,28 @@ export default class Slider extends React.Component { this.rcSlider.blur(); } - renderSlider = ({ getPrefixCls }: ConfigConsumerProps) => { + renderSlider = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, tooltipPrefixCls: customizeTooltipPrefixCls, range, + className, ...restProps } = this.props; const prefixCls = getPrefixCls('slider', customizePrefixCls); const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls); + const cls = classNames(className, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); + // make reverse default on rtl direction + if (direction === 'rtl' && !restProps.vertical) { + restProps.reverse = !restProps.reverse; + } if (range) { return ( this.handleWithTooltip({ @@ -155,6 +165,7 @@ export default class Slider extends React.Component { return ( this.handleWithTooltip({ diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 9d24b4ee37..fd696812a8 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -15,6 +15,10 @@ .vertical(); + &-rtl { + direction: rtl; + } + &-with-marks { margin-bottom: 28px; } @@ -78,6 +82,11 @@ left: 0; width: 100%; font-size: @font-size-base; + + .@{slider-prefix-cls}-rtl & { + right: 0; + left: auto; + } } &-mark-text { @@ -110,11 +119,26 @@ border: 2px solid @slider-dot-border-color; border-radius: 50%; cursor: pointer; + + .@{slider-prefix-cls}-rtl & { + margin-right: -4px; + margin-left: 0; + } &:first-child { margin-left: -4px; + + .@{slider-prefix-cls}-rtl & { + margin-right: -4px; + margin-left: 0; + } } &:last-child { margin-left: -4px; + + .@{slider-prefix-cls}-rtl & { + margin-right: -4px; + margin-left: 0; + } } &-active { border-color: @slider-dot-border-color-active; @@ -162,6 +186,11 @@ .@{slider-prefix-cls}-handle { margin-bottom: -7px; margin-left: -5px; + + .@{slider-prefix-cls}-rtl& { + margin-right: -5px; + margin-left: 0; + } } .@{slider-prefix-cls}-mark { @@ -169,11 +198,21 @@ left: 12px; width: 18px; height: 100%; + + .@{slider-prefix-cls}-rtl& { + right: 12px; + left: auto; + } } .@{slider-prefix-cls}-mark-text { left: 4px; white-space: nowrap; + + .@{slider-prefix-cls}-rtl& { + right: 4px; + left: auto; + } } .@{slider-prefix-cls}-step { @@ -185,6 +224,11 @@ top: auto; left: 2px; margin-bottom: -4px; + + .@{slider-prefix-cls}-rtl& { + right: 2px; + left: auto; + } } } diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap index 0485c9e095..f7cc1bb0fb 100644 --- a/components/spin/__tests__/__snapshots__/index.test.js.snap +++ b/components/spin/__tests__/__snapshots__/index.test.js.snap @@ -13,6 +13,29 @@ exports[`Spin if indicator set null should not be render default indicator 1`] = `; +exports[`Spin rtl render component should be rendered correctly in RTL direction 1`] = ` +
+ + + + + + +
+`; + exports[`Spin should render custom indicator when it's set 1`] = `
{ mountTest(Spin); + rtlTest(Spin); it('should only affect the spin element when set style to a nested xx', () => { const wrapper = mount( diff --git a/components/spin/index.tsx b/components/spin/index.tsx index c29235e6d2..99f57063b4 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -129,7 +129,7 @@ class Spin extends React.Component { return !!(this.props && this.props.children); } - renderSpin = ({ getPrefixCls }: ConfigConsumerProps) => { + renderSpin = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, @@ -149,6 +149,7 @@ class Spin extends React.Component { [`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-spinning`]: spinning, [`${prefixCls}-show-text`]: !!tip, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/spin/style/index.less b/components/spin/style/index.less index a211d7a1d1..904cd92074 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -15,6 +15,10 @@ opacity: 0; transition: transform 0.3s @ease-in-out-circ; + &-rtl { + direction: rtl; + } + &-spinning { position: static; display: inline-block; @@ -162,6 +166,11 @@ &-spin { transform: rotate(45deg); animation: antRotate 1.2s infinite linear; + + .@{spin-prefix-cls}-rtl & { + transform: rotate(-45deg); + animation-name: antRotateRtl; + } } } @@ -212,3 +221,9 @@ transform: rotate(405deg); } } + +@keyframes antRotateRtl { + to { + transform: rotate(-405deg); + } +} diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx index 3fcb09bdd5..2478c39397 100644 --- a/components/statistic/Statistic.tsx +++ b/components/statistic/Statistic.tsx @@ -34,6 +34,7 @@ const Statistic: React.SFC = props => { valueRender, prefix, suffix, + direction, } = props; let valueNode: React.ReactNode = ; @@ -41,9 +42,11 @@ const Statistic: React.SFC = props => { if (valueRender) { valueNode = valueRender(valueNode); } - + const cls = classNames(prefixCls, className, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); return ( -
+
{title &&
{title}
}
{prefix && {prefix}} diff --git a/components/statistic/__tests__/__snapshots__/index.test.js.snap b/components/statistic/__tests__/__snapshots__/index.test.js.snap index 0fed115b26..da331383ed 100644 --- a/components/statistic/__tests__/__snapshots__/index.test.js.snap +++ b/components/statistic/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Statistic rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ + + 0 + + +
+
+`; + exports[`Statistic support negetive number 1`] = `
{ mountTest(Statistic); mountTest(Statistic.Countdown); + rtlTest(Statistic); beforeAll(() => { MockDate.set(moment('2018-11-28 00:00:00')); diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less index 4d9e19c5fa..de9d375a0a 100644 --- a/components/statistic/style/index.less +++ b/components/statistic/style/index.less @@ -6,6 +6,10 @@ .@{statistic-prefix-cls} { .reset-component; + &-rtl { + direction: rtl; + } + &-title { margin-bottom: 4px; color: @text-color-secondary; @@ -30,11 +34,21 @@ &-prefix { margin-right: 4px; + + .@{statistic-prefix-cls}-rtl & { + margin-right: 0; + margin-left: 4px; + } } &-suffix { margin-left: 4px; font-size: @statistic-unit-font-size; + + .@{statistic-prefix-cls}-rtl & { + margin-right: 4px; + margin-left: 0; + } } } } diff --git a/components/steps/__tests__/__snapshots__/index.test.js.snap b/components/steps/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..70e92e298b --- /dev/null +++ b/components/steps/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Steps rtl render component should be rendered correctly in RTL direction 1`] = ` +
+`; diff --git a/components/steps/__tests__/index.test.js b/components/steps/__tests__/index.test.js index 6a65541059..bb96509655 100644 --- a/components/steps/__tests__/index.test.js +++ b/components/steps/__tests__/index.test.js @@ -1,6 +1,8 @@ import Steps from '..'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('Steps', () => { mountTest(Steps); + rtlTest(Steps); }); diff --git a/components/steps/index.tsx b/components/steps/index.tsx index b89460238e..966f2b9683 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import RcSteps from 'rc-steps'; import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; +import classNames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; @@ -39,14 +40,25 @@ export default class Steps extends React.Component { current: 0, }; - renderSteps = ({ getPrefixCls }: ConfigConsumerProps) => { + renderSteps = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const prefixCls = getPrefixCls('steps', this.props.prefixCls); const iconPrefix = getPrefixCls('', this.props.iconPrefix); + const className = classNames(this.props.className, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); const icons = { finish: , error: , }; - return ; + return ( + + ); }; render() { diff --git a/components/steps/style/custom-icon.less b/components/steps/style/custom-icon.less index 75a6e4feb9..e27ae0570b 100644 --- a/components/steps/style/custom-icon.less +++ b/components/steps/style/custom-icon.less @@ -10,6 +10,11 @@ height: @steps-icon-size; font-size: 24px; line-height: @steps-icon-size; + + .@{steps-prefix-cls}-rtl & { + right: 0.5px; + left: auto; + } } } &.@{steps-prefix-cls}-item-process { diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 252e0dc757..8a692876a9 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -34,6 +34,9 @@ display: flex; width: 100%; font-size: 0; + &-rtl { + direction: rtl; + } } .@{steps-prefix-cls}-item { @@ -74,6 +77,11 @@ border-radius: @steps-icon-size; transition: background-color 0.3s, border-color 0.3s; + .@{steps-prefix-cls}-rtl & { + margin-right: 0; + margin-left: 8px; + } + > .@{steps-prefix-cls}-icon { position: relative; top: -1px; @@ -87,6 +95,11 @@ left: 0; width: 100%; padding: 0 10px; + + .@{steps-prefix-cls}-rtl & { + right: 0; + left: auto; + } &::after { display: inline-block; width: 100%; @@ -104,6 +117,12 @@ color: @text-color; font-size: @font-size-lg; line-height: @steps-icon-size; + + .@{steps-prefix-cls}-rtl & { + padding-right: 0; + padding-left: 16px; + } + &::after { position: absolute; top: @steps-icon-size / 2; @@ -113,6 +132,11 @@ height: 1px; background: @wait-tail-color; content: ''; + + .@{steps-prefix-cls}-rtl & { + right: 100%; + left: auto; + } } } &-subtitle { @@ -121,6 +145,11 @@ color: @text-color-secondary; font-weight: normal; font-size: @font-size-base; + + .@{steps-prefix-cls}-rtl & { + margin-right: 8px; + margin-left: 0; + } } &-description { color: @text-color-secondary; @@ -190,11 +219,25 @@ .@{steps-prefix-cls}-item { margin-right: 16px; white-space: nowrap; + + .@{steps-prefix-cls}-rtl& { + margin-right: 0; + margin-left: 16px; + } + &:last-child { margin-right: 0; + + .@{steps-prefix-cls}-rtl& { + margin-left: 0; + } } &:last-child .@{steps-prefix-cls}-item-title { padding-right: 0; + + .@{steps-prefix-cls}-rtl& { + padding-left: 0; + } } &-tail { display: none; diff --git a/components/steps/style/nav.less b/components/steps/style/nav.less index 77cf177822..33176979f5 100644 --- a/components/steps/style/nav.less +++ b/components/steps/style/nav.less @@ -5,6 +5,11 @@ .@{steps-prefix-cls}-item { &-container { margin-left: -12px; + + .@{steps-prefix-cls}-rtl& { + margin-right: -12px; + margin-left: 0; + } } } } @@ -21,6 +26,12 @@ text-align: left; transition: opacity 0.3s; + .@{steps-prefix-cls}-rtl& { + margin-right: -16px; + margin-left: 0; + text-align: right; + } + .@{steps-prefix-cls}-item-content { max-width: @steps-nav-content-max-width; } @@ -32,6 +43,10 @@ white-space: nowrap; text-overflow: ellipsis; + .@{steps-prefix-cls}-rtl& { + padding-left: 0; + } + &::after { display: none; } @@ -68,6 +83,14 @@ border-left: none; transform: rotate(45deg); content: ''; + + .@{steps-prefix-cls}-rtl& { + right: 100%; + left: auto; + margin-right: -2px; + margin-left: 0; + transform: rotate(225deg); + } } &::before { diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index a6725df133..d130e558db 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -9,14 +9,29 @@ width: 100%; margin: 0 0 0 @steps-desciption-max-width / 2; padding: 0; + + .@{steps-prefix-cls}-rtl& { + margin: 0 @steps-desciption-max-width / 2 0 0; + } + &::after { width: ~'calc(100% - 20px)'; height: 3px; margin-left: 12px; + + .@{steps-prefix-cls}-rtl& { + margin-right: 12px; + margin-left: 0; + } } } &:first-child .@{steps-prefix-cls}-icon-dot { left: 2px; + + .@{steps-prefix-cls}-rtl& { + right: 2px; + left: auto; + } } &-icon { width: @steps-dot-size; @@ -26,6 +41,12 @@ line-height: @steps-dot-size; background: transparent; border: 0; + + .@{steps-prefix-cls}-rtl& { + margin-right: 67px; + margin-left: 0; + } + .@{steps-prefix-cls}-icon-dot { position: relative; float: left; @@ -33,6 +54,10 @@ height: 100%; border-radius: 100px; transition: all 0.3s; + + .@{steps-prefix-cls}-rtl& { + float: right; + } /* expand hover area */ &::after { position: absolute; @@ -42,6 +67,11 @@ height: 32px; background: fade(@black, 0.1%); content: ''; + + .@{steps-prefix-cls}-rtl& { + right: -26px; + left: auto; + } } } } @@ -63,6 +93,11 @@ .@{steps-prefix-cls}-item-icon { margin-top: 8px; margin-left: 0; + + .@{steps-prefix-cls}-rtl& { + margin-right: 0; + margin-left: 16px; + } } // https://github.com/ant-design/ant-design/issues/18354 .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { @@ -70,11 +105,26 @@ left: -9px; margin: 0; padding: 22px 0 4px; + + .@{steps-prefix-cls}-rtl& { + right: -9px; + left: auto; + } } .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { left: 0; + + .@{steps-prefix-cls}-rtl& { + right: 0; + left: auto; + } } .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot { left: -2px; + + .@{steps-prefix-cls}-rtl& { + right: -2px; + left: auto; + } } } diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 2f130d2865..d546547f56 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -2,8 +2,18 @@ &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) .@{steps-prefix-cls}-item { margin-right: 12px; + + .@{steps-prefix-cls}-rtl& { + margin-right: 0; + margin-left: 12px; + } + &:last-child { margin-right: 0; + + .@{steps-prefix-cls}-rtl& { + margin-left: 0; + } } } .@{steps-prefix-cls}-item-icon { diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index e546547921..b8759ac22d 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -6,6 +6,12 @@ &-icon { float: left; margin-right: 16px; + + .@{steps-prefix-cls}-rtl& { + float: right; + margin-right: 0; + margin-left: 16px; + } } &-content { display: block; @@ -29,6 +35,12 @@ width: 1px; height: 100%; padding: @steps-icon-size + 6px 0 6px; + + .@{steps-prefix-cls}-rtl& { + right: 16px; + left: auto; + } + &::after { width: 1px; height: 100%; @@ -56,6 +68,11 @@ top: 0; left: 12px; padding: @steps-small-icon-size + 6px 0 6px; + + .@{steps-prefix-cls}-rtl& { + right: 12px; + left: auto; + } } .@{steps-prefix-cls}-item-title { line-height: @steps-small-icon-size; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index f7ec9e4e1a..c28fccb8f9 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -591,6 +591,7 @@ @tabs-ink-bar-color: @primary-color; @tabs-bar-margin: 0 0 16px 0; @tabs-horizontal-margin: 0 32px 0 0; +@tabs-horizontal-margin-rtl: 0 0 0 32px; @tabs-horizontal-padding: 12px 16px; @tabs-horizontal-padding-lg: 16px; @tabs-horizontal-padding-sm: 8px 16px; diff --git a/components/switch/__tests__/__snapshots__/index.test.js.snap b/components/switch/__tests__/__snapshots__/index.test.js.snap index 13ea6e9bb9..d9c1b9e79b 100644 --- a/components/switch/__tests__/__snapshots__/index.test.js.snap +++ b/components/switch/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Switch rtl render component should be rendered correctly in RTL direction 1`] = ` + +`; + exports[`Switch should has click wave effect 1`] = `
`; + +exports[`Table rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + +
+

+ No Data +

+
+
+
+
+
+ +
+
+
+`; diff --git a/components/table/style/index.less b/components/table/style/index.less index 924484f46f..c5d3d3d9a6 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -5,6 +5,7 @@ @table-prefix-cls: ~'@{ant-prefix}-table'; @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; +@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl'; @table-header-icon-color: #bfbfbf; @table-header-icon-color-hover: darken(@table-header-icon-color, 10%); @table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%); @@ -13,6 +14,9 @@ .@{table-prefix-cls}-wrapper { .clearfix; + &-rtl { + direction: rtl; + } } .@{table-prefix-cls} { @@ -28,6 +32,10 @@ border-radius: @table-border-radius-base @table-border-radius-base 0 0; border-collapse: separate; border-spacing: 0; + + .@{table-wrapepr-rtl-cls} & { + text-align: right; + } } // ============================= Cell ============================= @@ -89,6 +97,14 @@ &[colspan]:not([colspan='1']) { text-align: center; + + .@{table-wrapepr-rtl-cls} & { + text-align: center; + } + } + + .@{table-wrapepr-rtl-cls} & { + text-align: right; } } } @@ -131,6 +147,9 @@ margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)); + &.@{table-prefix-cls}-rtl { + margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal; + } td { background: transparent; } @@ -161,6 +180,10 @@ &-pagination.@{ant-prefix}-pagination { float: right; margin: 16px 0; + + .@{table-wrapepr-rtl-cls} & { + float: left; + } } // ================================================================ @@ -199,6 +222,11 @@ margin-left: @padding-xs; color: @table-header-icon-color; + .@{table-wrapepr-rtl-cls} & { + margin-right: @padding-xs; + margin-left: 0; + } + &-full { margin-top: -0.2em; margin-bottom: 0; @@ -234,6 +262,10 @@ &-filter-column-title { flex: auto; padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal; + + .@{table-wrapepr-rtl-cls} & { + padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em; + } } &-filter-trigger-container { @@ -248,6 +280,11 @@ cursor: pointer; transition: background-color 0.3s; + .@{table-wrapepr-rtl-cls} & { + right: auto; + left: 0; + } + &-open, &:hover, thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover { @@ -305,6 +342,11 @@ &-submenu { .@{ant-prefix}-checkbox-wrapper + span { padding-left: 8px; + + .@{ant-prefix}-dropdown-rtl & { + padding-right: 8px; + padding-left: 0; + } } } @@ -338,12 +380,22 @@ &-selection { position: relative; + .@{table-wrapepr-rtl-cls} & { + text-align: center; + } + &-extra { position: absolute; top: 50%; right: 0; transform: translate(100%, -50%); + .@{table-wrapepr-rtl-cls} & { + right: auto; + left: 0; + transform: translate(-100%, -50%); + } + .@{iconfont-css-prefix} { .iconfont-size-under-12px(10px); color: @table-header-icon-color; @@ -431,6 +483,11 @@ .@{table-prefix-cls}-row-indent + & { margin-right: @padding-xs; + + .@{table-wrapepr-rtl-cls} & { + margin-right: 0; + margin-left: @padding-xs; + } } } diff --git a/components/tabs/TabBar.tsx b/components/tabs/TabBar.tsx index b831c14fe2..474887590b 100644 --- a/components/tabs/TabBar.tsx +++ b/components/tabs/TabBar.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { UpOutlined, LeftOutlined, DownOutlined, RightOutlined } from '@ant-design/icons'; import { TabsProps } from './index'; +import { ConfigConsumerProps, ConfigConsumer } from '../config-provider'; export default class TabBar extends React.Component { static defaultProps = { @@ -11,7 +12,7 @@ export default class TabBar extends React.Component { type: 'line', }; - render() { + renderTabBar = ({ direction }: ConfigConsumerProps) => { const { tabBarStyle, animated, @@ -26,8 +27,13 @@ export default class TabBar extends React.Component { const inkBarAnimated = typeof animated === 'object' ? animated.inkBar : animated; const isVertical = tabPosition === 'left' || tabPosition === 'right'; - const prevIconComponent = isVertical ? UpOutlined : LeftOutlined; - const nextIconComponent = isVertical ? DownOutlined : RightOutlined; + let prevIconComponent = isVertical ? UpOutlined : LeftOutlined; + let nextIconComponent = isVertical ? DownOutlined : RightOutlined; + + if (direction === 'rtl' && !isVertical) { + prevIconComponent = RightOutlined; + nextIconComponent = LeftOutlined; + } const prevIcon = ( {React.createElement(prevIconComponent, { @@ -73,5 +79,9 @@ export default class TabBar extends React.Component { } return React.cloneElement(RenderTabBar); + }; + + render() { + return {this.renderTabBar}; } } diff --git a/components/tabs/__tests__/__snapshots__/index.test.js.snap b/components/tabs/__tests__/__snapshots__/index.test.js.snap index 27a96d53e7..b68076f10f 100644 --- a/components/tabs/__tests__/__snapshots__/index.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/index.test.js.snap @@ -42,6 +42,137 @@ exports[`Tabs renderTabBar custom-tab-bar 1`] = `
`; +exports[`Tabs rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + exports[`Tabs tabPosition remove card 1`] = `
{ )); + rtlTest(() => ( + + + + )); describe('editable-card', () => { let handleEdit; diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 4170b072f3..bef0224641 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -94,7 +94,7 @@ export default class Tabs extends React.Component { } }; - renderTabs = ({ getPrefixCls }: ConfigConsumerProps) => { + renderTabs = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className = '', @@ -180,6 +180,7 @@ export default class Tabs extends React.Component { prefixCls={prefixCls} className={cls} tabBarPosition={tabPosition} + direction={direction} renderTabBar={() => ( )} diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 244911f9c6..b7e0eeb7e3 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -57,6 +57,11 @@ &:hover { color: @heading-color; } + + .@{tab-prefix-cls}-rtl& { + margin-right: 3px; + margin-left: -5px; + } } &&-card &-card-content > &-tabpane, @@ -75,6 +80,10 @@ line-height: @tabs-title-font-size * @line-height-base + extract(@tabs-horizontal-padding, 1) * 2; + .@{tab-prefix-cls}-rtl & { + float: left !important; + } + .@{tab-prefix-cls}-new-tab { position: relative; width: 20px; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index b9d735dc40..621eb279e7 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -23,6 +23,10 @@ overflow: hidden; .clearfix; + &-rtl { + direction: rtl; + } + &-ink-bar { position: absolute; bottom: 1px; @@ -33,6 +37,11 @@ height: 2px; background-color: @tabs-ink-bar-color; transform-origin: 0 0; + + .@{tab-prefix-cls}-rtl & { + right: 0; + left: auto; + } } &-bar { @@ -116,6 +125,11 @@ text-transform: none; transform: translate(-50%, -50%); + .@{tab-prefix-cls}-rtl & { + right: 50%; + left: auto; + } + &-target { display: block; .iconfont-size-under-12px(10px); @@ -133,10 +147,21 @@ &-tab-next { right: 2px; + + .@{tab-prefix-cls}-rtl & { + right: auto; + left: 2px; + } } &-tab-prev { left: 0; + + .@{tab-prefix-cls}-rtl & { + right: 2px; + left: auto; + } + :root & { filter: none; } @@ -182,6 +207,10 @@ cursor: pointer; transition: color 0.3s @ease-in-out; + .@{tab-prefix-cls}-rtl & { + margin: @tabs-horizontal-margin-rtl; + } + &::before { position: absolute; top: -1px; @@ -208,6 +237,11 @@ .@{iconfont-css-prefix} { margin-right: 8px; + + .@{tab-prefix-cls}-rtl & { + margin-right: 0; + margin-left: 8px; + } } &-active { diff --git a/components/tag/__tests__/__snapshots__/index.test.js.snap b/components/tag/__tests__/__snapshots__/index.test.js.snap index 4b3a225d61..8dca6b9b4e 100644 --- a/components/tag/__tests__/__snapshots__/index.test.js.snap +++ b/components/tag/__tests__/__snapshots__/index.test.js.snap @@ -1,5 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Tag rtl render component should be rendered correctly in RTL direction 1`] = ` + +`; + +exports[`Tag rtl render component should be rendered correctly in RTL direction 2`] = ` + +`; + exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = ` { mountTest(Tag); mountTest(Tag.CheckableTag); + rtlTest(Tag); + rtlTest(Tag.CheckableTag); beforeAll(() => { jest.useFakeTimers(); diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 6a99d75d43..70b56509e7 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -56,7 +56,7 @@ class Tag extends React.Component { }; } - getTagClassName({ getPrefixCls }: ConfigConsumerProps) { + getTagClassName({ getPrefixCls, direction }: ConfigConsumerProps) { const { prefixCls: customizePrefixCls, className, color } = this.props; const { visible } = this.state; const isPresetColor = this.isPresetColor(); @@ -67,6 +67,7 @@ class Tag extends React.Component { [`${prefixCls}-${color}`]: isPresetColor, [`${prefixCls}-has-color`]: color && !isPresetColor, [`${prefixCls}-hidden`]: !visible, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/tag/style/index.less b/components/tag/style/index.less index 4e18a1aa19..662dc9afe9 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -36,6 +36,13 @@ padding: 0 8px; } + &-rtl { + margin-right: 0; + margin-left: 8px; + direction: rtl; + text-align: right; + } + .@{iconfont-css-prefix}-close { .iconfont-size-under-12px(10px); @@ -45,6 +52,11 @@ cursor: pointer; transition: all 0.3s @ease-in-out-circ; + .@{tag-prefix-cls}-rtl& { + margin-right: 3px; + margin-left: 0; + } + &:hover { color: @heading-color; } diff --git a/components/time-picker/__tests__/__snapshots__/index.test.js.snap b/components/time-picker/__tests__/__snapshots__/index.test.js.snap index 98725dd57e..f410d17f6f 100644 --- a/components/time-picker/__tests__/__snapshots__/index.test.js.snap +++ b/components/time-picker/__tests__/__snapshots__/index.test.js.snap @@ -1477,3 +1477,47 @@ Array [
, ] `; + +exports[`TimePicker rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ + + + + + +
+
+`; diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js index 300096cb57..c03f06bd19 100644 --- a/components/time-picker/__tests__/index.test.js +++ b/components/time-picker/__tests__/index.test.js @@ -5,6 +5,7 @@ import TimePicker from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import { resetWarned } from '../../_util/warning'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('TimePicker', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -19,6 +20,7 @@ describe('TimePicker', () => { focusTest(TimePicker, true); mountTest(TimePicker); + rtlTest(TimePicker); it('warning for addon', () => { resetWarned(); diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 84b38210aa..9f9c8eb0a2 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -24,7 +24,7 @@ export default class Timeline extends React.Component { mode: '', }; - renderTimeline = ({ getPrefixCls }: ConfigConsumerProps) => { + renderTimeline = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, pending = null, @@ -43,6 +43,7 @@ export default class Timeline extends React.Component { [`${prefixCls}-pending`]: !!pending, [`${prefixCls}-reverse`]: !!reverse, [`${prefixCls}-${mode}`]: !!mode, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); diff --git a/components/timeline/__tests__/__snapshots__/index.test.js.snap b/components/timeline/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..fe732498f6 --- /dev/null +++ b/components/timeline/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TimeLine rtl render component should be rendered correctly in RTL direction 1`] = ` +
    +`; + +exports[`TimeLine rtl render component should be rendered correctly in RTL direction 2`] = ` +
  • +
    +
    +
    +
    • +`; diff --git a/components/timeline/__tests__/index.test.js b/components/timeline/__tests__/index.test.js index 3ee4aa6d6a..de5b2aa4d0 100644 --- a/components/timeline/__tests__/index.test.js +++ b/components/timeline/__tests__/index.test.js @@ -2,6 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; import TimeLine from '..'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; const { Item } = TimeLine; @@ -17,6 +18,8 @@ const wrapperFactory = (timeLineProps = {}) => describe('TimeLine', () => { mountTest(TimeLine); mountTest(TimeLine.Item); + rtlTest(TimeLine); + rtlTest(TimeLine.Item); describe('renders items without passing any props correctly', () => { const wrapper = wrapperFactory(); diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 488425e6d1..bcf74e90fe 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -10,6 +10,10 @@ padding: 0; list-style: none; + &-rtl { + direction: rtl; + } + &-item { position: relative; margin: 0; @@ -23,6 +27,13 @@ left: 4px; height: calc(100% - 10px); border-left: @timeline-width solid @timeline-color; + + .@{timeline-prefix-cls}-rtl & { + right: 4px; + left: auto; + border-right: @timeline-width solid @timeline-color; + border-left: none; + } } &-pending &-head { @@ -76,6 +87,12 @@ border: 0; border-radius: 0; transform: translate(-50%, -50%); + + .@{timeline-prefix-cls}-rtl & { + right: 5px; + left: auto; + transform: translate(50%, -50%); + } } &-content { @@ -83,6 +100,10 @@ top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; margin: 0 0 0 18px; word-break: break-word; + + .@{timeline-prefix-cls}-rtl & { + margin: 0 18px 0 0; + } } &-last { @@ -102,12 +123,27 @@ &-head, &-head-custom { left: 50%; + + .@{timeline-prefix-cls}-rtl& { + right: 50%; + left: auto; + } } &-head { margin-left: -4px; + + .@{timeline-prefix-cls}-rtl& { + margin-right: -4px; + margin-left: 0; + } &-custom { margin-left: 1px; + + .@{timeline-prefix-cls}-rtl& { + margin-right: 1px; + margin-left: 0; + } } } @@ -116,6 +152,12 @@ left: calc(50% - 4px); width: calc(50% - 14px); text-align: left; + + .@{timeline-prefix-cls}-rtl& { + right: calc(50% - 4px); + left: auto; + text-align: right; + } } } @@ -124,6 +166,11 @@ width: calc(50% - 12px); margin: 0; text-align: right; + + .@{timeline-prefix-cls}-rtl& { + width: 100%; + margin-right: 12px; + } } } } @@ -136,9 +183,19 @@ .@{timeline-prefix-cls}-item-head-custom { // stylelint-disable-next-line function-calc-no-invalid left: calc(100% - 4px - @timeline-width); + + .@{timeline-prefix-cls}-rtl& { + right: 0; + left: auto; + } } .@{timeline-prefix-cls}-item-content { width: calc(100% - 18px); + + .@{timeline-prefix-cls}-rtl& { + width: 100%; + margin-right: 18px; + } } } } @@ -147,6 +204,11 @@ display: block; height: calc(100% - 14px); border-left: 2px dotted @timeline-color; + + .@{timeline-prefix-cls}-rtl& { + border-right: 2px dotted @timeline-color; + border-left: none; + } } &&-reverse &-item-last &-item-tail { @@ -159,6 +221,11 @@ display: block; height: calc(100% - 15px); border-left: 2px dotted @timeline-color; + + .@{timeline-prefix-cls}-rtl& { + border-right: 2px dotted @timeline-color; + border-left: none; + } } .@{timeline-prefix-cls}-item-content { min-height: 48px; diff --git a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap b/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap index 2419f11850..ab75bf5088 100644 --- a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap +++ b/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap @@ -1,5 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Tooltip rtl render component should be rendered correctly in RTL direction 1`] = ``; + exports[`Tooltip should hide when mouse leave antd disabled component Button 1`] = ` { mountTest(Tooltip); + rtlTest(Tooltip); it('check `onVisibleChange` arguments', () => { const onVisibleChange = jest.fn(); diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index c557a42095..fa91d225f9 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -230,6 +230,7 @@ class Tooltip extends React.Component { renderTooltip = ({ getPopupContainer: getContextPopupContainer, getPrefixCls, + direction, }: ConfigConsumerProps) => { const { props, state } = this; const { @@ -239,6 +240,7 @@ class Tooltip extends React.Component { openClassName, getPopupContainer, getTooltipContainer, + overlayClassName, } = props; const children = props.children as React.ReactElement; const prefixCls = getPrefixCls('tooltip', customizePrefixCls); @@ -257,10 +259,14 @@ class Tooltip extends React.Component { [openClassName || `${prefixCls}-open`]: true, }); + const customOverlayClassName = classNames(overlayClassName, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); return ( +
    +
    + + + + 0 item + + + +
    +
    +
    +
    +
    + + + + + + + + + +
    +

    + No Data +

    +
    +
    +
    +
    +
    + + +
    +
    +
    + + + + 0 item + + + +
    +
    +
    +
    +
    + + + + + + + + + +
    +

    + No Data +

    +
    +
    +
    +
    +
+`; + exports[`Transfer should render correctly 1`] = `
{}); @@ -93,6 +94,7 @@ const searchTransferProps = { describe('Transfer', () => { mountTest(Transfer); + rtlTest(Transfer); it('should render correctly', () => { const wrapper = render(); diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 585a9b3683..989798ec34 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -297,7 +297,7 @@ class Transfer extends React.Component { renderTransfer = (transferLocale: TransferLocale) => ( - {({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => { + {({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, @@ -328,6 +328,7 @@ class Transfer extends React.Component { const cls = classNames(className, prefixCls, { [`${prefixCls}-disabled`]: disabled, [`${prefixCls}-customize-list`]: !!children, + [`${prefixCls}-rtl`]: direction === 'rtl', }); const titles = this.props.titles || locale.titles; @@ -364,6 +365,7 @@ class Transfer extends React.Component { moveToLeft={this.moveToLeft} style={operationStyle} disabled={disabled} + direction={direction} /> (
@@ -40,7 +42,7 @@ const Operation = ({ size="small" disabled={disabled || !leftActive} onClick={moveToLeft} - icon={} + icon={direction !== 'rtl' ? : } > {leftArrowText} diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index ac45fdaf42..cb2d3b05fa 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -14,6 +14,10 @@ position: relative; + &-rtl { + direction: rtl; + } + &-disabled { .@{transfer-prefix-cls}-list { background: @transfer-disabled-bg; @@ -45,6 +49,12 @@ color: @disabled-color; line-height: @input-height-base; text-align: center; + + .@{transfer-prefix-cls}-rtl & { + right: auto; + left: 12px; + } + .@{iconfont-css-prefix} { color: @disabled-color; transition: all 0.3s; @@ -72,13 +82,27 @@ border-bottom: @border-width-base @border-style-base @border-color-split; border-radius: @border-radius-base @border-radius-base 0 0; + .@{transfer-prefix-cls}-rtl & { + right: 0; + left: auto; + } &-title { position: absolute; right: 12px; + + .@{transfer-prefix-cls}-rtl & { + right: auto; + left: 12px; + } } .@{ant-prefix}-checkbox-wrapper + span { padding-left: 8px; + + .@{transfer-prefix-cls}-rtl & { + padding-right: 8px; + padding-left: 0; + } } } @@ -93,6 +117,11 @@ left: 0; width: 100%; padding: 12px; + + .@{transfer-prefix-cls}-rtl & { + right: 0; + left: auto; + } } } @@ -115,9 +144,18 @@ transition: all 0.3s; > span { padding-right: 0; + + .@{transfer-prefix-cls}-rtl & { + padding-left: 0; + } } &-text { padding-left: 8px; + + .@{transfer-prefix-cls}-rtl & { + padding-right: 8px; + padding-left: 0; + } } } @@ -158,6 +196,11 @@ width: 100%; border-top: @border-width-base @border-style-base @border-color-split; border-radius: 0 0 @border-radius-base @border-radius-base; + + .@{transfer-prefix-cls}-rtl & { + right: 0; + left: auto; + } } } diff --git a/components/tree-select/__tests__/__snapshots__/index.test.js.snap b/components/tree-select/__tests__/__snapshots__/index.test.js.snap index 472b2857b9..b0e1dc898d 100644 --- a/components/tree-select/__tests__/__snapshots__/index.test.js.snap +++ b/components/tree-select/__tests__/__snapshots__/index.test.js.snap @@ -83,3 +83,61 @@ exports[`TreeSelect TreeSelect Custom Icons should support customized icons 1`]
`; + +exports[`TreeSelect rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ + + + +
+ +
+`; diff --git a/components/tree-select/__tests__/index.test.js b/components/tree-select/__tests__/index.test.js index 77d44828e8..15af17b07a 100644 --- a/components/tree-select/__tests__/index.test.js +++ b/components/tree-select/__tests__/index.test.js @@ -3,10 +3,12 @@ import { mount } from 'enzyme'; import TreeSelect, { TreeNode } from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; +import rtlTest from '../../../tests/shared/rtlTest'; describe('TreeSelect', () => { focusTest(TreeSelect); mountTest(TreeSelect); + rtlTest(TreeSelect); describe('TreeSelect Custom Icons', () => { it('should support customized icons', () => { diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index f5b9dbd614..d9ea690214 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -76,6 +76,7 @@ class TreeSelect extends React.Component, {}> { getPopupContainer: getContextPopupContainer, getPrefixCls, renderEmpty, + direction, }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, @@ -101,6 +102,7 @@ class TreeSelect extends React.Component, {}> { { [`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-sm`]: size === 'small', + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, ); @@ -108,6 +110,9 @@ class TreeSelect extends React.Component, {}> { const mergedDropdownClassName = classNames( dropdownClassName, `${treeSelectPrefixCls}-dropdown`, + { + [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl', + }, ); const isMultiple = !!(treeCheckable || multiple); diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index ee9e1fcb7f..61e45fcac8 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -13,6 +13,9 @@ &-dropdown { padding: @padding-xs (@padding-xs / 2) 0; + &-rtl { + direction: rtl; + } // ======================== Tree ======================== .@{select-tree-prefix-cls} { border-radius: 0; @@ -34,3 +37,19 @@ // ========================== Tree ========================== .antTreeFn(@select-tree-prefix-cls); + +// change switcher icon rotation in rtl direction +.@{select-tree-prefix-cls} { + // >>> Switcher + & &-switcher { + &_close { + .@{select-tree-prefix-cls}-switcher-icon { + svg { + .@{tree-select-prefix-cls}-dropdown-rtl & { + transform: rotate(90deg); + } + } + } + } + } +} diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 8bae1446da..d2c6549b70 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -212,12 +212,14 @@ class DirectoryTree extends React.Component { + renderDirectoryTree = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, ...props } = this.props; const { expandedKeys, selectedKeys } = this.state; const prefixCls = getPrefixCls('tree', customizePrefixCls); - const connectClassName = classNames(`${prefixCls}-directory`, className); + const connectClassName = classNames(`${prefixCls}-directory`, className, { + [`${prefixCls}-directory-rtl`]: direction === 'rtl', + }); return ( { this.tree = node; }; - renderTree = ({ getPrefixCls }: ConfigConsumerProps) => { + renderTree = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const { props } = this; const { prefixCls: customizePrefixCls, @@ -213,6 +213,7 @@ export default class Tree extends React.Component { className={classNames(className, { [`${prefixCls}-icon-hide`]: !showIcon, [`${prefixCls}-block-node`]: blockNode, + [`${prefixCls}-rtl`]: direction === 'rtl', })} checkable={checkable ? : checkable} switcherIcon={(nodeProps: AntTreeNodeProps) => diff --git a/components/tree/__tests__/__snapshots__/directory.test.js.snap b/components/tree/__tests__/__snapshots__/directory.test.js.snap index 45542d2d4f..bfe71263b1 100644 --- a/components/tree/__tests__/__snapshots__/directory.test.js.snap +++ b/components/tree/__tests__/__snapshots__/directory.test.js.snap @@ -2755,6 +2755,58 @@ exports[`Directory Tree group select 2`] = `
`; +exports[`Directory Tree rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ +
+
+
+
+
+
+
+`; + +exports[`Directory Tree rtl render component should be rendered correctly in RTL direction 2`] = ` +
+
+ +
+
+
+
+
+
+
+`; + exports[`Directory Tree selectedKeys update 1`] = `
{ mountTest(Tree); mountTest(DirectoryTree); + rtlTest(Tree); + rtlTest(DirectoryTree); + debounce.mockImplementation(fn => fn); beforeAll(() => { diff --git a/components/tree/style/index.less b/components/tree/style/index.less index 83989ba885..0832a994b6 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -17,6 +17,10 @@ border-radius: @border-radius-base; transition: background-color 0.3s; + &-rtl { + direction: rtl; + } + &-focused:not(:hover):not(&-active-focused) { background: @primary-1; } @@ -44,6 +48,9 @@ padding: 0 0 (@padding-xs / 2) 0; outline: none; + &-rtl { + direction: rtl; + } // Disabled &-disabled { // >>> Title @@ -94,6 +101,10 @@ .@{tree-prefix-cls}-switcher-icon { svg { transform: rotate(-90deg); + + .@{tree-prefix-cls}-rtl& { + transform: rotate(90deg); + } } } } @@ -187,6 +198,12 @@ bottom: -@tree-title-height - 4px; border-right: 1px solid @border-color-base; content: ''; + .@{tree-prefix-cls}-rtl& { + right: auto; + left: -@tree-title-height / 2; + border-right: none; + border-left: 1px solid @border-color-base; + } } &-end { diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index 498658d708..8ce81a5836 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -371,7 +371,7 @@ class Base extends React.Component ); } diff --git a/components/typography/Editable.tsx b/components/typography/Editable.tsx index 6d743612eb..eb6e311ac3 100644 --- a/components/typography/Editable.tsx +++ b/components/typography/Editable.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import KeyCode from 'rc-util/lib/KeyCode'; import classNames from 'classnames'; +import KeyCode from 'rc-util/lib/KeyCode'; import { EnterOutlined } from '@ant-design/icons'; import TextArea from '../input/TextArea'; @@ -12,6 +12,7 @@ interface EditableProps { onCancel: () => void; className?: string; style?: React.CSSProperties; + direction?: 'ltr' | 'rtl'; } interface EditableState { @@ -111,10 +112,13 @@ class Editable extends React.Component { render() { const { current } = this.state; - const { prefixCls, 'aria-label': ariaLabel, className, style } = this.props; + const { prefixCls, 'aria-label': ariaLabel, className, style, direction } = this.props; + const textAreaClassName = classNames(prefixCls, className, `${prefixCls}-edit-content`, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); return ( -
+