Skip to content

Commit 0cb0659

Browse files
AlexLisenkovAlexLisenkov
authored
Add none checker checkbox (#5)
* Add none checker checkbox * Update readme
1 parent 3b731c2 commit 0cb0659

32 files changed

+1008
-296
lines changed

‎README.md

+64-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![npm](https://img.shields.io/npm/dt/@createnl/grouped-checkboxes)](https://www.npmjs.com/package/@createnl/grouped-checkboxes)
66
[![React](https://img.shields.io/badge/React-^16.8.0-brightgreen)](https://github.com/facebook/react)
77

8-
An easy to use React Component to create a checkbox group with a checkbox to check all checkboxes.
8+
An easy to use React Component to create a checkbox group with a checkbox to check all checkboxes and a checkbox to check none.
99

1010
## Installation
1111
```
@@ -16,6 +16,8 @@ yarn add @createnl/grouped-checkboxes
1616
```
1717

1818
## Example
19+
[![See examples](example.gif)](https://v5sww.csb.app/)
20+
1921
Live examples: https://v5sww.csb.app/
2022

2123
Codesandbox: https://codesandbox.io/s/grouped-checkboxes-v5sww
@@ -44,7 +46,7 @@ Note that:
4446
- All checkboxes and allCheckerCheckboxes must have an unique id
4547

4648
## Features
47-
- Multiple `AllCheckerCheckboxes` inside a group
49+
- Multiple `AllCheckerCheckboxes` and `NoneCheckerCheckboxes` inside a group
4850
- `onChange` callback on group
4951
- Possibility to nest checkboxes in your own components
5052
- Possibility to check or disable by default
@@ -69,7 +71,7 @@ Note that:
6971
</CheckboxGroup>
7072
```
7173

72-
### Real life example
74+
### Real life example (with check all)
7375
``` jsx harmony
7476
import React from "react";
7577
import { AllCheckerCheckbox, Checkbox, CheckboxGroup } from 'grouped-checkboxes';
@@ -108,7 +110,7 @@ The value of an onChange parameter looks like:
108110
{
109111
"checked": true,
110112
"disabled": false,
111-
"id": "tos",
113+
"id": "tos"
112114
},
113115
{
114116
"checked": true,
@@ -123,3 +125,61 @@ The value of an onChange parameter looks like:
123125
]
124126
```
125127
All given props will be accessible.
128+
129+
### Real life example (with none-checker)
130+
If you need a checkbox that will check when nothing is checked you can use the NoneCheckerCheckbox.
131+
This checkbox can be clicked to uncheck everything else, but can't be unchecked to check everything else.
132+
133+
``` jsx harmony
134+
import React from "react";
135+
import { NoneCheckerCheckbox, Checkbox, CheckboxGroup } from 'grouped-checkboxes';
136+
137+
const LunchDeclaration = (props) => {
138+
const onCheckboxChange = (checkboxes) => {
139+
console.log(checkboxes);
140+
}
141+
142+
return (
143+
<CheckboxGroup onChange={console.log}>
144+
<h1>What did you eat for lunch?</h1>
145+
<label>
146+
<Checkbox id="pizza" />
147+
Pizza
148+
</label>
149+
<label>
150+
<Checkbox id="burger" />
151+
Burger
152+
</label>
153+
<label>
154+
<Checkbox id="fries" />
155+
Fries
156+
</label>
157+
<label>
158+
<NoneCheckerCheckbox id="nothing" />
159+
Nothing
160+
</label>
161+
</CheckboxGroup>
162+
);
163+
};
164+
```
165+
The value of an onChange parameter looks like:
166+
```json
167+
[
168+
{
169+
"checked": true,
170+
"disabled": false,
171+
"id": "pizza"
172+
},
173+
{
174+
"checked": true,
175+
"disabled": false,
176+
"id": "burger"
177+
},
178+
{
179+
"checked": true,
180+
"disabled": false,
181+
"id": "fries"
182+
}
183+
]
184+
```
185+
Note that the value of the NoneCheckerCheckbox will not be passed.

‎__tests__/AllCheckboxEventTests.tsx

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import {cleanup, fireEvent, render} from '@testing-library/react';
2+
import React from 'react';
3+
import {AllCheckerCheckbox, Checkbox, CheckboxGroup} from "../src";
4+
5+
// automatically unmount and cleanup DOM after the test is finished.
6+
afterEach(cleanup);
7+
8+
it('Unchecked allCheckerCheckbox will check on click', () => {
9+
const component = render(
10+
<CheckboxGroup>
11+
<AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" />
12+
</CheckboxGroup>
13+
);
14+
15+
const checkbox = component.getByTestId('test-checkbox') as HTMLInputElement;
16+
17+
expect(checkbox.checked).toEqual(false);
18+
fireEvent.click(checkbox);
19+
expect(checkbox.checked).toEqual(true);
20+
});
21+
22+
it('Checked allCheckerCheckbox will uncheck on click', () => {
23+
const component = render(
24+
<CheckboxGroup defaultChecked>
25+
<AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" />
26+
</CheckboxGroup>
27+
);
28+
29+
const checkbox = component.getByTestId('test-checkbox') as HTMLInputElement;
30+
31+
expect(checkbox.checked).toEqual(true);
32+
fireEvent.click(checkbox);
33+
expect(checkbox.checked).toEqual(false);
34+
});
35+
36+
it('All checkboxes will check on allCheckboxesChecker click', () => {
37+
const component = render(
38+
<CheckboxGroup>
39+
<AllCheckerCheckbox id={"all-checker-checkbox"} data-testid="all-checker-checkbox" />
40+
<Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
41+
<Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
42+
</CheckboxGroup>
43+
);
44+
45+
const allCheckerCheckbox = component.getByTestId('all-checker-checkbox') as HTMLInputElement;
46+
const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
47+
const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
48+
49+
expect(checkbox1.checked).toEqual(false);
50+
expect(checkbox2.checked).toEqual(false);
51+
fireEvent.click(allCheckerCheckbox);
52+
expect(checkbox1.checked).toEqual(true);
53+
expect(checkbox2.checked).toEqual(true);
54+
});
55+
56+
it('All checkboxes will uncheck on allCheckboxesChecker click', () => {
57+
const component = render(
58+
<CheckboxGroup>
59+
<AllCheckerCheckbox id={"all-checker-checkbox"} data-testid="all-checker-checkbox" />
60+
<Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" checked/>
61+
<Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" checked/>
62+
</CheckboxGroup>
63+
);
64+
65+
const allCheckerCheckbox = component.getByTestId('all-checker-checkbox') as HTMLInputElement;
66+
const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
67+
const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
68+
69+
expect(checkbox1.checked).toEqual(true);
70+
expect(checkbox2.checked).toEqual(true);
71+
fireEvent.click(allCheckerCheckbox);
72+
expect(checkbox1.checked).toEqual(false);
73+
expect(checkbox2.checked).toEqual(false);
74+
});
75+
76+
77+
it('All allCheckerCheckboxes will uncheck when not all checkboxes are checked', () => {
78+
const component = render(
79+
<CheckboxGroup>
80+
<AllCheckerCheckbox id={"all-checker-checkbox-1"} data-testid="all-checker-checkbox-1" />
81+
<Checkbox id={"test-checkbox-1"} data-testid="test-checkbox" checked/>
82+
<Checkbox id={"test-checkbox-2"} checked/>
83+
<Checkbox id={"test-checkbox-3"} checked/>
84+
<AllCheckerCheckbox id={"all-checker-checkbox-2"} data-testid="all-checker-checkbox-2" />
85+
</CheckboxGroup>
86+
);
87+
88+
const allCheckerCheckbox1 = component.getByTestId('all-checker-checkbox-1') as HTMLInputElement;
89+
const allCheckerCheckbox2 = component.getByTestId('all-checker-checkbox-2') as HTMLInputElement;
90+
const checkbox = component.getByTestId('test-checkbox') as HTMLInputElement;
91+
92+
expect(allCheckerCheckbox1.checked).toEqual(true);
93+
expect(allCheckerCheckbox2.checked).toEqual(true);
94+
fireEvent.click(checkbox);
95+
expect(allCheckerCheckbox1.checked).toEqual(false);
96+
expect(allCheckerCheckbox2.checked).toEqual(false);
97+
});
98+
99+
it('All allCheckerCheckboxes will check when all checkboxes are checked', () => {
100+
const component = render(
101+
<CheckboxGroup>
102+
<AllCheckerCheckbox id={"all-checker-checkbox-1"} data-testid="all-checker-checkbox-1" />
103+
<Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
104+
<Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
105+
<Checkbox id={"test-checkbox-3"} data-testid="test-checkbox-3" />
106+
<AllCheckerCheckbox id={"all-checker-checkbox-2"} data-testid="all-checker-checkbox-2" />
107+
</CheckboxGroup>
108+
);
109+
110+
const allCheckerCheckbox1 = component.getByTestId('all-checker-checkbox-1') as HTMLInputElement;
111+
const allCheckerCheckbox2 = component.getByTestId('all-checker-checkbox-2') as HTMLInputElement;
112+
const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
113+
const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
114+
const checkbox3 = component.getByTestId('test-checkbox-3') as HTMLInputElement;
115+
116+
expect(allCheckerCheckbox1.checked).toEqual(false);
117+
expect(allCheckerCheckbox2.checked).toEqual(false);
118+
fireEvent.click(checkbox1);
119+
fireEvent.click(checkbox2);
120+
fireEvent.click(checkbox3);
121+
expect(allCheckerCheckbox1.checked).toEqual(true);
122+
expect(allCheckerCheckbox2.checked).toEqual(true);
123+
});
124+
125+
it('Click on allCheckerCheckbox will trigger onChange on checkboxGroup', () => {
126+
const testOnChange = jest.fn();
127+
128+
const component = render(
129+
<CheckboxGroup onChange={testOnChange}>
130+
<AllCheckerCheckbox id={"all-checker-checkbox-1"} data-testid="all-checker-checkbox-1" />
131+
<Checkbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
132+
<Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
133+
<Checkbox id={"test-checkbox-3"} data-testid="test-checkbox-3" />
134+
<AllCheckerCheckbox id={"all-checker-checkbox-2"} data-testid="all-checker-checkbox-2" />
135+
</CheckboxGroup>
136+
);
137+
setTimeout(() => {
138+
const allCheckerCheckbox1 = component.getByTestId('all-checker-checkbox-1') as HTMLInputElement;
139+
fireEvent.click(allCheckerCheckbox1);
140+
expect(testOnChange.mock.calls.length).toBe(1);
141+
}, 251);
142+
});
143+
144+
it('Click will trigger onChange on allCheckerCheckbox', () => {
145+
const testOnChange = jest.fn();
146+
147+
const component = render(
148+
<CheckboxGroup>
149+
<AllCheckerCheckbox id={"test-checkbox"} data-testid="test-checkbox" onChange={testOnChange} />
150+
</CheckboxGroup>
151+
);
152+
153+
const checkbox1 = component.getByTestId('test-checkbox') as HTMLInputElement;
154+
155+
fireEvent.click(checkbox1);
156+
expect(testOnChange.mock.calls.length).toBe(1);
157+
});
158+
159+

‎__tests__/CheckboxDefaultsTest.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {cleanup, render} from '@testing-library/react';
22
import React from 'react';
3-
import {AllCheckerCheckbox, Checkbox, CheckboxGroup} from "../src";
3+
import {AllCheckerCheckbox, Checkbox, CheckboxGroup, NoneCheckerCheckbox} from "../src";
44

55
// automatically unmount and cleanup DOM after the test is finished.
66
afterEach(cleanup);
@@ -270,46 +270,59 @@ it('CheckboxGroup with default disabled combination of checkboxes and allChecker
270270
it('CheckboxGroup without default disabled combination of checkboxes and allCheckerCheckbox will be disabled', () => {
271271
const component = render(
272272
<CheckboxGroup>
273+
<NoneCheckerCheckbox id={"test-checkbox-6"} data-testid="test-checkbox-6" />
273274
<AllCheckerCheckbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
274275
<Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
275276
<Checkbox id={"test-checkbox-3"} data-testid="test-checkbox-3" />
276277
<AllCheckerCheckbox id={"test-checkbox-4"} data-testid="test-checkbox-4" />
278+
<NoneCheckerCheckbox id={"test-checkbox-5"} data-testid="test-checkbox-5" />
277279
</CheckboxGroup>
278280
);
279281

280282
const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
281283
const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
282284
const checkbox3 = component.getByTestId('test-checkbox-3') as HTMLInputElement;
283285
const checkbox4 = component.getByTestId('test-checkbox-4') as HTMLInputElement;
286+
const checkbox5 = component.getByTestId('test-checkbox-5') as HTMLInputElement;
287+
const checkbox6 = component.getByTestId('test-checkbox-6') as HTMLInputElement;
284288

285289
expect(checkbox1.disabled).toEqual(false);
286290
expect(checkbox2.disabled).toEqual(false);
287291
expect(checkbox3.disabled).toEqual(false);
288292
expect(checkbox4.disabled).toEqual(false);
293+
expect(checkbox5.disabled).toEqual(false);
294+
expect(checkbox6.disabled).toEqual(false);
289295
});
290296

291297
it('CheckboxGroup with default checked and default disabled combination of checkboxes and allCheckerCheckbox will be checked and disabled', () => {
292298
const component = render(
293299
<CheckboxGroup defaultChecked defaultDisabled>
300+
<NoneCheckerCheckbox id={"test-checkbox-6"} data-testid="test-checkbox-6" />
294301
<AllCheckerCheckbox id={"test-checkbox-1"} data-testid="test-checkbox-1" />
295302
<Checkbox id={"test-checkbox-2"} data-testid="test-checkbox-2" />
296303
<Checkbox id={"test-checkbox-3"} data-testid="test-checkbox-3" />
297304
<AllCheckerCheckbox id={"test-checkbox-4"} data-testid="test-checkbox-4" />
305+
<NoneCheckerCheckbox id={"test-checkbox-5"} data-testid="test-checkbox-5" />
298306
</CheckboxGroup>
299307
);
300308

301309
const checkbox1 = component.getByTestId('test-checkbox-1') as HTMLInputElement;
302310
const checkbox2 = component.getByTestId('test-checkbox-2') as HTMLInputElement;
303311
const checkbox3 = component.getByTestId('test-checkbox-3') as HTMLInputElement;
304312
const checkbox4 = component.getByTestId('test-checkbox-4') as HTMLInputElement;
313+
const checkbox5 = component.getByTestId('test-checkbox-5') as HTMLInputElement;
314+
const checkbox6 = component.getByTestId('test-checkbox-6') as HTMLInputElement;
305315

306316
expect(checkbox1.checked).toEqual(true);
307317
expect(checkbox2.checked).toEqual(true);
308318
expect(checkbox3.checked).toEqual(true);
309319
expect(checkbox4.checked).toEqual(true);
320+
expect(checkbox5.checked).toEqual(false);
321+
expect(checkbox6.checked).toEqual(false);
310322

311323
expect(checkbox1.disabled).toEqual(true);
312324
expect(checkbox2.disabled).toEqual(true);
313325
expect(checkbox3.disabled).toEqual(true);
314-
expect(checkbox4.disabled).toEqual(true);
326+
expect(checkbox5.disabled).toEqual(true);
327+
expect(checkbox6.disabled).toEqual(true);
315328
});

0 commit comments

Comments
 (0)