@etsoo/materialui 1.5.84 → 1.5.85

package/src/InputField.tsx

@@ -35,83 +35,78 @@ export type InputFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
-  (props, ref) => {
-    // Destruct
-    const {
-      InputProps = {},
-      inputProps = {},
-      changeDelay,
-      slotProps,
-      onChange,
-      onChangeDelay,
-      readOnly,
-      size = MUGlobal.inputFieldSize,
-      variant = MUGlobal.inputFieldVariant,
-      minChars = 0,
-      ...rest
-    } = props;
+export function InputField(props: InputFieldProps) {
+  // Destruct
+  const {
+    InputProps = {},
+    inputProps = {},
+    slotProps,
+    changeDelay,
+    onChange,
+    onChangeDelay,
+    readOnly,
+    size = MUGlobal.inputFieldSize,
+    variant = MUGlobal.inputFieldVariant,
+    minChars = 0,
+    ...rest
+  } = props;
 
-    // Slot props
-    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
+  // Slot props
+  const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
 
-    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();
+  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();
 
-    const onChangeEx = (
-      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-      // Min characters check
-      const len = event.target.value.length;
-      if (len > 0 && len < minChars) {
-        // Avoid to trigger the form change event
-        event.stopPropagation();
-        event.preventDefault();
-        return;
-      }
+  const onChangeEx = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    // Min characters check
+    const len = event.target.value.length;
+    if (len > 0 && len < minChars) {
+      // Avoid to trigger the form change event
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
 
-      if (onChange && (delayed == null || onChangeDelay != null))
-        onChange(event);
-      delayed?.call(undefined, event);
-    };
+    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}
-        slotProps={{
-          htmlInput: {
-            ["data-min-chars"]: minChars,
-            ...htmlInput,
-            ...inputProps
-          },
-          input: { readOnly, ...input, ...InputProps },
-          inputLabel: {
-            shrink: MUGlobal.inputFieldShrink,
-            ...inputLabel
-          },
-          ...restSlotProps
-        }}
-        onChange={onChangeEx}
-        size={size}
-        variant={variant}
-        {...rest}
-      />
-    );
-  }
-);
+  // Layout
+  return (
+    <TextField
+      slotProps={{
+        htmlInput: {
+          ["data-min-chars"]: minChars,
+          ...htmlInput,
+          ...inputProps
+        },
+        input: { readOnly, ...input, ...InputProps },
+        inputLabel: {
+          shrink: MUGlobal.inputFieldShrink,
+          ...inputLabel
+        },
+        ...restSlotProps
+      }}
+      onChange={onChangeEx}
+      size={size}
+      variant={variant}
+      {...rest}
+    />
+  );
+}

package/src/InputTipField.tsx

@@ -1,54 +1,80 @@
 import { DataTypes } from "@etsoo/shared";
 import Typography, { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputField, InputFieldProps } from "./InputField";
+import { InputField } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
 import ListItem from "@mui/material/ListItem";
 import Popover from "@mui/material/Popover";
 import List from "@mui/material/List";
 import InputAdornment from "@mui/material/InputAdornment";
+import { EmailInput } from "./EmailInput";
+import { MobileInput } from "./MobileInput";
+import { PhoneInput } from "./PhoneInput";
 
 type ItemType = DataTypes.IdLabelItem<string | number>;
 
