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

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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _TextBoxModule = _interopRequireDefault(require("../../TextBox/TextBox.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function TextBox(props) {
  var _this = this;

  var type = props.type,
      name = props.name,
      id = props.id,
      maxLength = props.maxLength,
      placeHolder = props.placeHolder,
      size = props.size,
      onKeyUp = props.onKeyUp,
      isReadOnly = props.isReadOnly,
      isDisabled = props.isDisabled,
      onKeyDown = props.onKeyDown,
      variant = props.variant,
      onClick = props.onClick,
      needBorder = props.needBorder,
      value = props.value,
      dataId = props.dataId,
      autofocus = props.autofocus,
      needReadOnlyStyle = props.needReadOnlyStyle,
      needAppearance = props.needAppearance,
      isClickable = props.isClickable,
      onKeyPress = props.onKeyPress,
      needEffect = props.needEffect,
      autoComplete = props.autoComplete,
      borderColor = props.borderColor,
      onMouseDown = props.onMouseDown,
      htmlId = props.htmlId,
      a11y = props.a11y,
      customClass = props.customClass,
      isFocus = props.isFocus,
      customProps = props.customProps,
      dataSelectorId = props.dataSelectorId,
      onFocus = props.onFocus,
      onBlur = props.onBlur,
      onChange = props.onChange,
      inputRef = props.inputRef,
      isScrollPrevent = props.isScrollPrevent;
  var ariaLabel = a11y.ariaLabel,
      ariaAutocomplete = a11y.ariaAutocomplete,
      ariaControls = a11y.ariaControls,
      ariaExpanded = a11y.ariaExpanded,
      role = a11y.role,
      ariaDescribedby = a11y.ariaDescribedby,
      ariaHaspopup = a11y.ariaHaspopup,
      ariaRequired = a11y.ariaRequired,
      ariaLabelledby = a11y.ariaLabelledby,
      ariaInvalid = a11y.ariaInvalid,
      ariaOwns = a11y.ariaOwns,
      ariaActivedescendant = a11y.ariaActivedescendant,
      ariaReadonly = a11y.ariaReadonly,
      ariaMultiselectable = a11y.ariaMultiselectable;
  var inputEle = (0, _react.useRef)();
  var options = (0, _react.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';
  }

  var handleFocus = function handleFocus() {
    onFocus && onFocus(id, value, name);
  };

  var handleBlur = function handleBlur() {
    onBlur && onBlur(id, value, name);
  };

  var handleRef = (0, _react.useCallback)(function (ref) {
    inputEle.current = ref;
    inputRef && inputRef(ref);
  }, []);

  var setFocus = function setFocus() {
    if (inputEle.current) {
      inputEle.current.focus({
        preventScroll: true
      });
    }
  };

  var handleChange = function handleChange(e) {
    e.preventDefault();
    var value = e.target.value;
    onChange && !isReadOnly && onChange(value, e);
  };

  var handlePreventTextBoxScroll = function handlePreventTextBoxScroll() {
    _this.inputEle.scrollLeft = 0;
  };

  var classList = needAppearance ? "".concat(_TextBoxModule["default"].container, " ").concat(_TextBoxModule["default"][size], "  ").concat(_TextBoxModule["default"][variant], " ").concat(needBorder ? _TextBoxModule["default"].border : '', " ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextBoxModule["default"].effect, " ").concat(isFocus ? _TextBoxModule["default"].focus : '') : "".concat(_TextBoxModule["default"].basic);
  value = value === null || value === undefined ? '' : value;
  return /*#__PURE__*/_react["default"].createElement("input", _extends({
    "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: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(isScrollPrevent ? _TextBoxModule["default"].inputDotted : '', " ").concat(customClass ? customClass : ''),
    "data-id": "".concat(dataId),
    "data-test-id": "".concat(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.defaultProps;
TextBox.propTypes = _propTypes.propTypes;
var MemoizedTextBox = /*#__PURE__*/(0, _react.memo)(TextBox);
MemoizedTextBox.propTypes = _propTypes.propTypes;
MemoizedTextBox.defaultProps = _defaultProps.defaultProps;
MemoizedTextBox.displayName = 'TextBox';
var _default = MemoizedTextBox;
exports["default"] = _default;