@etsoo/materialui 1.1.80 → 1.1.81

package/lib/ComboBoxPro.d.ts

@@ -1,14 +1,8 @@
 /// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
-type DataType = {
-    id: number | string;
-} & ({
-    label: string;
-} | {
-    name: string;
-});
-export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
+import { ListType2 } from "@etsoo/shared";
+export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label
      */
@@ -30,5 +24,4 @@ export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteP
      */
     inputProps?: Omit<InputFieldProps, "onChange">;
 };
-export declare function ComboBoxPro<D extends DataType = DataType>(props: ComboBoxProProps<D>): JSX.Element;
-export {};
+export declare function ComboBoxPro<D extends ListType2 = ListType2>(props: ComboBoxProProps<D>): JSX.Element;

package/lib/QuickList.d.ts

@@ -0,0 +1,56 @@
+import { ListType2 } from "@etsoo/shared";
+import { ListItemButtonProps, ListItemProps, StackProps } from "@mui/material";
+import React from "react";
+import { InputFieldProps } from "./InputField";
+/**
+ * Quick list props
+ */
+export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
+    /**
+     * Button props
+     */
+    buttonProps?: ListItemButtonProps;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * No matches label
+     */
+    noMatchesLabel?: string;
+    /**
+     * Input field props
+     */
+    inputProps?: Omit<InputFieldProps, "onChangeDelay">;
+    /**
+     * Get item label
+     * @param item Current item
+     * @returns Item label
+     */
+    itemLabel?: (item: T) => string;
+    /**
+     * Item renderer
+     * @param item Current item
+     * @returns UI
+     */
+    itemRenderer?: (item: T) => React.ReactNode;
+    /**
+     * List item props
+     */
+    itemProps?: ListItemProps;
+    /**
+     * Load data callback
+     */
+    loadData: (keyword: string | undefined) => PromiseLike<T[] | undefined>;
+    /**
+     * On item click
+     * @param item Clicked item
+     */
+    onItemClick?: (item: T) => void;
+};
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): JSX.Element;

package/lib/QuickList.js

@@ -0,0 +1,43 @@
+import { LinearProgress, List, ListItem, ListItemButton, Typography } from "@mui/material";
+import React from "react";
+import { InputField } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+import { VBox } from "./FlexBox";
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+export function QuickList(props) {
+    // Destruct
+    const { buttonProps = {}, label, inputProps, itemLabel = (item) => ("label" in item ? item.label : item.name), itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { onClick, ...buttonRest } = buttonProps;
+    // States
+    const [loading, setLoading] = React.useState(false);
+    const [items, setItems] = React.useState([]);
+    const loadDataLocal = (keyword) => {
+        setLoading(true);
+        loadData(keyword).then((result) => {
+            setLoading(false);
+            setItems(result !== null && result !== void 0 ? result : []);
+        });
+    };
+    React.useEffect(() => {
+        loadDataLocal();
+    }, []);
+    // Layout
+    return (React.createElement(VBox, { gap: gap, height: height, ...rest },
+        React.createElement(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
+                // Stop bubble
+                event.preventDefault();
+                event.stopPropagation();
+                loadDataLocal(event.target.value);
+            }, fullWidth: true, ...inputProps }),
+        loading ? (React.createElement(LinearProgress, null)) : items.length === 0 ? (React.createElement(Typography, { textAlign: "center" }, noMatchesLabel)) : (React.createElement(List, null, items.map((item) => (React.createElement(ListItem, { key: item.id, disablePadding: true, ...itemProps },
+            React.createElement(ListItemButton, { onClick: (event) => {
+                    if (onClick)
+                        onClick(event);
+                    if (!event.defaultPrevented && onItemClick)
+                        onItemClick(item);
+                }, ...buttonRest }, itemRenderer(item)))))))));
+}

package/lib/TagListPro.d.ts

@@ -1,14 +1,8 @@
 /// <reference types="react" />
 import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
-type DataType = {
-    id: number | string;
-} & ({
-    label: string;
-} | {
-    name: string;
-});
-export type TagListProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
+import { ListType2 } from "@etsoo/shared";
+export type TagListProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label
      */
@@ -26,5 +20,4 @@ export type TagListProProps<D extends DataType = DataType> = Omit<AutocompletePr
      */
     maxItems?: number;
 };
-export declare function TagListPro<D extends DataType = DataType>(props: TagListProProps<D>): JSX.Element;
-export {};
+export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): JSX.Element;

package/lib/index.d.ts

@@ -71,6 +71,7 @@ export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
+export * from "./QuickList";
 export * from "./ResponsibleContainer";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";

package/lib/index.js

@@ -71,6 +71,7 @@ export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
+export * from "./QuickList";
 export * from "./ResponsibleContainer";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.80",
+  "version": "1.1.81",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.85",
+    "@etsoo/appscript": "^1.3.86",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.56",
+    "@etsoo/react": "^1.6.57",
     "@etsoo/shared": "^1.1.94",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",

package/src/ComboBoxPro.tsx

