@visns-studio/visns-components 4.10.23 → 4.10.24

package/package.json

@@ -77,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.10.23",
+    "version": "4.10.24",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Field.jsx

@@ -1030,6 +1030,16 @@ function Field({
                             }
                             dataOptions={dataOptions}
                             style={style}
+                            isCreatable={
+                                settings.hasOwnProperty('isCreatable')
+                                    ? settings.isCreatable
+                                    : false
+                            }
+                            creatableConfig={
+                                settings.hasOwnProperty('creatableConfig')
+                                    ? settings.creatableConfig
+                                    : {}
+                            }
                         />
                         {settings.create && (
                             <button

package/src/components/crm/MultiSelect.jsx

@@ -1,80 +1,73 @@
 import React, { useEffect, useState } from 'react';
+import CustomFetch from './Fetch';
 import SelectList from './SelectList';
 import Select, { createFilter } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import styles from './styles/AsyncSelect.module.scss';
 
 function MultiSelect({
     className,
-    inputValue,
+    inputValue = [], // Default to an empty array
     multi,
     onChange,
-    options,
+    options = [], // Default to an empty array
     placeholder,
     settings,
     style,
+    isCreatable = false,
+    creatableConfig = {},
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
 
     useEffect(() => {
-        let _options = [];
-
-        if (options.length > 0) {
-            options.forEach((a) => {
-                let labelValue =
-                    a.label || a.name || a.description || 'Unknown';
-                let _optionItem = {
-                    value: a.id,
-                    label: labelValue,
-                };
-
-                Object.keys(a).forEach((b) => {
-                    if (b !== 'id' && b !== 'label') {
-                        _optionItem = {
-                            ..._optionItem,
-                            [b]: a[b],
-                        };
-                    }
-                });
-
-                _options.push(_optionItem);
-            });
-
-            setSelectOptions(_options);
-        }
+        const _options = Array.isArray(options)
+            ? options.map((a) => ({
+                  value: a.id,
+                  label: a.label || a.name || a.description || 'Unknown',
+                  ...a,
+              }))
+            : [];
+        setSelectOptions(_options);
     }, [options]);
 
     useEffect(() => {
-        let _values = [];
-
-        if (inputValue.length > 0) {
-            inputValue.forEach((a) => {
-                let labelValue =
-                    a.label || a.name || a.description || 'Unknown';
-                let _valueItems = {
-                    value: a.id,
-                    label: labelValue,
-                };
+        const _values = Array.isArray(inputValue)
+            ? inputValue.map((a) => ({
+                  value: a.id,
+                  label: a.label || a.name || a.description || 'Unknown',
+                  ...a,
+              }))
+            : [];
+        setSelectValue(_values);
+    }, [inputValue]);
 
-                Object.keys(a).forEach((b) => {
-                    if (b !== 'id' && b !== 'label') {
-                        _valueItems = {
-                            ..._valueItems,
-                            [b]: a[b],
-                        };
-                    }
-                });
+    const handleCreate = async (inputValue) => {
+        if (creatableConfig.url && creatableConfig.method) {
+            const res = await CustomFetch(
+                creatableConfig.url,
+                creatableConfig.method,
+                { label: inputValue }
+            );
 
-                _values.push(_valueItems);
-            });
+            if (res && res.data) {
+                const newOption = {
+                    value: res.data.id,
+                    label: res.data.label || inputValue,
+                    ...res.data,
+                };
 
-            setSelectValue(_values);
+                setSelectOptions((prevOptions) => [...prevOptions, newOption]);
+                setSelectValue((prevValues) => [...prevValues, newOption]);
+            }
         }
-    }, [inputValue]);
+    };
+
+    const SelectComponent = isCreatable ? CreatableSelect : Select;
 
     return (
-        <Select
-            closeMenuOnSelect={multi ? false : true}
+        <SelectComponent
+            closeMenuOnSelect={!multi}
             isClearable
             isSearchable
             isMulti={multi}
@@ -101,6 +94,7 @@ function MultiSelect({
                 }),
             }}
             value={selectValue}
+            onCreateOption={handleCreate}
             placeholder={placeholder ? placeholder : 'Select...'}
         />
     );