@zohodesk/components/es/TextBoxIcon/TextBoxIcon.js

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

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 { 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
    } = this.props;
    const {
      isActive
    } = this.state;
    const {
      customTBoxWrap = '',
      customTextBox = '',
      customTBoxIcon = '',
      customTBoxLine = ''
    } = customClass;
    const {
      clearText = 'Clear'
    } = i18nKeys;
    let {
      TextBoxProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      isCover: false,
      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
      dataSelectorId: dataSelectorId,
      "data-title": isDisabled ? title : null,
      onClick: needInputFocusOnWrapperClick && !isDisabled ? this.handleInputFocusOnClick : null
    }, /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(TextBox, { ...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 ? /*#__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)), needBorder && /*#__PURE__*/React.createElement("div", {
      className: `${style.line} ${style[`borderColor_${borderColor}`]} ${customTBoxLine}`
    }));
  }

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