react-input-chips 0.3.1 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/index.css +12 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +6 -4
- package/dist/index.js +81 -52
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +3 -0
package/README.md
CHANGED
|
@@ -31,14 +31,14 @@ You just need to import the `<InputChips/>` component in the file you want the *
|
|
|
31
31
|
The following is the path to it
|
|
32
32
|
|
|
33
33
|
```bash
|
|
34
|
-
import "../node_modules/react-input-
|
|
34
|
+
import "../node_modules/react-input-chips/dist/index.css";
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
Hers is the simple plain example
|
|
38
38
|
|
|
39
39
|
```javascript
|
|
40
40
|
import { useState } from "react";
|
|
41
|
-
import { InputChips } from "react-input-
|
|
41
|
+
import { InputChips } from "react-input-chips";
|
|
42
42
|
|
|
43
43
|
const MyComponent = () => {
|
|
44
44
|
const [chips, setChips] = useState<string[]>([]);
|
|
@@ -142,7 +142,7 @@ Any suggestions are welcome.
|
|
|
142
142
|
|
|
143
143
|
## Support
|
|
144
144
|
|
|
145
|
-
For support, email meetbhalodiya1030@gmail.com or open a discussion/issue
|
|
145
|
+
For support, email at meetbhalodiya1030@gmail.com or open a discussion/issue
|
|
146
146
|
|
|
147
147
|
## Authors
|
|
148
148
|
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* src/components/styles.css */
|
|
2
|
-
.chip-input-
|
|
2
|
+
.chip-input-wrapper {
|
|
3
3
|
gap: 4px;
|
|
4
4
|
flex: 2;
|
|
5
5
|
padding: 5px;
|
|
@@ -7,11 +7,12 @@
|
|
|
7
7
|
display: flex;
|
|
8
8
|
flex-wrap: wrap;
|
|
9
9
|
align-items: center;
|
|
10
|
-
transform: scale(1);
|
|
11
10
|
border: 1px solid #BBBBBB;
|
|
12
11
|
border-radius: 4px;
|
|
12
|
+
max-width: 650px;
|
|
13
|
+
min-width: 300px;
|
|
13
14
|
.chip {
|
|
14
|
-
background: #
|
|
15
|
+
background: #e5e5e5;
|
|
15
16
|
border-radius: 4px;
|
|
16
17
|
color: #333333;
|
|
17
18
|
display: flex;
|
|
@@ -40,4 +41,12 @@
|
|
|
40
41
|
place-items: center;
|
|
41
42
|
}
|
|
42
43
|
}
|
|
44
|
+
.chip-input-wrapper-error {
|
|
45
|
+
border: 2px solid red;
|
|
46
|
+
}
|
|
47
|
+
.error-msg-wrapper {
|
|
48
|
+
margin: 0;
|
|
49
|
+
font-size: 12px;
|
|
50
|
+
color: red;
|
|
51
|
+
}
|
|
43
52
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/styles.css"],"sourcesContent":[".chip-input-
|
|
1
|
+
{"version":3,"sources":["../src/components/styles.css"],"sourcesContent":[".chip-input-wrapper {\n gap: 4px;\n flex: 2;\n padding: 5px;\n overflow: auto;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n border: 1px solid #BBBBBB;\n border-radius: 4px;\n max-width: 650px;\n min-width: 300px;\n\n .chip {\n background: #e5e5e5;\n border-radius: 4px;\n color: #333333;\n display: flex;\n gap: 0.5rem;\n align-items: center;\n justify-content: space-between;\n max-width: max-content;\n padding: 6px;\n }\n\n .chip-input {\n border: none;\n outline: none;\n flex: 1;\n padding: 0 8px;\n height: 30px;\n }\n\n .closeBtn {\n outline: none;\n border: none;\n background: none;\n height: 18px;\n width: 18px;\n object-fit: cover;\n cursor: pointer;\n display: grid;\n place-items: center;\n }\n}\n\n.chip-input-wrapper-error {\n border: 2px solid red\n}\n\n.error-msg-wrapper {\n margin: 0;\n font-size: 12px;\n color: red\n}"],"mappings":";AAAA,CAAC;AACE,OAAK;AACL,QAAM;AACN,WAAS;AACT,YAAU;AACV,WAAS;AACT,aAAW;AACX,eAAa;AACb,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,aAAW;AACX,aAAW;AAEX,GAAC;AACE,gBAAY;AACZ,mBAAe;AACf,WAAO;AACP,aAAS;AACT,SAAK;AACL,iBAAa;AACb,qBAAiB;AACjB,eAAW;AACX,aAAS;AACZ;AAEA,GAAC;AACE,YAAQ;AACR,aAAS;AACT,UAAM;AACN,aAAS,EAAE;AACX,YAAQ;AACX;AAEA,GAAC;AACE,aAAS;AACT,YAAQ;AACR,gBAAY;AACZ,YAAQ;AACR,WAAO;AACP,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,iBAAa;AAChB;AACH;AAEA,CAAC;AACE,UAAQ,IAAI,MAAM;AACrB;AAEA,CAAC;AACE,UAAQ;AACR,aAAW;AACX,SAAO;AACV;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
|
+
type AllowedKeys = 'ShiftRight' | 'ShiftLeft' | 'ControlLeft' | 'ControlRight' | 'AltRight' | 'AltLeft' | 'MetaLeft' | 'MetaRight' | 'Tab' | 'Enter' | 'Backspace' | 'Space' | 'Comma' | 'Period' | 'Slash' | 'Semicolon' | 'ArrowLeft' | 'ArrowRight';
|
|
3
4
|
interface TInputChips {
|
|
4
5
|
chips: string[];
|
|
5
6
|
inputValue: string;
|
|
6
|
-
setChips:
|
|
7
|
+
setChips: React.Dispatch<React.SetStateAction<string[]>>;
|
|
7
8
|
setInputValue: React.Dispatch<React.SetStateAction<string>>;
|
|
8
|
-
keysToTriggerChipConversion?:
|
|
9
|
-
needWhiteSpace?: boolean;
|
|
9
|
+
keysToTriggerChipConversion?: AllowedKeys[];
|
|
10
10
|
validate?: () => boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
placeholder?: string;
|
|
@@ -14,8 +14,10 @@ interface TInputChips {
|
|
|
14
14
|
removeBtnSvg?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
|
|
15
15
|
chipStyles?: React.CSSProperties;
|
|
16
16
|
containerStyles?: React.CSSProperties;
|
|
17
|
+
backspaceToRemoveChip?: boolean;
|
|
18
|
+
errorMsg?: string;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion,
|
|
21
|
+
declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion, validate, disabled, placeholder, nextPlaceholder, removeBtnSvg, chipStyles, containerStyles, backspaceToRemoveChip, errorMsg, }: TInputChips) => react_jsx_runtime.JSX.Element;
|
|
20
22
|
|
|
21
23
|
export { InputChips };
|
package/dist/index.js
CHANGED
|
@@ -1,34 +1,53 @@
|
|
|
1
1
|
// src/components/InputChip.tsx
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
var InputChips = ({
|
|
4
4
|
chips,
|
|
5
5
|
setChips,
|
|
6
6
|
inputValue,
|
|
7
7
|
setInputValue,
|
|
8
|
-
keysToTriggerChipConversion = ["Enter", "
|
|
9
|
-
needWhiteSpace = true,
|
|
8
|
+
keysToTriggerChipConversion = ["Enter", "Comma"],
|
|
10
9
|
validate,
|
|
11
10
|
disabled = false,
|
|
12
11
|
placeholder,
|
|
13
12
|
nextPlaceholder,
|
|
14
13
|
removeBtnSvg,
|
|
15
14
|
chipStyles,
|
|
16
|
-
containerStyles
|
|
15
|
+
containerStyles,
|
|
16
|
+
backspaceToRemoveChip = false,
|
|
17
|
+
errorMsg
|
|
17
18
|
}) => {
|
|
18
19
|
const handleInputChange = (e) => {
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
const value = e.target.value;
|
|
21
|
+
if (keysToTriggerChipConversion.includes("Space")) {
|
|
22
|
+
setInputValue(value.trim());
|
|
21
23
|
} else {
|
|
22
|
-
setInputValue(
|
|
24
|
+
setInputValue(value);
|
|
23
25
|
}
|
|
24
26
|
};
|
|
25
27
|
const handleInputKeyDown = (e) => {
|
|
26
|
-
if (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
if (backspaceToRemoveChip && e.key === "Backspace" && inputValue.trim() === "") {
|
|
29
|
+
setChips((prevState) => {
|
|
30
|
+
const updatedChips = [...prevState];
|
|
31
|
+
updatedChips.pop();
|
|
32
|
+
return updatedChips;
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
const isKeyAllowed = (key) => {
|
|
36
|
+
return keysToTriggerChipConversion.includes(
|
|
37
|
+
key
|
|
30
38
|
);
|
|
31
|
-
|
|
39
|
+
};
|
|
40
|
+
if (isKeyAllowed(e.code) && (!validate || validate())) {
|
|
41
|
+
let chip = inputValue.trim();
|
|
42
|
+
if (keysToTriggerChipConversion.some((key) => key.length === 1)) {
|
|
43
|
+
const regex = new RegExp(
|
|
44
|
+
`[${keysToTriggerChipConversion.filter((key) => key.length === 1).map(
|
|
45
|
+
(key) => key.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
|
|
46
|
+
).join("")}]`,
|
|
47
|
+
"g"
|
|
48
|
+
);
|
|
49
|
+
chip = chip.replace(regex, "");
|
|
50
|
+
}
|
|
32
51
|
if (chip) {
|
|
33
52
|
setChips([...chips, chip]);
|
|
34
53
|
setInputValue("");
|
|
@@ -43,54 +62,64 @@ var InputChips = ({
|
|
|
43
62
|
);
|
|
44
63
|
setChips(filteredChips);
|
|
45
64
|
};
|
|
46
|
-
return /* @__PURE__ */ jsxs(
|
|
47
|
-
|
|
48
|
-
"
|
|
65
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
66
|
+
/* @__PURE__ */ jsxs(
|
|
67
|
+
"section",
|
|
49
68
|
{
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
style: chipStyles ?? {},
|
|
69
|
+
className: errorMsg?.length ? "chip-input-wrapper chip-input-wrapper-error" : "chip-input-wrapper",
|
|
70
|
+
style: containerStyles ?? {},
|
|
53
71
|
children: [
|
|
54
|
-
chip,
|
|
72
|
+
chips.map((chip, index) => /* @__PURE__ */ jsxs(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
"data-testid": `input-value-chip-${index}`,
|
|
76
|
+
className: "chip",
|
|
77
|
+
style: chipStyles ?? {},
|
|
78
|
+
children: [
|
|
79
|
+
chip,
|
|
80
|
+
/* @__PURE__ */ jsx(
|
|
81
|
+
"button",
|
|
82
|
+
{
|
|
83
|
+
type: "button",
|
|
84
|
+
className: "closeBtn",
|
|
85
|
+
"data-testid": `remove-chip-btn-${index}`,
|
|
86
|
+
onClick: (e) => removeChip(e, chip + index),
|
|
87
|
+
children: removeBtnSvg || /* @__PURE__ */ jsxs(
|
|
88
|
+
"svg",
|
|
89
|
+
{
|
|
90
|
+
stroke: "currentColor",
|
|
91
|
+
fill: "currentColor",
|
|
92
|
+
strokeWidth: "0",
|
|
93
|
+
viewBox: "0 0 24 24",
|
|
94
|
+
height: 15,
|
|
95
|
+
children: [
|
|
96
|
+
/* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
|
|
97
|
+
/* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
chip + index
|
|
106
|
+
)),
|
|
55
107
|
/* @__PURE__ */ jsx(
|
|
56
|
-
"
|
|
108
|
+
"input",
|
|
57
109
|
{
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
stroke: "currentColor",
|
|
66
|
-
fill: "currentColor",
|
|
67
|
-
strokeWidth: "0",
|
|
68
|
-
viewBox: "0 0 24 24",
|
|
69
|
-
height: 15,
|
|
70
|
-
children: [
|
|
71
|
-
/* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
|
|
72
|
-
/* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
)
|
|
110
|
+
className: "chip-input",
|
|
111
|
+
type: "text",
|
|
112
|
+
placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
|
|
113
|
+
value: inputValue,
|
|
114
|
+
onChange: handleInputChange,
|
|
115
|
+
onKeyDown: handleInputKeyDown,
|
|
116
|
+
disabled
|
|
76
117
|
}
|
|
77
118
|
)
|
|
78
119
|
]
|
|
79
|
-
},
|
|
80
|
-
chip + index
|
|
81
|
-
)),
|
|
82
|
-
/* @__PURE__ */ jsx(
|
|
83
|
-
"input",
|
|
84
|
-
{
|
|
85
|
-
className: "chip-input",
|
|
86
|
-
type: "text",
|
|
87
|
-
placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
|
|
88
|
-
value: inputValue,
|
|
89
|
-
onChange: handleInputChange,
|
|
90
|
-
onKeyDown: handleInputKeyDown,
|
|
91
|
-
disabled
|
|
92
120
|
}
|
|
93
|
-
)
|
|
121
|
+
),
|
|
122
|
+
errorMsg?.length && /* @__PURE__ */ jsx("p", { className: "error-msg-wrapper", children: errorMsg })
|
|
94
123
|
] });
|
|
95
124
|
};
|
|
96
125
|
var InputChip_default = InputChips;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/InputChip.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport {TInputChips} from '../types';\n\nconst InputChips = ({\n chips,\n setChips,\n inputValue,\n setInputValue,\n keysToTriggerChipConversion = ['Enter', '
|
|
1
|
+
{"version":3,"sources":["../src/components/InputChip.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport {TInputChips, AllowedKeys} from '../types';\n\nconst InputChips = ({\n chips,\n setChips,\n inputValue,\n setInputValue,\n keysToTriggerChipConversion = ['Enter', 'Comma'],\n validate,\n disabled = false,\n placeholder,\n nextPlaceholder,\n removeBtnSvg,\n chipStyles,\n containerStyles,\n backspaceToRemoveChip = false,\n errorMsg,\n}: TInputChips) => {\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n\n if (keysToTriggerChipConversion.includes('Space')) {\n setInputValue(value.trim());\n } else {\n setInputValue(value);\n }\n };\n\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (\n backspaceToRemoveChip &&\n e.key === 'Backspace' &&\n inputValue.trim() === ''\n ) {\n setChips((prevState) => {\n const updatedChips = [...prevState];\n updatedChips.pop();\n return updatedChips;\n });\n }\n\n const isKeyAllowed = (key: string): key is AllowedKeys => {\n return (keysToTriggerChipConversion as AllowedKeys[]).includes(\n key as AllowedKeys\n );\n };\n\n if (isKeyAllowed(e.code) && (!validate || validate())) {\n let chip = inputValue.trim();\n\n if (keysToTriggerChipConversion.some((key) => key.length === 1)) {\n const regex = new RegExp(\n `[${keysToTriggerChipConversion\n .filter((key) => key.length === 1)\n .map((key) =>\n key.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&')\n )\n .join('')}]`,\n 'g'\n );\n chip = chip.replace(regex, '');\n }\n\n if (chip) {\n setChips([...chips, chip]);\n setInputValue('');\n }\n\n e.preventDefault();\n }\n };\n\n const removeChip = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n chipToRemove: string\n ) => {\n e.preventDefault();\n const filteredChips = chips.filter(\n (chip, index) => chip + index !== chipToRemove\n );\n setChips(filteredChips);\n };\n\n return (\n <>\n <section\n className={\n errorMsg?.length\n ? 'chip-input-wrapper chip-input-wrapper-error'\n : 'chip-input-wrapper'\n }\n style={containerStyles ?? {}}\n >\n {chips.map((chip, index) => (\n <div\n key={chip + index}\n data-testid={`input-value-chip-${index}`}\n className=\"chip\"\n style={chipStyles ?? {}}\n >\n {chip}\n <button\n type=\"button\"\n className=\"closeBtn\"\n data-testid={`remove-chip-btn-${index}`}\n onClick={(e) => removeChip(e, chip + index)}\n >\n {removeBtnSvg || (\n <svg\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n viewBox=\"0 0 24 24\"\n height={15}\n >\n <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n )}\n </button>\n </div>\n ))}\n <input\n className=\"chip-input\"\n type=\"text\"\n placeholder={\n disabled\n ? ''\n : chips.length\n ? nextPlaceholder\n : placeholder\n }\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleInputKeyDown}\n disabled={disabled}\n />\n </section>\n {errorMsg?.length && (\n <p className=\"error-msg-wrapper\">{errorMsg}</p>\n )}\n </>\n );\n};\n\nexport default InputChips;\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -11,6 +11,9 @@ const App = () => {
|
|
|
11
11
|
if (!inputValue.trim().length) {
|
|
12
12
|
tempErr.inputValueError = 'atleast add one message';
|
|
13
13
|
}
|
|
14
|
+
if (chips.length > 10) {
|
|
15
|
+
tempErr.inputValueError = 'max 10 chips';
|
|
16
|
+
}
|
|
14
17
|
|
|
15
18
|
setError(tempErr);
|
|
16
19
|
return Object.keys(tempErr).length <= 0;
|