@rhc-shared-components/form-multi-select-component 0.1.0 → 0.1.2

package/dist/FormMultiSelectInput.d.ts

@@ -3,6 +3,7 @@ import './styles.scss';
 export interface IMultiSelectItem {
     value: string;
     description?: string;
+    isDisabled?: boolean;
     extraProps?: any;
 }
 export interface FormMultiSelectInputProps {

package/dist/index.js

@@ -96,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);
   };
 
@@ -127,6 +155,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
   }, {
     isDisabled: isSubmitting || isDisabled,
     "aria-label": ariaLabel
+  }, disabledItems && {
+    chipGroupComponent: React__namespace.createElement(CustomChipGroup, null)
   }, classNames && {
     className: classNames
   }, menuAppendTo && {
@@ -138,6 +168,8 @@ var FormMultiSelectInput = function FormMultiSelectInput(_ref) {
       label: option.value
     }, option.description && {
       description: option.description
+    }, option.isDisabled && {
+      isDisabled: option.isDisabled
     }, option.extraProps && _extends({}, option.extraProps)));
   }))));
 };

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';
 
@@ -72,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);
   };
 
@@ -103,6 +121,8 @@ const FormMultiSelectInput = _ref => {
   }, {
     isDisabled: isSubmitting || isDisabled,
     "aria-label": ariaLabel
+  }, disabledItems && {
+    chipGroupComponent: React.createElement(CustomChipGroup, null)
   }, classNames && {
     className: classNames
   }, menuAppendTo && {
@@ -113,6 +133,8 @@ const FormMultiSelectInput = _ref => {
     label: option.value
   }, option.description && {
     description: option.description
+  }, option.isDisabled && {
+    isDisabled: option.isDisabled
   }, option.extraProps && _extends({}, option.extraProps)))))));
 };
 

package/package.json

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