@rhc-shared-components/form-multi-select-component 0.1.1 → 0.1.3

package/dist/FormMultiSelectInput.d.ts

@@ -18,7 +18,6 @@ export interface FormMultiSelectInputProps {
     isDisabled?: boolean;
     classNames?: string;
     menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-    chipGroupComponent?: React.ReactNode;
     extraProps?: any;
 }
 declare const FormMultiSelectInput: React.FC<FormMultiSelectInputProps>;

package/dist/index.js

@@ -57,7 +57,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "chipGroupComponent", "extraProps"];
+var _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
 
 var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   var label = _ref.label,
@@ -71,7 +71,6 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       isDisabled = _ref.isDisabled,
       classNames = _ref.classNames,
       menuAppendTo = _ref.menuAppendTo,
-      chipGroupComponent = _ref.chipGroupComponent,
       extraProps = _ref.extraProps,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -97,8 +96,36 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
     setFieldValue(rest.name, newValues, true);
   };
 
+  var disabledItems = selectOptions.filter(function (selectItem) {
+    var _selectItem$extraProp;
+
+    return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp.isDisabled);
+  });
+
+  var CustomChipGroup = function CustomChipGroup() {
+    return React__namespace.createElement(reactCore.ChipGroup, null, (value || []).map(function (currentValue) {
+      return React__namespace.createElement(reactCore.Chip, {
+        isReadOnly: !!disabledItems.find(function (item) {
+          return item.value === currentValue;
+        }),
+        key: currentValue,
+        onClick: function onClick(event) {
+          return onSelect(event, currentValue);
+        }
+      }, currentValue);
+    }));
+  };
+
   var onClear = function onClear() {
-    setFieldValue(rest.name, [], true);
+    var filtered = value == null ? void 0 : value.filter(function (item) {
+      var _selectItem$extraProp2;
+
+      var selectItem = disabledItems.find(function (obj) {
+        return obj.value === item;
+      });
+      return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp2 = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp2.isDisabled);
+    });
+    setFieldValue(rest.name, [].concat(filtered), true);
     setIsOpen(false);
   };
 
@@ -128,8 +155,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   }, {
     isDisabled: isSubmitting || isDisabled,
     "aria-label": ariaLabel
-  }, chipGroupComponent && {
-    chipGroupComponent: chipGroupComponent
+  }, disabledItems && {
+    chipGroupComponent: React__namespace.createElement(CustomChipGroup, null)
   }, classNames && {
     className: classNames
   }, menuAppendTo && {

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useField, useFormikContext } from 'formik';
-import { ValidatedOptions, Select, SelectVariant, SelectOption } from '@patternfly/react-core';
+import { ValidatedOptions, Select, SelectVariant, SelectOption, ChipGroup, Chip } from '@patternfly/react-core';
 import { FormGroupContainer } from '@rhc-shared-components/form-group-container';
 import { map } from 'lodash';
 
@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "chipGroupComponent", "extraProps"];
+const _excluded = ["label", "isRequired", "children", "selectOptions", "ariaLabel", "placeholder", "helperText", "maxHeight", "isDisabled", "classNames", "menuAppendTo", "extraProps"];
 
 const FormMultiSelectInput = _ref => {
   let {
@@ -51,7 +51,6 @@ const FormMultiSelectInput = _ref => {
     isDisabled,
     classNames,
     menuAppendTo,
-    chipGroupComponent,
     extraProps
   } = _ref,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -73,8 +72,26 @@ const FormMultiSelectInput = _ref => {
     setFieldValue(rest.name, newValues, true);
   };
 
+  const disabledItems = selectOptions.filter(selectItem => {
+    var _selectItem$extraProp;
+
+    return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp.isDisabled);
+  });
+
+  const CustomChipGroup = () => React.createElement(ChipGroup, null, (value || []).map(currentValue => React.createElement(Chip, {
+    isReadOnly: !!disabledItems.find(item => item.value === currentValue),
+    key: currentValue,
+    onClick: event => onSelect(event, currentValue)
+  }, currentValue)));
+
   const onClear = () => {
-    setFieldValue(rest.name, [], true);
+    const filtered = value == null ? void 0 : value.filter(item => {
+      var _selectItem$extraProp2;
+
+      const selectItem = disabledItems.find(obj => obj.value === item);
+      return (selectItem == null ? void 0 : selectItem.isDisabled) || (selectItem == null ? void 0 : (_selectItem$extraProp2 = selectItem.extraProps) == null ? void 0 : _selectItem$extraProp2.isDisabled);
+    });
+    setFieldValue(rest.name, [...filtered], true);
     setIsOpen(false);
   };
 
@@ -104,8 +121,8 @@ const FormMultiSelectInput = _ref => {
   }, {
     isDisabled: isSubmitting || isDisabled,
     "aria-label": ariaLabel
-  }, chipGroupComponent && {
-    chipGroupComponent
+  }, disabledItems && {
+    chipGroupComponent: React.createElement(CustomChipGroup, null)
   }, classNames && {
     className: classNames
   }, menuAppendTo && {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhc-shared-components/form-multi-select-component",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "project description",
   "author": "shkale",
   "license": "MIT",