@etsoo/materialui 1.0.7 → 1.0.10

package/__tests__/SelectEx.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { SelectEx } from '../src';
 import { findByText, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { Utils } from '@etsoo/shared';
+import { act } from 'react-dom/test-utils';
 
 it('Render SelectEx', async () => {
     // Arrange
@@ -11,16 +13,41 @@ it('Render SelectEx', async () => {
         { id: 2, name: 'Name 2' }
     ];
 
+    Utils.addBlankItem(options, 'id', 'name');
+
+    const itemChangeCallback = jest.fn((option, userAction) => {
+        if (userAction) expect(option).toBeUndefined();
+        else expect(option.id).toBe(1);
+    });
+
     // Render component
     const { baseElement } = render(
-        <SelectEx<T> options={options} name="test" search labelField="name" />
+        <SelectEx<T>
+            options={options}
+            name="test"
+            onItemChange={itemChangeCallback}
+            value={1}
+            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 item = await findByText(baseElement, 'Name 2');
-    expect(item.nodeName).toBe('SPAN');
+    const itemName2 = await findByText(baseElement, 'Name 2');
+    expect(itemName2.nodeName).toBe('SPAN');
+
+    const itemBlank = await findByText(baseElement, '---');
+    expect(itemBlank.nodeName).toBe('SPAN');
+
+    act(() => {
+        itemBlank.click();
+    });
+
+    expect(itemChangeCallback).toBeCalledTimes(2);
 });

package/lib/HiSelector.d.ts

@@ -44,7 +44,7 @@ export declare type HiSelectorProps<T extends object, D extends DataTypes.Keys<T
     /**
      * Item change callback
      */
-    onItemChange?: (option?: T) => void;
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
     /**
      * Required
      */

package/lib/HiSelector.js

@@ -31,7 +31,7 @@ export function HiSelector(props) {
         if (!userAction &&
             (option == null || option[idField] !== values.at(-1)))
             return;
-        onItemChange(option);
+        onItemChange(option, userAction);
     };
     React.useEffect(() => {
         if (values.length > 0) {

package/lib/ListMoreDisplay.js

@@ -22,7 +22,8 @@ export function ListMoreDisplay(props) {
         orderBy: defaultOrderBy,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const ref = refs.current;
     // States
@@ -59,13 +60,15 @@ export function ListMoreDisplay(props) {
         // Next page
         ref.currentPage = currentPage + 1;
         // Update rows
-        if (states.items == null || reset)
+        if (states.items == null || reset) {
             setStates({ items, completed: !hasNextPage });
-        else
+        }
+        else {
             setStates({
                 items: [...states.items, ...items],
                 completed: !hasNextPage
             });
+        }
     };
     const reset = (data) => {
         // Update the form data

package/lib/ScrollerListEx.d.ts

@@ -34,7 +34,7 @@ export declare type ScrollerListExItemSize = ((index: number) => [number, number
 /**
  * Extended ScrollerList Props
  */
-export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T, D>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -47,11 +47,6 @@ export declare type ScrollerListExProps<T extends object, D extends DataTypes.Ke
      * Item renderer
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
-    /**
-     * Id field
-     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
-     */
-    idField?: D;
     /**
      * Item size, a function indicates its a variable size list
      */

package/lib/ScrollerListEx.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { ScrollerList } from '@etsoo/react';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { Utils } from '@etsoo/shared';
 import { useTheme } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
@@ -112,7 +112,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemRenderer = (itemProps) => {
         const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
         return defaultItemRenderer({
             itemHeight,
@@ -163,5 +163,5 @@ export function ScrollerListEx(props) {
         return size + space;
     };
     // Layout
-    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), idField: idField, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

package/lib/SelectEx.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
 /**
  * Extended select component
  * @param props Props
@@ -12,30 +11,33 @@ import { ReactUtils } from '@etsoo/react';
 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 = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
+    const { defaultValue, idField = 'id', error, helperText, inputRequired, itemIconRenderer, itemStyle, label, labelField = 'label', loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
     // Options state
-    const [localOptions, setOptions] = React.useState(options);
+    const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(true);
     const doItemChange = (options, value, userAction) => {
         if (onItemChange == null)
             return;
-        if (value == null || value === '')
+        if (value == null || value === '') {
             onItemChange(undefined, userAction);
+            return;
+        }
         const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
     const setOptionsAdd = (options) => {
         setOptions(options);
-        if (valueState != null && valueState !== '')
-            doItemChange(options, valueState, false);
+        if (localValue != null && localValue !== '')
+            doItemChange(options, localValue, false);
     };
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
-            setOptionsAdd(options);
-    }, [JSON.stringify(options), propertyWay]);
+        if (options == null || !propertyWay)
+            return;
+        setOptionsAdd(options);
+    }, [options, propertyWay]);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
     let localValue;
@@ -72,14 +74,15 @@ export function SelectEx(props) {
     };
     // Set item
     const setItemValue = (id) => {
-        var _a;
         if (id != valueState) {
             setValueState(id);
-            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            /*
+            const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                ReactUtils.triggerChange(input, id, false);
+                ReactUtils.triggerChange(input, id as string, false);
             }
+            */
         }
     };
     // Get option id
@@ -135,8 +138,7 @@ export function SelectEx(props) {
                 if (onChange)
                     onChange(event, child);
                 doItemChange(localOptions, event.target.value, true);
-                if (multiple)
-                    handleChange(event);
+                handleChange(event);
             }, renderValue: (selected) => {
                 // The text shows up
                 return localOptions
@@ -160,8 +162,6 @@ export function SelectEx(props) {
                         if (event.defaultPrevented)
                             return;
                     }
-                    if (!multiple)
-                        setItemValue(id);
                 }, style: itemStyle == null
                     ? undefined
                     : itemStyle(option) },

package/lib/TableEx.js

@@ -51,7 +51,8 @@ export function TableEx(props) {
             ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
             : undefined,
         batchSize: rowsPerPageLocal,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;
     // Reset the state and load again

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.7",
+    "version": "1.0.10",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,15 +51,15 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.2.89",
+        "@etsoo/appscript": "^1.2.90",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/react": "^1.5.87",
-        "@etsoo/shared": "^1.1.52",
+        "@etsoo/react": "^1.5.89",
+        "@etsoo/shared": "^1.1.53",
         "@mui/icons-material": "^5.10.3",
         "@mui/material": "^5.10.4",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
-        "@types/react": "^18.0.18",
+        "@types/react": "^18.0.19",
         "@types/react-avatar-editor": "^13.0.0",
         "@types/react-dom": "^18.0.6",
         "@types/react-input-mask": "^3.0.1",
@@ -88,10 +88,10 @@
         "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.7",
-        "jest": "^28.1.3",
-        "jest-environment-jsdom": "^28.1.3",
-        "ts-jest": "^28.0.8",
-        "typescript": "^4.8.2"
+        "eslint-plugin-react": "^7.31.8",
+        "jest": "^29.0.3",
+        "jest-environment-jsdom": "^29.0.3",
+        "ts-jest": "^29.0.0",
+        "typescript": "^4.8.3"
     }
 }

package/src/HiSelector.tsx

@@ -59,7 +59,7 @@ export type HiSelectorProps<
     /**
      * Item change callback
      */
-    onItemChange?: (option?: T) => void;
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
 
     /**
      * Required
@@ -125,7 +125,7 @@ export function HiSelector<
             (option == null || option[idField] !== values.at(-1))
         )
             return;
-        onItemChange(option);
+        onItemChange(option, userAction);
     };
 
     React.useEffect(() => {

package/src/ListMoreDisplay.tsx

@@ -92,7 +92,8 @@ export function ListMoreDisplay<
         orderBy: defaultOrderBy,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const ref = refs.current;
 
@@ -141,13 +142,14 @@ export function ListMoreDisplay<
         ref.currentPage = currentPage + 1;
 
         // Update rows
-        if (states.items == null || reset)
+        if (states.items == null || reset) {
             setStates({ items, completed: !hasNextPage });
-        else
+        } else {
             setStates({
                 items: [...states.items, ...items],
                 completed: !hasNextPage
             });
+        }
     };
 
     const reset = (data?: GridData) => {

package/src/ScrollerListEx.tsx

@@ -120,7 +120,7 @@ export type ScrollerListExItemSize =
 export type ScrollerListExProps<
     T extends object,
     D extends DataTypes.Keys<T>
-> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+> = Omit<ScrollerListProps<T, D>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -138,12 +138,6 @@ export type ScrollerListExProps<
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
-    /**
-     * Id field
-     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
-     */
-    idField?: D;
-
     /**
      * Item size, a function indicates its a variable size list
      */
@@ -302,8 +296,6 @@ export function ScrollerListEx<
         idField = 'id' as D,
         innerItemRenderer,
         itemSize,
-        itemKey = (index: number, data: T) =>
-            DataTypes.getIdValue1(data, idField) ?? index,
         itemRenderer = (itemProps) => {
             const [itemHeight, space, margins] = calculateItemSize(
                 itemProps.index
@@ -372,13 +364,13 @@ export function ScrollerListEx<
 
     // Layout
     return (
-        <ScrollerList<T>
+        <ScrollerList<T, D>
             className={Utils.mergeClasses(
                 'ScrollerListEx-Body',
                 className,
                 createGridStyle(alternatingColors, selectedColor)
             )}
-            itemKey={itemKey}
+            idField={idField}
             itemRenderer={itemRenderer}
             itemSize={itemSizeLocal}
             {...rest}

package/src/SelectEx.tsx

@@ -20,7 +20,6 @@ import {
     ListType,
     Utils
 } from '@etsoo/shared';
-import { ReactUtils } from '@etsoo/react';
 
 /**
  * Extended select component props
@@ -123,7 +122,7 @@ export function SelectEx<
         onLoadData,
         multiple = false,
         name,
-        options = [],
+        options,
         search = false,
         autoAddBlankItem = search,
         value,
@@ -133,7 +132,7 @@ export function SelectEx<
     } = props;
 
     // Options state
-    const [localOptions, setOptions] = React.useState(options);
+    const [localOptions, setOptions] = React.useState<readonly T[]>([]);
     const isMounted = React.useRef(true);
 
     const doItemChange = (
@@ -142,23 +141,27 @@ export function SelectEx<
         userAction: boolean
     ) => {
         if (onItemChange == null) return;
-        if (value == null || value === '') onItemChange(undefined, userAction);
+        if (value == null || value === '') {
+            onItemChange(undefined, userAction);
+            return;
+        }
         const option = options.find((option) => option[idField] === value);
         onItemChange(option, userAction);
     };
 
     const setOptionsAdd = (options: readonly T[]) => {
         setOptions(options);
-        if (valueState != null && valueState !== '')
-            doItemChange(options, valueState, false);
+        if (localValue != null && localValue !== '')
+            doItemChange(options, localValue, false);
     };
 
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null) setOptionsAdd(options);
-    }, [JSON.stringify(options), propertyWay]);
+        if (options == null || !propertyWay) return;
+        setOptionsAdd(options);
+    }, [options, propertyWay]);
 
     // Local value
     const valueSource = defaultValue ?? value ?? '';
@@ -198,11 +201,13 @@ export function SelectEx<
         if (id != valueState) {
             setValueState(id);
 
+            /*
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
                 ReactUtils.triggerChange(input, id as string, false);
             }
+            */
         }
     };
 
@@ -287,7 +292,7 @@ export function SelectEx<
                 onChange={(event, child) => {
                     if (onChange) onChange(event, child);
                     doItemChange(localOptions, event.target.value, true);
-                    if (multiple) handleChange(event);
+                    handleChange(event);
                 }}
                 renderValue={(selected) => {
                     // The text shows up
@@ -322,7 +327,6 @@ export function SelectEx<
                                     onItemClick(event, option);
                                     if (event.defaultPrevented) return;
                                 }
-                                if (!multiple) setItemValue(id);
                             }}
                             style={
                                 itemStyle == null

package/src/TableEx.tsx

@@ -163,7 +163,8 @@ export function TableEx<
             ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
             : undefined,
         batchSize: rowsPerPageLocal,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;