npm - @etsoo/materialui - Versions diffs - 1.1.46 → 1.1.48 - Mend

@etsoo/materialui 1.1.46 → 1.1.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/AddresSelector.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export declare enum AddressField {
     District = "district"
 }
 type AddressFieldType<F extends AddressField> = F extends AddressField.Region ? [F, AddressRegionDb | null] : F extends AddressField.State ? [F, AddressState | null] : F extends AddressField.City ? [F, AddressCity | null] : [F, AddressDistrict | null];
+type AddressFavorType<F extends AddressField> = F extends AddressField.Region | AddressField.State ? string : number;
 /**
  * Address selector props
  */
@@ -43,6 +44,12 @@ export type AddressSelectorProps = {
      * Error
      */
     error?: boolean;
+    /**
+     * Get favored ids
+     * @param field Field
+     * @returns Result
+     */
+    favoredIds?: <F extends AddressField>(field: F) => AddressFavorType<F>[];
     /**
      * The helper text content.
      */

package/lib/AddresSelector.js CHANGED Viewed

@@ -22,7 +22,7 @@ export function AddressSelector(props) {
     // Labels
     const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("region", "state", "city", "district")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
+    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
     const isMounted = React.useRef(true);
     React.useEffect(() => () => {
         isMounted.current = false;
@@ -43,7 +43,9 @@ export function AddressSelector(props) {
         if (regionState == null)
             setStates([]);
         else
-            api.states(regionState).then((items) => {
+            api
+                .states(regionState, favoredIds == null ? undefined : favoredIds(AddressField.State))
+                .then((items) => {
                 if (items == null || !isMounted.current)
                     return;
                 setStates(items);
@@ -53,7 +55,9 @@ export function AddressSelector(props) {
         if (stateState == null)
             setCities([]);
         else
-            api.cities(stateState).then((items) => {
+            api
+                .cities(stateState, favoredIds == null ? undefined : favoredIds(AddressField.City))
+                .then((items) => {
                 if (items == null || !isMounted.current)
                     return;
                 setCities(items);
@@ -63,7 +67,9 @@ export function AddressSelector(props) {
         if (cityState == null)
             setDistricts([]);
         else
-            api.districts(cityState).then((items) => {
+            api
+                .districts(cityState, favoredIds == null ? undefined : favoredIds(AddressField.District))
+                .then((items) => {
                 if (items == null || !isMounted.current)
                     return;
                 setDistricts(items);
@@ -121,9 +127,16 @@ export function AddressSelector(props) {
         label && (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         !hideRegion && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.getRegions({ keyword, id, items }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }))),
+            React.createElement(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.getRegions({
+                    keyword,
+                    id,
+                    items,
+                    favoredIds: favoredIds == null
+                        ? undefined
+                        : favoredIds(AddressField.Region)
+                }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }))),
         React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: hideRegion ? required : undefined, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) })),
+            React.createElement(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) })),
         React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) })),
         React.createElement(Grid, { item: true, ...breakPoints },

package/lib/InputField.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { TextFieldProps } from '@mui/material';
-import React from 'react';
+import { TextFieldProps } from "@mui/material";
+import React from "react";
 /**
  * Input field props
  */
@@ -8,6 +8,10 @@ export type InputFieldProps = TextFieldProps & {
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /**
      * Is the field read only?
      */
@@ -23,6 +27,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number | undefined;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     /**
      * Is the field read only?
      */
@@ -32,6 +40,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number | undefined;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     /**
      * Is the field read only?
      */
@@ -41,6 +53,10 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
     changeDelay?: number | undefined;
+    /**
+     * Change delay handler, without it onChange will be applied
+     */
+    onChangeDelay?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     /**
      * Is the field read only?
      */

package/lib/InputField.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { TextField } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
+import { useDelayedExecutor } from "@etsoo/react";
+import { TextField } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Input field
  * @param props Props
@@ -10,23 +10,25 @@ import { MUGlobal } from './MUGlobal';
 export const InputField = React.forwardRef((props, ref) => {
     var _a;
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Shrink
     (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;
     const isMounted = React.useRef(true);
-    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
-        ? useDelayedExecutor(onChange, changeDelay)
-        : undefined;
+    const createDelayed = () => {
+        if (changeDelay != null && changeDelay >= 1) {
+            const changeHandler = onChangeDelay !== null && onChangeDelay !== void 0 ? onChangeDelay : onChange;
+            if (changeHandler)
+                return useDelayedExecutor(changeHandler, changeDelay);
+        }
+        return undefined;
+    };
+    const delayed = createDelayed();
     const onChangeEx = (event) => {
-        if (onChange == null)
-            return;
-        if (changeDelay == null || changeDelay < 1) {
+        if (onChange && (delayed == null || onChangeDelay != null))
             onChange(event);
-            return;
-        }
         delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
     };
     React.useEffect(() => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.46",
+  "version": "1.1.48",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.70",
+    "@etsoo/appscript": "^1.3.76",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.49",
-    "@etsoo/shared": "^1.1.89",
-    "@mui/icons-material": "^5.11.9",
-    "@mui/material": "^5.11.10",
-    "@mui/x-data-grid": "^6.0.0-beta.5",
+    "@etsoo/react": "^1.6.51",
+    "@etsoo/shared": "^1.1.90",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.13",
+    "@mui/x-data-grid": "^6.0.1",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",
@@ -71,12 +71,12 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.4.3",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.9.0",
     "react-window": "^1.8.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
@@ -84,11 +84,11 @@
     "@babel/runtime-corejs3": "^7.21.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
+    "@types/jest": "^29.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "typescript": "^4.9.5"
   }
 }

package/src/AddresSelector.tsx CHANGED Viewed

@@ -29,6 +29,12 @@ type AddressFieldType<F extends AddressField> = F extends AddressField.Region
   ? [F, AddressCity | null]
   : [F, AddressDistrict | null];
+type AddressFavorType<F extends AddressField> = F extends
+  | AddressField.Region
+  | AddressField.State
+  ? string
+  : number;
 /**
  * Address selector props
  */
@@ -68,6 +74,13 @@ export type AddressSelectorProps = {
    */
   error?: boolean;
+  /**
+   * Get favored ids
+   * @param field Field
+   * @returns Result
+   */
+  favoredIds?: <F extends AddressField>(field: F) => AddressFavorType<F>[];
   /**
    * The helper text content.
    */
@@ -141,6 +154,7 @@ export function AddressSelector(props: AddressSelectorProps) {
     district,
     districtLabel = districtDefault,
     error,
+    favoredIds,
     helperText,
     hideRegion,
     label,
@@ -180,26 +194,41 @@ export function AddressSelector(props: AddressSelectorProps) {
   React.useEffect(() => {
     if (regionState == null) setStates([]);
     else
-      api.states(regionState).then((items) => {
-        if (items == null || !isMounted.current) return;
-        setStates(items);
-      });
+      api
+        .states(
+          regionState,
+          favoredIds == null ? undefined : favoredIds(AddressField.State)
+        )
+        .then((items) => {
+          if (items == null || !isMounted.current) return;
+          setStates(items);
+        });
   }, [regionState]);
   React.useEffect(() => {
     if (stateState == null) setCities([]);
     else
-      api.cities(stateState).then((items) => {
-        if (items == null || !isMounted.current) return;
-        setCities(items);
-      });
+      api
+        .cities(
+          stateState,
+          favoredIds == null ? undefined : favoredIds(AddressField.City)
+        )
+        .then((items) => {
+          if (items == null || !isMounted.current) return;
+          setCities(items);
+        });
   }, [stateState]);
   React.useEffect(() => {
     if (cityState == null) setDistricts([]);
     else
-      api.districts(cityState).then((items) => {
-        if (items == null || !isMounted.current) return;
-        setDistricts(items);
-      });
+      api
+        .districts(
+          cityState,
+          favoredIds == null ? undefined : favoredIds(AddressField.District)
+        )
+        .then((items) => {
+          if (items == null || !isMounted.current) return;
+          setDistricts(items);
+        });
   }, [cityState]);
   // Handle field change
@@ -275,7 +304,15 @@ export function AddressSelector(props: AddressSelectorProps) {
             fullWidth
             idValue={regionState}
             loadData={(keyword, id, items) =>
-              api.getRegions({ keyword, id, items })
+              api.getRegions({
+                keyword,
+                id,
+                items,
+                favoredIds:
+                  favoredIds == null
+                    ? undefined
+                    : favoredIds(AddressField.Region)
+              })
             }
             inputRequired={required}
             inputError={error}
@@ -294,7 +331,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           fullWidth
           idValue={stateState}
           options={states}
-          inputRequired={hideRegion ? required : undefined}
+          inputRequired={required}
           inputError={hideRegion ? error : undefined}
           inputHelperText={hideRegion ? helperText : undefined}
           onChange={(_event, value) =>

package/src/InputField.tsx CHANGED Viewed

@@ -1,21 +1,28 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
+import { useDelayedExecutor } from "@etsoo/react";
+import { TextField, TextFieldProps } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Input field props
  */
 export type InputFieldProps = TextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
+  /**
+   * Change delay (ms) to avoid repeatly dispatch onChange
+   */
+  changeDelay?: number;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
+  /**
+   * Change delay handler, without it onChange will be applied
+   */
+  onChangeDelay?: React.ChangeEventHandler<
+    HTMLTextAreaElement | HTMLInputElement
+  >;
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
 };
 /**
@@ -24,62 +31,63 @@ export type InputFieldProps = TextFieldProps & {
  * @returns Component
  */
 export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
-    (props, ref) => {
-        // Destruct
-        const {
-            changeDelay,
-            InputLabelProps = {},
-            InputProps = {},
-            onChange,
-            readOnly,
-            size = MUGlobal.inputFieldSize,
-            variant = MUGlobal.inputFieldVariant,
-            ...rest
-        } = props;
-        // Shrink
-        InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-        // Read only
-        if (readOnly != null) InputProps.readOnly = readOnly;
+  (props, ref) => {
+    // Destruct
+    const {
+      changeDelay,
+      InputLabelProps = {},
+      InputProps = {},
+      onChange,
+      onChangeDelay,
+      readOnly,
+      size = MUGlobal.inputFieldSize,
+      variant = MUGlobal.inputFieldVariant,
+      ...rest
+    } = props;
-        const isMounted = React.useRef(true);
-        const delayed =
-            onChange != null && changeDelay != null && changeDelay >= 1
-                ? useDelayedExecutor(onChange, changeDelay)
-                : undefined;
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-        const onChangeEx = (
-            event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-        ) => {
-            if (onChange == null) return;
+    // Read only
+    if (readOnly != null) InputProps.readOnly = readOnly;
-            if (changeDelay == null || changeDelay < 1) {
-                onChange(event);
-                return;
-            }
+    const isMounted = React.useRef(true);
+    const createDelayed = () => {
+      if (changeDelay != null && changeDelay >= 1) {
+        const changeHandler = onChangeDelay ?? onChange;
+        if (changeHandler)
+          return useDelayedExecutor(changeHandler, changeDelay);
+      }
+      return undefined;
+    };
+    const delayed = createDelayed();
-            delayed?.call(undefined, event);
-        };
+    const onChangeEx = (
+      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+      if (onChange && (delayed == null || onChangeDelay != null))
+        onChange(event);
+      delayed?.call(undefined, event);
+    };
-        React.useEffect(() => {
-            return () => {
-                isMounted.current = false;
-                delayed?.clear();
-            };
-        }, []);
+    React.useEffect(() => {
+      return () => {
+        isMounted.current = false;
+        delayed?.clear();
+      };
+    }, []);
-        // Layout
-        return (
-            <TextField
-                ref={ref}
-                InputLabelProps={InputLabelProps}
-                InputProps={InputProps}
-                onChange={onChangeEx}
-                size={size}
-                variant={variant}
-                {...rest}
-            />
-        );
-    }
+    // Layout
+    return (
+      <TextField
+        ref={ref}
+        InputLabelProps={InputLabelProps}
+        InputProps={InputProps}
+        onChange={onChangeEx}
+        size={size}
+        variant={variant}
+        {...rest}
+      />
+    );
+  }
 );