@etsoo/materialui 1.1.44 → 1.1.45

package/lib/AddresSelector.d.ts

@@ -1,4 +1,4 @@
-import { AddressApi } from "@etsoo/appscript";
+import { AddressApi, AddressCity, AddressDistrict, AddressRegionDb, AddressState } from "@etsoo/appscript";
 import React from "react";
 /**
  * Address field
@@ -9,6 +9,7 @@ export declare enum AddressField {
     City = "city",
     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];
 /**
  * Address selector props
  */
@@ -49,6 +50,11 @@ export type AddressSelectorProps = {
      * Label
      */
     label?: string;
+    /**
+     * Onchange hanlder
+     * @param event Event
+     */
+    onChange?: <F extends AddressField>(event: AddressFieldType<F>) => void;
     /**
      * Country or region
      */
@@ -79,3 +85,4 @@ export type AddressSelectorProps = {
  * @param props Props
  */
 export declare function AddressSelector(props: AddressSelectorProps): JSX.Element;
+export {};

package/lib/AddresSelector.js

@@ -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, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault } = props;
+    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault } = props;
     // States
     const [regionState, setRegion] = React.useState(region);
     const [stateState, setState] = React.useState(state);
@@ -68,13 +68,16 @@ export function AddressSelector(props) {
     // Field size
     const fieldSize = hideRegion ? 4 : 3;
     // Handle field change
-    const handleChange = (field, value) => {
+    const handleChange = (event) => {
+        if (onChange)
+            onChange(event);
+        const [field, data] = event;
         if (field === AddressField.Region) {
-            if (value == null) {
+            if (data == null) {
                 setRegion(undefined);
             }
             else {
-                setRegion(value);
+                setRegion(data.id);
             }
             setState(undefined);
             setCity(undefined);
@@ -82,50 +85,43 @@ export function AddressSelector(props) {
             return;
         }
         if (field === AddressField.State) {
-            if (value == null) {
+            if (data == null) {
                 setState(undefined);
             }
             else {
-                setState(value);
+                setState(data.id);
             }
             setCity(undefined);
             setDistrict(undefined);
             return;
         }
         if (field === AddressField.City) {
-            if (value == null) {
+            if (data == null) {
                 setCity(undefined);
             }
-            else if (typeof value === "number") {
-                setCity(value);
-            }
             else {
-                setCity(parseInt(`${value}`));
+                setCity(data.id);
             }
             setDistrict(undefined);
             return;
         }
-        if (value == null) {
+        if (data == null) {
             setDistrict(undefined);
         }
-        else if (typeof value === "number") {
-            setDistrict(value);
-        }
         else {
-            setDistrict(parseInt(`${value}`));
+            setDistrict(data.id);
         }
     };
-    console.log(regionState, stateState, cityState, districtState);
     // Layout
     return (React.createElement(React.Fragment, null,
         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, xs: 12, md: 6, lg: fieldSize },
-            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 === null || value === void 0 ? void 0 : value.id) }))),
+            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(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
-            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 === null || value === void 0 ? void 0 : value.id) })),
+            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(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
-            React.createElement(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange(AddressField.City, value === null || value === void 0 ? void 0 : value.id) })),
+            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, xs: 12, md: 6, lg: fieldSize },
-            React.createElement(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange(AddressField.District, value === null || value === void 0 ? void 0 : value.id) }))));
+            React.createElement(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }))));
 }

package/lib/ComboBox.js

@@ -26,8 +26,13 @@ export function ComboBox(props) {
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
+        if (propertyWay && options != null) {
             setOptions(options);
+            if (stateValue != null &&
+                !options.some((option) => option[idField] === stateValue[idField])) {
+                setStateValue(null);
+            }
+        }
     }, [options, propertyWay]);
     // Local default value
     const localValue = idValue != null

package/lib/ComboBoxMultiple.js

@@ -33,8 +33,18 @@ export function ComboBoxMultiple(props) {
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
+        if (propertyWay && options != null) {
             setOptions(options);
+            if (stateValue != null) {
+                if (Array.isArray(stateValue)) {
+                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
+                    setStateValue(newState);
+                }
+                else if (!options.some((option) => option[idField] === stateValue[idField])) {
+                    setStateValue(null);
+                }
+            }
+        }
     }, [options, propertyWay]);
     // Local default value
     const localValue = idValue != null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.44",
+  "version": "1.1.45",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/AddresSelector.tsx

@@ -21,6 +21,14 @@ export 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];
+
 /**
  * Address selector props
  */
