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

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

/* eslint-disable react/forbid-component-props */

/*** Libraries ***/
import React, { useState } from 'react';
import { SearchUI_defaultProps } from "./props/defaultProps";
import { Search_propTypes, SearchUI_propTypes } from "./props/propTypes";
/** * Components ** */

import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import { Icon } from '@zohodesk/icons';
import ToggleDropDown from "../../../../dropdown/ToggleDropDown/ToggleDropDown";
/** * Methods ** */

import { debounce } from '@zohodesk/components/es/utils/debounce';
import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
/** * CSS ** */

import style from "../../../../lookup/header/Search/LookupSearch.module.css";
export default function Search(props) {
  const {
    options,
    onSelect,
    value,
    selectedId,
    onFocus,
    onBlur,
    getRef
  } = props;
  const [isFocus, setFocus] = useState(false);
  const [isDropDownOpen, setDropDownOpen] = useState(false);

  const handleDropDownOpen = () => {
    setDropDownOpen(true);
  };

  const handleDropDownClose = () => {
    setDropDownOpen(false);
  };

  const handleTextBoxFocus = e => {
    setFocus(true);
    onFocus && onFocus(e);
  };

  const handleTextBoxBlur = e => {
    setFocus(false);
    onBlur && onBlur(e);
  };

  const handleGetTextBoxRef = el => {
    // textBox = el;
    getRef && getRef(el);
  };

  const searchUIExtraProps = {
    isFocus: isFocus || isDropDownOpen,
    onFocus: handleTextBoxFocus,
    onBlur: handleTextBoxBlur,
    getRef: handleGetTextBoxRef
  };
  return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
    value: value,
    options: options,
    onClick: onSelect,
    needTick: true,
    isArrow: false,
    isToggleStateNeeded: true,
    selectedId: selectedId,
    onDropDownOpen: handleDropDownOpen,
    onDropDownClose: handleDropDownClose
  }, /*#__PURE__*/React.createElement(SearchUI, { ...props,
    ...searchUIExtraProps
  })) : /*#__PURE__*/React.createElement(SearchUI, { ...props,
    ...searchUIExtraProps
  });
}
Search.propTypes = Search_propTypes;

function SearchUI(props) {
  const {
    dataId,
    searchStr,
    placeHolder,
    getRef,
    title,
    isBoxed,
    isSearchIconNeed,
    options,
    activeClass,
    isFocus,
    onFocus,
    onBlur,
    onSearch,
    needOnTypeSearch,
    onKeyDown,
    onChange
  } = props;

  const handleSearch = () => {
    onSearch && onSearch();
  };

  const debounceHandleSearch = debounce(handleSearch, 500);

  const handleKeyDown = e => {
    const {
      keyCode
    } = e;
    onKeyDown && onKeyDown(e);

    if (keyCode === 13) {
      !needOnTypeSearch && onSearch && onSearch();
    }
  };

  const handleChange = value => {
    onChange && onChange(value);
    needOnTypeSearch && debounceHandleSearch();
  };

  const handleClear = e => {
    cancelBubblingEffect(e);
    onChange && onChange('');
    debounceHandleSearch();
  };

  return /*#__PURE__*/React.createElement(Container, {
    isCover: false,
    alignBox: "row",
    align: "vertical",
    className: `${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''} ${searchStr || isFocus ? style.focusWidth : ''}`
  }, options && /*#__PURE__*/React.createElement(Container, {
    className: `${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`,
    isCover: false,
    align: "vertical",
    alignBox: "row",
    "data-title": title
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-search",
    size: "11"
  }), /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-down",
    size: "7",
    iconClass: style.iconArrow
  })), isSearchIconNeed && /*#__PURE__*/React.createElement(Box, {
    className: style.searchIconBox
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-search",
    size: "11"
  })), /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement(TextBoxIcon, {
    customClass: {
      customTextBox: `${isBoxed ? style.inputBox : ''}`
    },
    customProps: {
      TextBoxProps: {
        'data-a11y-autofocus': true
      }
    },
    placeHolder: placeHolder,
    value: searchStr,
    onChange: handleChange,
    onClick: cancelBubblingEffect,
    onFocus: onFocus,
    onBlur: onBlur,
    onKeyDown: handleKeyDown,
    onMouseDown: cancelBubblingEffect,
    dataId: dataId,
    size: "small",
    inputRef: getRef,
    onClear: handleClear,
    onClearMouseDown: cancelBubblingEffect
  })));
}

SearchUI.defaultProps = SearchUI_defaultProps;
SearchUI.propTypes = SearchUI_propTypes;