@visns-studio/visns-components 4.10.25 → 4.10.27

package/package.json

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

package/src/components/crm/Breadcrumb.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { CircleChevronRight } from 'akar-icons';
+import moment from 'moment';
 
 function Breadcrumb({ data, page }) {
     // Function to get nested data, handling array of keys
     const getNestedData = (data, keys) => {
+        console.info(page);
         return Array.isArray(keys)
             ? keys.reduce(
                   (acc, key) => (acc && acc[key] ? acc[key] : null),
@@ -62,7 +64,13 @@ function Breadcrumb({ data, page }) {
                         ))
                     ) : (
                         // If titleKey is a single string, display the corresponding data
-                        <>{data[page.titleKey]}</>
+                        <>
+                            {page.titleType === 'date'
+                                ? moment(data[page.titleKey]).format(
+                                      'DD-MM-YYYY'
+                                  )
+                                : data[page.titleKey]}
+                        </>
                     )}
                 </>
             )}

package/src/components/crm/MultiSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import CustomFetch from './Fetch';
 import SelectList from './SelectList';
 import Select, { createFilter } from 'react-select';
@@ -19,6 +19,7 @@ function MultiSelect({
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
+    const prevInputValueRef = useRef();
 
     useEffect(() => {
         const _options = Array.isArray(options)
@@ -32,14 +33,34 @@ function MultiSelect({
     }, [options]);
 
     useEffect(() => {
-        const _values = Array.isArray(inputValue)
-            ? inputValue.map((a) => ({
-                  value: a.id,
-                  label: a.label || a.name || a.description || 'Unknown',
-                  ...a,
-              }))
-            : [];
-        setSelectValue(_values);
+        // Only update if `inputValue` content has changed
+        if (
+            JSON.stringify(prevInputValueRef.current) !==
+            JSON.stringify(inputValue)
+        ) {
+            const _values = Array.isArray(inputValue)
+                ? inputValue.map((a) => ({
+                      value: a.id,
+                      label: a.label || a.name || a.description || 'Unknown',
+                      ...a,
+                  }))
+                : inputValue && typeof inputValue === 'object'
+                ? [
+                      {
+                          value: inputValue.id,
+                          label:
+                              inputValue.label ||
+                              inputValue.name ||
+                              inputValue.description ||
+                              'Unknown',
+                          ...inputValue,
+                      },
+                  ]
+                : [];
+
+            setSelectValue(_values);
+            prevInputValueRef.current = inputValue;
+        }
     }, [inputValue]);
 
     const handleCreate = async (inputValue) => {