@zohodesk/components/es/v1/TextBox/TextBox.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { memo, useRef, useCallback } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import style from "../../TextBox/TextBox.module.css";

function TextBox(props) {
  let {
    type,
    name,
    id,
    maxLength,
    placeHolder,
    size,
    onKeyUp,
    isReadOnly,
    isDisabled,
    onKeyDown,
    variant,
    onClick,
    needBorder,
    value,
    dataId,
    autofocus,
    needReadOnlyStyle,
    needAppearance,
    isClickable,
    onKeyPress,
    needEffect,
    autoComplete,
    borderColor,
    onMouseDown,
    htmlId,
    a11y,
    customClass,
    isFocus,
    customProps,
    dataSelectorId,
    onFocus,
    onBlur,
    onChange,
    inputRef,
    isScrollPrevent
  } = props;
  let {
    ariaLabel,
    ariaAutocomplete,
    ariaControls,
    ariaExpanded,
    role,
    ariaDescribedby,
    ariaHaspopup,
    ariaRequired,
    ariaLabelledby,
    ariaInvalid,
    ariaOwns,
    ariaActivedescendant,
    ariaReadonly,
    ariaMultiselectable
  } = a11y;
  let inputEle = useRef();
  let options = useRef({});

  if (isReadOnly) {
    options.current.readOnly = true;
  }

  if (isDisabled) {
    options.current.disabled = true;
  }

  if (autofocus) {
    options.current.autoFocus = true;
  }

  if (!autoComplete) {
    options.current.autoComplete = 'off';
  }

  const handleFocus = () => {
    onFocus && onFocus(id, value, name);
  };

  const handleBlur = () => {
    onBlur && onBlur(id, value, name);
  };

  const handleRef = useCallback(ref => {
    inputEle.current = ref;
    inputRef && inputRef(ref);
  }, []);

  const setFocus = () => {
    if (inputEle.current) {
      inputEle.current.focus({
        preventScroll: true
      });
    }
  };

  const handleChange = e => {
    e.preventDefault();
    let {
      value
    } = e.target;
    onChange && !isReadOnly && onChange(value, e);
  };

  const handlePreventTextBoxScroll = () => {
    this.inputEle.scrollLeft = 0;
  };

  let classList = needAppearance ? `${style.container} ${style[size]}  ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
  value = value === null || value === undefined ? '' : value;
  return /*#__PURE__*/React.createElement("input", {
    "aria-label": ariaLabel,
    "aria-invalid": ariaInvalid,
    "aria-autocomplete": ariaAutocomplete,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-describedby": ariaDescribedby,
    role: role,
    "aria-haspopup": ariaHaspopup,
    "aria-required": ariaRequired,
    "aria-labelledby": ariaLabelledby,
    "aria-owns": ariaOwns,
    "aria-activedescendant": ariaActivedescendant,
    "aria-readonly": ariaReadonly,
    "aria-multiselectable": ariaMultiselectable,
    className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${isScrollPrevent ? style.inputDotted : ''} ${customClass ? customClass : ''}`,
    "data-id": `${dataId}`,
    "data-test-id": `${dataId}`,
    "data-selector-id": dataSelectorId,
    id: htmlId || id,
    maxLength: maxLength,
    name: name,
    onBlur: handleBlur,
    onChange: handleChange,
    onClick: onClick,
    onFocus: handleFocus,
    onKeyDown: onKeyDown,
    onKeyUp: onKeyUp,
    placeholder: placeHolder,
    ref: handleRef,
    type: type,
    value: value,
    onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
    onKeyPress: onKeyPress,
    onMouseDown: onMouseDown,
    ...options.current,
    ...customProps
  });
}

TextBox.defaultProps = defaultProps;
TextBox.propTypes = propTypes;
const MemoizedTextBox = /*#__PURE__*/memo(TextBox);
MemoizedTextBox.propTypes = propTypes;
MemoizedTextBox.defaultProps = defaultProps;
MemoizedTextBox.displayName = 'TextBox';
export default MemoizedTextBox;