@laerdal/life-react-components 1.7.0-dev.7.full → 1.7.0-dev.9

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.
Files changed (82) hide show
  1. package/dist/Chips/ActionChip.cjs +4 -4
  2. package/dist/Chips/ActionChip.cjs.map +1 -1
  3. package/dist/Chips/ActionChip.js +4 -4
  4. package/dist/Chips/ActionChip.js.map +1 -1
  5. package/dist/Chips/ChipStyles.cjs +3 -15
  6. package/dist/Chips/ChipStyles.cjs.map +1 -1
  7. package/dist/Chips/ChipStyles.d.ts +0 -3
  8. package/dist/Chips/ChipStyles.js +2 -5
  9. package/dist/Chips/ChipStyles.js.map +1 -1
  10. package/dist/Chips/ChipTypes.d.ts +6 -18
  11. package/dist/Chips/ChoiceChips.cjs +2 -2
  12. package/dist/Chips/ChoiceChips.cjs.map +1 -1
  13. package/dist/Chips/ChoiceChips.js +2 -2
  14. package/dist/Chips/ChoiceChips.js.map +1 -1
  15. package/dist/Chips/FilterChip.cjs +3 -3
  16. package/dist/Chips/FilterChip.cjs.map +1 -1
  17. package/dist/Chips/FilterChip.js +3 -3
  18. package/dist/Chips/FilterChip.js.map +1 -1
  19. package/dist/Chips/InputChip.cjs +4 -4
  20. package/dist/Chips/InputChip.cjs.map +1 -1
  21. package/dist/Chips/InputChip.js +4 -4
  22. package/dist/Chips/InputChip.js.map +1 -1
  23. package/dist/Chips/index.cjs +1 -1
  24. package/dist/Chips/index.cjs.map +1 -1
  25. package/dist/Chips/index.d.ts +1 -1
  26. package/dist/Chips/index.js +1 -1
  27. package/dist/Chips/index.js.map +1 -1
  28. package/dist/ChipsInput/ChipDropdownInput.cjs +398 -0
  29. package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -0
  30. package/dist/ChipsInput/ChipDropdownInput.d.ts +22 -0
  31. package/dist/ChipsInput/ChipDropdownInput.js +382 -0
  32. package/dist/ChipsInput/ChipDropdownInput.js.map +1 -0
  33. package/dist/ChipsInput/ChipInput.cjs +141 -0
  34. package/dist/ChipsInput/ChipInput.cjs.map +1 -0
  35. package/dist/{Chips → ChipsInput}/ChipInput.d.ts +1 -4
  36. package/dist/ChipsInput/ChipInput.js +122 -0
  37. package/dist/ChipsInput/ChipInput.js.map +1 -0
  38. package/dist/ChipsInput/ChipInputField.cjs +193 -0
  39. package/dist/ChipsInput/ChipInputField.cjs.map +1 -0
  40. package/dist/ChipsInput/ChipInputField.d.ts +24 -0
  41. package/dist/ChipsInput/ChipInputField.js +158 -0
  42. package/dist/ChipsInput/ChipInputField.js.map +1 -0
  43. package/dist/ChipsInput/ChipInputTypes.cjs +6 -0
  44. package/dist/ChipsInput/ChipInputTypes.cjs.map +1 -0
  45. package/dist/ChipsInput/ChipInputTypes.d.ts +22 -0
  46. package/dist/ChipsInput/ChipInputTypes.js +2 -0
  47. package/dist/ChipsInput/ChipInputTypes.js.map +1 -0
  48. package/dist/ChipsInput/index.cjs +19 -0
  49. package/dist/ChipsInput/index.cjs.map +1 -0
  50. package/dist/ChipsInput/index.d.ts +1 -0
  51. package/dist/ChipsInput/index.js +2 -0
  52. package/dist/ChipsInput/index.js.map +1 -0
  53. package/dist/Dropdown/DropdownContent.cjs +14 -21
  54. package/dist/Dropdown/DropdownContent.cjs.map +1 -1
  55. package/dist/Dropdown/DropdownContent.js +14 -21
  56. package/dist/Dropdown/DropdownContent.js.map +1 -1
  57. package/dist/Dropdown/index.cjs +0 -8
  58. package/dist/Dropdown/index.cjs.map +1 -1
  59. package/dist/Dropdown/index.d.ts +1 -2
  60. package/dist/Dropdown/index.js +1 -2
  61. package/dist/Dropdown/index.js.map +1 -1
  62. package/dist/InputFields/styling.cjs.map +1 -1
  63. package/dist/InputFields/styling.js.map +1 -1
  64. package/dist/Tabs/TabLink.cjs +46 -46
  65. package/dist/Tabs/TabLink.cjs.map +1 -1
  66. package/dist/Tabs/TabLink.js +45 -46
  67. package/dist/Tabs/TabLink.js.map +1 -1
  68. package/dist/index.cjs +14 -0
  69. package/dist/index.cjs.map +1 -1
  70. package/dist/index.d.ts +1 -0
  71. package/dist/index.js +1 -0
  72. package/dist/index.js.map +1 -1
  73. package/package.json +1 -1
  74. package/dist/Chips/ChipInput.cjs +0 -199
  75. package/dist/Chips/ChipInput.cjs.map +0 -1
  76. package/dist/Chips/ChipInput.js +0 -182
  77. package/dist/Chips/ChipInput.js.map +0 -1
  78. package/dist/Dropdown/ChipDropdownInput.cjs +0 -431
  79. package/dist/Dropdown/ChipDropdownInput.cjs.map +0 -1
  80. package/dist/Dropdown/ChipDropdownInput.d.ts +0 -24
  81. package/dist/Dropdown/ChipDropdownInput.js +0 -418
  82. package/dist/Dropdown/ChipDropdownInput.js.map +0 -1