+const componentMap = {
+  input: InputField,
+  email: EmailInput,
+  phone: PhoneInput,
+  mobile: MobileInput
+};
+
+type ComponentMap = typeof componentMap;
+type ComponentKey = keyof ComponentMap;
+
 /**
  * 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;
-  };
+export type InputTipFieldProps<
+  T extends ItemType = ItemType,
+  K extends ComponentKey = "input"
+> = {
+  /**
+   * Component key
+   */
+  component?: K;
+
+  /**
+   * Component props
+   */
+  componentProps?: React.ComponentProps<ComponentMap[K]>;
+
+  /**
+   * 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>
-) {
+export function InputTipField<
+  T extends ItemType = ItemType,
+  K extends ComponentKey = "input"
+>(props: InputTipFieldProps<T, K>) {
   // Global app
   const app = useAppContext();
 
@@ -63,17 +89,19 @@ export function InputTipField<T extends ItemType = ItemType>(
       title: app?.get("clickForDetails"),
       sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
     },
-    changeDelay = 480,
-    onChangeDelay,
     loadData,
     itemLabel = (item) => item.label,
     renderItem = (item) => <ListItem key={item.id}>{itemLabel(item)}</ListItem>,
-    slotProps = {},
+    component = "input",
+    componentProps = {} as React.ComponentProps<ComponentMap[K]>,
     ...rest
   } = props;
 
+  const { changeDelay = 480, onChangeDelay, slotProps = {} } = componentProps;
   const { input, ...slotRests } = slotProps;
 
+  const Component: typeof InputField = componentMap[component];
+
   const load = (value: string) => {
     if (value.length < 2) {
       setTitle(undefined);
@@ -99,7 +127,7 @@ export function InputTipField<T extends ItemType = ItemType>(
       >
         {data && <List>{data.map((item) => renderItem(item))}</List>}
       </Popover>
-      <InputField
+      <Component
         changeDelay={changeDelay}
         onChangeDelay={(event) => {
           load(event.target.value);

package/src/IntInputField.tsx

@@ -75,10 +75,7 @@ export type IntInputFieldProps = Omit<
 /**
  * Integer input field (controlled)
  */
