From ed08c48c8de880a2b426c66f59b4d862869b138c Mon Sep 17 00:00:00 2001 From: navid khalilian Date: Wed, 27 Sep 2023 18:15:55 +0330 Subject: [PATCH] Added i18n to Support translate label --- .gitignore | 3 ++- README.md | 53 +++++++++++++++++++++-------------------- src/index.d.ts | 1 + src/js/CheckboxTree.jsx | 5 +++- 4 files changed, 34 insertions(+), 28 deletions(-) diff --git a/.gitignore b/.gitignore index 5ee16525..63fa400a 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ /node_modules package-lock.json yarn.lock -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +.idea diff --git a/README.md b/README.md index 6742ff4f..b65149ed 100644 --- a/README.md +++ b/README.md @@ -149,32 +149,33 @@ Returns: ### Properties -| Property | Type | Description | Default | -| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ----------- | -| `nodes` | array | **Required**. Specifies the tree nodes and their children. | | -| `checkModel` | string | 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` | -| `expanded` | array | An array of expanded node values. | `[]` | -| `icons` | object | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**. | `{ ... }` | -| `iconsClass` | string | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported. | `'fa5'` | -| `id` | string | A string to be used for the HTML ID of the rendered tree and its nodes. | `null` | -| `lang` | object | An object containing the language mappings for the various text elements. | `{ ... }` | -| `name` | string | Optional name for the hidden `` element. | `undefined` | -| `nameAsArray` | bool | If true, the hidden `` 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` | -| `noCascade` | bool | If true, toggling a parent node will **not** cascade its check state to its children. | `false` | -| `onlyLeafCheckboxes` | bool | If true, checkboxes will only be shown for leaf nodes. | `false` | -| `optimisticToggle` | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true` | -| `showExpandAll` | bool | If true, buttons for expanding and collapsing all parent nodes will appear in the tree. | `false` | -| `showNodeIcon` | bool | If true, each node will show a parent or leaf icon. | `true` | -| `showNodeTitle` | bool | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`. | `false` | -| `onCheck` | function | onCheck handler: `function(checked, targetNode) {}` | `() => {}` | -| `onClick` | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked. | `() => {}` | -| `onExpand` | function | onExpand handler: `function(expanded, targetNode) {}` | `() => {}` | +| Property | Type | Description | Default | +|----------------------| -------- |---------------------------------------------------------------------------------------------------------------------|-------------| +| `nodes` | array | **Required**. Specifies the tree nodes and their children. | | +| `checkModel` | string | 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` | +| `expanded` | array | An array of expanded node values. | `[]` | +| `icons` | object | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**. | `{ ... }` | +| `iconsClass` | string | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported. | `'fa5'` | +| `id` | string | A string to be used for the HTML ID of the rendered tree and its nodes. | `null` | +| `lang` | object | An object containing the language mappings for the various text elements. | `{ ... }` | +| `name` | string | Optional name for the hidden `` element. | `undefined` | +| `nameAsArray` | bool | If true, the hidden `` 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` | +| `noCascade` | bool | If true, toggling a parent node will **not** cascade its check state to its children. | `false` | +| `onlyLeafCheckboxes` | bool | If true, checkboxes will only be shown for leaf nodes. | `false` | +| `optimisticToggle` | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true` | +| `showExpandAll` | bool | If true, buttons for expanding and collapsing all parent nodes will appear in the tree. | `false` | +| `showNodeIcon` | bool | If true, each node will show a parent or leaf icon. | `true` | +| `showNodeTitle` | bool | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`. | `false` | +| `onCheck` | function | onCheck handler: `function(checked, targetNode) {}` | `() => {}` | +| `onClick` | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked. | `() => {}` | +| `onExpand` | function | onExpand handler: `function(expanded, targetNode) {}` | `() => {}` | +| `i18n` | function | An i18n object to translate label | `null` | #### `onCheck` and `onExpand` diff --git a/src/index.d.ts b/src/index.d.ts index 6b2fd05d..f3a0ddfc 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -65,6 +65,7 @@ declare module "react-checkbox-tree" { onCheck?: (checked: Array, node: OnCheckNode) => void; onClick?: (node: OnCheckNode) => void; onExpand?: (expanded: Array, node: OnExpandNode) => void; + i18n?: any; } export default class CheckboxTree extends React.Component {} diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx index f36f8eef..0c304da5 100644 --- a/src/js/CheckboxTree.jsx +++ b/src/js/CheckboxTree.jsx @@ -25,6 +25,7 @@ class CheckboxTree extends React.Component { expandDisabled: PropTypes.bool, expandOnClick: PropTypes.bool, expanded: listShape, + i18n: PropTypes.func, icons: iconsShape, iconsClass: PropTypes.string, id: PropTypes.string, @@ -51,6 +52,7 @@ class CheckboxTree extends React.Component { expandDisabled: false, expandOnClick: false, expanded: [], + i18n: null, icons: { check: , uncheck: , @@ -223,6 +225,7 @@ class CheckboxTree extends React.Component { expandDisabled, expandOnClick, icons, + i18n, lang, noCascade, onClick, @@ -267,7 +270,7 @@ class CheckboxTree extends React.Component { icons={this.combineMemorized(defaultIcons, icons)} isLeaf={flatNode.isLeaf} isParent={flatNode.isParent} - label={node.label} + label={i18n ? i18n.t(node.label) : node.label} lang={lang} optimisticToggle={optimisticToggle} showCheckbox={showCheckbox}