cozy-search/dist/components/Search/SearchBarDesktop.js

UI components about search bar and IA assistant

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _twakeIcons = require("@linagora/twake-icons");

var _classnames = _interopRequireDefault(require("classnames"));

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

var _ClickAwayListener = _interopRequireDefault(require("cozy-ui/transpiled/react/ClickAwayListener"));

var _SearchBar = _interopRequireDefault(require("cozy-ui/transpiled/react/SearchBar"));

var _AssistantButton = require("./AssistantButton");

var _SearchProvider = require("./SearchProvider");

var _ResultMenu = _interopRequireDefault(require("../ResultMenu/ResultMenu"));

var _helpers = require("../helpers");

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; }

var styles = {
  "searchBarDesktop--result": "styles__searchBarDesktop--result___2bQQy",
  "suggestionsPlaceholder": "styles__suggestionsPlaceholder___y-vsv",
  "search-bar-icon": "styles__search-bar-icon___1affF",
  "search-bar--mobile": "styles__search-bar--mobile___1CSb2"
};

var SearchBarDesktop = function SearchBarDesktop(_ref) {
  var value = _ref.value,
      onClear = _ref.onClear,
      onChange = _ref.onChange,
      elevation = _ref.elevation,
      size = _ref.size,
      hasHalfBorderRadius = _ref.hasHalfBorderRadius,
      className = _ref.className,
      disabledHover = _ref.disabledHover;

  var _useSearch = (0, _SearchProvider.useSearch)(),
      searchValue = _useSearch.searchValue,
      results = _useSearch.results,
      selectedIndex = _useSearch.selectedIndex,
      setSelectedIndex = _useSearch.setSelectedIndex;

  var searchRef = (0, _react.useRef)();
  var listRef = (0, _react.useRef)();

  var handleKeyDown = function handleKeyDown(ev) {
    var _listRef$current;

    var listElementCount = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.childElementCount;

    if (ev.key === 'ArrowDown') {
      ev.preventDefault();

      if (selectedIndex === listElementCount - 1) {
        setSelectedIndex(0);
      } else {
        setSelectedIndex(function (v) {
          return v + 1;
        });
      }
    }

    if (ev.key === 'ArrowUp') {
      ev.preventDefault();

      if (selectedIndex === 0) {
        setSelectedIndex(listElementCount - 1);
      } else {
        setSelectedIndex(function (v) {
          return v - 1;
        });
      }
    }

    if (ev.key === 'Escape') {
      ev.preventDefault();
      onClear();
    }

    if (ev.key === 'Enter') {
      ev.preventDefault();

      if (selectedIndex !== undefined) {
        var _results$selectedInde;

        var onClickFn = results === null || results === void 0 ? void 0 : (_results$selectedInde = results[selectedIndex]) === null || _results$selectedInde === void 0 ? void 0 : _results$selectedInde.onClick;
        onClear();
        onClickFn();
      }
    }
  };

  return /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
    onClickAway: onClear
  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_SearchBar.default, {
    elevation: elevation,
    className: (0, _classnames.default)(className, searchValue && hasHalfBorderRadius ? styles['searchBarDesktop--result'] : ''),
    ref: searchRef,
    size: size,
    icon: size === 'large' ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
      className: (0, _classnames.default)('u-mh-1', styles['search-bar-icon']),
      icon: _twakeIcons.Magnifier,
      size: 24
    }) : /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
      className: (0, _classnames.default)('u-ml-1 u-mr-half', styles['search-bar-icon']),
      icon: _twakeIcons.Magnifier,
      size: 16
    }),
    value: value,
    componentsProps: {
      inputBase: {
        onKeyDown: handleKeyDown,
        endAdornment: (0, _helpers.isAssistantEnabled)() && /*#__PURE__*/_react.default.createElement(_AssistantButton.AssistantButton, {
          size: size
        })
      }
    },
    disabledClear: true,
    disabledFocus: value !== '',
    disabledHover: disabledHover,
    onChange: onChange
  }), searchValue && /*#__PURE__*/_react.default.createElement(_ResultMenu.default, {
    listRef: listRef,
    anchorRef: searchRef,
    onClear: onClear
  })));
};

SearchBarDesktop.defaultProps = {
  size: 'large',
  elevation: 0
};
var _default = SearchBarDesktop;
exports.default = _default;