fomantic-ui-react/es/dropdown/Dropdown.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 classNames from 'classnames';
import React, { useState, useRef, useEffect, Children, cloneElement, createElement } from 'react';
import _ from 'lodash';
import DropdownMenu from './DropdownMenu.js';
import DropdownItem from './DropdownItem.js';
import DropdownDivider from './DropdownDivider.js';
import DropdownSearchInput from './DropdownSearchInput.js';
import { Icon } from '../icon/index.js';
import { isNil, isValidElement } from '../_util/reactNode.js';
import '../transition/index.js';
import '../transition/Transition.js';
import './style/css.js';
import '../transition/type.js';
import '../icon/Icon.js';
import '../icon/type.js';

var _excluded = ["as", "text", "fluid", "className", "selection", "name", "value", "placeholder", "on", "search", "clearable", "noResultsMessage", "options", "onClick", "children"];

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 Dropdown = function Dropdown(_ref) {
  var _ref$as = _ref.as,
      as = _ref$as === void 0 ? "div" : _ref$as,
      text = _ref.text,
      fluid = _ref.fluid,
      className = _ref.className,
      selection = _ref.selection,
      name = _ref.name,
      value = _ref.value,
      placeholder = _ref.placeholder,
      _ref$on = _ref.on,
      on = _ref$on === void 0 ? "click" : _ref$on,
      search = _ref.search,
      clearable = _ref.clearable,
      _ref$noResultsMessage = _ref.noResultsMessage,
      noResultsMessage = _ref$noResultsMessage === void 0 ? "No results found." : _ref$noResultsMessage,
      _ref$options = _ref.options,
      options = _ref$options === void 0 ? [] : _ref$options,
      onClick = _ref.onClick,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, _excluded);

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

  var _useState3 = useState(text),
      _useState4 = _slicedToArray(_useState3, 2),
      textState = _useState4[0],
      setTextState = _useState4[1];

  var _useState5 = useState(value),
      _useState6 = _slicedToArray(_useState5, 2),
      inputValue = _useState6[0],
      setInputValue = _useState6[1];

  var _useState7 = useState(),
      _useState8 = _slicedToArray(_useState7, 2),
      selectedIndex = _useState8[0],
      setSelectedIndex = _useState8[1];

  var _useState9 = useState(),
      _useState10 = _slicedToArray(_useState9, 2),
      searchElement = _useState10[0],
      setSearchElement = _useState10[1];

  var _useState11 = useState(),
      _useState12 = _slicedToArray(_useState11, 2),
      searchValue = _useState12[0],
      setSearchValue = _useState12[1];

  var _useState13 = useState(false),
      _useState14 = _slicedToArray(_useState13, 2),
      filtered = _useState14[0],
      setFiltered = _useState14[1];

  var ref = useRef();

  var handleClick = function handleClick(e) {
    if (on === "click") {
      e.stopPropagation();
      setVisible(!visible);
    }

    onClick === null || onClick === void 0 ? void 0 : onClick(e);
  };

  var handleHover = function handleHover(e) {
    if (on === "hover") {
      if (e.type === "mouseenter") {
        setVisible(true);
      } else if (e.type === "mouseleave") {
        setVisible(false);
      }
    }
  };

  var handleKeyDown = function handleKeyDown(e) {
    if (e.key === "Escape") {
      e.stopPropagation();
      setVisible(false);
    }

    if (search && e.key === "Enter") {
      var _ref$current;

      ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".menu > .item.selected")).click();
    }
  };

  var handleHideDropdown = function handleHideDropdown() {
    setVisible(false);
  };

  var handleSearchChange = function handleSearchChange(e) {
    if (e.target.value) {
      var _ref$current2;

      setFiltered(true);
      var endLoop = false;
      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelectorAll(".menu > .item").forEach(function (item, index) {
        setTimeout(function () {
          if (item.classList.contains("filtered") === false && endLoop === false) {
            setSelectedIndex(index);
            endLoop = true;
          }
        });
      });
    } else {
      setFiltered(false);
      setSelectedIndex(0);
    }

    setSearchValue(e.target.value);
  };

  var scrollSelectedItemIntoView = function scrollSelectedItemIntoView() {
    if (!ref.current) {
      return;
    }

    var menu2 = ref.current.querySelector(".menu");

    if (!menu2) {
      return;
    }

    var item = menu2.querySelector(".item.active");

    if (!item) {
      return;
    }

    var isOutOfUpperView = item.offsetTop < menu2.scrollTop;
    var isOutOfLowerView = item.offsetTop + item.clientHeight > menu2.scrollTop + menu2.clientHeight;

    if (isOutOfUpperView) {
      menu2.scrollTop = item.offsetTop;
    } else if (isOutOfLowerView) {
      menu2.scrollTop = item.offsetTop + item.clientHeight - menu2.clientHeight;
    }
  };

  useEffect(function () {
    if (visible) {
      document.onclick = handleHideDropdown;

      if (search) {
        setSearchElement( /* @__PURE__ */React.createElement(DropdownSearchInput, {
          tabIndex: 0,
          onChange: handleSearchChange
        }));

        if (value === void 0 && selectedIndex === void 0) {
          setSelectedIndex(0);
        }
      }
    } else {
      document.onclick = null;

      if (search) {
        setSearchElement(null);
        setFiltered(false);
      }
    }
  }, [visible]);
  var menu = /* @__PURE__ */React.createElement(React.Fragment, null);

  if (isNil(children)) {
    var itemChildren = [];

    if (selection) {
      var hasResults = false;

      _.forEach(options, function (item, i) {
        var handleItemClick = function handleItemClick() {
          setInputValue(item.value);
          setTextState(item.text);
          setSelectedIndex(i);
          setFiltered(false);
        };

        useEffect(function () {
          if (inputValue === item.value) {
            setSelectedIndex(i);
            setTextState(item.text);
          }
        }, []);

        var findValue = function findValue() {
          if (filtered || searchValue) {
            var _item$children;

            if (typeof item.value === "string" || typeof item.value === "number") {
              if (_.toLower(_.trim(item.value.toString())).includes(_.toLower(searchValue)) !== false) {
                hasResults = true;
                return false;
              }
            }

            if (_.toLower(_.trim(item.text || ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.toString()))).includes(_.toLower(searchValue)) !== false) {
              hasResults = true;
              return false;
            }

            return true;
          } else {
            return false;
          }
        };

        if (item.unfilterable) {
          hasResults = true;
        }

        itemChildren.push( /* @__PURE__ */React.createElement(DropdownItem, {
          className: classNames({
            filtered: item.unfilterable ? false : findValue()
          }),
          key: i,
          active: inputValue === item.value,
          selected: selectedIndex === i,
          value: item.value,
          text: item.text,
          onClick: handleItemClick
        }));
      });

      menu = /* @__PURE__ */React.createElement(DropdownMenu, {
        open: visible,
        onShow: scrollSelectedItemIntoView,
        onHide: function onHide() {
          return setSearchValue(void 0);
        }
      }, itemChildren);
    } else {
      _.forEach(options, function (item, i) {
        itemChildren.push( /* @__PURE__ */React.createElement(DropdownItem, _objectSpread({
          key: i
        }, item)));
      });

      menu = /* @__PURE__ */React.createElement(DropdownMenu, {
        open: visible
      }, itemChildren);
    }
  } else {
    var menuChild = Children.only(children);

    if (isValidElement(menuChild)) {
      if (selection) {
        var _hasResults = false;

        var _itemChildren = Children.map(menuChild.props.children, function (childItem, i) {
          if (isValidElement(childItem)) {
            var childItemProps = childItem.props;
            useEffect(function () {
              if (inputValue === childItemProps.value) {
                setSelectedIndex(i);
                setTextState(childItemProps.text);
              }
            }, []);

            var findValue = function findValue() {
              if (filtered || searchValue) {
                var _childItemProps$child;

                if (typeof childItemProps.value === "string" || typeof childItemProps.value === "number") {
                  if (_.toLower(_.trim(childItemProps.value.toString())).includes(_.toLower(searchValue)) !== false) {
                    _hasResults = true;
                    return false;
                  }
                }

                if (_.toLower(_.trim(childItemProps.text || ((_childItemProps$child = childItemProps.children) === null || _childItemProps$child === void 0 ? void 0 : _childItemProps$child.toString()))).includes(_.toLower(searchValue)) !== false) {
                  _hasResults = true;
                  return false;
                }

                return true;
              } else {
                return false;
              }
            };

            if (childItemProps.unfilterable) {
              _hasResults = true;
            }

            return /*#__PURE__*/cloneElement(childItem, {
              key: i,
              active: inputValue === childItemProps.value,
              selected: selectedIndex === i,
              className: classNames({
                filtered: childItemProps.unfilterable ? false : findValue()
              }),
              onClick: function onClick() {
                setInputValue(childItemProps.value);
                setTextState(childItemProps.text || childItemProps.children);
                setSelectedIndex(i);
                setFiltered(false);
              }
            });
          }
        });

        if (search && searchValue && _hasResults === false) {
          _itemChildren = /* @__PURE__ */React.createElement(React.Fragment, null, _itemChildren, /* @__PURE__ */React.createElement("div", {
            className: "message"
          }, noResultsMessage));
        }

        menu = /*#__PURE__*/cloneElement(menuChild, {
          open: visible,
          onShow: scrollSelectedItemIntoView,
          onHide: function onHide() {
            return setSearchValue(void 0);
          }
        }, _itemChildren);
      } else {
        menu = /*#__PURE__*/cloneElement(menuChild, {
          open: visible
        });
      }
    }
  }

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

  var inputElement = /* @__PURE__ */React.createElement(React.Fragment, null);

  if (typeof inputValue === "string" || typeof inputValue === "number") {
    inputElement = /* @__PURE__ */React.createElement("input", {
      type: "hidden",
      name: name,
      value: inputValue
    });
  } else if (typeof inputValue === "boolean") {
    inputElement = /* @__PURE__ */React.createElement("input", {
      type: "hidden",
      name: name,
      value: inputValue ? 1 : 0
    });
  }

  return /*#__PURE__*/createElement(as, _objectSpread({
    ref: ref,
    className: classNames("ui", "dropdown", {
      fluid: fluid,
      selection: selection,
      active: selection && visible,
      search: search
    }, className),
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    onMouseEnter: handleHover,
    onMouseLeave: handleHover,
    tabIndex: "0"
  }, props), /* @__PURE__ */React.createElement(React.Fragment, null, selection ? /* @__PURE__ */React.createElement(React.Fragment, null, inputElement, /* @__PURE__ */React.createElement(Icon, {
    name: "dropdown"
  }), searchElement, clearable && selectedIndex !== void 0 && /* @__PURE__ */React.createElement(Icon, {
    name: "remove",
    onClick: function onClick(e) {
      e.stopPropagation();
      setSelectedIndex(void 0);
      setInputValue(void 0);
      setTextState(void 0);
    }
  }), /* @__PURE__ */React.createElement("div", {
    className: classNames("text", {
      "default": placeholder && !textState,
      filtered: filtered
    })
  }, textState || placeholder)) : /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
    className: "text"
  }, textState), /* @__PURE__ */React.createElement(Icon, {
    name: "dropdown"
  })), menu));
};

Dropdown.displayName = "Dropdown";
Dropdown.Menu = DropdownMenu;
Dropdown.Item = DropdownItem;
Dropdown.Divider = DropdownDivider;
Dropdown.SearchInput = DropdownSearchInput;

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