@zohodesk/dot/es/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, { Component } from 'react';
import { SearchUI_defaultProps } from "./props/defaultProps";
import { Search_propTypes, SearchUI_propTypes } from "./props/propTypes";
/** * Components ** */

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

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

import defaultStyle from "./LookupSearch.module.css";
export default class Search extends Component {
  constructor(props) {
    super(props);
    this.handleTextBoxFocus = this.handleTextBoxFocus.bind(this);
    this.handleTextBoxBlur = this.handleTextBoxBlur.bind(this);
    this.handleGetTextBoxRef = this.handleGetTextBoxRef.bind(this);
    this.handleRenderChildren = this.handleRenderChildren.bind(this);
    this.state = {
      isFocus: false
    };
  }

  handleTextBoxFocus(e) {
    const {
      onFocus
    } = this.props;
    this.setState({
      isFocus: true
    });
    onFocus && onFocus(e);
  }

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

  handleGetTextBoxRef(el) {
    const {
      getRef
    } = this.props;
    this.textBox = el;
    getRef && getRef(el);
  }

  handleRenderChildren(_ref) {
    let {
      isActive,
      isFocus
    } = _ref;
    const {
      value,
      selectedId,
      renderChildren
    } = this.props;
    return renderChildren({
      isActive,
      isFocus,
      value,
      selectedId
    });
  }

  render() {
    const {
      options,
      onSelect,
      value,
      selectedId,
      renderChildren
    } = this.props;
    const {
      isFocus
    } = this.state;
    const searchUIExtraProps = {
      isFocus: isFocus,
      onFocus: this.handleTextBoxFocus,
      onBlur: this.handleTextBoxBlur,
      getRef: this.handleGetTextBoxRef,
      value: value,
      renderChildren: typeof renderChildren == 'function' ? this.handleRenderChildren : undefined
    };
    return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
      value: value,
      options: options,
      onClick: onSelect,
      needTick: true,
      isArrow: false,
      isToggleStateNeeded: true,
      selectedId: selectedId
    }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
      ...searchUIExtraProps
    })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
      ...searchUIExtraProps
    });
  }

}
Search.propTypes = Search_propTypes;

class SearchUI extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.handleSearch = debounce(this.handleSearch.bind(this), 500);
  }

  handleSearch() {
    const {
      onSearch
    } = this.props;
    onSearch && onSearch();
  }

  handleKeyDown(e) {
    const {
      keyCode
    } = e;
    const {
      onSearch,
      needOnTypeSearch,
      onKeyDown
    } = this.props;
    onKeyDown && onKeyDown(e);

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

  handleChange(value) {
    const {
      onChange,
      needOnTypeSearch
    } = this.props;
    onChange && onChange(value);
    needOnTypeSearch && this.handleSearch();
  }

  handleClear(e) {
    const {
      onChange
    } = this.props;
    cancelBubblingEffect(e);
    onChange && onChange('');
    this.handleSearch();
  }

  render() {
    const {
      dataId,
      searchStr,
      placeHolder,
      getRef,
      title,
      isBoxed,
      isSearchIconNeed,
      options,
      activeClass,
      isFocus,
      onFocus,
      onBlur,
      renderChildren,
      isActive,
      hasSeparator,
      customStyle
    } = this.props;
    const isActiveState = isFocus || isActive;
    const isFocusWidth = isActiveState || searchStr;
    const style = mergeStyle(defaultStyle, customStyle);
    return /*#__PURE__*/React.createElement(Container, {
      isCover: false,
      alignBox: "row",
      align: "vertical",
      className: `
          ${style.wrapper} ${isBoxed ? style.boxType : style.borderType} 
          ${isActiveState ? `${style.active} ${activeClass || ''}` : ''}
          ${isFocusWidth ? style.focusWidth : ''}
        `
    }, typeof renderChildren == 'function' ? renderChildren({
      isActive,
      isFocus
    }) : options ? /*#__PURE__*/React.createElement(Container, {
      className: `${style.drpSearchBox} ${isActiveState ? 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(Icon, {
      name: "ZD-search",
      size: "11",
      iconClass: `${style.searchIcon} ${isBoxed ? style.searchIconBox : ''}`
    }) : null, hasSeparator ? /*#__PURE__*/React.createElement("div", {
      className: style.separator
    }) : null, /*#__PURE__*/React.createElement(Box, {
      flexible: true,
      onClick: cancelBubblingEffect
    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
      customProps: {
        TextBoxProps: {
          'data-a11y-autofocus': true
        }
      },
      placeHolder: placeHolder,
      value: searchStr,
      onChange: this.handleChange,
      onFocus: onFocus,
      onBlur: onBlur,
      onKeyDown: this.handleKeyDown,
      onMouseDown: cancelBubblingEffect,
      dataId: dataId,
      size: "small",
      inputRef: getRef,
      onClear: this.handleClear,
      onClearMouseDown: cancelBubblingEffect,
      needBorder: false
    })));
  }

}

SearchUI.defaultProps = SearchUI_defaultProps;
SearchUI.propTypes = SearchUI_propTypes; // if (__DOCS__) {
//   Search.docs = {
//     componentGroup: 'Lookup'
//   };
// }