@etsoo/materialui 1.0.79 → 1.0.81

package/lib/CountryList.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { AddressRegionDb, RegionsRQ } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
+import { TiplistProps } from './Tiplist';
+/**
+ * Country list props
+ */
+export type CountryListProps = Omit<DataTypes.Optional<TiplistProps<AddressRegionDb, 'id'>, 'name'>, 'loadData'> & {
+    /**
+     * Load data
+     * @param rq Request data
+     * @returns Result
+     */
+    loadData: (rq: RegionsRQ) => Promise<AddressRegionDb[] | undefined>;
+    /**
+     * Load favored country ids
+     * @returns Result
+     */
+    loadFavoredIds?: () => Promise<string[]>;
+    /**
+     * Max items to display
+     */
+    items?: number;
+};
+/**
+ * Country list
+ * @param props Props
+ * @returns Component
+ */
+export declare function CountryList(props: CountryListProps): JSX.Element;

package/lib/CountryList.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Tiplist } from './Tiplist';
+/**
+ * Country list
+ * @param props Props
+ * @returns Component
+ */
+export function CountryList(props) {
+    // Destruct
+    const { items = 16, loadData, loadFavoredIds, name = 'countryId', ...rest } = props;
+    // Ref
+    const favoredIds = React.useRef([]);
+    // Ready
+    React.useEffect(() => {
+        if (loadFavoredIds)
+            loadFavoredIds().then((ids) => {
+                favoredIds.current = ids;
+            });
+    }, [loadFavoredIds]);
+    // Layout
+    return (React.createElement(Tiplist, { name: name, loadData: (keyword, id) => loadData({ id, keyword, favoredIds: favoredIds.current, items }), ...rest }));
+}

package/lib/DataSteps.d.ts

@@ -17,7 +17,7 @@ export type DataStepsProps<T extends object> = Omit<TextFieldProps, 'InputProps'
     /**
      * JSON value
      */
-    jsonValue?: string;
+    jsonValue: T;
     /**
      * Value formatter
      */

package/lib/DataSteps.js

