@etsoo/materialui 1.0.56 → 1.0.58

package/__tests__/SelectEx.tsx

@@ -51,3 +51,57 @@ it('Render SelectEx', async () => {
 
     expect(itemChangeCallback).toBeCalledTimes(2);
 });
+
+it('Render multiple SelectEx', async () => {
+    // Arrange
+    type T = { id: number; name: string };
+    const options: T[] = [
+        { id: 1, name: 'Name 1' },
+        { id: 2, name: 'Name 2' },
+        { id: 3, name: 'Name 3' }
+    ];
+
+    const itemChangeCallback = jest.fn((option, userAction) => {
+        if (userAction) expect(option.id).toBe(3);
+        else expect(option.id).toBe(1);
+    });
+
+    // Render component
+    const { baseElement } = render(
+        <SelectEx<T>
+            options={options}
+            name="test"
+            onItemChange={itemChangeCallback}
+            value={[1, 2]}
+            multiple
+            search
+            labelField="name"
+        />
+    );
+
+    expect(itemChangeCallback).toBeCalled();
+
+    // Act, click to show the list
+    const button = screen.getByRole('button');
+    fireEvent.mouseDown(button); // Not click
+
+    // Get list item
+    const itemName1 = await findByText(baseElement, 'Name 1');
+    const checkbox1 = itemName1.closest('li')?.querySelector('input');
+
+    expect(checkbox1?.checked).toBeTruthy();
+
+    const itemName3 = await findByText(baseElement, 'Name 3');
+    expect(itemName3.nodeName).toBe('SPAN');
+
+    // Checkbox
+    const checkbox3 = itemName3.closest('li')?.querySelector('input');
+
+    act(() => {
+        checkbox3?.click();
+    });
+
+    expect(checkbox3?.checked).toBeTruthy();
+
+    expect(itemChangeCallback).toBeCalledTimes(2);
+});

package/lib/AutocompleteExtendedProps.d.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler } from 'react';
 /**
  * Autocomplete extended props
  */
-export declare type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> & {
+export declare type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options' | 'multiple'> & {
     /**
      * Id field
      */

package/lib/SelectEx.js

@@ -11,26 +11,30 @@ import { ReactUtils } from '@etsoo/react';
  * @returns Component
  */
 export function SelectEx(props) {
-    var _a;
     // Destruct
     const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState([]);
-    const isMounted = React.useRef(true);
+    const isMounted = React.useRef(false);
     const doItemChange = (options, value, userAction) => {
         if (onItemChange == null)
             return;
-        if (value == null || value === '') {
-            onItemChange(undefined, userAction);
-            return;
+        let option;
+        if (multiple && Array.isArray(value)) {
+            option = options.find((option) => value.includes(option[idField]));
+        }
+        else if (value == null || value === '') {
+            option = undefined;
+        }
+        else {
+            option = options.find((option) => option[idField] === value);
         }
-        const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
     const setOptionsAdd = (options) => {
         setOptions(options);
-        if (localValue != null && localValue !== '')
-            doItemChange(options, localValue, false);
+        if (valueSource != null)
+            doItemChange(options, valueSource, false);
     };
     // When options change
     // [options] will cause infinite loop
@@ -41,57 +45,44 @@ export function SelectEx(props) {
         setOptionsAdd(options);
     }, [options, propertyWay]);
     // Local value
-    const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
-    let localValue;
-    if (multiple) {
-        if (Array.isArray(valueSource))
-            localValue = valueSource;
-        else
-            localValue = [valueSource];
-    }
-    else {
-        localValue = valueSource;
-    }
+    const v = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    const valueSource = multiple
+        ? v
+            ? Array.isArray(v)
+                ? v
+                : [v]
+            : []
+        : v !== null && v !== void 0 ? v : '';
     // Value state
-    const [valueState, setValueStateBase] = React.useState();
+    const [valueState, setValueStateBase] = React.useState(valueSource);
     const valueRef = React.useRef();
     const setValueState = (newValue) => {
         valueRef.current = newValue;
         setValueStateBase(newValue);
     };
     React.useEffect(() => {
-        if (localValue != null)
-            setValueState(localValue);
-    }, [localValue]);
+        if (valueSource != null)
+            setValueState(valueSource);
+    }, [valueSource]);
     // Label id
     const labelId = `selectex-label-${name}`;
-    // Item checked or not
-    const itemChecked = (id) => {
-        if (Array.isArray(valueState))
-            return valueState.indexOf(id) !== -1;
-        return valueState === id;
-    };
-    // Change handler
-    const handleChange = (event) => {
-        const value = event.target.value;
-        if (multiple && !Array.isArray(value))
-            return setItemValue([value]);
-        else
-            return setItemValue(value);
-    };
     // Set item
     const setItemValue = (id) => {
         var _a;
         if (id != valueRef.current) {
+            // Difference
+            const diff = multiple
+                ? Utils.arrayDifferences(id, valueRef.current)
+                : id;
             setValueState(id);
             const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id, false);
             }
-            return true;
+            return diff;
         }
