Skip to content

add Radio Groups #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

add Radio Groups #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed044b5
add radio groups
Jul 7, 2018
3f89a3b
add tests for CheckboxTree
Jul 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
17 changes: 17 additions & 0 deletions examples/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ <h2 class="project-tagline">A simple and elegant checkbox tree for React</h2>
</p>

<h1>Examples</h1>

<h2>Basic Example</h2>
<div id="basic-example"></div>

Expand Down Expand Up @@ -77,6 +78,22 @@ <h2>Large Data Example</h2>
<p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
<div id="large-data-example"></div>

<h2>Radio Group Example</h2>
<p>
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.
</p>
<p>
Note:
<ul>
<li>Checkmarks do not cascade through radio groups in either direction.</li>
<li>Checking or unchecking a radio group node does not cascade down to the radio buttons below.</li>
<li>Checkboxes below radio group items do not change when the radio button above turns on or off.</li>
<li>Checkboxes under a radio button node will cascade normally below the radio button.
</ul>
</p>
<div id="radio-example"></div>

<footer class="site-footer">
<span class="site-footer-owner">
<a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.
Expand Down
8 changes: 4 additions & 4 deletions examples/dist/index.js
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions examples/dist/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,14 @@
content: "\f046";
}

.rct-icon-radio-off::before {
content: "\f10c";
}

.rct-icon-radio-on::before {
content: "\f192";
}

.rct-icon-leaf::before {
content: "\f016";
}
Expand Down
17 changes: 17 additions & 0 deletions examples/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ <h2 class="project-tagline">A simple and elegant checkbox tree for React</h2>
</p>

<h1>Examples</h1>

<h2>Basic Example</h2>
<div id="basic-example"></div>

Expand Down Expand Up @@ -77,6 +78,22 @@ <h2>Large Data Example</h2>
<p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
<div id="large-data-example"></div>

<h2>Radio Group Example</h2>
<p>
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.
</p>
<p>
Note:
<ul>
<li>Checkmarks do not cascade through radio groups in either direction.</li>
<li>Checking or unchecking a radio group node does not cascade down to the radio buttons below.</li>
<li>Checkboxes below radio group items do not change when the radio button above turns on or off.</li>
<li>Checkboxes under a radio button node will cascade normally below the radio button.
</ul>
</p>
<div id="radio-example"></div>

<footer class="site-footer">
<span class="site-footer-owner">
<a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.
Expand Down
5 changes: 4 additions & 1 deletion examples/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';

import ClickableLabelsExample from './js/ClickableLabelsExample';
import BasicExample from './js/BasicExample';
import RadioExample from './js/RadioExample';
import CustomIconsExample from './js/CustomIconsExample';
import DisabledExample from './js/DisabledExample';
import HiddenCheckboxesExample from './js/HiddenCheckboxesExample';
Expand All @@ -11,10 +12,12 @@ import PessimisticToggleExample from './js/PessimisticToggleExample';
import LargeDataExample from './js/LargeDataExample';

ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
ReactDOM.render(<RadioExample />, document.getElementById('radio-example'));
ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
ReactDOM.render(<DisabledExample />, document.getElementById('disabled-example'));
ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-checkboxes-example'));
ReactDOM.render(<NoCascadeExample />, document.getElementById('no-cascade-example'));
ReactDOM.render(<PessimisticToggleExample />, document.getElementById('pessimistic-toggle-example'));
ReactDOM.render(<PessimisticToggleExample />,
document.getElementById('pessimistic-toggle-example'));
ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
ReactDOM.render(<ClickableLabelsExample />, document.getElementById('clickable-labels-example'));
269 changes: 269 additions & 0 deletions examples/src/js/RadioExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
import React from 'react';
import CheckboxTree from 'react-checkbox-tree';

const nodes = [
{
value: 'base_layers',
label: 'base layers',
isRadioGroup: true,
children: [
{
value: 'default_base_layer',
label: 'default',
},
{
value: 'streets',
label: 'streets',
},
{
value: 'satellite',
label: 'satellite',
},
{
value: 'orthophotos',
label: 'orthophotos',
isRadioGroup: true,
children: [
{
value: 'b&w',
label: 'black & white',
isRadioGroup: true,
children: [
{
value: 'b&w-2005',
label: '2005',
},
{
value: 'b&w-2010',
label: '2010',
},
{
value: 'b&w-2015',
label: '2015',
},
{
value: 'b&w-2018',
label: '2018',
},
],
},
{
value: 'color',
label: 'color',
isRadioGroup: true,
children: [
{
value: 'color-2005',
label: '2005',
},
{
value: 'color-2010',
label: '2010',
},
{
value: 'color-2015',
label: '2015',
},
{
value: 'color-2018',
label: '2018',
},
],
},
],
},
],
},
{
value: 'overlays',
label: 'overlays',
children: [
{
value: 'parcels',
label: 'parcels',
children: [
{
value: 'parcels/outline',
label: 'outline',
},
{
value: 'parcels/special',
label: 'special',
isRadioGroup: true,
children: [
{
value: 'parcels/special/farm_use',
label: 'farm use',
children: [
{
value: 'type',
label: 'type',
children: [
{
value: 'livestock',
label: 'livestock',
},
{
value: 'crops',
label: 'crops',
},
]
},
{
value: 'size',
label: 'size',
children: [
{
value: 'size/small',
label: 'small',
},
{
value: 'size/medium',
label: 'medium',
},
{
value: 'size/large',
label: 'large',
},
]
},
]
},
{
value: 'parcels/special/permit',
label: 'permit',
},
{
value: 'parcels/special/zoning',
label: 'zoning',
},
]
},
{
value: 'parcels/text',
label: 'text',
children: [
{
value: 'pin_number',
label: 'pin number',
},
{
value: 'acreage',
label: 'acreage',
},
{
value: 'lotlines',
label: 'lotlines',
},
]
},
]
},
{
value: 'land_features',
label: 'land features',
children: [
{
value: 'contours',
label: 'contours',
},
{
value: 'flood_zones',
label: 'flood_zones',
},
{
value: 'land_cover',
label: 'land cover',
},
{
value: 'water_features',
label: 'water features',
},
]
},
{
value: 'schools',
label: 'schools',
children: [
{
value: 'elementary',
label: 'elementary',
},
{
value: 'middle',
label: 'middle',
},
{
value: 'high',
label: 'high',
},
]
},
],
},
];

class RadioExample extends React.Component {
constructor() {
super();

this.state = {
checked: [
'base_layers',
'default_base_layer',
'color',
'parcels/outline',
'parcels/special',
'crops',
'size/small',
'size/medium',
'size/large',
'middle',
'high',
'pin_number',
'acreage',
'lotlines',
],
expanded: [
'base_layers',
'orthophotos',
'b&w',
'color',
'overlays',
'parcels',
'parcels/special',
'parcels/special/farm_use',
'parcels/special/permit',
'type',
'size',
],
};

this.onCheck = this.onCheck.bind(this);
this.onExpand = this.onExpand.bind(this);
}

onCheck(checked) {
this.setState({ checked });
}

onExpand(expanded) {
this.setState({ expanded });
}

render() {
const { checked, expanded } = this.state;

return (
<CheckboxTree
checked={checked}
expanded={expanded}
nodes={nodes}
onCheck={this.onCheck}
onExpand={this.onExpand}
/>
);
}
}

export default RadioExample;
Loading