@findify/react-components/lib/layouts/Autocomplete/FullscreenWithInput/index.js

Findify react UI components

/**
 * @module layouts/Autocomplete/FullscreenWithInput
 */
import { useSuggestions } from '@findify/react-connect';
import useTranslations from "../../../helpers/useTranslations";
import { useAutocompleteLogic } from "../withAutocompleteLogic";
import React, { useCallback, useEffect, useRef } from 'react';
import Icon from "../../../components/Icon";
import Layout from "../../../components/autocomplete/Layout";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var styles = {
  "root": "findify-layouts--autocomplete--fullscreen-with-input",
  "type-title": "findify-layouts--autocomplete--fullscreen-with-input__type-title",
  "suggestions-title": "findify-layouts--autocomplete--fullscreen-with-input__suggestions-title",
  "trending-title": "findify-layouts--autocomplete--fullscreen-with-input__trending-title",
  "not-found": "findify-layouts--autocomplete--fullscreen-with-input__not-found",
  "start-typing": "findify-layouts--autocomplete--fullscreen-with-input__start-typing",
  "tip": "findify-layouts--autocomplete--fullscreen-with-input__tip",
  "highlight": "findify-layouts--autocomplete--fullscreen-with-input__highlight",
  "container": "findify-layouts--autocomplete--fullscreen-with-input__container",
  "overlay": "findify-layouts--autocomplete--fullscreen-with-input__overlay",
  "header": "findify-layouts--autocomplete--fullscreen-with-input__header",
  "icon-divider": "findify-layouts--autocomplete--fullscreen-with-input__icon-divider",
  "icons": "findify-layouts--autocomplete--fullscreen-with-input__icons",
  "search-icon": "findify-layouts--autocomplete--fullscreen-with-input__search-icon",
  "x-icon": "findify-layouts--autocomplete--fullscreen-with-input__x-icon",
  "typeTitle": "findify-layouts--autocomplete--fullscreen-with-input__type-title",
  "suggestionsTitle": "findify-layouts--autocomplete--fullscreen-with-input__suggestions-title",
  "trendingTitle": "findify-layouts--autocomplete--fullscreen-with-input__trending-title",
  "notFound": "findify-layouts--autocomplete--fullscreen-with-input__not-found",
  "startTyping": "findify-layouts--autocomplete--fullscreen-with-input__start-typing",
  "iconDivider": "findify-layouts--autocomplete--fullscreen-with-input__icon-divider",
  "searchIcon": "findify-layouts--autocomplete--fullscreen-with-input__search-icon",
  "xIcon": "findify-layouts--autocomplete--fullscreen-with-input__x-icon"
};
export default (function (_ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      config = _ref.config;

  var _useSuggestions = useSuggestions(),
      suggestions = _useSuggestions.suggestions,
      meta = _useSuggestions.meta,
      update = _useSuggestions.update;

  var input = useRef(null);
  var translate = useTranslations();

  var _useAutocompleteLogic = useAutocompleteLogic(),
      closeAutocomplete = _useAutocompleteLogic.closeAutocomplete;

  var isTrendingSearches = !meta.get('q');
  var onExit = useCallback(function () {
    window.findify.emit('autocompleteFocusLost', config.get('widgetKey'));
  }, []);
  var onSubmit = useCallback(function () {
    var _input$current;

    window.findify.emit('search', config.get('widgetKey'), (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.value);
    onExit();
  }, []);
  var onInputChange = useCallback(function (e) {
    var value = e.target.value;
    update('q', value);
  }, []);
  useEffect(function () {
    var _input$current2;

    if (input.current) (_input$current2 = input.current) === null || _input$current2 === void 0 ? void 0 : _input$current2.focus();
  }, []);
  return (suggestions === null || suggestions === void 0 ? void 0 : suggestions.size) > 0 ? /*#__PURE__*/_jsxs("div", {
    className: theme.wrapper,
    children: [config.get('overlay') ? /*#__PURE__*/_jsx("div", {
      className: theme.overlay,
      onClick: closeAutocomplete
    }) : null, /*#__PURE__*/_jsxs("section", {
      className: theme.root,
      "data-findify-autocomplete": true,
      tabIndex: 0,
      children: [/*#__PURE__*/_jsxs("div", {
        className: theme.header,
        children: [/*#__PURE__*/_jsx("form", {
          onSubmit: onSubmit,
          children: /*#__PURE__*/_jsx("input", {
            defaultValue: meta.get('q'),
            className: theme.input,
            ref: input,
            onChange: onInputChange,
            placeholder: translate('autocomplete.placeholder')
          })
        }), /*#__PURE__*/_jsxs("div", {
          className: theme.icons,
          children: [/*#__PURE__*/_jsx(Icon, {
            onClick: onSubmit,
            className: theme.searchIcon,
            name: 'Search',
            width: 18,
            height: 18
          }), /*#__PURE__*/_jsx("div", {
            className: theme.iconDivider
          }), /*#__PURE__*/_jsx(Icon, {
            onClick: onExit,
            className: theme.xIcon,
            name: 'XMobile',
            width: 13,
            height: 13
          })]
        })]
      }), /*#__PURE__*/_jsx(Layout, {
        className: theme.container,
        config: config,
        isTrendingSearches: isTrendingSearches
      })]
    })]
  }) : null;
});