react-input-chips 0.3.0 → 0.3.2
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 +8 -8
- 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
|
@@ -35,6 +35,7 @@ import "../node_modules/react-input-chip-beta/dist/index.css";
|
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
Hers is the simple plain example
|
|
38
|
+
|
|
38
39
|
```javascript
|
|
39
40
|
import { useState } from "react";
|
|
40
41
|
import { InputChips } from "react-input-chip-beta";
|
|
@@ -96,25 +97,25 @@ const MyComponent = () => {
|
|
|
96
97
|
|
|
97
98
|
I have for you here all the props supported as of now. (\* these are required props)
|
|
98
99
|
|
|
99
|
-
|
|
100
100
|
| Prop | Default Value | Description |
|
|
101
101
|
| --------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
102
102
|
| chips\* | - | This is a react `state` for storing the chips, it has to be an array |
|
|
103
103
|
| setChips\* | - | This is the `setState` for chips state |
|
|
104
104
|
| inputValue\* | - | This will be a react `state` for handling the user input before it turns into a chip |
|
|
105
105
|
| setInputValue\* | - | This is the `setState` for input value |
|
|
106
|
-
| keysToTriggerChipConversion | `[Enter', ',']` | The keys entered in this array will trigger the chip conversion from the input value. (The values allowed in the array are mentioned below in the typescript interface, so you will be able to add the keys from that set only)
|
|
107
|
-
| backspaceToRemoveChip | false | This will remove the chip when the user hits backspace after the `inputvalue` is cleared
|
|
106
|
+
| keysToTriggerChipConversion | `[Enter', ',']` | The keys entered in this array will trigger the chip conversion from the input value. (The values allowed in the array are mentioned below in the typescript interface, so you will be able to add the keys from that set only) |
|
|
107
|
+
| backspaceToRemoveChip | false | This will remove the chip when the user hits backspace after the `inputvalue` is cleared |
|
|
108
108
|
| validate | return value `true` | This is the validation function which must return a boolean value either `true` or `false` based on the conditions you want the field value to be valid or convertible into a chip. If the value is valid then n then only a chip will be created out of it |
|
|
109
109
|
| disabled | false | Enable that to disable the input field |
|
|
110
110
|
| placeholder | - | A placeholder for input field |
|
|
111
111
|
| nextPlaceholder | - | Placeholder after the first chip is created |
|
|
112
112
|
| removeBtnSvg | is an `SVG` which looks like close/X | You can add any HTML element as of now, but it is better to add an `SVG` element |
|
|
113
|
-
| chipStyles | - | You add any styles supported by CSS will be added as inline styles for the chip hence, the highest priority is given to your styles
|
|
114
|
-
| containerStyles | - | You can add the CSS styles for the whole input container itself
|
|
115
|
-
| errorMsg | -
|
|
113
|
+
| chipStyles | - | You add any styles supported by CSS will be added as inline styles for the chip hence, the highest priority is given to your styles |
|
|
114
|
+
| containerStyles | - | You can add the CSS styles for the whole input container itself |
|
|
115
|
+
| errorMsg | - | It's the error message you want to display and expects a string as its value |
|
|
116
|
+
|
|
117
|
+
keysToTriggerChipConversion - Allowed key codes
|
|
116
118
|
|
|
117
|
-
keysToTriggerChipConversion - Allowed key codes
|
|
118
119
|
```
|
|
119
120
|
'ShiftRight' | 'ShiftLeft' | 'ControlLeft' | 'ControlRight' | 'AltRight'
|
|
120
121
|
| 'AltLeft' | 'MetaLeft' | 'MetaRight' | 'Tab' | 'Enter' | 'Backspace'
|
|
@@ -122,7 +123,6 @@ keysToTriggerChipConversion - Allowed key codes
|
|
|
122
123
|
| 'ArrowRight';
|
|
123
124
|
```
|
|
124
125
|
|
|
125
|
-
|
|
126
126
|
## Additional Info
|
|
127
127
|
|
|
128
128
|
Hey guys,
|
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":";AAsFQ,mBA+B4B,KAPJ,YAxBxB;AAlFR,IAAM,aAAa,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,8BAA8B,CAAC,SAAS,OAAO;AAAA,EAC/C;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB;AACJ,MAAmB;AACf,QAAM,oBAAoB,CAAC,MAA2C;AAClE,UAAM,QAAQ,EAAE,OAAO;AAEvB,QAAI,4BAA4B,SAAS,OAAO,GAAG;AAC/C,oBAAc,MAAM,KAAK,CAAC;AAAA,IAC9B,OAAO;AACH,oBAAc,KAAK;AAAA,IACvB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,MAA6C;AACrE,QACI,yBACA,EAAE,QAAQ,eACV,WAAW,KAAK,MAAM,IACxB;AACE,eAAS,CAAC,cAAc;AACpB,cAAM,eAAe,CAAC,GAAG,SAAS;AAClC,qBAAa,IAAI;AACjB,eAAO;AAAA,MACX,CAAC;AAAA,IACL;AAEA,UAAM,eAAe,CAAC,QAAoC;AACtD,aAAQ,4BAA8C;AAAA,QAClD;AAAA,MACJ;AAAA,IACJ;AAEA,QAAI,aAAa,EAAE,IAAI,MAAM,CAAC,YAAY,SAAS,IAAI;AACnD,UAAI,OAAO,WAAW,KAAK;AAE3B,UAAI,4BAA4B,KAAK,CAAC,QAAQ,IAAI,WAAW,CAAC,GAAG;AAC7D,cAAM,QAAQ,IAAI;AAAA,UACd,IAAI,4BACC,OAAO,CAAC,QAAQ,IAAI,WAAW,CAAC,EAChC;AAAA,YAAI,CAAC,QACF,IAAI,QAAQ,yBAAyB,MAAM;AAAA,UAC/C,EACC,KAAK,EAAE,CAAC;AAAA,UACb;AAAA,QACJ;AACA,eAAO,KAAK,QAAQ,OAAO,EAAE;AAAA,MACjC;AAEA,UAAI,MAAM;AACN,iBAAS,CAAC,GAAG,OAAO,IAAI,CAAC;AACzB,sBAAc,EAAE;AAAA,MACpB;AAEA,QAAE,eAAe;AAAA,IACrB;AAAA,EACJ;AAEA,QAAM,aAAa,CACf,GACA,iBACC;AACD,MAAE,eAAe;AACjB,UAAM,gBAAgB,MAAM;AAAA,MACxB,CAAC,MAAM,UAAU,OAAO,UAAU;AAAA,IACtC;AACA,aAAS,aAAa;AAAA,EAC1B;AAEA,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,WACI,UAAU,SACJ,gDACA;AAAA,QAEV,OAAO,mBAAmB,CAAC;AAAA,QAE1B;AAAA,gBAAM,IAAI,CAAC,MAAM,UACd;AAAA,YAAC;AAAA;AAAA,cAEG,eAAa,oBAAoB,KAAK;AAAA,cACtC,WAAU;AAAA,cACV,OAAO,cAAc,CAAC;AAAA,cAErB;AAAA;AAAA,gBACD;AAAA,kBAAC;AAAA;AAAA,oBACG,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,eAAa,mBAAmB,KAAK;AAAA,oBACrC,SAAS,CAAC,MAAM,WAAW,GAAG,OAAO,KAAK;AAAA,oBAEzC,0BACG;AAAA,sBAAC;AAAA;AAAA,wBACG,QAAO;AAAA,wBACP,MAAK;AAAA,wBACL,aAAY;AAAA,wBACZ,SAAQ;AAAA,wBACR,QAAQ;AAAA,wBAER;AAAA,8CAAC,UAAK,MAAK,QAAO,GAAE,iBAAgB;AAAA,0BACpC,oBAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA;AAAA,oBACpH;AAAA;AAAA,gBAER;AAAA;AAAA;AAAA,YAxBK,OAAO;AAAA,UAyBhB,CACH;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,WAAU;AAAA,cACV,MAAK;AAAA,cACL,aACI,WACM,KACA,MAAM,SACN,kBACA;AAAA,cAEV,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAW;AAAA,cACX;AAAA;AAAA,UACJ;AAAA;AAAA;AAAA,IACJ;AAAA,IACC,UAAU,UACP,oBAAC,OAAE,WAAU,qBAAqB,oBAAS;AAAA,KAEnD;AAER;AAEA,IAAO,oBAAQ;","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;
|