@etsoo/materialui 1.1.53 → 1.1.54

package/lib/InputTipField.d.ts

@@ -1,26 +1,38 @@
-/// <reference types="react" />
 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 = InputFieldProps & {
+export type InputTipFieldProps<T extends ItemType = ItemType> = InputFieldProps & {
     /**
      * Load data
      * @param value Duplicate test value
      */
-    loadData(value: string): Promise<[ItemType[]?, string?]>;
+    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(props: InputTipFieldProps): JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): JSX.Element;
 export {};

package/lib/InputTipField.js

@@ -22,7 +22,7 @@ export function InputTipField(props) {
             React.createElement(Typography, { onClick: (event) => {
                     setAnchorEl(event.currentTarget);
                 }, ...labelProps }, title))) : undefined
-    }, changeDelay = 480, onChangeDelay, loadData, ...rest } = props;
+    }, 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);
@@ -37,7 +37,7 @@ export function InputTipField(props) {
         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)))))),
+            } }, data && React.createElement(List, null, data.map((item) => renderItem(item)))),
         React.createElement(InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
                 load(event.target.value);
                 if (onChangeDelay)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.53",
+  "version": "1.1.54",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/InputTipField.tsx

@@ -10,29 +10,46 @@ 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?]>;
+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">;
-};
+    /**
+     * 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(props: InputTipFieldProps) {
+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<ItemType[]>();
+  const [data, setData] = React.useState<T[]>();
 
   // Destruct
   const {
@@ -57,6 +74,8 @@ export function InputTipField(props: InputTipFieldProps) {
     changeDelay = 480,
     onChangeDelay,
     loadData,
+    itemLabel = (item) => item.label,
+    renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
     ...rest
   } = props;
 
@@ -83,13 +102,7 @@ export function InputTipField(props: InputTipFieldProps) {
           horizontal: "left"
         }}
       >
-        {data && (
-          <List>
-            {data.map((item) => (
-              <ListItem key={item.id}>{item.label}</ListItem>
-            ))}
-          </List>
-        )}
+        {data && <List>{data.map((item) => renderItem(item))}</List>}
       </Popover>
       <InputField
         changeDelay={changeDelay}