Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@createnl/grouped-checkboxes

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@createnl/grouped-checkboxes - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

.eslintrc.js
CHANGELOG.md
dist/uuid.d.ts
dist/uuid.js
dist/uuid.js.map
src/uuid.ts

1

dist/AllCheckerCheckbox.d.ts
import React, { FC } from 'react';
interface AllCheckerCheckboxProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
id: string;
checked?: never;

@@ -5,0 +4,0 @@ }

22

dist/AllCheckerCheckbox.js

@@ -26,10 +26,11 @@ "use strict";

var CheckboxGroupContext_1 = __importDefault(require("./CheckboxGroupContext"));
var uuid_1 = __importDefault(require("./uuid"));
var AllCheckerCheckbox = function (props) {
var disabled = props.disabled, id = props.id, onChange = props.onChange;
var disabled = props.disabled, onChange = props.onChange;
var id = react_1.useState(uuid_1.default())[0];
var checkboxGroup = react_1.useContext(CheckboxGroupContext_1.default);
var _a = react_1.useState(id), prevId = _a[0], setPrevId = _a[1];
var _b = react_1.useState(false), initialized = _b[0], setInitialized = _b[1];
var _c = react_1.useState(true), shouldTriggerCheckboxContextChange = _c[0], setShouldTriggerCheckboxContextChange = _c[1];
var _d = react_1.useState(checkboxGroup.defaultChecked), isChecked = _d[0], setIsChecked = _d[1];
var _e = react_1.useState(disabled !== undefined ? disabled : checkboxGroup.defaultDisabled), isDisabled = _e[0], setIsDisabled = _e[1];
var _a = react_1.useState(false), initialized = _a[0], setInitialized = _a[1];
var _b = react_1.useState(true), shouldTriggerCheckboxContextChange = _b[0], setShouldTriggerCheckboxContextChange = _b[1];
var _c = react_1.useState(checkboxGroup.defaultChecked), isChecked = _c[0], setIsChecked = _c[1];
var _d = react_1.useState(disabled !== undefined ? disabled : checkboxGroup.defaultDisabled), isDisabled = _d[0], setIsDisabled = _d[1];
react_1.useEffect(function () {

@@ -42,8 +43,2 @@ checkboxGroup.assertIdDoesNotExist(id);

react_1.useEffect(function () {
if (prevId !== id) {
checkboxGroup.assertIdDoesNotExist(id);
checkboxGroup.allCheckerCheckboxes.delete(prevId);
setInitialized(false);
setPrevId(id);
}
checkboxGroup.allCheckerCheckboxes.set(id, {

@@ -64,6 +59,7 @@ isChecked: isChecked,

}, [
id, prevId, isChecked, isDisabled, setIsChecked, setIsDisabled, initialized,
id, isChecked, isDisabled, setIsChecked, setIsDisabled, initialized,
setShouldTriggerCheckboxContextChange, checkboxGroup, shouldTriggerCheckboxContextChange,
]);
var handleChange = function (event) {
event.persist();
if (!isDisabled) {

@@ -70,0 +66,0 @@ setShouldTriggerCheckboxContextChange(true);

4

dist/Checkbox.d.ts
import React, { FC } from 'react';
interface CheckboxProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
id: string;
}
declare type CheckboxProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
declare const Checkbox: FC<CheckboxProps>;
export default Checkbox;

19

dist/Checkbox.js

@@ -26,9 +26,10 @@ "use strict";

var CheckboxGroupContext_1 = __importDefault(require("./CheckboxGroupContext"));
var uuid_1 = __importDefault(require("./uuid"));
var Checkbox = function (props) {
var checked = props.checked, disabled = props.disabled, id = props.id, onChange = props.onChange;
var checked = props.checked, disabled = props.disabled, onChange = props.onChange;
var id = react_1.useState(uuid_1.default())[0];
var checkboxGroup = react_1.useContext(CheckboxGroupContext_1.default);
var _a = react_1.useState(id), prevId = _a[0], setPrevId = _a[1];
var _b = react_1.useState(true), shouldTriggerCheckboxContextChange = _b[0], setShouldTriggerCheckboxContextChange = _b[1];
var _c = react_1.useState(checked !== undefined ? checked : checkboxGroup.defaultChecked), isChecked = _c[0], setIsChecked = _c[1];
var _d = react_1.useState(disabled !== undefined ? disabled : checkboxGroup.defaultDisabled), isDisabled = _d[0], setIsDisabled = _d[1];
var _a = react_1.useState(true), shouldTriggerCheckboxContextChange = _a[0], setShouldTriggerCheckboxContextChange = _a[1];
var _b = react_1.useState(checked !== undefined ? checked : checkboxGroup.defaultChecked), isChecked = _b[0], setIsChecked = _b[1];
var _c = react_1.useState(disabled !== undefined ? disabled : checkboxGroup.defaultDisabled), isDisabled = _c[0], setIsDisabled = _c[1];
react_1.useEffect(function () {

@@ -48,7 +49,2 @@ checkboxGroup.assertIdDoesNotExist(id);

react_1.useEffect(function () {
if (prevId !== id) {
checkboxGroup.assertIdDoesNotExist(id);
checkboxGroup.checkboxes.delete(prevId);
setPrevId(id);
}
checkboxGroup.checkboxes.set(id, {

@@ -66,6 +62,7 @@ isChecked: isChecked,

}, [
id, prevId, isChecked, isDisabled, setIsChecked, setIsDisabled,
id, isChecked, isDisabled, setIsChecked, setIsDisabled,
setShouldTriggerCheckboxContextChange, checkboxGroup, shouldTriggerCheckboxContextChange,
]);
var handleChange = function (event) {
event.persist();
if (!isDisabled) {

@@ -72,0 +69,0 @@ setShouldTriggerCheckboxContextChange(true);

3

dist/CheckboxGroup.d.ts

@@ -1,6 +0,5 @@

import React, { FC } from 'react';
import React, { FC } from "react";
interface CheckboxChange extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
checked: boolean;
disabled: boolean;
id: string;
}

@@ -7,0 +6,0 @@ interface CheckboxGroupProps {

5

dist/CheckboxGroup.js

@@ -38,4 +38,4 @@ "use strict";

var checkboxChangeArray = [];
checkboxes.forEach(function (checkbox, id) {
checkboxChangeArray.push(__assign(__assign({}, checkbox.props), { checked: checkbox.isChecked || false, disabled: checkbox.isDisabled || false, id: id }));
checkboxes.forEach(function (checkbox) {
checkboxChangeArray.push(__assign(__assign({}, checkbox.props), { checked: checkbox.isChecked || false, disabled: checkbox.isDisabled || false }));
});

@@ -104,2 +104,3 @@ onChange(checkboxChangeArray);

var assertIdDoesNotExist = function (subject) {
console.log(subject);
if (hasCheckbox(subject)) {

@@ -106,0 +107,0 @@ throw new Error("Duplicate id " + subject + " in CheckboxGroup");

4

dist/CheckboxGroupContext.d.ts

@@ -7,5 +7,3 @@ import React from 'react';

setIsDisabled: (disabled: boolean) => void;
props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
id: string;
};
props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
}

@@ -12,0 +10,0 @@ declare const _default: React.Context<{

4

dist/CheckboxGroupContext.js

@@ -11,3 +11,2 @@ "use strict";

assertIdDoesNotExist: function () {
return;
},

@@ -19,11 +18,8 @@ checkboxes: new Map(),

onAllCheckerCheckboxChange: function () {
return;
},
onCheckboxChange: function () {
return;
},
onNoneCheckerCheckboxChange: function () {
return;
},
});
//# sourceMappingURL=CheckboxGroupContext.js.map

8

dist/index.d.ts

@@ -1,5 +0,5 @@

import AllCheckerCheckbox from "./AllCheckerCheckbox";
import Checkbox from "./Checkbox";
import CheckboxGroup from "./CheckboxGroup";
import NoneCheckerCheckbox from "./NoneCheckerCheckbox";
import AllCheckerCheckbox from './AllCheckerCheckbox';
import Checkbox from './Checkbox';
import CheckboxGroup from './CheckboxGroup';
import NoneCheckerCheckbox from './NoneCheckerCheckbox';
export { AllCheckerCheckbox, Checkbox, CheckboxGroup, NoneCheckerCheckbox, };

1

dist/NoneCheckerCheckbox.d.ts
import React, { FC } from 'react';
interface NoneCheckerCheckboxProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
id: string;
checked?: never;

@@ -5,0 +4,0 @@ }

22

dist/NoneCheckerCheckbox.js

@@ -26,10 +26,11 @@ "use strict";

var CheckboxGroupContext_1 = __importDefault(require("./CheckboxGroupContext"));
var uuid_1 = __importDefault(require("./uuid"));
var NoneCheckerCheckbox = function (props) {
var disabled = props.disabled, id = props.id, onChange = props.onChange;
var disabled = props.disabled, onChange = props.onChange;
var id = react_1.useState(uuid_1.default())[0];
var checkboxGroup = react_1.useContext(CheckboxGroupContext_1.default);
var _a = react_1.useState(id), prevId = _a[0], setPrevId = _a[1];
var _b = react_1.useState(false), initialized = _b[0], setInitialized = _b[1];
var _c = react_1.useState(true), shouldTriggerCheckboxContextChange = _c[0], setShouldTriggerCheckboxContextChange = _c[1];
var _d = react_1.useState(checkboxGroup.defaultChecked !== undefined ? !checkboxGroup.defaultChecked : undefined), isChecked = _d[0], setIsChecked = _d[1];
var _e = react_1.useState(disabled !== undefined ? disabled : checkboxGroup.defaultDisabled), isDisabled = _e[0], setIsDisabled = _e[1];
var _a = react_1.useState(false), initialized = _a[0], setInitialized = _a[1];
var _b = react_1.useState(true), shouldTriggerCheckboxContextChange = _b[0], setShouldTriggerCheckboxContextChange = _b[1];
var _c = react_1.useState(checkboxGroup.defaultChecked !== undefined ? !checkboxGroup.defaultChecked : undefined), isChecked = _c[0], setIsChecked = _c[1];
var _d = react_1.useState(disabled !== undefined ? disabled : checkboxGroup.defaultDisabled), isDisabled = _d[0], setIsDisabled = _d[1];
react_1.useEffect(function () {

@@ -42,8 +43,2 @@ checkboxGroup.assertIdDoesNotExist(id);

react_1.useEffect(function () {
if (prevId !== id) {
checkboxGroup.assertIdDoesNotExist(id);
checkboxGroup.noneCheckerCheckboxes.delete(prevId);
setInitialized(false);
setPrevId(id);
}
checkboxGroup.noneCheckerCheckboxes.set(id, {

@@ -64,6 +59,7 @@ isChecked: isChecked,

}, [
id, prevId, isChecked, isDisabled, setIsChecked, setIsDisabled, initialized,
id, isChecked, isDisabled, setIsChecked, setIsDisabled, initialized,
setShouldTriggerCheckboxContextChange, checkboxGroup, shouldTriggerCheckboxContextChange,
]);
var handleChange = function (event) {
event.persist();
if (!isDisabled) {

@@ -70,0 +66,0 @@ setShouldTriggerCheckboxContextChange(true);

30

package.json
{
"name": "@createnl/grouped-checkboxes",
"version": "1.0.0",
"version": "1.1.0",
"description": "Grouped checkboxes with check-all checkboxes",

@@ -28,17 +28,21 @@ "repository": {

"devDependencies": {
"@testing-library/react": "^9.3.2",
"@types/jest": "^24.0.22",
"@testing-library/react": "^9.4.0",
"@types/jest": "^24.0.25",
"@types/lodash.debounce": "^4.0.6",
"@types/react": "^16.9.11",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@typescript-eslint/eslint-plugin": "^2.14.0",
"@typescript-eslint/parser": "^2.14.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-typescript": "^6.3.1",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jest": "^23.3.0",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"jest": "^24.9.0",
"react": "^16.8.*",
"react-dom": "^16.9.0",
"react-test-renderer": "^16.11.0",
"ts-jest": "^24.1.0",
"tslint": "^5.20.1",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.1.0",
"tslint-react-hooks": "^2.2.1",
"typescript": "^3.7.2"
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-test-renderer": "^16.12.0",
"ts-jest": "^24.2.0",
"typescript": "^3.7.4"
},

@@ -45,0 +49,0 @@ "jest": {

48

README.md

@@ -36,6 +36,6 @@ # Grouped Checkboxes

<CheckboxGroup onChange={onCheckboxChange}>
<AllCheckerCheckbox id="check-all" />
<Checkbox id="first-option" />
<Checkbox id="second-option" />
<Checkbox id="third-option" />
<AllCheckerCheckbox />
<Checkbox value="option-1"/>
<Checkbox value="option-2" />
<Checkbox value="option-3" />
</CheckboxGroup>

@@ -45,5 +45,3 @@ );

```
Note that:
- `Checkbox` and `AllCheckerCheckbox` must be inside a `CheckboxGroup`
- All checkboxes and allCheckerCheckboxes must have an unique id
Note that `Checkbox` and `AllCheckerCheckbox` must be inside a `CheckboxGroup`

@@ -63,4 +61,4 @@ ## Features

<CheckboxGroup defaultChecked> // Set defaultChecked to check all by default
<AllCheckerCheckbox id="check-all" checked/> // Error: You cant contol allCheckerCheckboxes individually (will check automatically if necessary)
<Checkbox id="first-option" checked/> // Check individual checkboxes
<AllCheckerCheckbox checked/> // Error: You cant contol allCheckerCheckboxes individually (will check automatically if necessary)
<Checkbox value="anything" checked/> // Check individual checkboxes
</CheckboxGroup>

@@ -72,4 +70,4 @@ ```

<CheckboxGroup defaultDisabled> // Set defaultDisabled to disable all by default
<AllCheckerCheckbox id="check-all" disabled/> // Disable allCheckerCheckbox, will still check if all checkboxes are checked
<Checkbox id="first-option" disabled/> // Disable individual checkboxes
<AllCheckerCheckbox disabled/> // Disable allCheckerCheckbox, will still check if all checkboxes are checked
<Checkbox value="anything" disabled/> // Disable individual checkboxes
</CheckboxGroup>

@@ -91,15 +89,15 @@ ```

<label>
<Checkbox id="tos" />
<Checkbox value="tos" />
Terms and Conditions
</label>
<label>
<Checkbox id="privacy-policy" />
<Checkbox value="privacy-policy" />
Privacy Policy
</label>
<label>
<Checkbox id="advertisements" />
<Checkbox value="advertisements" />
Advertisements
</label>
<label>
<AllCheckerCheckbox id="check-all" />
<AllCheckerCheckbox />
Agree to all

@@ -118,3 +116,3 @@ </label>

"disabled": false,
"id": "tos"
"value": "tos"
},

@@ -124,3 +122,3 @@ {

"disabled": false,
"id": "privacy-policy"
"value": "privacy-policy"
},

@@ -130,3 +128,3 @@ {

"disabled": false,
"id": "advertisements"
"value": "advertisements"
}

@@ -154,15 +152,15 @@ ]

<label>
<Checkbox id="pizza" />
<Checkbox value="pizza" />
Pizza
</label>
<label>
<Checkbox id="burger" />
<Checkbox value="burger" />
Burger
</label>
<label>
<Checkbox id="fries" />
<Checkbox value="fries" />
Fries
</label>
<label>
<NoneCheckerCheckbox id="nothing" />
<NoneCheckerCheckbox />
Nothing

@@ -180,3 +178,3 @@ </label>

"disabled": false,
"id": "pizza"
"value": "pizza"
},

@@ -186,3 +184,3 @@ {

"disabled": false,
"id": "burger"
"value": "burger"
},

@@ -192,3 +190,3 @@ {

"disabled": false,
"id": "fries"
"value": "fries"
}

@@ -195,0 +193,0 @@ ]

64

src/CheckboxGroupContext.ts

@@ -5,37 +5,37 @@ /* istanbul ignore file */

export interface CheckboxEntry {
isChecked?: boolean;
setIsChecked: (checked: boolean) => void;
isDisabled?: boolean;
setIsDisabled: (disabled: boolean) => void;
props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & { id: string };
isChecked?: boolean;
setIsChecked: (checked: boolean) => void;
isDisabled?: boolean;
setIsDisabled: (disabled: boolean) => void;
props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
}
export default React.createContext<{
allCheckerCheckboxes: Map<string, CheckboxEntry>;
assertIdDoesNotExist: (id: string) => void;
checkboxes: Map<string, CheckboxEntry>;
defaultChecked?: boolean;
defaultDisabled?: boolean;
noneCheckerCheckboxes: Map<string, CheckboxEntry>;
onAllCheckerCheckboxChange: (key: string, initialized: boolean) => void;
onCheckboxChange: () => void;
onNoneCheckerCheckboxChange: (key: string, initialized: boolean) => void;
allCheckerCheckboxes: Map<string, CheckboxEntry>;
assertIdDoesNotExist: (id: string) => void;
checkboxes: Map<string, CheckboxEntry>;
defaultChecked?: boolean;
defaultDisabled?: boolean;
noneCheckerCheckboxes: Map<string, CheckboxEntry>;
onAllCheckerCheckboxChange: (key: string, initialized: boolean) => void;
onCheckboxChange: () => void;
onNoneCheckerCheckboxChange: (key: string, initialized: boolean) => void;
}>({
allCheckerCheckboxes: new Map<string, CheckboxEntry>(),
assertIdDoesNotExist: (): void => {
return;
},
checkboxes: new Map<string, CheckboxEntry>(),
defaultChecked: false,
defaultDisabled: false,
noneCheckerCheckboxes: new Map<string, CheckboxEntry>(),
onAllCheckerCheckboxChange: (): void => {
return;
},
onCheckboxChange: (): void => {
return;
},
onNoneCheckerCheckboxChange: (): void => {
return;
},
});
allCheckerCheckboxes: new Map<string, CheckboxEntry>(),
assertIdDoesNotExist: (): void => {
},
checkboxes: new Map<string, CheckboxEntry>(),
defaultChecked: false,
defaultDisabled: false,
noneCheckerCheckboxes: new Map<string, CheckboxEntry>(),
onAllCheckerCheckboxChange: (): void => {
},
onCheckboxChange: (): void => {
},
onNoneCheckerCheckboxChange: (): void => {
},
});

18

src/index.ts

@@ -1,11 +0,11 @@

import AllCheckerCheckbox from "./AllCheckerCheckbox";
import Checkbox from "./Checkbox";
import CheckboxGroup from "./CheckboxGroup";
import NoneCheckerCheckbox from "./NoneCheckerCheckbox";
import AllCheckerCheckbox from './AllCheckerCheckbox';
import Checkbox from './Checkbox';
import CheckboxGroup from './CheckboxGroup';
import NoneCheckerCheckbox from './NoneCheckerCheckbox';
export {
AllCheckerCheckbox,
Checkbox,
CheckboxGroup,
NoneCheckerCheckbox,
}
AllCheckerCheckbox,
Checkbox,
CheckboxGroup,
NoneCheckerCheckbox,
};
tslint.json
__tests__/AllCheckboxEventTests.tsx

Sorry, the diff of this file is not supported yet

__tests__/CheckboxAllCheckerCheckboxTest.tsx

Sorry, the diff of this file is not supported yet

__tests__/CheckboxDefaultsTest.tsx

Sorry, the diff of this file is not supported yet

__tests__/CheckboxEventTests.tsx

Sorry, the diff of this file is not supported yet

__tests__/CheckboxNoneCheckerCheckboxTest.tsx

Sorry, the diff of this file is not supported yet

__tests__/DuplicateIDTest.tsx

Sorry, the diff of this file is not supported yet

__tests__/NoneCheckboxEventTests.tsx

Sorry, the diff of this file is not supported yet

dist/AllCheckerCheckbox.js.map

Sorry, the diff of this file is not supported yet

dist/Checkbox.js.map

Sorry, the diff of this file is not supported yet

dist/CheckboxGroup.js.map

Sorry, the diff of this file is not supported yet

dist/CheckboxGroupContext.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/NoneCheckerCheckbox.js.map

Sorry, the diff of this file is not supported yet

src/AllCheckerCheckbox.tsx

Sorry, the diff of this file is not supported yet

src/Checkbox.tsx

Sorry, the diff of this file is not supported yet

src/CheckboxGroup.tsx

Sorry, the diff of this file is not supported yet

src/NoneCheckerCheckbox.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc