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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */

import style from "./TextBox.module.css";
export default class TextBox extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.inputRef = this.inputRef.bind(this);
    this.setFocus = this.setFocus.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handlePreventTextBoxScroll = this.handlePreventTextBoxScroll.bind(this);
  }

  handleFocus() {
    let {
      id,
      value,
      name,
      onFocus
    } = this.props;
    onFocus && onFocus(id, value, name);
  }

  handleBlur() {
    let {
      id,
      value,
      name,
      onBlur
    } = this.props;
    onBlur && onBlur(id, value, name);
  }

  inputRef(ref) {
    let {
      inputRef
    } = this.props;
    this.inputEle = ref;
    inputRef && inputRef(ref);
  }

  setFocus() {
    if (this.inputEle) {
      this.inputEle.focus({
        preventScroll: true
      });
    }
  }

  onChange(e) {
    e.preventDefault();
    let {
      value
    } = e.target;
    let {
      onChange,
      isReadOnly
    } = this.props;
    onChange && !isReadOnly && onChange(value, e);
  }

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

  render() {
    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,
      isScrollPrevent,
      customProps,
      dataSelectorId
    } = this.props;
    let {
      ariaLabel,
      ariaAutocomplete,
      ariaControls,
      ariaExpanded,
      role,
      ariaDescribedby,
      ariaHaspopup,
      ariaRequired,
      ariaLabelledby,
      ariaInvalid,
      ariaOwns,
      ariaActivedescendant,
      ariaReadonly,
      ariaMultiselectable
    } = a11y;
    let options = {};

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

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

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

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

    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: this.handleBlur,
      onChange: this.onChange,
      onClick: onClick,
      onFocus: this.handleFocus,
      onKeyDown: onKeyDown,
      onKeyUp: onKeyUp,
      placeholder: placeHolder,
      ref: this.inputRef,
      type: type,
      value: value,
      onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : null,
      onKeyPress: onKeyPress,
      onMouseDown: onMouseDown,
      ...options,
      ...customProps
    });
  }

}
TextBox.defaultProps = defaultProps;
TextBox.propTypes = propTypes; // if (__DOCS__) {
//   Textbox.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide',
//     external: true,
//     description: ' '
//   };
// }