Skip to content

Commit 0b205ff

Browse files
jakezateckyjakezatecky
committed
Merge branch 'v2.0-dev'
2 parents 4c24406 + 9fa2045 commit 0b205ff

29 files changed

+709
-738
lines changed

‎.npmignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/.css-compare
21
/.idea
32
/examples
43
/test

‎CHANGELOG.md‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,43 @@
44

55
### Breaking Changes
66

7-
#### Styling
8-
9-
* The `iconsClass` property now defaults to `"fa5"` for Font Awesome 5/6 instead of Font Awesome 4
10-
117
#### Accessibility
128

9+
* Make the underlying checkbox accessible to screen readers and touch (#276)
1310
* Hide the pseudo-checkbox from the accessibility tree
1411
* Change the clickable label from `role="link"` to `role="button"`
1512

13+
#### Properties
14+
15+
* `id`: No longer generates a random UUID when empty
16+
* `lang`:
17+
* Replaced `toggle` key with `collapseNode` and `expandNode` to better reflect state (#275)
18+
* Will now merge any missing keys with the default language
19+
* `icons`: Setting a node icon to `null` will no longer render the wrapper element (#30)
20+
* `iconsClass`: Now defaults to `'fa6'` for Font Awesome 5/6 instead of Font Awesome 4
21+
22+
#### Styling
23+
24+
* Drop support for Less.js styles
25+
* The `rct-options` and `rct-option` CSS classes are now `rct-actions` and `rct-action` respectively
26+
* The `rct-title` CSS class is now `rct-label`
27+
28+
#### Other
29+
30+
* Drop support for React before v16.8
31+
1632
### Added
1733

1834
* Add full support for ESM environments
35+
* Add `checkKeys` property to allow specification of JavaScript keys to trigger check behavior
36+
* Add `onContextMenu` property, which will trigger whenever a user right-clicks a node (#237)
37+
* The tree will now preserve original node properties (accessible via `onCheck`/`onExpand`) (#421)
1938

2039
## [v1.8.0](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.3...v1.8.0) (2022-09-06)
2140

2241
### Other
2342

24-
* [#329] Add React 18 to the peer dependency list (**Note**: React 18 is not part of the automatic testing, but should work)
43+
* [#329]: Add React 18 to the peer dependency list (**Note**: React 18 is not part of the automatic testing, but should work)
2544

2645
## [v1.7.3](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.2...v1.7.3) (2022-05-23)
2746

‎README.md‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,9 @@ npm install react-checkbox-tree --save
2828
2929
### Include CSS
3030

31-
For your convenience, the library's styles can be consumed utilizing one of the following files:
31+
The library's styles are available through one of the following files:
3232

3333
* `node_modules/react-checkbox-tree/lib/react-checkbox-tree.css`
34-
* `node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less`
3534
* `node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss`
3635

3736
Either include one of these files in your stylesheets or utilize a CSS loader:
@@ -47,6 +46,7 @@ Below is a minimal example using [state hooks][docs-state-hooks]. Note that `Che
4746
``` jsx
4847
import React, { useState } from 'react';
4948
import CheckboxTree from 'react-checkbox-tree';
49+
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
5050

5151
const nodes = [{
5252
value: 'mars',
@@ -149,32 +149,34 @@ Returns:
149149

150150
### Properties
151151

152-
| Property | Type | Description | Default |
153-
| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ----------- |
154-
| `nodes` | array | **Required**. Specifies the tree nodes and their children. | |
155-
| `checkModel` | string | Specifies which checked nodes should be stored in the `checked` array. Accepts `'leaf'` or `'all'`. | `'leaf'` |
156-
| `checked` | array | An array of checked node values. | `[]` |
157-
| `direction` | string | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`). | `'ltr'` |
158-
| `disabled` | bool | If true, the component will be disabled and nodes cannot be checked. | `false` |
159-
| `expandDisabled` | bool | If true, the ability to expand nodes will be disabled. | `false` |
160-
| `expandOnClick` | bool | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function. | `false` |
161-
| `expanded` | array | An array of expanded node values. | `[]` |
162-
| `icons` | object | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**. | `{ ... }` |
163-
| `iconsClass` | string | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported. | `'fa5'` |
164-
| `id` | string | A string to be used for the HTML ID of the rendered tree and its nodes. | `null` |
165-
| `lang` | object | An object containing the language mappings for the various text elements. | `{ ... }` |
166-
| `name` | string | Optional name for the hidden `<input>` element. | `undefined` |
167-
| `nameAsArray` | bool | If true, the hidden `<input>` will encode its values as an array rather than a joined string. | `false` |
168-
| `nativeCheckboxes` | bool | If true, native browser checkboxes will be used instead of pseudo-checkbox icons. | `false` |
169-
| `noCascade` | bool | If true, toggling a parent node will **not** cascade its check state to its children. | `false` |
170-
| `onlyLeafCheckboxes` | bool | If true, checkboxes will only be shown for leaf nodes. | `false` |
171-
| `optimisticToggle` | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true` |
172-
| `showExpandAll` | bool | If true, buttons for expanding and collapsing all parent nodes will appear in the tree. | `false` |
173-
| `showNodeIcon` | bool | If true, each node will show a parent or leaf icon. | `true` |
174-
| `showNodeTitle` | bool | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`. | `false` |
175-
| `onCheck` | function | onCheck handler: `function(checked, targetNode) {}` | `() => {}` |
176-
| `onClick` | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked. | `() => {}` |
177-
| `onExpand` | function | onExpand handler: `function(expanded, targetNode) {}` | `() => {}` |
152+
| Property | Type | Description | Default |
153+
| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- |
154+
| `nodes` | array | **Required**. Specifies the tree nodes and their children. | |
155+
| `checkKeys` | array | A list of [keyboard keys][mdn-key] that will trigger a toggle of the check status of a node. | `[' ', 'Enter']` |
156+
| `checkModel` | string | Specifies which checked nodes should be stored in the `checked` array. Accepts `'leaf'` or `'all'`. | `'leaf'` |
157+
| `checked` | array | An array of checked node values. | `[]` |
158+
| `direction` | string | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`). | `'ltr'` |
159+
| `disabled` | bool | If true, the component will be disabled and nodes cannot be checked. | `false` |
160+
| `expandDisabled` | bool | If true, the ability to expand nodes will be disabled. | `false` |
161+
| `expandOnClick` | bool | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function. | `false` |
162+
| `expanded` | array | An array of expanded node values. | `[]` |
163+
| `icons` | object | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**. | `{ ... }` |
164+
| `iconsClass` | string | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported. | `'fa5'` |
165+
| `id` | string | A string to be used for the HTML ID of the rendered tree and its nodes. | `null` |
166+
| `lang` | object | A key-value pairing of localized text. See [`src/js/lang/default.js`][lang-file] for a list of keys. | `{ ... }` |
167+
| `name` | string | Optional name for the hidden `<input>` element. | `undefined` |
168+
| `nameAsArray` | bool | If true, the hidden `<input>` will encode its values as an array rather than a joined string. | `false` |
169+
| `nativeCheckboxes` | bool | If true, native browser checkboxes will be used instead of pseudo-checkbox icons. | `false` |
170+
| `noCascade` | bool | If true, toggling a parent node will **not** cascade its check state to its children. | `false` |
171+
| `onlyLeafCheckboxes` | bool | If true, checkboxes will only be shown for leaf nodes. | `false` |
172+
| `optimisticToggle` | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true` |
173+
| `showExpandAll` | bool | If true, buttons for expanding and collapsing all parent nodes will appear in the tree. | `false` |
174+
| `showNodeIcon` | bool | If true, each node will show a parent or leaf icon. | `true` |
175+
| `showNodeTitle` | bool | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`. | `false` |
176+
| `onCheck` | function | onCheck handler: `function(checked, targetNode) {}` | `() => {}` |
177+
| `onClick` | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked. | `null` |
178+
| `onContextMenu` | function | onContextMenu handler: `function(event, targetNode) {}`. Triggers when right-clicking a node element. | `null` |
179+
| `onExpand` | function | onExpand handler: `function(expanded, targetNode) {}` | `() => {}` |
178180

179181
#### `onCheck` and `onExpand`
180182

@@ -196,4 +198,6 @@ Individual nodes within the `nodes` property can have the following structure:
196198
[docs-controlled]: https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
197199
[docs-state-hooks]: https://react.dev/reference/react/useState
198200
[font-awesome]: https://fontawesome.com
201+
[lang-file]: https://github.com/jakezatecky/react-dual-listbox/blob/master/src/js/lang/default.js
202+
[mdn-key]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
199203
[react-fontawesome]: https://github.com/FortAwesome/react-fontawesome

‎examples/src/index.html‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,22 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="theme-color" content="#3498db">
88
<meta name="description" content="React Checkbox Tree: A simple, yet elegant checkbox treeview for React.">
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
913
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
10-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
11-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto">
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1215
<link rel="stylesheet" href="./scss/style.scss">
1316

14-
<!-- Global site tag (gtag.js) - Google Analytics -->
15-
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133457161-1"></script>
17+
<!-- Google tag (gtag.js) -->
18+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JEEPG1KXFR"></script>
1619
<script>
1720
window.dataLayer = window.dataLayer || [];
1821
function gtag(){dataLayer.push(arguments);}
1922
gtag('js', new Date());
2023

21-
gtag('config', 'UA-133457161-1');
24+
gtag('config', 'G-JEEPG1KXFR');
2225
</script>
2326
</head>
2427
<body>
@@ -32,10 +35,10 @@ <h2 class="project-tagline">A simple and elegant checkbox tree for React</h2>
3235

3336
<section class="main-content">
3437
<p>
35-
<strong>React Checkbox Tree</strong> is a feature-rich checkbox tree view for React. Checkout the examples below
36-
and the associated <a href="https://github.com/jakezatecky/react-checkbox-tree/tree/master/examples/src/js">source code</a>.
37-
Head to the <a href="https://github.com/jakezatecky/react-checkbox-tree">documentation</a> when you are ready to
38-
try it out.
38+
<strong>React Checkbox Tree</strong> is a feature-rich checkbox tree view for React. Checkout the examples and
39+
<a href="https://github.com/jakezatecky/react-checkbox-tree/tree/master/examples/src/js">source code</a> below.
40+
Head over to the <a href="https://github.com/jakezatecky/react-checkbox-tree">documentation page</a> to see the
41+
full list of options.
3942
</p>
4043

4144
<h1>Examples</h1>

0 commit comments

Comments
 (0)