@@ -1,199 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var React = _interopRequireWildcard(require("react"));
17
-
18
- var _index = require("./index");
19
-
20
- var _types = require("../types");
21
-
22
- var _styling = require("../InputFields/styling");
23
-
24
- var _styles = require("../styles");
25
-
26
- var _SystemIcons = require("../icons/systemicons/SystemIcons");
27
-
28
- var _ChipStyles = require("./ChipStyles");
29
-
30
- var _jsxRuntime = require("react/jsx-runtime");
31
-
32
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
-
36
- /**
37
- * Import React libraries.
38
- */
39
-
40
- /**
41
- * Import custom components.
42
- */
43
-
44
- /**
45
- * Import custom styles.
46
- */
47
- var ChipInput = function ChipInput(_ref) {
48
- var values = _ref.values,
49
- inputId = _ref.inputId,
50
- variants = _ref.variants,
51
- required = _ref.required,
52
- icon = _ref.icon,
53
- placeholder = _ref.placeholder,
54
- validationType = _ref.validationType,
55
- validationMessage = _ref.validationMessage,
56
- onValueChange = _ref.onValueChange;
57
- // Globally used variables within the chip input
58
- var chipInput;
59
-
60
- var _React$useState = React.useState([]),
61
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
62
- chips = _React$useState2[0],
63
- setChips = _React$useState2[1];
64
-
65
- var _React$useState3 = React.useState(''),
66
- _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
67
- value = _React$useState4[0],
68
- setValue = _React$useState4[1];
69
- /**
70
- * Sets initial values for the chips.
71
- */
72
-
73
-
74
- React.useEffect(function () {
75
- // Let's add initial chip values
76
- setChips(values);
77
- }, [values]);
78
- /**
79
- * Adds a chip to the chip list.
80
- * @param event - Event handler from the key down event.
81
- */
82
-
83
- var onAddChip = function onAddChip(event) {
84
- // Let's trigger only on enter, comma and space key press
85
- if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
86
- // Let's prevent default action - adding new key to the value
87
- event.preventDefault(); // Let's add the chip
88
-
89
- setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
90
- onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value])); // Let's clear the old value
91
-
92
- chipInput.value = '';
93
- setValue('');
94
- }
95
- };
96
- /**
97
- * Removes a specific chip from the chip list.
98
- * @param index - Index of the chip that needs to be removed.
99
- * @param elementToAdd - Element which needs to be added in the deleted element place.
100
- */
101
-
102
-
103
- var onRemoveChip = function onRemoveChip(index, elementToAdd) {
104
- // Let's copy the chips
105
- var newChips = (0, _toConsumableArray2.default)(chips); // Let's delete the chip
106
- // If necessary, let's replace it with a different chip
107
-
108
- if (elementToAdd) {
109
- newChips.splice(index, 1, elementToAdd);
110
- } else {
111
- newChips.splice(index, 1);
112
- } // Let's update the chip list
113
-
114
-
115
- setChips((0, _toConsumableArray2.default)(newChips));
116
- onValueChange((0, _toConsumableArray2.default)(newChips));
117
- };
118
- /**
119
- * Changes a status of the chip to edit.
120
- * @param text - Text of the chip that is being edited.
121
- * @param index - Index of the chip in the array.
122
- */
123
-
124
-
125
- var onEditChip = function onEditChip(text, index) {
126
- // Let's check if we have to add value as a chip (in case we have entered something in the input field)
127
- if (chipInput.value !== '') {
128
- // Let's replace the chip
129
- onRemoveChip(index, chipInput.value);
130
- } else {
131
- // Let's just remove the chip
132
- onRemoveChip(index);
133
- } // Let's update the text value of input field
134
-
135
-
136
- chipInput.value = text;
137
- setValue(text);
138
- };
139
- /**
140
- * Return Chip Input component.
141
- */
142
-
143
-
144
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
145
- children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.RequiredStar, {
146
- children: "*"
147
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipInputContainer, {
148
- onClick: function onClick() {
149
- return chipInput.focus();
150
- },
151
- id: inputId,
152
- className: validationType,
153
- children: [chips.map(function (chip, index) {
154
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputChip, {
155
- icon: icon,
156
- size: _types.Size.Medium,
157
- variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
158
- text: chip,
159
- onRemove: function onRemove() {
160
- return onRemoveChip(index);
161
- },
162
- onClick: function onClick() {
163
- return onEditChip(chip, index);
164
- }
165
- }, "chip_".concat(index));
166
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipInputEl, {
167
- type: "text",
168
- onChange: function onChange(event) {
169
- return setValue(event.target.value);
170
- },
171
- onKeyDown: function onKeyDown(event) {
172
- onAddChip(event);
173
- },
174
- placeholder: placeholder && chips.length === 0 ? placeholder : '',
175
- ref: function ref(input) {
176
- chipInput = input;
177
- }
178
- })]
179
- }), validationMessage && validationType === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
180
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
181
- size: "20px",
182
- color: _styles.COLORS.critical_500
183
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
184
- children: validationMessage
185
- })]
186
- }) : validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
187
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
188
- size: "20px",
189
- color: _styles.COLORS.critical_400
190
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
191
- children: validationMessage
192
- })]
193
- })]
194
- });
195
- };
196
-
197
- var _default = ChipInput;
198
- exports.default = _default;
199
- //# sourceMappingURL=ChipInput.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Chips/ChipInput.tsx"],"names":["ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","React","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Size","Medium","length","target","input","COLORS","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { Size } from '../types';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n values,\n inputId,\n variants,\n required,\n icon,\n placeholder,\n validationType,\n validationMessage,\n onValueChange,\n}: ChipInputProps) => {\n // Globally used variables within the chip input\n let chipInput: HTMLInputElement;\n const [chips, setChips] = React.useState<string[]>([]);\n const [value, setValue] = React.useState<string>('');\n\n /**\n * Sets initial values for the chips.\n */\n React.useEffect(() => {\n // Let's add initial chip values\n setChips(values);\n }, [values]);\n\n /**\n * Adds a chip to the chip list.\n * @param event - Event handler from the key down event.\n */\n const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Let's trigger only on enter, comma and space key press\n if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n // Let's prevent default action - adding new key to the value\n event.preventDefault();\n\n // Let's add the chip\n setChips([...chips, value]);\n onValueChange([...chips, value]);\n\n // Let's clear the old value\n chipInput.value = '';\n setValue('');\n }\n };\n\n /**\n * Removes a specific chip from the chip list.\n * @param index - Index of the chip that needs to be removed.\n * @param elementToAdd - Element which needs to be added in the deleted element place.\n */\n const onRemoveChip = (index: number, elementToAdd?: string): void => {\n // Let's copy the chips\n const newChips = [...chips];\n\n // Let's delete the chip\n // If necessary, let's replace it with a different chip\n if (elementToAdd) {\n newChips.splice(index, 1, elementToAdd);\n } else {\n newChips.splice(index, 1);\n }\n\n // Let's update the chip list\n setChips([...newChips]);\n onValueChange([...newChips]);\n };\n\n /**\n * Changes a status of the chip to edit.\n * @param text - Text of the chip that is being edited.\n * @param index - Index of the chip in the array.\n */\n const onEditChip = (text: string, index: number): void => {\n // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n if (chipInput.value !== '') {\n // Let's replace the chip\n onRemoveChip(index, chipInput.value);\n } else {\n // Let's just remove the chip\n onRemoveChip(index);\n }\n\n // Let's update the text value of input field\n chipInput.value = text;\n setValue(text);\n };\n\n /**\n * Return Chip Input component.\n */\n return (\n <>\n {required && <RequiredStar>*</RequiredStar>}\n <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n {chips.map((chip: string, index: number) => (\n <InputChip\n icon={icon}\n size={Size.Medium}\n variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n text={chip}\n onRemove={() => onRemoveChip(index)}\n onClick={() => onEditChip(chip, index)}\n key={`chip_${index}`}/>\n ))}\n <ChipInputEl\n type=\"text\"\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n onAddChip(event);\n }}\n placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n ref={(input: HTMLInputElement) => {\n chipInput = input;\n }}\n />\n </ChipInputContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </>\n );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.cjs"}
@@ -1,182 +0,0 @@
1
- import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
-
4
- /**
5
- * Import React libraries.
6
- */
7
- import * as React from 'react';
8
- /**
9
- * Import custom components.
10
- */
11
-
12
- import { InputChip } from './index';
13
- import { Size } from '../types';
14
- import { WarningMessage, ErrorMessage } from '../InputFields/styling';
15
- import { COLORS } from '../styles';
16
- import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
17
- /**
18
- * Import custom styles.
19
- */
20
-
21
- import { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';
22
- /**
23
- * Import custom types.
24
- */
25
-
26
- import { jsx as _jsx } from "react/jsx-runtime";
27
- import { jsxs as _jsxs } from "react/jsx-runtime";
28
- import { Fragment as _Fragment } from "react/jsx-runtime";
29
-
30
- var ChipInput = function ChipInput(_ref) {
31
- var values = _ref.values,
32
- inputId = _ref.inputId,
33
- variants = _ref.variants,
34
- required = _ref.required,
35
- icon = _ref.icon,
36
- placeholder = _ref.placeholder,
37
- validationType = _ref.validationType,
38
- validationMessage = _ref.validationMessage,
39
- onValueChange = _ref.onValueChange;
40
- // Globally used variables within the chip input
41
- var chipInput;
42
-
43
- var _React$useState = React.useState([]),
44
- _React$useState2 = _slicedToArray(_React$useState, 2),
45
- chips = _React$useState2[0],
46
- setChips = _React$useState2[1];
47
-
48
- var _React$useState3 = React.useState(''),
49
- _React$useState4 = _slicedToArray(_React$useState3, 2),
50
- value = _React$useState4[0],
51
- setValue = _React$useState4[1];
52
- /**
53
- * Sets initial values for the chips.
54
- */
55
-
56
-
57
- React.useEffect(function () {
58
- // Let's add initial chip values
59
- setChips(values);
60
- }, [values]);
61
- /**
62
- * Adds a chip to the chip list.
63
- * @param event - Event handler from the key down event.
64
- */
65
-
66
- var onAddChip = function onAddChip(event) {
67
- // Let's trigger only on enter, comma and space key press
68
- if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
69
- // Let's prevent default action - adding new key to the value
70
- event.preventDefault(); // Let's add the chip
71
-
72
- setChips([].concat(_toConsumableArray(chips), [value]));
73
- onValueChange([].concat(_toConsumableArray(chips), [value])); // Let's clear the old value
74
-
75
- chipInput.value = '';
76
- setValue('');
77
- }
78
- };
79
- /**
80
- * Removes a specific chip from the chip list.
81
- * @param index - Index of the chip that needs to be removed.
82
- * @param elementToAdd - Element which needs to be added in the deleted element place.
83
- */
84
-
85
-
86
- var onRemoveChip = function onRemoveChip(index, elementToAdd) {
87
- // Let's copy the chips
88
- var newChips = _toConsumableArray(chips); // Let's delete the chip
89
- // If necessary, let's replace it with a different chip
90
-
91
-
92
- if (elementToAdd) {
93
- newChips.splice(index, 1, elementToAdd);
94
- } else {
95
- newChips.splice(index, 1);
96
- } // Let's update the chip list
97
-
98
-
99
- setChips(_toConsumableArray(newChips));
100
- onValueChange(_toConsumableArray(newChips));
101
- };
102
- /**
103
- * Changes a status of the chip to edit.
104
- * @param text - Text of the chip that is being edited.
105
- * @param index - Index of the chip in the array.
106
- */
107
-
108
-
109
- var onEditChip = function onEditChip(text, index) {
110
- // Let's check if we have to add value as a chip (in case we have entered something in the input field)
111
- if (chipInput.value !== '') {
112
- // Let's replace the chip
113
- onRemoveChip(index, chipInput.value);
114
- } else {
115
- // Let's just remove the chip
116
- onRemoveChip(index);
117
- } // Let's update the text value of input field
118
-
119
-
120
- chipInput.value = text;
121
- setValue(text);
122
- };
123
- /**
124
- * Return Chip Input component.
125
- */
126
-
127
-
128
- return /*#__PURE__*/_jsxs(_Fragment, {
129
- children: [required && /*#__PURE__*/_jsx(RequiredStar, {
130
- children: "*"
131
- }), /*#__PURE__*/_jsxs(ChipInputContainer, {
132
- onClick: function onClick() {
133
- return chipInput.focus();
134
- },
135
- id: inputId,
136
- className: validationType,
137
- children: [chips.map(function (chip, index) {
138
- return /*#__PURE__*/_jsx(InputChip, {
139
- icon: icon,
140
- size: Size.Medium,
141
- variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
142
- text: chip,
143
- onRemove: function onRemove() {
144
- return onRemoveChip(index);
145
- },
146
- onClick: function onClick() {
147
- return onEditChip(chip, index);
148
- }
149
- }, "chip_".concat(index));
150
- }), /*#__PURE__*/_jsx(ChipInputEl, {
151
- type: "text",
152
- onChange: function onChange(event) {
153
- return setValue(event.target.value);
154
- },
155
- onKeyDown: function onKeyDown(event) {
156
- onAddChip(event);
157
- },
158
- placeholder: placeholder && chips.length === 0 ? placeholder : '',
159
- ref: function ref(input) {
160
- chipInput = input;
161
- }
162
- })]
163
- }), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
164
- children: [/*#__PURE__*/_jsx(TechnicalWarning, {
165
- size: "20px",
166
- color: COLORS.critical_500
167
- }), /*#__PURE__*/_jsx("span", {
168
- children: validationMessage
169
- })]
170
- }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
171
- children: [/*#__PURE__*/_jsx(TechnicalWarning, {
172
- size: "20px",
173
- color: COLORS.critical_400
174
- }), /*#__PURE__*/_jsx("span", {
175
- children: validationMessage
176
- })]
177
- })]
178
- });
179
- };
180
-
181
- export default ChipInput;
182
- //# sourceMappingURL=ChipInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Chips/ChipInput.tsx"],"names":["React","InputChip","Size","WarningMessage","ErrorMessage","COLORS","TechnicalWarning","ChipInputContainer","ChipInputEl","RequiredStar","ChipInput","values","inputId","variants","required","icon","placeholder","validationType","validationMessage","onValueChange","chipInput","useState","chips","setChips","value","setValue","useEffect","onAddChip","event","keyCode","preventDefault","onRemoveChip","index","elementToAdd","newChips","splice","onEditChip","text","focus","map","chip","Medium","length","target","input","critical_500","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from './index';\nimport { Size } from '../types';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { ChipInputProps } from './ChipTypes';\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n values,\n inputId,\n variants,\n required,\n icon,\n placeholder,\n validationType,\n validationMessage,\n onValueChange,\n}: ChipInputProps) => {\n // Globally used variables within the chip input\n let chipInput: HTMLInputElement;\n const [chips, setChips] = React.useState<string[]>([]);\n const [value, setValue] = React.useState<string>('');\n\n /**\n * Sets initial values for the chips.\n */\n React.useEffect(() => {\n // Let's add initial chip values\n setChips(values);\n }, [values]);\n\n /**\n * Adds a chip to the chip list.\n * @param event - Event handler from the key down event.\n */\n const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Let's trigger only on enter, comma and space key press\n if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n // Let's prevent default action - adding new key to the value\n event.preventDefault();\n\n // Let's add the chip\n setChips([...chips, value]);\n onValueChange([...chips, value]);\n\n // Let's clear the old value\n chipInput.value = '';\n setValue('');\n }\n };\n\n /**\n * Removes a specific chip from the chip list.\n * @param index - Index of the chip that needs to be removed.\n * @param elementToAdd - Element which needs to be added in the deleted element place.\n */\n const onRemoveChip = (index: number, elementToAdd?: string): void => {\n // Let's copy the chips\n const newChips = [...chips];\n\n // Let's delete the chip\n // If necessary, let's replace it with a different chip\n if (elementToAdd) {\n newChips.splice(index, 1, elementToAdd);\n } else {\n newChips.splice(index, 1);\n }\n\n // Let's update the chip list\n setChips([...newChips]);\n onValueChange([...newChips]);\n };\n\n /**\n * Changes a status of the chip to edit.\n * @param text - Text of the chip that is being edited.\n * @param index - Index of the chip in the array.\n */\n const onEditChip = (text: string, index: number): void => {\n // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n if (chipInput.value !== '') {\n // Let's replace the chip\n onRemoveChip(index, chipInput.value);\n } else {\n // Let's just remove the chip\n onRemoveChip(index);\n }\n\n // Let's update the text value of input field\n chipInput.value = text;\n setValue(text);\n };\n\n /**\n * Return Chip Input component.\n */\n return (\n <>\n {required && <RequiredStar>*</RequiredStar>}\n <ChipInputContainer onClick={() => chipInput.focus()} id={inputId} className={validationType}>\n {chips.map((chip: string, index: number) => (\n <InputChip\n icon={icon}\n size={Size.Medium}\n variant={variants && variants.length && variants[index] ? variants[index] : 'normal'}\n text={chip}\n onRemove={() => onRemoveChip(index)}\n onClick={() => onEditChip(chip, index)}\n key={`chip_${index}`}/>\n ))}\n <ChipInputEl\n type=\"text\"\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n onAddChip(event);\n }}\n placeholder={placeholder && chips.length === 0 ? placeholder : ''}\n ref={(input: HTMLInputElement) => {\n chipInput = input;\n }}\n />\n </ChipInputContainer>\n\n {/* If there is an error, let's render the error */}\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </>\n );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}