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

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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Search;

var _react = _interopRequireWildcard(require("react"));

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon"));

var _Layout = require("@zohodesk/components/es/v1/Layout");

var _icons = require("@zohodesk/icons");

var _ToggleDropDown = _interopRequireDefault(require("../../../../dropdown/ToggleDropDown/ToggleDropDown"));

var _debounce = require("@zohodesk/components/es/utils/debounce");

var _Common = require("@zohodesk/components/es/utils/Common");

var _LookupSearchModule = _interopRequireDefault(require("../../../../lookup/header/Search/LookupSearch.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function Search(props) {
  var options = props.options,
      onSelect = props.onSelect,
      value = props.value,
      selectedId = props.selectedId,
      onFocus = props.onFocus,
      onBlur = props.onBlur,
      getRef = props.getRef;

  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      isFocus = _useState2[0],
      setFocus = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isDropDownOpen = _useState4[0],
      setDropDownOpen = _useState4[1];

  var handleDropDownOpen = function handleDropDownOpen() {
    setDropDownOpen(true);
  };

  var handleDropDownClose = function handleDropDownClose() {
    setDropDownOpen(false);
  };

  var handleTextBoxFocus = function handleTextBoxFocus(e) {
    setFocus(true);
    onFocus && onFocus(e);
  };

  var handleTextBoxBlur = function handleTextBoxBlur(e) {
    setFocus(false);
    onBlur && onBlur(e);
  };

  var handleGetTextBoxRef = function handleGetTextBoxRef(el) {
    // textBox = el;
    getRef && getRef(el);
  };

  var searchUIExtraProps = {
    isFocus: isFocus || isDropDownOpen,
    onFocus: handleTextBoxFocus,
    onBlur: handleTextBoxBlur,
    getRef: handleGetTextBoxRef
  };
  return options ? /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
    value: value,
    options: options,
    onClick: onSelect,
    needTick: true,
    isArrow: false,
    isToggleStateNeeded: true,
    selectedId: selectedId,
    onDropDownOpen: handleDropDownOpen,
    onDropDownClose: handleDropDownClose
  }, /*#__PURE__*/_react["default"].createElement(SearchUI, _extends({}, props, searchUIExtraProps))) : /*#__PURE__*/_react["default"].createElement(SearchUI, _extends({}, props, searchUIExtraProps));
}

Search.propTypes = _propTypes.Search_propTypes;

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

  var handleSearch = function handleSearch() {
    onSearch && onSearch();
  };

  var debounceHandleSearch = (0, _debounce.debounce)(handleSearch, 500);

  var handleKeyDown = function handleKeyDown(e) {
    var keyCode = e.keyCode;
    onKeyDown && onKeyDown(e);

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

  var handleChange = function handleChange(value) {
    onChange && onChange(value);
    needOnTypeSearch && debounceHandleSearch();
  };

  var handleClear = function handleClear(e) {
    (0, _Common.cancelBubblingEffect)(e);
    onChange && onChange('');
    debounceHandleSearch();
  };

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

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