Add lang property

Resolves #108.

Author: jakezatecky

CHANGELOG.md

@@ -7,6 +7,7 @@
 * [#79]: Add the ability to expand or collapse all nodes in the tree
 * [#102]: Add `icons` property to allow specification of icon components
 * [#103]: Add `title` node property and `showNodeTitle` tree property
+* [#108]: Add `lang` property for language customization
 
 ### Other
 

README.md

@@ -122,6 +122,7 @@ Note that you can override as many or as little icons as you like.
 | `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function.                        | `false`     |
 | `icons`              | object   | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**.      | { ... }     |
 | `expanded`           | array    | An array of expanded node values.                                                                                      | `[]`        |
+| `lang`               | object   | An object containing the language mappings for the various text elements.                                              | { ... }     |
 | `name`               | string   | Optional name for the hidden `<input>` element.                                                                        | `undefined` |
 | `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.                          | `false`     |
 | `nativeCheckboxes`   | bool     | If true, native browser checkboxes will be used instead of pseudo-checkbox icons.                                      | `false`     |

src/js/CheckboxTree.js

@@ -7,6 +7,7 @@ import nanoid from 'nanoid';
 import Button from './Button';
 import TreeNode from './TreeNode';
 import iconsShape from './iconsShape';
+import languageShape from './languageShape';
 import listShape from './listShape';
 import nodeShape from './nodeShape';
 
@@ -20,6 +21,7 @@ class CheckboxTree extends React.Component {
         expandOnClick: PropTypes.bool,
         expanded: listShape,
         icons: iconsShape,
+        lang: languageShape,
         name: PropTypes.string,
         nameAsArray: PropTypes.bool,
         nativeCheckboxes: PropTypes.bool,
@@ -52,6 +54,11 @@ class CheckboxTree extends React.Component {
             parentOpen: <span className="rct-icon rct-icon-parent-open" />,
             leaf: <span className="rct-icon rct-icon-leaf" />,
         },
+        lang: {
+            collapseAll: 'Collapse all',
+            expandAll: 'Expand all',
+            toggle: 'Toggle',
+        },
         name: undefined,
         nameAsArray: false,
         nativeCheckboxes: false,
@@ -264,6 +271,7 @@ class CheckboxTree extends React.Component {
             expandDisabled,
             expandOnClick,
             icons,
+            lang,
             noCascade,
             onlyLeafCheckboxes,
             optimisticToggle,
@@ -293,6 +301,7 @@ class CheckboxTree extends React.Component {
                     icon={node.icon}
                     icons={{ ...defaultIcons, ...icons }}
                     label={node.label}
+                    lang={lang}
                     optimisticToggle={optimisticToggle}
                     rawChildren={node.children}
                     showCheckbox={showCheckbox}
@@ -325,7 +334,7 @@ class CheckboxTree extends React.Component {
     }
 
     renderExpandAll() {
-        const { icons: { expandAll, collapseAll }, showExpandAll } = this.props;
+        const { icons: { expandAll, collapseAll }, lang, showExpandAll } = this.props;
 
         if (!showExpandAll) {
             return null;
@@ -335,14 +344,14 @@ class CheckboxTree extends React.Component {
             <div className="rct-options">
                 <Button
                     className="rct-option rct-option-expand-all"
-                    title="Expand all"
+                    title={lang.expandAll}
                     onClick={this.onExpandAll}
                 >
                     {expandAll}
                 </Button>
                 <Button
                     className="rct-option rct-option-collapse-all"
-                    title="Collapse all"
+                    title={lang.collapseAll}
                     onClick={this.onCollapseAll}
                 >
                     {collapseAll}

src/js/TreeNode.js

@@ -5,6 +5,7 @@ import React from 'react';
 import Button from './Button';
 import NativeCheckbox from './NativeCheckbox';
 import iconsShape from './iconsShape';
+import languageShape from './languageShape';
 import nodeShape from './nodeShape';
 
 class TreeNode extends React.Component {
@@ -15,6 +16,7 @@ class TreeNode extends React.Component {
         expanded: PropTypes.bool.isRequired,
         icons: iconsShape.isRequired,
         label: PropTypes.node.isRequired,
+        lang: languageShape.isRequired,
         optimisticToggle: PropTypes.bool.isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
         treeId: PropTypes.string.isRequired,
@@ -110,7 +112,7 @@ class TreeNode extends React.Component {
     }
 
     renderCollapseButton() {
-        const { expandDisabled } = this.props;
+        const { expandDisabled, lang } = this.props;
 
         if (!this.hasChildren()) {
             return (
@@ -124,7 +126,7 @@ class TreeNode extends React.Component {
             <Button
                 className="rct-collapse rct-collapse-btn"
                 disabled={expandDisabled}
-                title="Toggle"
+                title={lang.toggle}
                 onClick={this.onExpand}
             >
                 {this.renderCollapseIcon()}

src/js/languageShape.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export default {
+    collapseAll: PropTypes.string.isRequired,
+    expandAll: PropTypes.string.isRequired,
+    toggle: PropTypes.string.isRequired,
+};

test/CheckboxTree.js

@@ -86,6 +86,20 @@ describe('<CheckboxTree />', () => {
         });
     });
 
+    describe('lang', () => {
+        it('should override default language values', () => {
+            const wrapper = shallow(
+                <CheckboxTree
+                    lang={{ expandAll: 'Expand it', collapseAll: 'Collapse it' }}
+                    nodes={[]}
+                    showExpandAll
+                />,
+            );
+
+            assert.equal('Expand it', wrapper.find('.rct-option-expand-all').prop('title'));
+        });
+    });
+
     describe('nativeCheckboxes', () => {
         it('should add the class rct-native-display to the root', () => {
             const wrapper = shallow(

test/TreeNode.js

@@ -9,6 +9,9 @@ const baseProps = {
     disabled: false,
     expandDisabled: false,
     expanded: false,
+    lang: {
+        toggle: 'Toggle',
+    },
     icons: {
         check: <span className="rct-icon rct-icon-check" />,
         uncheck: <span className="rct-icon rct-icon-uncheck" />,