@etsoo/materialui 1.0.79 → 1.0.80

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/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.80",
     "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/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';