@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/Chips/ChipInput.js

@@ -1,3 +1,6 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
 /**
  * Import React libraries.
  */
@@ -20,26 +23,38 @@ import { ChipInputContainer, ChipInputEl, RequiredStar } from './ChipStyles';
  * Import custom types.
  */
 
-const ChipInput = ({
-  values,
-  inputId,
-  variants,
-  required,
-  icon,
-  placeholder,
-  validationType,
-  validationMessage,
-  onValueChange
-}) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var ChipInput = function ChipInput(_ref) {
+  var values = _ref.values,
+      inputId = _ref.inputId,
+      variants = _ref.variants,
+      required = _ref.required,
+      icon = _ref.icon,
+      placeholder = _ref.placeholder,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      onValueChange = _ref.onValueChange;
   // Globally used variables within the chip input
-  let chipInput;
-  const [chips, setChips] = React.useState([]);
-  const [value, setValue] = React.useState('');
+  var chipInput;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      chips = _React$useState2[0],
+      setChips = _React$useState2[1];
+
+  var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      value = _React$useState4[0],
+      setValue = _React$useState4[1];
   /**
    * Sets initial values for the chips.
    */
 
-  React.useEffect(() => {
+
+  React.useEffect(function () {
     // Let's add initial chip values
     setChips(values);
   }, [values]);
@@ -48,14 +63,14 @@ const ChipInput = ({
    * @param event - Event handler from the key down event.
    */
 
-  const onAddChip = event => {
+  var onAddChip = function onAddChip(event) {
     // Let's trigger only on enter, comma and space key press
     if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
       // Let's prevent default action - adding new key to the value
       event.preventDefault(); // Let's add the chip
 
-      setChips([...chips, value]);
-      onValueChange([...chips, value]); // Let's clear the old value
+      setChips([].concat(_toConsumableArray(chips), [value]));
+      onValueChange([].concat(_toConsumableArray(chips), [value])); // Let's clear the old value
 
       chipInput.value = '';
       setValue('');
@@ -68,11 +83,12 @@ const ChipInput = ({
    */
 
 
-  const onRemoveChip = (index, elementToAdd) => {
+  var onRemoveChip = function onRemoveChip(index, elementToAdd) {
     // Let's copy the chips
-    const newChips = [...chips]; // Let's delete the chip
+    var newChips = _toConsumableArray(chips); // Let's delete the chip
     // If necessary, let's replace it with a different chip
 
+
     if (elementToAdd) {
       newChips.splice(index, 1, elementToAdd);
     } else {
@@ -80,8 +96,8 @@ const ChipInput = ({
     } // Let's update the chip list
 
 
-    setChips([...newChips]);
-    onValueChange([...newChips]);
+    setChips(_toConsumableArray(newChips));
+    onValueChange(_toConsumableArray(newChips));
   };
   /**
    * Changes a status of the chip to edit.
@@ -90,7 +106,7 @@ const ChipInput = ({
    */
 
 
-  const onEditChip = (text, index) => {
+  var onEditChip = function onEditChip(text, index) {
     // Let's check if we have to add value as a chip (in case we have entered something in the input field)
     if (chipInput.value !== '') {
       // Let's replace the chip
@@ -109,35 +125,57 @@ const ChipInput = ({
    */
 
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, required && /*#__PURE__*/React.createElement(RequiredStar, null, "*"), /*#__PURE__*/React.createElement(ChipInputContainer, {
-    onClick: () => chipInput.focus(),
-    id: inputId,
-    className: validationType
-  }, chips.map((chip, index) => /*#__PURE__*/React.createElement(InputChip, {
-    icon: icon,
-    size: Size.Medium,
-    variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
-    text: chip,
-    onRemove: () => onRemoveChip(index),
-    onClick: () => onEditChip(chip, index),
-    key: `chip_${index}`
-  })), /*#__PURE__*/React.createElement(ChipInputEl, {
-    type: "text",
-    onChange: event => setValue(event.target.value),
-    onKeyDown: event => {
-      onAddChip(event);
-    },
-    placeholder: placeholder && chips.length === 0 ? placeholder : '',
-    ref: input => {
-      chipInput = input;
-    }
-  })), validationMessage && validationType === 'warning' ? /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_500
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)) : validationType === 'error' && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [required && /*#__PURE__*/_jsx(RequiredStar, {
+      children: "*"
+    }), /*#__PURE__*/_jsxs(ChipInputContainer, {
+      onClick: function onClick() {
+        return chipInput.focus();
+      },
+      id: inputId,
+      className: validationType,
+      children: [chips.map(function (chip, index) {
+        return /*#__PURE__*/_jsx(InputChip, {
+          icon: icon,
+          size: Size.Medium,
+          variant: variants && variants.length && variants[index] ? variants[index] : 'normal',
+          text: chip,
+          onRemove: function onRemove() {
+            return onRemoveChip(index);
+          },
+          onClick: function onClick() {
+            return onEditChip(chip, index);
+          }
+        }, "chip_".concat(index));
+      }), /*#__PURE__*/_jsx(ChipInputEl, {
+        type: "text",
+        onChange: function onChange(event) {
+          return setValue(event.target.value);
+        },
+        onKeyDown: function onKeyDown(event) {
+          onAddChip(event);
+        },
+        placeholder: placeholder && chips.length === 0 ? placeholder : '',
+        ref: function ref(input) {
+          chipInput = input;
+        }
+      })]
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_500
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
 };
 
 export default ChipInput;

package/dist/esm/Chips/ChipInput.js.map

@@ -1 +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","chips","setChips","useState","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}`}></InputChip>\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"}
+{"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}`}></InputChip>\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"}