@etsoo/materialui 1.1.47 → 1.1.49

package/lib/InputField.d.ts

@@ -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

@@ -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/lib/TagList.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AutocompleteProps } from "@mui/material";
+export type TagListProps = Omit<AutocompleteProps<string, true, false, true>, "open" | "multiple" | "freeSolo" | "options" | "renderInput"> & {
+    /**
+     * Load data callback
+     */
+    loadData: (keyword: string | undefined, maxItems: number) => PromiseLike<string[] | null | undefined>;
+    /**
+     * Max items
+     */
+    maxItems?: number;
+};
+export declare function TagList(props: TagListProps): JSX.Element;

package/lib/TagList.js

@@ -0,0 +1,33 @@
+import { Autocomplete, Checkbox, Chip } from "@mui/material";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { InputField } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+export function TagList(props) {
+    var _a;
+    // Labels
+    const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
+    const moreLabel = more + "...";
+    // Destruct
+    const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
+        React.createElement(Checkbox, { icon: React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }), checkedIcon: React.createElement(CheckBoxIcon, { fontSize: "small" }), style: { marginRight: 8 }, checked: selected }),
+        option)), renderTags = (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, { variant: "outlined", label: option, ...getTagProps({ index }) }))), noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, loadData, maxItems = 16, ...rest } = props;
+    const [open, setOpen] = React.useState(false);
+    const [options, setOptions] = React.useState([]);
+    const loading = open && options.length === 0;
+    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, open: open, onOpen: () => {
+            setOpen(true);
+        }, onClose: () => {
+            setOpen(false);
+        }, options: options, loading: loading, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { changeDelay: 480, onChange: async (event) => {
+                var _a;
+                const result = (_a = (await loadData(event.target.value, maxItems))) !== null && _a !== void 0 ? _a : [];
+                if (result.length >= maxItems) {
+                    result.push(moreLabel);
+                }
+                setOptions(result);
+            }, ...params })), getOptionDisabled: (item) => {
+            return item === moreLabel;
+        }, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, ...rest }));
+}

package/lib/index.d.ts

@@ -85,6 +85,7 @@ export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";
 export * from "./Tiplist";
+export * from "./TagList";
 export * from "./TwoFieldInput";
 export * from "./TooltipClick";
 export * from "./UserAvatar";

package/lib/index.js

@@ -85,6 +85,7 @@ export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";
 export * from "./Tiplist";
+export * from "./TagList";
 export * from "./TwoFieldInput";
 export * from "./TooltipClick";
 export * from "./UserAvatar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.47",
+  "version": "1.1.49",
   "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.71",
+    "@etsoo/appscript": "^1.3.78",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.50",
-    "@etsoo/shared": "^1.1.90",
+    "@etsoo/react": "^1.6.51",
+    "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.11.12",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/material": "^5.11.13",
+    "@mui/x-data-grid": "^6.0.2",
     "@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.2",
+    "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,9 +84,9 @@
     "@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.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@types/jest": "^29.5.0",
+    "@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/InputField.tsx

@@ -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}
+      />
+    );
+  }
 );

package/src/TagList.tsx

@@ -0,0 +1,103 @@
+import { Autocomplete, AutocompleteProps, Checkbox, Chip } from "@mui/material";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import React from "react";
+import { InputField } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+
+export type TagListProps = Omit<
+  AutocompleteProps<string, true, false, true>,
+  "open" | "multiple" | "freeSolo" | "options" | "renderInput"
+> & {
+  /**
+   * Load data callback
+   */
+  loadData: (
+    keyword: string | undefined,
+    maxItems: number
+  ) => PromiseLike<string[] | null | undefined>;
+
+  /**
+   * Max items
+   */
+  maxItems?: number;
+};
+
+export function TagList(props: TagListProps) {
+  // Labels
+  const {
+    noOptions,
+    loading: loadingLabel,
+    more = "More",
+    open: openDefault
+  } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+
+  const moreLabel = more + "...";
+
+  // Destruct
+  const {
+    renderOption = (props, option, { selected }) => (
+      <li {...props}>
+        <Checkbox
+          icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+          checkedIcon={<CheckBoxIcon fontSize="small" />}
+          style={{ marginRight: 8 }}
+          checked={selected}
+        />
+        {option}
+      </li>
+    ),
+    renderTags = (value: readonly string[], getTagProps) =>
+      value.map((option: string, index: number) => (
+        <Chip variant="outlined" label={option} {...getTagProps({ index })} />
+      )),
+    noOptionsText = noOptions,
+    loadingText = loadingLabel,
+    openText = openDefault,
+    loadData,
+    maxItems = 16,
+    ...rest
+  } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState<readonly string[]>([]);
+  const loading = open && options.length === 0;
+
+  return (
+    <Autocomplete<string, true, false, true>
+      multiple
+      freeSolo
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      options={options}
+      loading={loading}
+      renderOption={renderOption}
+      renderTags={renderTags}
+      renderInput={(params) => (
+        <InputField
+          changeDelay={480}
+          onChange={async (event) => {
+            const result = (await loadData(event.target.value, maxItems)) ?? [];
+            if (result.length >= maxItems) {
+              result.push(moreLabel);
+            }
+            setOptions(result);
+          }}
+          {...params}
+        />
+      )}
+      getOptionDisabled={(item) => {
+        return item === moreLabel;
+      }}
+      noOptionsText={noOptionsText}
+      loadingText={loadingText}
+      openText={openText}
+      {...rest}
+    />
+  );
+}

package/src/index.ts

@@ -88,6 +88,7 @@ export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";
 export * from "./Tiplist";
+export * from "./TagList";
 export * from "./TwoFieldInput";
 export * from "./TooltipClick";
 export * from "./UserAvatar";