@zohodesk/dot/es/v1/setup/header/Search/Search.js

In this Library, we Provide Some Basic Components to Build Your Application

import React, { useState } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Icon } from '@zohodesk/icons';
import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
import style from "../../../../setup/header/Search/Search.module.css";
export default function Search(props) {
  let {
    placeHolder,
    maxLength,
    value,
    onChange,
    onKeyPress,
    onFocus,
    onBlur,
    customClass,
    dataId
  } = props;
  let [isFocus, setIsFocus] = useState(false);
  let [resetValue] = useState(value || '');

  const handleFocus = (id, name, value) => {
    setIsFocus(true);
    onFocus && onFocus(id, name, value);
  };

  const handleBlur = (id, name, value) => {
    if (resetValue == '') {
      setIsFocus(false);
    }

    onBlur && onBlur(id, name, value);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`,
    "data-id": `${dataId}_search`,
    "data-test-id": `${dataId}_search`
  }, /*#__PURE__*/React.createElement(TextBox, {
    placeHolder: placeHolder,
    customClass: style.input,
    maxLength: maxLength,
    value: value,
    onChange: onChange,
    onKeyUp: onKeyPress,
    onFocus: handleFocus,
    needAppearance: false,
    onBlur: handleBlur
  }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
    className: style.icon,
    onClick: handleBlur,
    "data-id": `${dataId}_clear`,
    "data-test-id": `${dataId}_clear`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-close",
    size: "19"
  })) : null);
}
Search.propTypes = propTypes;
Search.defaultProps = defaultProps;