feat: Right to left support (#311)

* Added right to left support. * Added a new prop to README.md
reactjs · Dec 12, 2019 · f789bbf · f789bbf
1 parent c096200
commit f789bbf
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -158,6 +158,12 @@ Provide a custom class name for the active tab panel.
 
 > This option can also be set directly at the `<TabPanel />` component.
 
+#### direction: `string`
+
+> default: `"ltr"`
+
+Provide the direction of the component, can be either rtl or ltr.
+
 ### &lt;TabList /&gt;
 
 If you specify additional props on the `<TabList />` component they will be forwarded to the rendered `<ul />`.

diff --git a/examples/src/app.js b/examples/src/app.js
@@ -5,12 +5,14 @@ import './example.less';
 import SuperMario from './components/examples/SuperMario';
 import MattGroening from './components/examples/MattGroening';
 import Avengers from './components/examples/Avengers';
+import RightToLeft from './components/examples/RightToLeft';
 
 ReactDOM.render(
   <div>
     <SuperMario />
     <MattGroening />
     <Avengers />
+    <RightToLeft />
   </div>,
   document.getElementById('example'),
 );
diff --git a/examples/src/components/ExampleItem.js b/examples/src/components/ExampleItem.js
@@ -63,7 +63,9 @@ export default class ExampleItem extends Component {
             <div className={editorClassNames}>
               <LiveEditor ignoreTabKey />
             </div>
-            <LivePreview />
+            <LivePreview
+              style={{ dir: this.props.direction === 'rtl' ? 'rtl' : 'ltr' }}
+            />
           </div>
         </LiveProvider>
       </div>

diff --git a/examples/src/components/examples/RightToLeft.js b/examples/src/components/examples/RightToLeft.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import ExampleItem from '../ExampleItem';
+
+const code = `const Component = (
+  <div dir="rtl">
+    <Tabs direction={'rtl'}>
+      <TabList>
+        <Tab>כותרת</Tab>
+        <Tab disabled>כותרת כבויה</Tab>
+        <Tab>כותרת שנייה</Tab>
+        <Tab>כותרת שלישית</Tab>
+      </TabList>
+      <TabPanel>
+        <p>
+          לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        </p>
+        <p>
+          Source:{' '}
+          <a href="https://en.wikipedia.org/wiki/" target="_blank">
+            Wikipedia
+          </a>
+        </p>
+      </TabPanel>
+      <TabPanel>
+        <p>
+        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        </p>
+        <p>
+          Source:{' '}
+          <a href="https://en.wikipedia.org/wiki/" target="_blank">
+            Wikipedia
+          </a>
+        </p>
+      </TabPanel>
+      <TabPanel>
+        <p>
+        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        </p>
+        <p>
+          Source:{' '}
+          <a href="https://en.wikipedia.org/wiki/" target="_blank">
+            Wikipedia
+          </a>
+        </p>
+      </TabPanel>
+      <TabPanel>
+        <h4>תת כותרת</h4>
+        <p>
+        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם. וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי קלובר בריקנה סטום, לפריקך תצטריק לרטי.
+        </p>
+        <p>
+          Source:{' '}
+          <a href="https://en.wikipedia.org/wiki/" target="_blank">
+            Wikipedia
+          </a>
+        </p>
+      </TabPanel>
+    </Tabs>
+  </div>
+);
+
+render(Component);`;
+
+const hint =
+  'This is an example of a right to left option. Just pass the `direction` prop to the <Tabs /> element';
+
+export default () => (
+  <ExampleItem
+    code={code}
+    direction="rtl"
+    hint={hint}
+    label="Right To Left Example"
+  />
+);
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
@@ -21,6 +21,7 @@ export default class Tabs extends Component {
 
   static propTypes = {
     children: childrenPropType,
+    direction: PropTypes.oneOf(['rtl', 'ltr']),
     className: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.array,

diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
@@ -43,6 +43,7 @@ export default class UncontrolledTabs extends Component {
 
   static propTypes = {
     children: childrenPropType,
+    direction: PropTypes.oneOf(['rtl', 'ltr']),
     className: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.array,
@@ -241,6 +242,7 @@ export default class UncontrolledTabs extends Component {
   }
 
   handleKeyDown = e => {
+    const { direction } = this.props;
     if (this.isTabFromContainer(e.target)) {
       let { selectedIndex: index } = this.props;
       let preventDefault = false;
@@ -254,12 +256,20 @@ export default class UncontrolledTabs extends Component {
 
       if (e.keyCode === 37 || e.keyCode === 38) {
         // Select next tab to the left
-        index = this.getPrevTab(index);
+        if (direction === 'rtl') {
+          index = this.getNextTab(index);
+        } else {
+          index = this.getPrevTab(index);
+        }
         preventDefault = true;
         useSelectedIndex = true;
       } else if (e.keyCode === 39 || e.keyCode === 40) {
         // Select next tab to the right
-        index = this.getNextTab(index);
+        if (direction === 'rtl') {
+          index = this.getPrevTab(index);
+        } else {
+          index = this.getNextTab(index);
+        }
         preventDefault = true;
         useSelectedIndex = true;
       } else if (e.keyCode === 35) {

diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js
@@ -165,6 +165,17 @@ describe('<Tabs />', () => {
         assertTabSelected(wrapper, 1);
       });
 
+      test('should update selectedIndex when arrow left key pressed (RTL)', () => {
+        const wrapper = mount(createTabs({ direction: 'rtl' }));
+        wrapper
+          .find(Tab)
+          .at(1)
+          .simulate('focus')
+          .simulate('keydown', { keyCode: 37 });
+
+        assertTabSelected(wrapper, 1);
+      });
+
       test.skip('should not change selectedIndex when arrow left key pressed on a disabled tab', () => {
         const wrapper = mount(createTabs({ defaultIndex: 0 }));
         wrapper