@etsoo/react 1.4.77 → 1.4.78

package/lib/mu/SelectEx.js

@@ -68,6 +68,16 @@ export function SelectEx(props) {
             }
         }
     };
+    // Get option id
+    const getId = (option) => {
+        return Reflect.get(option, idField);
+    };
+    // Get option label
+    const getLabel = (option) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : Reflect.get(option, labelField);
+    };
     // Refs
     const divRef = React.useRef();
     // When layout ready
@@ -107,18 +117,19 @@ export function SelectEx(props) {
             }, renderValue: (selected) => {
                 // The text shows up
                 return localOptions
-                    .filter((option) => Array.isArray(selected)
-                    ? selected.indexOf(option.id) !== -1
-                    : selected === option.id)
-                    .map((option) => option.label)
+                    .filter((option) => {
+                    const id = getId(option);
+                    return Array.isArray(selected)
+                        ? selected.indexOf(id) !== -1
+                        : selected === id;
+                })
+                    .map((option) => getLabel(option))
                     .join(', ');
             }, sx: { minWidth: '150px' }, ...rest }, localOptions.map((option) => {
             // Option id
-            const id = option[idField];
+            const id = getId(option);
             // Option label
-            const label = typeof labelField === 'function'
-                ? labelField(option)
-                : option[labelField];
+            const label = getLabel(option);
             // Option
             return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
                     if (onItemClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.77",
+    "version": "1.4.78",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
         "@emotion/styled": "^11.6.0",
         "@etsoo/appscript": "^1.2.28",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.1.6",
+        "@etsoo/shared": "^1.1.7",
         "@mui/icons-material": "^5.3.1",
         "@mui/material": "^5.3.1",
         "@reach/router": "^1.3.4",

package/src/mu/SelectEx.tsx

@@ -143,6 +143,18 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
         }
     };
 
+    // Get option id
+    const getId = (option: T) => {
+        return Reflect.get(option, idField);
+    };
+
+    // Get option label
+    const getLabel = (option: T) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : Reflect.get(option, labelField);
+    };
+
     // Refs
     const divRef = React.useRef<HTMLDivElement>();
 
@@ -198,26 +210,24 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
                 renderValue={(selected) => {
                     // The text shows up
                     return localOptions
-                        .filter((option: any) =>
-                            Array.isArray(selected)
-                                ? selected.indexOf(option.id) !== -1
-                                : selected === option.id
-                        )
-                        .map((option: any) => option.label)
+                        .filter((option) => {
+                            const id = getId(option);
+                            return Array.isArray(selected)
+                                ? selected.indexOf(id) !== -1
+                                : selected === id;
+                        })
+                        .map((option) => getLabel(option))
                         .join(', ');
                 }}
                 sx={{ minWidth: '150px' }}
                 {...rest}
             >
-                {localOptions.map((option: any) => {
+                {localOptions.map((option) => {
                     // Option id
-                    const id = option[idField];
+                    const id = getId(option);
 
                     // Option label
-                    const label =
-                        typeof labelField === 'function'
-                            ? labelField(option)
-                            : option[labelField];
+                    const label = getLabel(option);
 
                     // Option
                     return (