-export const IntInputField = React.forwardRef<
-  HTMLDivElement,
-  IntInputFieldProps
->((props, ref) => {
+export function IntInputField(props: IntInputFieldProps) {
   // Destruct
   const {
     min = 0,
@@ -130,25 +127,20 @@ export const IntInputField = React.forwardRef<
   // Layout
   const layout = (
     <InputField
-      ref={ref}
       type="number"
       value={localValue == null ? (required ? min : "") : localValue}
-      inputProps={{
-        min,
-        step,
-        max,
-        style: inputStyle,
-        inputMode: "numeric"
-      }}
-      InputProps={{
-        startAdornment: symbol ? (
-          <React.Fragment>
-            <InputAdornment position="start">{symbol}</InputAdornment>
-          </React.Fragment>
-        ) : undefined,
-        endAdornment: endSymbol ? (
-          <InputAdornment position="end">{endSymbol}</InputAdornment>
-        ) : undefined
+      slotProps={{
+        input: {
+          startAdornment: symbol ? (
+            <React.Fragment>
+              <InputAdornment position="start">{symbol}</InputAdornment>
+            </React.Fragment>
+          ) : undefined,
+          endAdornment: endSymbol ? (
+            <InputAdornment position="end">{endSymbol}</InputAdornment>
+          ) : undefined
+        },
+        htmlInput: { min, step, max, style: inputStyle, inputMode: "numeric" }
       }}
       sx={
         buttons
@@ -234,4 +226,4 @@ export const IntInputField = React.forwardRef<
       </Box>
     );
   else return layout;
-});
+}

package/src/MobileInput.tsx

@@ -1,11 +1,11 @@
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Mobile input props
  */
-export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
+export type MobileInputProps = Omit<InputFieldProps, "type"> & {};
 
 /**
  * Mobile input
@@ -32,7 +32,7 @@ export function MobileInput(props: MobileInputProps) {
 
   // Layout
   return (
-    <TextField
+    <InputField
       type="tel"
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}

package/src/MoneyInputField.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { IntInputField, IntInputFieldProps } from "./IntInputField";
 
 /**
@@ -9,13 +8,10 @@ export type MoneyInputFieldProps = IntInputFieldProps & {};
 /**
  * Money input field (controlled)
  */
-export const MoneyInputField = React.forwardRef<
-  HTMLDivElement,
-  MoneyInputFieldProps
->((props, ref) => {
+export function MoneyInputField(props: MoneyInputFieldProps) {
   // Destruct
   const { step = 0.01, ...rest } = props;
 
   // Layout
-  return <IntInputField ref={ref} step={step} {...rest} />;
-});
+  return <IntInputField step={step} {...rest} />;
+}

package/src/PhoneInput.tsx

@@ -1,11 +1,11 @@
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField, InputFieldProps } from "./InputField";
 
 /**
  * Phone input props
  */
-export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
+export type PhoneInputProps = Omit<InputFieldProps, "type"> & {};
 
 /**
  * Phone input
@@ -32,7 +32,7 @@ export function PhoneInput(props: PhoneInputProps) {
 
   // Layout
   return (
-    <TextField
+    <InputField
       type="tel"
       autoCapitalize={autoCapitalize}
       autoCorrect={autoCorrect}

package/src/TextFieldEx.tsx

@@ -54,6 +54,11 @@ export type TextFieldExProps = TextFieldProps & {
    * Show password button
    */
   showPassword?: boolean;
+
+  /**
+   * Methods
+   */
+  mRef?: React.Ref<TextFieldExMethods>;
 };
 
 /**
@@ -67,10 +72,7 @@ export interface TextFieldExMethods {
   setError(error: React.ReactNode): void;
 }
 
-export const TextFieldEx = React.forwardRef<
-  TextFieldExMethods,
-  TextFieldExProps
->((props, ref) => {
+export function TextFieldEx(props: TextFieldExProps) {
   // Global app
   const app = useAppContext();
 
@@ -86,6 +88,7 @@ export const TextFieldEx = React.forwardRef<
     helperText,
     InputLabelProps = {},
     InputProps = {},
+    slotProps,
     onChange,
     onClear,
     onKeyDown,
@@ -97,9 +100,13 @@ export const TextFieldEx = React.forwardRef<
     showPassword,
     type,
     variant = MUGlobal.textFieldVariant,
+    mRef,
     ...rest
   } = props;
 
+  // Slot props
+  const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
+
   // Shrink
   InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
 
@@ -120,19 +127,19 @@ export const TextFieldEx = React.forwardRef<
 
   let typeEx = showPassword ? "password" : type;
 
-  let input: HTMLInputElement | undefined;
+  let inputEle: HTMLInputElement | undefined;
   const localRef = (ref: HTMLInputElement) => {
-    input = ref;
+    inputEle = ref;
 
-    if (input.value !== "") {
+    if (inputEle.value !== "") {
       updateEmpty(false);
     }
   };
 
   const doClear = () => {
-    if (input == null) return;
-    ReactUtils.triggerChange(input, "", false);
-    input.focus();
+    if (inputEle == null) return;
+    ReactUtils.triggerChange(inputEle, "", false);
+    inputEle.focus();
   };
 
   const clearClick = () => {
@@ -152,24 +159,24 @@ export const TextFieldEx = React.forwardRef<
 
   const touchStart = async (e: React.TouchEvent | React.MouseEvent) => {
     // Show the password
-    if (input) {
+    if (inputEle) {
       if (onVisibility) {
-        const result = await onVisibility(input);
+        const result = await onVisibility(inputEle);
         if (result === false) return;
       }
 
-      input.blur();
-      input.type = "text";
+      inputEle.blur();
+      inputEle.type = "text";
     }
     preventDefault(e);
   };
 
   const touchEnd = (e: React.TouchEvent | React.MouseEvent) => {
     // Show the password
-    if (input) {
+    if (inputEle) {
       if (onVisibility) return;
 
-      input.type = "password";
+      inputEle.type = "password";
     }
     preventDefault(e);
   };
@@ -218,7 +225,7 @@ export const TextFieldEx = React.forwardRef<
         };
 
   React.useImperativeHandle(
-    ref,
+    mRef,
     () => ({
       /**
        * Set error
@@ -277,13 +284,19 @@ export const TextFieldEx = React.forwardRef<
       fullWidth={fullWidth}
       helperText={helperTextEx}
       inputRef={useCombinedRefs(inputRef, localRef)}
-      InputProps={InputProps}
-      InputLabelProps={InputLabelProps}
       onChange={onChangeEx}
       onKeyDown={onKeyPressEx}
+      slotProps={{
+        input: { readOnly, ...input, ...InputProps },
+        inputLabel: {
+          shrink: MUGlobal.inputFieldShrink,
+          ...inputLabel
+        },
+        ...restSlotProps
+      }}
       type={typeEx}
       variant={variant}
       {...rest}
     />
   );
-});
+}