-        return false;
+        return undefined;
     };
     // Get option id
     const getId = (option) => {
@@ -123,7 +114,7 @@ export function SelectEx(props) {
     // When value change
     React.useEffect(() => {
         refreshData();
-    }, [localValue]);
+    }, [valueSource]);
     // When layout ready
     React.useEffect(() => {
         var _a;
@@ -134,6 +125,7 @@ export function SelectEx(props) {
                 setValueState(multiple ? [] : '');
         };
         input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
+        isMounted.current = true;
         return () => {
             isMounted.current = false;
             input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
@@ -145,17 +137,21 @@ export function SelectEx(props) {
             React.createElement(InputLabel, { id: labelId, shrink: search
                     ? MUGlobal.searchFieldShrink
                     : MUGlobal.inputFieldShrink }, label),
-            React.createElement(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
-                    ? valueState !== null && valueState !== void 0 ? valueState : ''
-                    : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+            React.createElement(Select, { ref: divRef, value: multiple
+                    ? valueState
+                    : localOptions.some((o) => o[idField] === valueState)
+                        ? valueState
+                        : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                     if (onChange) {
                         onChange(event, child);
                         // event.preventDefault() will block executing
                         if (event.defaultPrevented)
                             return;
                     }
-                    if (handleChange(event)) {
-                        doItemChange(localOptions, event.target.value, true);
+                    // Set item value
+                    const diff = setItemValue(event.target.value);
+                    if (diff != null) {
+                        doItemChange(localOptions, diff, true);
                     }
                 }, renderValue: (selected) => {
                     // The text shows up
@@ -181,7 +177,9 @@ export function SelectEx(props) {
                     }, style: itemStyle == null
                         ? undefined
                         : itemStyle(option) },
-                    multiple && (React.createElement(Checkbox, { checked: itemChecked(id) })),
+                    multiple && (React.createElement(Checkbox, { checked: Array.isArray(valueState)
+                            ? valueState.includes(id)
+                            : valueState === id })),
                     React.createElement(ListItemText, { primary: label }),
                     itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(option[idField])))));
             })),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.56",
+    "version": "1.0.58",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -54,7 +54,7 @@
         "@etsoo/appscript": "^1.3.28",
         "@etsoo/notificationbase": "^1.1.13",
         "@etsoo/react": "^1.6.23",
-        "@etsoo/shared": "^1.1.70",
+        "@etsoo/shared": "^1.1.71",
         "@mui/icons-material": "^5.10.9",
         "@mui/material": "^5.10.12",
         "@types/pica": "^9.0.1",

package/src/AutocompleteExtendedProps.ts

@@ -10,7 +10,7 @@ export type AutocompleteExtendedProps<
     D extends DataTypes.Keys<T>
 > = Omit<
     AutocompleteProps<T, undefined, false, false>,
