@etsoo/materialui 1.1.51 → 1.1.53

package/lib/InputTipField.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { DataTypes } from "@etsoo/shared";
+import { TypographyProps } from "@mui/material/Typography";
+import { InputFieldProps } from "./InputField";
+type ItemType = DataTypes.IdLabelItem<string | number>;
+/**
+ * InputField with tips properties
+ */
+export type InputTipFieldProps = InputFieldProps & {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[ItemType[]?, string?]>;
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+};
+/**
+ * InputField with tips
+ * @param props Props
+ * @returns Component
+ */
+export declare function InputTipField(props: InputTipFieldProps): JSX.Element;
+export {};

package/lib/InputTipField.js

@@ -0,0 +1,46 @@
+import { InputAdornment, List, ListItem, Popover } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { InputField } from "./InputField";
+/**
+ * InputField with tips
+ * @param props Props
+ * @returns Component
+ */
+export function InputTipField(props) {
+    // State
+    const [title, setTitle] = React.useState();
+    const [anchorEl, setAnchorEl] = React.useState();
+    const [data, setData] = React.useState();
+    // Destruct
+    const { labelProps = {
+        title: globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("clickForDetails"),
+        sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
+    }, InputProps = {
+        endAdornment: title ? (React.createElement(InputAdornment, { position: "end" },
+            React.createElement(Typography, { onClick: (event) => {
+                    setAnchorEl(event.currentTarget);
+                }, ...labelProps }, title))) : undefined
+    }, changeDelay = 480, onChangeDelay, loadData, ...rest } = props;
+    const load = (value) => {
+        if (value.length < 2) {
+            setTitle(undefined);
+            return;
+        }
+        loadData(value).then(([data, title]) => {
+            setData(data);
+            setTitle(title);
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
+                vertical: "bottom",
+                horizontal: "left"
+            } }, data && (React.createElement(List, null, data.map((item) => (React.createElement(ListItem, { key: item.id }, item.label)))))),
+        React.createElement(InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
+                load(event.target.value);
+                if (onChangeDelay)
+                    onChangeDelay(event);
+            }, InputProps: InputProps, ...rest })));
+}

package/lib/TagList.js

@@ -15,14 +15,16 @@ export function TagList(props) {
         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, disableCloseOnSelect = true, openOnFocus = true, label, inputProps, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [options, setOptions] = React.useState([]);
-    const loading = open && options.length === 0;
+    const [loading, setLoading] = React.useState(false);
     const loadDataLocal = async (keyword) => {
         var _a;
+        setLoading(true);
         const result = (_a = (await loadData(keyword, maxItems))) !== null && _a !== void 0 ? _a : [];
         if (result.length >= maxItems) {
             result.push(moreLabel);
         }
         setOptions(result);
+        setLoading(false);
     };
     return (React.createElement(Autocomplete, { multiple: true, freeSolo: true, filterOptions: (options, _state) => options, open: open, onOpen: () => {
             setOpen(true);

package/lib/index.d.ts

@@ -52,6 +52,7 @@ export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
 export * from "./InputField";
+export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
 export * from "./ListChooser";

package/lib/index.js

@@ -52,6 +52,7 @@ export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
 export * from "./InputField";
+export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
 export * from "./ListChooser";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.51",
+  "version": "1.1.53",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,12 +50,12 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.78",
+    "@etsoo/appscript": "^1.3.80",
     "@etsoo/notificationbase": "^1.1.24",
     "@etsoo/react": "^1.6.51",
     "@etsoo/shared": "^1.1.92",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.11.13",
+    "@mui/material": "^5.11.14",
     "@mui/x-data-grid": "^6.0.2",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
@@ -85,8 +85,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^4.9.5"

package/src/InputTipField.tsx

@@ -0,0 +1,105 @@
+import { DataTypes } from "@etsoo/shared";
+import { InputAdornment, List, ListItem, Popover } from "@mui/material";
+import Typography, { TypographyProps } from "@mui/material/Typography";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
+import { InputField, InputFieldProps } from "./InputField";
+
+type ItemType = DataTypes.IdLabelItem<string | number>;
+
+/**
+ * InputField with tips properties
+ */
+export type InputTipFieldProps = InputFieldProps & {
+  /**
+   * Load data
+   * @param value Duplicate test value
+   */
+  loadData(value: string): Promise<[ItemType[]?, string?]>;
+
+  /**
+   * Label props
+   */
+  labelProps?: Omit<TypographyProps, "onClick">;
+};
+
+/**
+ * InputField with tips
+ * @param props Props
+ * @returns Component
+ */
+export function InputTipField(props: InputTipFieldProps) {
+  // State
+  const [title, setTitle] = React.useState<string>();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement>();
+  const [data, setData] = React.useState<ItemType[]>();
+
+  // Destruct
+  const {
+    labelProps = {
+      title: globalApp?.get("clickForDetails"),
+      sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
+    },
+    InputProps = {
+      endAdornment: title ? (
+        <InputAdornment position="end">
+          <Typography
+            onClick={(event) => {
+              setAnchorEl(event.currentTarget);
+            }}
+            {...labelProps}
+          >
+            {title}
+          </Typography>
+        </InputAdornment>
+      ) : undefined
+    },
+    changeDelay = 480,
+    onChangeDelay,
+    loadData,
+    ...rest
+  } = props;
+
+  const load = (value: string) => {
+    if (value.length < 2) {
+      setTitle(undefined);
+      return;
+    }
+
+    loadData(value).then(([data, title]) => {
+      setData(data);
+      setTitle(title);
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <Popover
+        open={anchorEl != null}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(undefined)}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left"
+        }}
+      >
+        {data && (
+          <List>
+            {data.map((item) => (
+              <ListItem key={item.id}>{item.label}</ListItem>
+            ))}
+          </List>
+        )}
+      </Popover>
+      <InputField
+        changeDelay={changeDelay}
+        onChangeDelay={(event) => {
+          load(event.target.value);
+          if (onChangeDelay) onChangeDelay(event);
+        }}
+        InputProps={InputProps}
+        {...rest}
+      />
+    </React.Fragment>
+  );
+}

package/src/TagList.tsx

@@ -75,14 +75,16 @@ export function TagList(props: TagListProps) {
 
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState<readonly string[]>([]);
-  const loading = open && options.length === 0;
+  const [loading, setLoading] = React.useState(false);
 
   const loadDataLocal = async (keyword?: string) => {
+    setLoading(true);
     const result = (await loadData(keyword, maxItems)) ?? [];
     if (result.length >= maxItems) {
       result.push(moreLabel);
     }
     setOptions(result);
+    setLoading(false);
   };
 
   return (

package/src/index.ts

@@ -55,6 +55,7 @@ export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
 export * from "./InputField";
+export * from "./InputTipField";
 export * from "./IntInputField";
 export * from "./ItemList";
 export * from "./ListChooser";