fomantic-ui-react/es/search/Search.js

Fomantic-UI React -- A React Component Library.

/**
 * fomantic-ui-react v0.0.1-alpha.10
 * (c) 2022 FireLoong <fireloong@foxmail.com>
 * @license MIT
 */

import { _ as _defineProperty, a as _objectWithoutProperties } from '../_chunks/dep-9f1126c1.js';
import { _ as _slicedToArray } from '../_chunks/dep-dc9b74a1.js';
import React, { useState, createElement } from 'react';
import classNames from 'classnames';
import _ from 'lodash';
import SearchResults from './SearchResults.js';
import SearchResult from './SearchResult.js';
import SearchCategory from './SearchCategory.js';
import { Transition } from '../transition/index.js';
import '../_util/reactNode.js';
import '../transition/Transition.js';
import './style/css.js';
import '../transition/type.js';

var _excluded = ["as", "className", "loading", "icon", "placeholder", "value", "selectFirstResult", "results", "noResultsMessage", "noResultsDescription", "showNoResults", "minCharacters", "onSearchChange", "onResultSelect"],
    _excluded2 = ["childkey"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var Search = function Search(_ref) {
  var _ref$as = _ref.as,
      as = _ref$as === void 0 ? "div" : _ref$as,
      className = _ref.className,
      loading = _ref.loading,
      icon = _ref.icon,
      placeholder = _ref.placeholder,
      value = _ref.value,
      selectFirstResult = _ref.selectFirstResult,
      results = _ref.results,
      _ref$noResultsMessage = _ref.noResultsMessage,
      noResultsMessage = _ref$noResultsMessage === void 0 ? "No results" : _ref$noResultsMessage,
      noResultsDescription = _ref.noResultsDescription,
      _ref$showNoResults = _ref.showNoResults,
      showNoResults = _ref$showNoResults === void 0 ? true : _ref$showNoResults,
      _ref$minCharacters = _ref.minCharacters,
      minCharacters = _ref$minCharacters === void 0 ? 1 : _ref$minCharacters,
      onSearchChange = _ref.onSearchChange,
      onResultSelect = _ref.onResultSelect,
      props = _objectWithoutProperties(_ref, _excluded);

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

  var _useState3 = useState(value !== null && value !== void 0 ? value : ""),
      _useState4 = _slicedToArray(_useState3, 2),
      currentValue = _useState4[0],
      setCurrentValue = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      open = _useState6[0],
      setOpen = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      transition = _useState8[0],
      setTransition = _useState8[1];

  var _useState9 = useState(selectFirstResult ? 0 : -1),
      _useState10 = _slicedToArray(_useState9, 2),
      selectedIndex = _useState10[0],
      setSelectedIndex = _useState10[1];

  if (!as) {
    as = "div";
  }

  var classNamesVar = {};

  if (loading) {
    if (typeof loading === "boolean") {
      classNamesVar = {
        focus: focus,
        loading: loading
      };
    } else if (loading.color) {
      var _classNamesVar;

      classNamesVar = (_classNamesVar = {
        focus: focus,
        "double": loading["double"],
        slow: loading.slow,
        elastic: loading.elastic
      }, _defineProperty(_classNamesVar, loading.color, loading.color), _defineProperty(_classNamesVar, "loading", true), _classNamesVar);
    } else {
      classNamesVar = {
        focus: focus,
        "double": loading["double"],
        slow: loading.slow,
        elastic: loading.elastic,
        loading: true
      };
    }
  } else {
    classNamesVar = {
      focus: focus
    };
  }

  var handleInputFocus = function handleInputFocus() {
    setFocus(true);
  };

  var handleInputBlur = function handleInputBlur() {
    setFocus(false);
  };

  var handleSearchChange = function handleSearchChange(e) {
    e.stopPropagation();

    if (e.target.value.length >= minCharacters) {
      setTransition(true);
      onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(e);
      setCurrentValue(e.target.value);
      setTimeout(function () {
        setOpen(e.target.value ? true : false);
      });
    } else {
      setCurrentValue(e.target.value);
      setOpen(false);
    }
  };

  var getSelectedResult = function getSelectedResult() {
    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selectedIndex;
    return _.get(results, index);
  };

  var handleItemClick = function handleItemClick(e, _ref2) {
    var id = _ref2.id;
    console.log(id);
    var result = getSelectedResult(id);
    e.nativeEvent.stopImmediatePropagation();
    setCurrentValue(result.title);
    onResultSelect === null || onResultSelect === void 0 ? void 0 : onResultSelect(e, result);
    setOpen(false);
  };

  var inputElement = /*#__PURE__*/createElement("input", {
    className: "prompt",
    type: "text",
    placeholder: placeholder,
    autoComplete: "off",
    value: currentValue,
    onFocus: handleInputFocus,
    onBlur: handleInputBlur,
    onChange: handleSearchChange
  });
  var renderNoResults = /* @__PURE__ */React.createElement("div", {
    className: "message empty"
  }, /* @__PURE__ */React.createElement("div", {
    className: "header"
  }, noResultsMessage), noResultsDescription && /* @__PURE__ */React.createElement("div", {
    className: "description"
  }, noResultsDescription));

  var renderResult = function renderResult(_ref3, index, _array) {
    var childkey = _ref3.childkey,
        result = _objectWithoutProperties(_ref3, _excluded2);

    var offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
    var offsetIndex = index + offset;
    return /* @__PURE__ */React.createElement(SearchResult, _objectSpread(_objectSpread({
      key: childkey !== null && childkey !== void 0 ? childkey : result.id || result.title
    }, result), {}, {
      id: offsetIndex,
      onClick: handleItemClick
    }));
  };

  var renderResults = _.map(results, renderResult);

  var renderMenuContent = function renderMenuContent() {
    if (_.isEmpty(results)) {
      return showNoResults ? renderNoResults : null;
    }

    return renderResults;
  };

  var renderResultsMenu = function renderResultsMenu() {
    var menuContent = renderMenuContent();

    if (!menuContent) {
      return null;
    }

    return transition ? /* @__PURE__ */React.createElement(Transition, {
      as: SearchResults,
      visible: open,
      animation: "scale",
      duration: 300
    }, menuContent) : /* @__PURE__ */React.createElement(SearchResults, null, menuContent);
  };

  return /*#__PURE__*/createElement(as, _objectSpread({
    className: classNames("ui", "search", classNamesVar, className)
  }, props), /* @__PURE__ */React.createElement(React.Fragment, null, icon ? /* @__PURE__ */React.createElement("div", {
    className: classNames("ui", {
      left: icon === "left"
    }, "icon", "input")
  }, inputElement, /* @__PURE__ */React.createElement("i", {
    className: "search icon"
  })) : inputElement, renderResultsMenu()));
};

Search.displayName = "Search";
Search.Result = SearchResult;
Search.Results = SearchResults;
Search.Category = SearchCategory;

export { Search as default };
//# sourceMappingURL=Search.js.map