Add direction property to support RTL languages

Resolves #182.

Author: jakezatecky

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v1.7.0 (TBA)
+
+### New Features
+
+* [#182]: Add `direction` property to support RTL languages
+
 ## [v1.6.0](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.5.0...v1.6.0) (2019-12-11)
 
 ### New Features

README.md

@@ -145,6 +145,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 | `nodes`              | array    | **Required**. Specifies the tree nodes and their children.                                                             |             |
 | `checkModel`         | bool     | Specifies which checked nodes should be stored in the `checked` array. Accepts `'leaf'` or `'all'`.                    | `'leaf'`    |
 | `checked`            | array    | An array of checked node values.                                                                                       | `[]`        |
+| `direction`          | string   | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`).    | `'ltr'`     |
 | `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                                                   | `false`     |
 | `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                                                 | `false`     |
 | `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function.                        | `false`     |

src/index.d.ts

@@ -36,6 +36,7 @@ declare module "react-checkbox-tree" {
 
         checkModel?: string;
         checked?: Array<string>;
+        direction?: string;
         disabled?: boolean;
         expandDisabled?: boolean;
         expandOnClick?: boolean;
@@ -58,5 +59,5 @@ declare module "react-checkbox-tree" {
         onExpand?: (expanded: Array<string>) => void;
     }
 
-    export default class CheckboxTree extends React.Component<CheckboxProps> { }
+    export default class CheckboxTree extends React.Component<CheckboxProps> {}
 }

src/js/CheckboxTree.js

@@ -19,6 +19,7 @@ class CheckboxTree extends React.Component {
 
         checkModel: PropTypes.oneOf([constants.CheckModel.LEAF, constants.CheckModel.ALL]),
         checked: listShape,
+        direction: PropTypes.string,
         disabled: PropTypes.bool,
         expandDisabled: PropTypes.bool,
         expandOnClick: PropTypes.bool,
@@ -44,6 +45,7 @@ class CheckboxTree extends React.Component {
     static defaultProps = {
         checkModel: constants.CheckModel.LEAF,
         checked: [],
+        direction: 'ltr',
         disabled: false,
         expandDisabled: false,
         expandOnClick: false,
@@ -337,6 +339,7 @@ class CheckboxTree extends React.Component {
 
     render() {
         const {
+            direction,
             disabled,
             iconsClass,
             nodes,
@@ -350,6 +353,7 @@ class CheckboxTree extends React.Component {
             'rct-disabled': disabled,
             [`rct-icons-${iconsClass}`]: true,
             'rct-native-display': nativeCheckboxes,
+            'rct-direction-rtl': direction === 'rtl',
         });
 
         return (

src/less/react-checkbox-tree.less

@@ -263,3 +263,21 @@
     content: "\f146";
   }
 }
+
+// RTL support
+.rct-direction-rtl {
+  direction: rtl;
+
+  ol ol {
+    padding-left: 0;
+    padding-right: 24px;
+  }
+
+  &.rct-icons-fa4 .rct-icon-expand-close::before {
+    content: "\f105";
+  }
+
+  &.rct-icons-fa5 .rct-icon-expand-close::before {
+    content: "\f053";
+  }
+}

src/scss/react-checkbox-tree.scss

@@ -263,3 +263,21 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
     content: "\f146";
   }
 }
+
+// RTL support
+.rct-direction-rtl {
+  direction: rtl;
+
+  ol ol {
+    padding-left: 0;
+    padding-right: 24px;
+  }
+
+  &.rct-icons-fa4 .rct-icon-expand-close::before {
+    content: "\f105";
+  }
+
+  &.rct-icons-fa5 .rct-icon-expand-close::before {
+    content: "\f053";
+  }
+}

test/CheckboxTree.js

@@ -152,6 +152,16 @@ describe('<CheckboxTree />', () => {
         });
     });
 
+    describe('direction', () => {
+        it('should add the class rct-direction-rtl to the root when set to `rtl`', () => {
+            const wrapper = shallow(
+                <CheckboxTree direction="rtl" nodes={[]} />,
+            );
+
+            assert.isTrue(wrapper.find('.react-checkbox-tree.rct-direction-rtl').exists());
+        });
+    });
+
     describe('disabled', () => {
         it('should add the class rct-disabled to the root', () => {
             const wrapper = shallow(