@@ -2,12 +2,9 @@ import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
+import { ListType2 } from "@etsoo/shared";
 
-type DataType = {
-  id: number | string;
-} & ({ label: string } | { name: string });
-
-export type ComboBoxProProps<D extends DataType = DataType> = Omit<
+export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,
   "open" | "multiple" | "options" | "renderInput"
 > & {
@@ -37,7 +34,7 @@ export type ComboBoxProProps<D extends DataType = DataType> = Omit<
   inputProps?: Omit<InputFieldProps, "onChange">;
 };
 
-export function ComboBoxPro<D extends DataType = DataType>(
+export function ComboBoxPro<D extends ListType2 = ListType2>(
   props: ComboBoxProProps<D>
 ) {
   // Labels

package/src/QuickList.tsx

@@ -0,0 +1,153 @@
+import { ListType2 } from "@etsoo/shared";
+import {
+  LinearProgress,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemButtonProps,
+  ListItemProps,
+  StackProps,
+  Typography
+} from "@mui/material";
+import React from "react";
+import { InputField, InputFieldProps } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+import { VBox } from "./FlexBox";
+
+/**
+ * Quick list props
+ */
+export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
+  /**
+   * Button props
+   */
+  buttonProps?: ListItemButtonProps;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * No matches label
+   */
+  noMatchesLabel?: string;
+
+  /**
+   * Input field props
+   */
+  inputProps?: Omit<InputFieldProps, "onChangeDelay">;
+
+  /**
+   * Get item label
+   * @param item Current item
+   * @returns Item label
+   */
+  itemLabel?: (item: T) => string;
+
+  /**
+   * Item renderer
+   * @param item Current item
+   * @returns UI
+   */
+  itemRenderer?: (item: T) => React.ReactNode;
+
+  /**
+   * List item props
+   */
+  itemProps?: ListItemProps;
+
+  /**
+   * Load data callback
+   */
+  loadData: (keyword: string | undefined) => PromiseLike<T[] | undefined>;
+
+  /**
+   * On item click
+   * @param item Clicked item
+   */
+  onItemClick?: (item: T) => void;
+};
+
+/**
+ * Quick list
+ * @param props Props
+ * @returns Component
+ */
+export function QuickList<T extends ListType2 = ListType2>(
+  props: QuickListProps<T>
+) {
+  // Destruct
+  const {
+    buttonProps = {},
+    label,
+    inputProps,
+    itemLabel = (item: T) => ("label" in item ? item.label : item.name),
+    itemRenderer = (item: T) => itemLabel(item),
+    itemProps,
+    loadData,
+    noMatchesLabel = globalApp?.get("noMatches"),
+    gap = 1,
+    height = "480px",
+    onItemClick,
+    ...rest
+  } = props;
+
+  const { onClick, ...buttonRest } = buttonProps;
+
+  // States
+  const [loading, setLoading] = React.useState(false);
+  const [items, setItems] = React.useState<T[]>([]);
+
+  const loadDataLocal = (keyword?: string) => {
+    setLoading(true);
+
+    loadData(keyword).then((result) => {
+      setLoading(false);
+      setItems(result ?? []);
+    });
+  };
+
+  React.useEffect(() => {
+    loadDataLocal();
+  }, []);
+
+  // Layout
+  return (
+    <VBox gap={gap} height={height} {...rest}>
+      <InputField
+        label={label}
+        changeDelay={480}
+        onChangeDelay={(event) => {
+          // Stop bubble
+          event.preventDefault();
+          event.stopPropagation();
+          loadDataLocal(event.target.value);
+        }}
+        fullWidth
+        {...inputProps}
+      />
+      {loading ? (
+        <LinearProgress />
+      ) : items.length === 0 ? (
+        <Typography textAlign="center">{noMatchesLabel}</Typography>
+      ) : (
+        <List>
+          {items.map((item) => (
+            <ListItem key={item.id} disablePadding {...itemProps}>
+              <ListItemButton
+                onClick={(event) => {
+                  if (onClick) onClick(event);
+                  if (!event.defaultPrevented && onItemClick) onItemClick(item);
+                }}
+                {...buttonRest}
+              >
+                {itemRenderer(item)}
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </VBox>
+  );
+}

package/src/TagListPro.tsx

@@ -4,12 +4,9 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
+import { ListType2 } from "@etsoo/shared";
 
-type DataType = {
-  id: number | string;
-} & ({ label: string } | { name: string });
-
-export type TagListProProps<D extends DataType = DataType> = Omit<
+export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, true, false, false>,
   "open" | "multiple" | "options" | "renderInput"
 > & {
@@ -37,7 +34,7 @@ export type TagListProProps<D extends DataType = DataType> = Omit<
   maxItems?: number;
 };
 
-export function TagListPro<D extends DataType = DataType>(
+export function TagListPro<D extends ListType2 = ListType2>(
   props: TagListProProps<D>
 ) {
   // Labels

package/src/index.ts

@@ -74,6 +74,7 @@ export * from "./OptionGroup";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
+export * from "./QuickList";
 export * from "./ResponsibleContainer";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";