@zohodesk/components/es/TextBoxIcon/TextBoxIcon.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

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); }

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import TextBox from "../TextBox/TextBox";
import { Container, Box } from "../Layout";
import InputFieldLine from "../shared/InputFieldLine/InputFieldLine";
import { Icon } from '@zohodesk/icons';
import btnStyle from "../semantic/Button/semanticButton.module.css";
import style from "./TextBoxIcon.module.css";
/* eslint-disable react/forbid-component-props */

export default class TextBoxIcon extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleRef = this.handleRef.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleInputFocusOnClick = this.handleInputFocusOnClick.bind(this);
  }

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

  handleClear() {
    let {
      onClear
    } = this.props;
    onClear && onClear();
    this.inputEle && this.inputEle.focus({
      preventScroll: true
    });
  }

  handleFocus(e) {
    const {
      onFocus,
      needReadOnlyStyle,
      isReadOnly
    } = this.props;

    if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
      this.setState({
        isActive: true
      });
      onFocus && onFocus(e);
    }
  }

  handleBlur(e) {
    const {
      onBlur
    } = this.props;
    this.setState({
      isActive: false
    });
    onBlur && onBlur(e);
  }

  handleInputFocusOnClick() {
    this.inputEle && this.inputEle.focus({
      preventScroll: true
    });
  }

  render() {
    const {
      type,
      name,
      id,
      maxLength,
      placeHolder,
      size,
      onKeyUp,
      isReadOnly,
      isDisabled,
      children,
      onKeyDown,
      onClick,
      value,
      iconRotated,
      needBorder,
      variant,
      onClear,
      onChange,
      title,
      dataId,
      dataSelectorId,
      needReadOnlyStyle,
      isClickable,
      needEffect,
      onKeyPress,
      borderColor,
      onMouseDown,
      showClearIcon,
      htmlId,
      i18nKeys,
      customClass,
      iconOnHover,
      isFocus,
      onClearMouseDown,
      isScrollPrevent,
      customProps,
      needInputFocusOnWrapperClick,
      renderRightPlaceholderNode,
      renderCustomClearComponent
    } = this.props;
    const {
      isActive
    } = this.state;
    const {
      customTBoxWrap = '',
      customTextBox = '',
      customTBoxIcon = ''
    } = customClass;
    const {
      clearText = 'Clear'
    } = i18nKeys;
    let {
      TextBoxProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement(InputFieldLine, {
      isActive: isActive || isFocus,
      border: needBorder ? 'bottom' : 'none',
      borderColor: borderColor,
      hasEffect: needEffect,
      isDisabled: isDisabled,
      isReadOnly: isReadOnly && needReadOnlyStyle,
      customClass: ` ${style.container} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''} ${customTBoxWrap} `,
      title: isDisabled ? title : null,
      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null,
      customProps: {
        dataSelectorId: dataSelectorId
      }
    }, /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {
      dataId: dataId,
      size: size,
      variant: variant,
      type: type,
      value: value,
      name: name,
      id: id,
      htmlId: htmlId,
      maxLength: maxLength,
      placeHolder: placeHolder,
      onKeyUp: onKeyUp,
      onFocus: this.handleFocus,
      onKeyDown: onKeyDown,
      onChange: onChange,
      onBlur: this.handleBlur,
      onClick: onClick,
      isReadOnly: isReadOnly,
      isDisabled: isDisabled,
      inputRef: this.handleRef,
      needReadOnlyStyle: needReadOnlyStyle,
      isClickable: isClickable,
      onKeyPress: onKeyPress,
      onMouseDown: onMouseDown,
      needBorder: false,
      isScrollPrevent: isScrollPrevent,
      customClass: customTextBox,
      customProps: TextBoxProps
    }))), /*#__PURE__*/React.createElement(Box, {
      className: `${style.iconContainer} ${customTBoxIcon}`
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "row"
    }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? typeof renderCustomClearComponent == 'function' ? renderCustomClearComponent({
      clearText,
      handleClear: this.handleClear
    }) : /*#__PURE__*/React.createElement(Box, {
      className: `${btnStyle.buttonReset} ${style.icon}`,
      onClick: this.handleClear,
      dataId: `${dataId}_ClearIcon`,
      "data-title": clearText,
      tagName: "button"
    }, /*#__PURE__*/React.createElement(Container, {
      align: "both",
      "aria-hidden": true,
      onMouseDown: onClearMouseDown
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "ZD-delete",
      size: "14"
    }))) : null, children ? /*#__PURE__*/React.createElement(Box, {
      className: `${style.icon} ${iconRotated ? style.rotated : ''}`
    }, children) : null, renderRightPlaceholderNode ? /*#__PURE__*/React.createElement(Box, null, renderRightPlaceholderNode) : null)));
  }

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