@etsoo/materialui 1.1.48 → 1.1.50

package/lib/TagList.d.ts

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

package/lib/TagList.js

@@ -0,0 +1,39 @@
+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, label, inputProps, ...rest } = props;
+    const [open, setOpen] = React.useState(false);
+    const [options, setOptions] = React.useState([]);
+    const loading = open && options.length === 0;
+    const loadDataLocal = async (keyword) => {
+        var _a;
+        const result = (_a = (await loadData(keyword, maxItems))) !== null && _a !== void 0 ? _a : [];
+        if (result.length >= maxItems) {
+            result.push(moreLabel);
+        }
+        setOptions(result);
+    };
+    return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, open: open, onOpen: () => {
+            setOpen(true);
+            if (options.length === 0) {
+                loadDataLocal();
+            }
+        }, onClose: () => {
+            setOpen(false);
+        }, options: options, loading: loading, renderOption: renderOption, renderTags: renderTags, renderInput: (params) => (React.createElement(InputField, { label: label, changeDelay: 480, onChange: async (event) => {
+                await loadDataLocal(event.target.value);
+            }, ...inputProps, ...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.48",
+  "version": "1.1.50",
   "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.76",
+    "@etsoo/appscript": "^1.3.78",
     "@etsoo/notificationbase": "^1.1.24",
     "@etsoo/react": "^1.6.51",
-    "@etsoo/shared": "^1.1.90",
+    "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.13",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "^6.0.2",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",
@@ -84,7 +84,7 @@
     "@babel/runtime-corejs3": "^7.21.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.1",
+    "@types/jest": "^29.5.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
     "jest": "^29.5.0",

package/src/TagList.tsx

@@ -0,0 +1,124 @@
+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, InputFieldProps } from "./InputField";
+import { globalApp } from "./app/ReactApp";
+
+export type TagListProps = Omit<
+  AutocompleteProps<string, true, false, true>,
+  "open" | "multiple" | "freeSolo" | "options" | "renderInput"
+> & {
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Load data callback
+   */
+  loadData: (
+    keyword: string | undefined,
+    maxItems: number
+  ) => PromiseLike<string[] | null | undefined>;
+
+  /**
+   * Input props
+   */
+  inputProps?: Omit<InputFieldProps, "onChange">;
+
+  /**
+   * 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,
+    label,
+    inputProps,
+    ...rest
+  } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState<readonly string[]>([]);
+  const loading = open && options.length === 0;
+
+  const loadDataLocal = async (keyword?: string) => {
+    const result = (await loadData(keyword, maxItems)) ?? [];
+    if (result.length >= maxItems) {
+      result.push(moreLabel);
+    }
+    setOptions(result);
+  };
+
+  return (
+    <Autocomplete<string, true, false, true>
+      multiple
+      freeSolo
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+        if (options.length === 0) {
+          loadDataLocal();
+        }
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      options={options}
+      loading={loading}
+      renderOption={renderOption}
+      renderTags={renderTags}
+      renderInput={(params) => (
+        <InputField
+          label={label}
+          changeDelay={480}
+          onChange={async (event) => {
+            await loadDataLocal(event.target.value);
+          }}
+          {...inputProps}
+          {...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";