-    'renderInput' | 'options'
+    'renderInput' | 'options' | 'multiple'
 > & {
     /**
      * Id field

package/src/SelectEx.tsx

@@ -8,7 +8,6 @@ import {
     MenuItem,
     OutlinedInput,
     Select,
-    SelectChangeEvent,
     SelectProps,
     Stack
 } from '@mui/material';
@@ -143,7 +142,7 @@ export function SelectEx<
 
     // Options state
     const [localOptions, setOptions] = React.useState<readonly T[]>([]);
-    const isMounted = React.useRef(true);
+    const isMounted = React.useRef(false);
 
     const doItemChange = (
         options: readonly T[],
@@ -151,18 +150,21 @@ export function SelectEx<
         userAction: boolean
     ) => {
         if (onItemChange == null) return;
-        if (value == null || value === '') {
-            onItemChange(undefined, userAction);
-            return;
+
+        let option: T | undefined;
+        if (multiple && Array.isArray(value)) {
+            option = options.find((option) => value.includes(option[idField]));
+        } else if (value == null || value === '') {
+            option = undefined;
+        } else {
+            option = options.find((option) => option[idField] === value);
         }
-        const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
 
     const setOptionsAdd = (options: readonly T[]) => {
         setOptions(options);
-        if (localValue != null && localValue !== '')
-            doItemChange(options, localValue, false);
+        if (valueSource != null) doItemChange(options, valueSource, false);
     };
 
     // When options change
@@ -174,17 +176,18 @@ export function SelectEx<
     }, [options, propertyWay]);
 
     // Local value
-    const valueSource = defaultValue ?? value ?? '';
-    let localValue: unknown | unknown[];
-    if (multiple) {
-        if (Array.isArray(valueSource)) localValue = valueSource;
-        else localValue = [valueSource];
-    } else {
-        localValue = valueSource;
-    }
+    const v = defaultValue ?? value;
+    const valueSource = multiple
+        ? v
+            ? Array.isArray(v)
+                ? v
+                : [v]
+            : []
+        : v ?? '';
 
     // Value state
-    const [valueState, setValueStateBase] = React.useState<unknown>();
+    const [valueState, setValueStateBase] =
+        React.useState<unknown>(valueSource);
     const valueRef = React.useRef<unknown>();
     const setValueState = (newValue: unknown) => {
         valueRef.current = newValue;
@@ -192,28 +195,23 @@ export function SelectEx<
     };
 
     React.useEffect(() => {
-        if (localValue != null) setValueState(localValue);
-    }, [localValue]);
+        if (valueSource != null) setValueState(valueSource);
+    }, [valueSource]);
 
     // Label id
     const labelId = `selectex-label-${name}`;
 
-    // Item checked or not
-    const itemChecked = (id: unknown) => {
-        if (Array.isArray(valueState)) return valueState.indexOf(id) !== -1;
-        return valueState === id;
-    };
-
-    // Change handler
-    const handleChange = (event: SelectChangeEvent<unknown>) => {
-        const value = event.target.value;
-        if (multiple && !Array.isArray(value)) return setItemValue([value]);
-        else return setItemValue(value);
-    };
-
     // Set item
     const setItemValue = (id: unknown) => {
         if (id != valueRef.current) {
+            // Difference
+            const diff = multiple
+                ? Utils.arrayDifferences(
+                      id as T[D][],
+                      valueRef.current as T[D][]
+                  )
+                : id;
+
             setValueState(id);
 
             const input = divRef.current?.querySelector('input');
@@ -221,9 +219,9 @@ export function SelectEx<
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
-            return true;
+            return diff;
         }
-        return false;
+        return undefined;
     };
 
     // Get option id
@@ -257,7 +255,7 @@ export function SelectEx<
     // When value change
     React.useEffect(() => {
         refreshData();
-    }, [localValue]);
+    }, [valueSource]);
 
     // When layout ready
     React.useEffect(() => {
@@ -268,6 +266,8 @@ export function SelectEx<
         };
         input?.addEventListener('change', inputChange);
 
+        isMounted.current = true;
+
         return () => {
             isMounted.current = false;
             input?.removeEventListener('change', inputChange);
@@ -297,10 +297,12 @@ export function SelectEx<
                 <Select
                     ref={divRef}
                     value={
-                        localOptions.some((option) =>
-                            itemChecked(getId(option))
-                        )
-                            ? valueState ?? ''
+                        multiple
+                            ? valueState
+                            : localOptions.some(
+                                  (o) => o[idField] === valueState
+                              )
+                            ? valueState
                             : ''
                     }
                     input={
@@ -321,12 +323,10 @@ export function SelectEx<
                             if (event.defaultPrevented) return;
                         }
 
-                        if (handleChange(event)) {
-                            doItemChange(
-                                localOptions,
-                                event.target.value,
-                                true
-                            );
+                        // Set item value
+                        const diff = setItemValue(event.target.value);
+                        if (diff != null) {
+                            doItemChange(localOptions, diff, true);
                         }
                     }}
                     renderValue={(selected) => {
@@ -369,7 +369,13 @@ export function SelectEx<
                                 }
                             >
                                 {multiple && (
-                                    <Checkbox checked={itemChecked(id)} />
+                                    <Checkbox
+                                        checked={
+                                            Array.isArray(valueState)
+                                                ? valueState.includes(id)
+                                                : valueState === id
+                                        }
+                                    />
                                 )}
                                 <ListItemText primary={label} />
                                 {itemIconRenderer && (