@etsoo/materialui 1.1.52 → 1.1.54

package/lib/InputTipField.d.ts

@@ -0,0 +1,38 @@
+import { DataTypes } from "@etsoo/shared";
+import { TypographyProps } from "@mui/material/Typography";
+import React from "react";
+import { InputFieldProps } from "./InputField";
+type ItemType = DataTypes.IdLabelItem<string | number>;
+/**
+ * InputField with tips properties
+ */
+export type InputTipFieldProps<T extends ItemType = ItemType> = InputFieldProps & {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+    /**
+     * Custom item label
+     * @param item List item data
+     * @returns Result
+     */
+    itemLabel?: (item: T) => React.ReactNode;
+    /**
+     * Custom render item
+     * @param item List item data
+     * @returns Result
+     */
+    renderItem?: (item: T) => React.ReactNode;
+};
+/**
+ * InputField with tips
+ * @param props Props
+ * @returns Component
+ */
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): 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, itemLabel = (item) => item.label, renderItem = (item) => React.createElement(ListItem, { key: item.id }, itemLabel(item)), ...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) => renderItem(item)))),
+        React.createElement(InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
+                load(event.target.value);
+                if (onChangeDelay)
+                    onChangeDelay(event);
+            }, InputProps: InputProps, ...rest })));
+}

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.52",
+  "version": "1.1.54",
   "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,118 @@
+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<T extends ItemType = ItemType> =
+  InputFieldProps & {
+    /**
+     * Load data
+     * @param value Duplicate test value
+     */
+    loadData(value: string): Promise<[T[]?, string?]>;
+
+    /**
+     * Label props
+     */
+    labelProps?: Omit<TypographyProps, "onClick">;
+
+    /**
+     * Custom item label
+     * @param item List item data
+     * @returns Result
+     */
+    itemLabel?: (item: T) => React.ReactNode;
+
+    /**
+     * Custom render item
+     * @param item List item data
+     * @returns Result
+     */
+    renderItem?: (item: T) => React.ReactNode;
+  };
+
+/**
+ * InputField with tips
+ * @param props Props
+ * @returns Component
+ */
+export function InputTipField<T extends ItemType = ItemType>(
+  props: InputTipFieldProps<T>
+) {
+  // State
+  const [title, setTitle] = React.useState<string>();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement>();
+  const [data, setData] = React.useState<T[]>();
+
+  // 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,
+    itemLabel = (item) => item.label,
+    renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
+    ...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) => renderItem(item))}</List>}
+      </Popover>
+      <InputField
+        changeDelay={changeDelay}
+        onChangeDelay={(event) => {
+          load(event.target.value);
+          if (onChangeDelay) onChangeDelay(event);
+        }}
+        InputProps={InputProps}
+        {...rest}
+      />
+    </React.Fragment>
+  );
+}

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";