@parkassist/pa-ui-library/dist/components/MaterialInput/index.js

INX Platform elements

import { jsx as _jsx } from "react/jsx-runtime";
import React, { forwardRef, useEffect, useState } from "react";
import TextField from "@mui/material/TextField";
import usePreviousValue from "../../hooks/usePreviousValue";
import { getValue, getType, adjustNumberValue, renderHelperText, handleFocus, handleBlur, getSXStyles, getInputLabelProps, getinputProps, getInputProps, getFormHelperTextProps } from './Utils/utils';
const MaterialInput = /*#__PURE__*/forwardRef(({
  id,
  label,
  placeholder,
  value,
  onClick,
  onChange,
  disabled,
  helperText,
  errorHelperText,
  error,
  size = 'small',
  multiline,
  rows,
  fullWidth = true,
  type = 'text',
  style,
  prefixText,
  suffixText,
  iconStart,
  iconEnd,
  onKeyDown,
  onMouseOver,
  onMouseLeave,
  onFocus,
  onBlur,
  alwaysShowError = false,
  topSpace,
  min,
  max,
  disabledEmptyNumericValue = false,
  maxLength,
  readOnly,
  autoFocus,
  acceptedFiles,
  allowShowingPassword = false,
  allowCopying = false,
  hideEmptyHelperTextSpace = false,
  multiple = false,
  InputProps,
  inputProps,
  InputLabelProps
}, ref) => {
  const [showPassword, setShowPassword] = useState(false);
  const [copied, setCopied] = useState(false);
  const [focused, setFocused] = useState(false);
  const [touched, setTouched] = useState(false);
  const previousFocused = usePreviousValue(focused);
  const shouldShowError = alwaysShowError ? error : error && touched;
  useEffect(() => {
    if (previousFocused && !focused) {
      setTouched(true);
    }
  }, [focused, previousFocused]);
  const handleChange = event => {
    if (type === 'number' && (max || min)) {
      const newEvent = adjustNumberValue({
        event,
        min,
        max,
        disabledEmptyNumericValue
      });
      return onChange(newEvent);
    }
    onChange(event);
  };
  const handleShowPassword = () => setShowPassword(prevState => !prevState);
  return _jsx(TextField, {
    id: id,
    inputRef: ref,
    autoFocus: autoFocus,
    label: label,
    placeholder: placeholder,
    type: getType(type, showPassword),
    value: getValue(value, type, disabledEmptyNumericValue),
    disabled: disabled,
    onChange: onChange && handleChange,
    helperText: renderHelperText(helperText, errorHelperText, shouldShowError, hideEmptyHelperTextSpace),
    error: shouldShowError,
    size: size,
    fullWidth: fullWidth,
    multiline: multiline,
    rows: rows,
    onWheel: event => event.target.blur(),
    onMouseLeave: onMouseLeave,
    onMouseOver: onMouseOver,
    onKeyDown: onKeyDown,
    onFocus: event => handleFocus(event, onFocus, setFocused),
    onBlur: event => handleBlur(event, onBlur, setFocused),
    onClick: onClick,
    sx: getSXStyles({
      style,
      topSpace
    }),
    InputLabelProps: getInputLabelProps({
      InputLabelProps,
      type
    }),
    inputProps: getinputProps({
      inputProps,
      readOnly,
      maxLength,
      acceptedFiles,
      type,
      multiple
    }),
    InputProps: getInputProps({
      InputProps,
      iconStart,
      iconEnd,
      prefixText,
      suffixText,
      allowCopying,
      allowShowingPassword,
      disabled,
      setCopied,
      onShowPassword: handleShowPassword,
      type,
      copied,
      value,
      showPassword
    }),
    FormHelperTextProps: getFormHelperTextProps()
  });
});
export default MaterialInput;