@@ -70,6 +78,12 @@ export type AddressSelectorProps = {
    */
   label?: string;
 
+  /**
+   * Onchange hanlder
+   * @param event Event
+   */
+  onChange?: <F extends AddressField>(event: AddressFieldType<F>) => void;
+
   /**
    * Country or region
    */
@@ -125,6 +139,7 @@ export function AddressSelector(props: AddressSelectorProps) {
     helperText,
     hideRegion,
     label,
+    onChange,
     region,
     regionLabel = regionDefault,
     required,
@@ -177,12 +192,16 @@ export function AddressSelector(props: AddressSelectorProps) {
   const fieldSize = hideRegion ? 4 : 3;
 
   // Handle field change
-  const handleChange = (field: AddressField, value: unknown) => {
+  const handleChange = <F extends AddressField>(event: AddressFieldType<F>) => {
+    if (onChange) onChange(event);
+
+    const [field, data] = event;
+
     if (field === AddressField.Region) {
-      if (value == null) {
+      if (data == null) {
         setRegion(undefined);
       } else {
-        setRegion(value as string);
+        setRegion(data.id);
       }
       setState(undefined);
       setCity(undefined);
@@ -192,10 +211,10 @@ export function AddressSelector(props: AddressSelectorProps) {
     }
 
     if (field === AddressField.State) {
-      if (value == null) {
+      if (data == null) {
         setState(undefined);
       } else {
-        setState(value as string);
+        setState(data.id);
       }
       setCity(undefined);
       setDistrict(undefined);
@@ -204,29 +223,23 @@ export function AddressSelector(props: AddressSelectorProps) {
     }
 
     if (field === AddressField.City) {
-      if (value == null) {
+      if (data == null) {
         setCity(undefined);
-      } else if (typeof value === "number") {
-        setCity(value);
       } else {
-        setCity(parseInt(`${value}`));
+        setCity(data.id);
       }
       setDistrict(undefined);
 
       return;
     }
 
-    if (value == null) {
+    if (data == null) {
       setDistrict(undefined);
-    } else if (typeof value === "number") {
-      setDistrict(value);
     } else {
-      setDistrict(parseInt(`${value}`));
+      setDistrict(data.id);
     }
   };
 
-  console.log(regionState, stateState, cityState, districtState);
-
   // Layout
   return (
     <React.Fragment>
@@ -255,7 +268,7 @@ export function AddressSelector(props: AddressSelectorProps) {
             inputError={error}
             inputHelperText={helperText}
             onChange={(_event, value) =>
-              handleChange(AddressField.Region, value?.id)
+              handleChange([AddressField.Region, value])
             }
           />
         </Grid>
@@ -272,7 +285,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           inputError={hideRegion ? error : undefined}
           inputHelperText={hideRegion ? helperText : undefined}
           onChange={(_event, value) =>
-            handleChange(AddressField.State, value?.id)
+            handleChange([AddressField.State, value])
           }
         />
       </Grid>
@@ -284,9 +297,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           fullWidth
           idValue={cityState}
           options={cities}
-          onChange={(_event, value) =>
-            handleChange(AddressField.City, value?.id)
-          }
+          onChange={(_event, value) => handleChange([AddressField.City, value])}
         />
       </Grid>
       <Grid item xs={12} md={6} lg={fieldSize}>
@@ -298,7 +309,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           idValue={districtState}
           options={districts}
           onChange={(_event, value) =>
-            handleChange(AddressField.District, value?.id)
+            handleChange([AddressField.District, value])
           }
         />
       </Grid>

package/src/ComboBox.tsx

@@ -110,7 +110,15 @@ export function ComboBox<
   // [options] will cause infinite loop
   const propertyWay = loadData == null;
   React.useEffect(() => {
-    if (propertyWay && options != null) setOptions(options);
+    if (propertyWay && options != null) {
+      setOptions(options);
+      if (
+        stateValue != null &&
+        !options.some((option) => option[idField] === stateValue[idField])
+      ) {
+        setStateValue(null);
+      }
+    }
   }, [options, propertyWay]);
 
   // Local default value

package/src/ComboBoxMultiple.tsx

@@ -139,7 +139,22 @@ export function ComboBoxMultiple<
   // [options] will cause infinite loop
   const propertyWay = loadData == null;
   React.useEffect(() => {
-    if (propertyWay && options != null) setOptions(options);
+    if (propertyWay && options != null) {
+      setOptions(options);
+
+      if (stateValue != null) {
+        if (Array.isArray(stateValue)) {
+          const newState = stateValue.filter((item) =>
+            options.some((option) => option[idField] === item[idField])
+          );
+          setStateValue(newState);
+        } else if (
+          !options.some((option) => option[idField] === stateValue[idField])
+        ) {
+          setStateValue(null);
+        }
+      }
+    }
   }, [options, propertyWay]);
 
   // Local default value