@@ -25,14 +25,12 @@ export function DataSteps(props) {
     (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // Current index
     const indexRef = React.useRef(-1);
-    // Current data
-    const dataRef = React.useRef({});
     // Current value
     const [localValue, setLocalValue] = React.useState(value);
     // Get step
     const showStep = (index) => {
         indexRef.current = index;
-        const [{ callback, ...rest }, more] = steps(index, dataRef.current);
+        const [{ callback, ...rest }, more] = steps(index, jsonValue);
         app.showInputDialog({
             ...rest,
             buttons: (n, callback) => (React.createElement(HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between" },
@@ -49,10 +47,9 @@ export function DataSteps(props) {
                         const result = await callback(event);
                         if (!result)
                             return;
-                        const value = dataRef.current;
-                        setLocalValue(valueFormatter(value));
+                        setLocalValue(valueFormatter(jsonValue));
                         if (onValueChange)
-                            onValueChange(value);
+                            onValueChange(jsonValue);
                     } }, labels.submit)))),
             callback: (form) => {
                 if (form == null)
@@ -69,10 +66,7 @@ export function DataSteps(props) {
         event.preventDefault();
     };
     React.useEffect(() => {
-        if (jsonValue) {
-            dataRef.current = JSON.parse(jsonValue);
-            setLocalValue(valueFormatter(dataRef.current));
-        }
+        setLocalValue(valueFormatter(jsonValue));
     }, [jsonValue]);
     return (React.createElement(TextField, { InputLabelProps: InputLabelProps, inputProps: { style: { cursor: 'pointer' } }, InputProps: {
             onKeyDown: (event) => {

package/lib/Tiplist.js

@@ -153,5 +153,5 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...params, readOnly: readOnly, label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
+            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
 }

package/lib/index.d.ts

@@ -29,6 +29,7 @@ export * from './BridgeCloseButton';
 export * from './ButtonLink';
 export * from './ComboBox';
 export * from './CountdownButton';
+export * from './CountryList';
 export * from './CustomFabProps';
 export * from './DataGridEx';
 export * from './DataGridRenderers';

package/lib/index.js

@@ -29,6 +29,7 @@ export * from './BridgeCloseButton';
 export * from './ButtonLink';
 export * from './ComboBox';
 export * from './CountdownButton';
+export * from './CountryList';
 export * from './CustomFabProps';
 export * from './DataGridEx';
 export * from './DataGridRenderers';

package/package.json

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

package/src/CountryList.tsx

@@ -0,0 +1,68 @@
+import { AddressRegionDb, RegionsRQ } from '@etsoo/appscript';
+import { DataTypes } from '@etsoo/shared';
+import React from 'react';
+import { Tiplist, TiplistProps } from './Tiplist';
+
+/**
+ * Country list props
+ */
+export type CountryListProps = Omit<
+    DataTypes.Optional<TiplistProps<AddressRegionDb, 'id'>, 'name'>,
+    'loadData'
+> & {
+    /**
+     * Load data
+     * @param rq Request data
+     * @returns Result
+     */
+    loadData: (rq: RegionsRQ) => Promise<AddressRegionDb[] | undefined>;
+
+    /**
+     * Load favored country ids
+     * @returns Result
+     */
+    loadFavoredIds?: () => Promise<string[]>;
+
+    /**
+     * Max items to display
+     */
+    items?: number;
+};
+
+/**
+ * Country list
+ * @param props Props
+ * @returns Component
+ */
+export function CountryList(props: CountryListProps) {
+    // Destruct
+    const {
+        items = 16,
+        loadData,
+        loadFavoredIds,
+        name = 'countryId',
+        ...rest
+    } = props;
+
+    // Ref
+    const favoredIds = React.useRef<string[]>([]);
+
+    // Ready
+    React.useEffect(() => {
+        if (loadFavoredIds)
+            loadFavoredIds().then((ids) => {
+                favoredIds.current = ids;
+            });
+    }, [loadFavoredIds]);
+
+    // Layout
+    return (
+        <Tiplist<AddressRegionDb, 'id'>
+            name={name}
+            loadData={(keyword, id) =>
+                loadData({ id, keyword, favoredIds: favoredIds.current, items })
+            }
+            {...rest}
+        />
+    );
+}

package/src/DataSteps.tsx

@@ -36,7 +36,7 @@ export type DataStepsProps<T extends object> = Omit<
     /**
      * JSON value
      */
-    jsonValue?: string;
+    jsonValue: T;
 
     /**
      * Value formatter
@@ -83,16 +83,13 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
     // Current index
     const indexRef = React.useRef<number>(-1);
 
-    // Current data
-    const dataRef = React.useRef({} as T);
-
     // Current value
     const [localValue, setLocalValue] = React.useState(value);
 
     // Get step
     const showStep = (index: number) => {
         indexRef.current = index;
-        const [{ callback, ...rest }, more] = steps(index, dataRef.current);
+        const [{ callback, ...rest }, more] = steps(index, jsonValue);
 
         app.showInputDialog({
             ...rest,
@@ -145,10 +142,9 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
                                 const result = await callback(event);
                                 if (!result) return;
 
-                                const value = dataRef.current;
-                                setLocalValue(valueFormatter(value));
+                                setLocalValue(valueFormatter(jsonValue));
 
-                                if (onValueChange) onValueChange(value);
+                                if (onValueChange) onValueChange(jsonValue);
                             }}
                         >
                             {labels.submit}
@@ -172,10 +168,7 @@ export function DataSteps<T extends object>(props: DataStepsProps<T>) {
     };
 
     React.useEffect(() => {
-        if (jsonValue) {
-            dataRef.current = JSON.parse(jsonValue);
-            setLocalValue(valueFormatter(dataRef.current));
-        }
+        setLocalValue(valueFormatter(jsonValue));
     }, [jsonValue]);
 
     return (

package/src/Tiplist.tsx

@@ -267,7 +267,7 @@ export function Tiplist<
                     search ? (
                         <SearchField
                             onChange={changeHandle}
-                            {...params}
+                            {...addReadOnly(params)}
                             readOnly={readOnly}
                             label={label}
                             name={name + 'Input'}

package/src/index.ts

@@ -32,6 +32,7 @@ export * from './BridgeCloseButton';
 export * from './ButtonLink';
 export * from './ComboBox';
 export * from './CountdownButton';
+export * from './CountryList';
 export * from './CustomFabProps';
 export * from './DataGridEx';
 export * from './DataGridRenderers';