From ed044b5c2e2634e9da4dd3a24d7795a6d4f7ea80 Mon Sep 17 00:00:00 2001 From: Worth Lutz Date: Sat, 7 Jul 2018 09:53:03 -0400 Subject: [PATCH 1/2] add radio groups --- README.md | 19 ++- examples/dist/index.html | 17 ++ examples/dist/index.js | 8 +- examples/dist/style.css | 8 + examples/src/index.html | 17 ++ examples/src/index.js | 5 +- examples/src/js/RadioExample.js | 269 ++++++++++++++++++++++++++++++ src/js/CheckboxTree.js | 86 ++++++++-- src/js/TreeNode.js | 10 +- src/less/react-checkbox-tree.less | 8 + src/scss/react-checkbox-tree.scss | 8 + 11 files changed, 429 insertions(+), 26 deletions(-) create mode 100644 examples/src/js/RadioExample.js diff --git a/README.md b/README.md index f0257ddb..8f631821 100644 --- a/README.md +++ b/README.md @@ -112,12 +112,13 @@ All node objects **must** have a unique `value`. This value is serialized into t Individual nodes within the `nodes` property can have the following structure: -| Property | Type | Description | Default | -| -------------- | ------ | ---------------------------------------- | ------- | -| `label` | mixed | **Required**. The node's label. | | -| `value` | mixed | **Required**. The node's value. | | -| `children` | array | An array of child nodes. | `null` | -| `className` | string | A className to add to the node. | `null` | -| `disabled` | bool | Whether the node should be disabled. | `false` | -| `icon` | mixed | A custom icon for the node. | `null` | -| `showCheckbox` | bool | Whether the node should show a checkbox. | `true` | +| Property | Type | Description | Default | +| -------------- | ------ | ------------------------------------------- | ------- | +| `label` | mixed | **Required**. The node's label. | | +| `value` | mixed | **Required**. The node's value. | | +| `children` | array | An array of child nodes. | `null` | +| `className` | string | A className to add to the node. | `null` | +| `disabled` | bool | Whether the node should be disabled. | `false` | +| `icon` | mixed | A custom icon for the node. | `null` | +| `showCheckbox` | bool | Whether the node should show a checkbox. | `true` | +| `isRadioGroup` | bool | Whether the node is a radio group container. | `false` | diff --git a/examples/dist/index.html b/examples/dist/index.html index f5ee6157..6a5835c8 100644 --- a/examples/dist/index.html +++ b/examples/dist/index.html @@ -29,6 +29,7 @@

A simple and elegant checkbox tree for React

Examples

+

Basic Example

@@ -77,6 +78,22 @@

Large Data Example

The checkbox tree is capable of supporting a large number of nodes at once.

+

Radio Group Example

+

+ A parent node can be classified as a "radio group" which means that its child nodes will have + radio buttons instead of checkboxes. This allows mutually exclusive options within the checkbox tree. +

+

+ Note: +

+

+
+