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

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

import React, { useState, useRef, useCallback } 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/TextBoxIcon.module.css";
/* eslint-disable react/forbid-component-props */

export default function TextBoxIcon(props) {
  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,
    customProps,
    inputRef,
    onFocus,
    onBlur,
    needInputFocusOnWrapperClick,
    isScrollPrevent
  } = props;
  const {
    customTBoxWrap = '',
    customTextBox = '',
    customTBoxIcon = '',
    customTBoxLine = ''
  } = customClass;
  const {
    clearText = 'Clear'
  } = i18nKeys;
  let {
    TextBoxProps = {}
  } = customProps;
  const [isActive, setActive] = useState(false);
  const inputEle = useRef();
  const handleRef = useCallback(ele => {
    inputEle.current = ele;
    inputRef && inputRef(ele);
  }, []);

  const handleClear = () => {
    onClear && onClear();
    inputEle.current && inputEle.current.focus({
      preventScroll: true
    });
  };

  const handleFocus = e => {
    if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
      setActive(true);
      onFocus && onFocus(e);
    }
  };

  const handleBlur = e => {
    setActive(false);
    onBlur && onBlur(e);
  };

  const handleInputFocusOnClick = () => {
    inputEle.current && inputEle.current.focus({
      preventScroll: true
    });
  };

  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 ? handleInputFocusOnClick : null
  }, /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement(TextBox, { ...props,
    dataId: dataId,
    size: size,
    variant: variant,
    type: type,
    value: value,
    name: name,
    id: id,
    htmlId: htmlId,
    maxLength: maxLength,
    placeHolder: placeHolder,
    onKeyUp: onKeyUp,
    onFocus: handleFocus,
    onKeyDown: onKeyDown,
    onChange: onChange,
    onBlur: handleBlur,
    onClick: onClick,
    isReadOnly: isReadOnly,
    isDisabled: isDisabled,
    inputRef: 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: 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)), 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: ' '
//   };
// }