@etsoo/materialui 1.0.6 → 1.0.7

package/lib/HiSelector.d.ts

@@ -38,9 +38,13 @@ export declare type HiSelectorProps<T extends object, D extends DataTypes.Keys<T
      */
     onChange?: (value: unknown) => void;
     /**
-     * On item change event
+     * On select change event
      */
-    onItemChange?: (e: SelectChangeEvent<unknown>) => void;
+    onSelectChange?: (e: SelectChangeEvent<unknown>) => void;
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option?: T) => void;
     /**
      * Required
      */

package/lib/HiSelector.js

@@ -8,7 +8,7 @@ import { SelectEx } from './SelectEx';
  */
 export function HiSelector(props) {
     // Destruct
-    const { idField = 'id', error, helperText, name, label = name, labelField = 'name', loadData, onChange, onItemChange, required, values = [] } = props;
+    const { idField = 'id', error, helperText, name, label = name, labelField = 'name', loadData, onChange, onSelectChange, onItemChange, required, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -22,8 +22,16 @@ export function HiSelector(props) {
         if (itemValue != null)
             newValues.push(itemValue);
         setValues(newValues);
-        if (onItemChange)
-            onItemChange(event);
+        if (onSelectChange)
+            onSelectChange(event);
+    };
+    const doItemChange = (option, userAction) => {
+        if (onItemChange == null)
+            return;
+        if (!userAction &&
+            (option == null || option[idField] !== values.at(-1)))
+            return;
+        onItemChange(option);
     };
     React.useEffect(() => {
         if (values.length > 0) {
@@ -37,11 +45,11 @@ export function HiSelector(props) {
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label),
             React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ''}` })),
         React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: true, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), inputRequired: required, error: error, helperText: helperText })),
+            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: true, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
         localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: true, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1) }))),
+            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: true, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: true, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2) }))),
+            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: true, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
         localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
-            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: true, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3) })))));
+            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: true, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
 }

package/lib/SelectEx.d.ts

@@ -37,6 +37,10 @@ export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T>
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
     /**
      * Item click handler
      */

package/lib/SelectEx.js

@@ -12,16 +12,29 @@ 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, 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 isMounted = React.useRef(true);
+    const doItemChange = (options, value, userAction) => {
+        if (onItemChange == null)
+            return;
+        if (value == null || value === '')
+            onItemChange(undefined, userAction);
+        const option = options.find((option) => option[idField] === value);
+        onItemChange(option, userAction);
+    };
+    const setOptionsAdd = (options) => {
+        setOptions(options);
+        if (valueState != null && valueState !== '')
+            doItemChange(options, valueState, false);
+    };
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
         if (propertyWay && options != null)
-            setOptions(options);
+            setOptionsAdd(options);
     }, [JSON.stringify(options), propertyWay]);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
@@ -92,7 +105,7 @@ export function SelectEx(props) {
                 if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
-                setOptions(result);
+                setOptionsAdd(result);
             });
         }
     }, [localValue]);
@@ -121,6 +134,7 @@ export function SelectEx(props) {
                 : '', input: React.createElement(OutlinedInput, { notched: true, label: label, required: inputRequired }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                 if (onChange)
                     onChange(event, child);
+                doItemChange(localOptions, event.target.value, true);
                 if (multiple)
                     handleChange(event);
             }, renderValue: (selected) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,12 +51,12 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.2.88",
+        "@etsoo/appscript": "^1.2.89",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/react": "^1.5.86",
-        "@etsoo/shared": "^1.1.51",
+        "@etsoo/react": "^1.5.87",
+        "@etsoo/shared": "^1.1.52",
         "@mui/icons-material": "^5.10.3",
-        "@mui/material": "^5.10.3",
+        "@mui/material": "^5.10.4",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.18",
@@ -76,19 +76,19 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.13",
+        "@babel/core": "^7.19.0",
         "@babel/plugin-transform-runtime": "^7.18.10",
-        "@babel/preset-env": "^7.18.10",
-        "@babel/runtime-corejs3": "^7.18.9",
+        "@babel/preset-env": "^7.19.0",
+        "@babel/runtime-corejs3": "^7.19.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.3.0",
+        "@testing-library/react": "^13.4.0",
         "@types/jest": "^29.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.36.1",
-        "@typescript-eslint/parser": "^5.36.1",
+        "@typescript-eslint/eslint-plugin": "^5.36.2",
+        "@typescript-eslint/parser": "^5.36.2",
         "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.1",
+        "eslint-plugin-react": "^7.31.7",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
         "ts-jest": "^28.0.8",

package/src/HiSelector.tsx

@@ -52,9 +52,14 @@ export type HiSelectorProps<
     onChange?: (value: unknown) => void;
 
     /**
-     * On item change event
+     * On select change event
      */
-    onItemChange?: (e: SelectChangeEvent<unknown>) => void;
+    onSelectChange?: (e: SelectChangeEvent<unknown>) => void;
+
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option?: T) => void;
 
     /**
      * Required
@@ -87,6 +92,7 @@ export function HiSelector<
         labelField = 'name' as L,
         loadData,
         onChange,
+        onSelectChange,
         onItemChange,
         required,
         values = []
@@ -109,7 +115,17 @@ export function HiSelector<
         if (itemValue != null) newValues.push(itemValue);
         setValues(newValues);
 
-        if (onItemChange) onItemChange(event);
+        if (onSelectChange) onSelectChange(event);
+    };
+
+    const doItemChange = (option: T | undefined, userAction: boolean) => {
+        if (onItemChange == null) return;
+        if (
+            !userAction &&
+            (option == null || option[idField] !== values.at(-1))
+        )
+            return;
+        onItemChange(option);
     };
 
     React.useEffect(() => {
@@ -146,6 +162,7 @@ export function HiSelector<
                     loadData={() => loadData()}
                     value={values[0]}
                     onChange={(event) => doChange(event, 0)}
+                    onItemChange={doItemChange}
                     inputRequired={required}
                     error={error}
                     helperText={helperText}
@@ -163,6 +180,7 @@ export function HiSelector<
                         loadData={() => loadData(localValues[0])}
                         value={values[1]}
                         onChange={(event) => doChange(event, 1)}
+                        onItemChange={doItemChange}
                     />
                 </Grid>
             )}
@@ -178,6 +196,7 @@ export function HiSelector<
                         loadData={() => loadData(localValues[1])}
                         value={values[2]}
                         onChange={(event) => doChange(event, 2)}
+                        onItemChange={doItemChange}
                     />
                 </Grid>
             )}
@@ -193,6 +212,7 @@ export function HiSelector<
                         loadData={() => loadData(localValues[2])}
                         value={values[3]}
                         onChange={(event) => doChange(event, 3)}
+                        onItemChange={doItemChange}
                     />
                 </Grid>
             )}

package/src/SelectEx.tsx

@@ -70,6 +70,11 @@ export type SelectExProps<
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
 
+    /**
+     * Item change callback
+     */
+    onItemChange?: (option: T | undefined, userAction: boolean) => void;
+
     /**
      * Item click handler
      */
@@ -113,6 +118,7 @@ export function SelectEx<
         label,
         labelField = 'label' as L,
         loadData,
+        onItemChange,
         onItemClick,
         onLoadData,
         multiple = false,
@@ -130,11 +136,28 @@ export function SelectEx<
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
 
+    const doItemChange = (
+        options: readonly T[],
+        value: unknown,
+        userAction: boolean
+    ) => {
+        if (onItemChange == null) return;
+        if (value == null || value === '') onItemChange(undefined, userAction);
+        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);
+    };
+
     // When options change
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null) setOptions(options);
+        if (propertyWay && options != null) setOptionsAdd(options);
     }, [JSON.stringify(options), propertyWay]);
 
     // Local value
@@ -207,7 +230,7 @@ export function SelectEx<
                 if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
-                setOptions(result);
+                setOptionsAdd(result);
             });
         }
     }, [localValue]);
@@ -263,6 +286,7 @@ export function SelectEx<
                 multiple={multiple}
                 onChange={(event, child) => {
                     if (onChange) onChange(event, child);
+                    doItemChange(localOptions, event.target.value, true);
                     if (multiple) handleChange(event);
                 }}
                 renderValue={(selected) => {