@gechiui/components/build/autocomplete/autocompleter-ui.js

UI components for GeChiUI.

"use strict";

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

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

var _element = require("@gechiui/element");

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

var _lodash = require("lodash");

var _richText = require("@gechiui/rich-text");

var _getDefaultUseItems = _interopRequireDefault(require("./get-default-use-items"));

var _button = _interopRequireDefault(require("../button"));

var _popover = _interopRequireDefault(require("../popover"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function getAutoCompleterUI(autocompleter) {
  const useItems = autocompleter.useItems ? autocompleter.useItems : (0, _getDefaultUseItems.default)(autocompleter);

  function AutocompleterUI(_ref) {
    let {
      filterValue,
      instanceId,
      listBoxId,
      className,
      selectedIndex,
      onChangeOptions,
      onSelect,
      onReset,
      value,
      contentRef
    } = _ref;
    const [items] = useItems(filterValue);
    const anchorRef = (0, _richText.useAnchorRef)({
      ref: contentRef,
      value
    });
    (0, _element.useLayoutEffect)(() => {
      onChangeOptions(items);
    }, [items]);

    if (!items.length > 0) {
      return null;
    }

    return (0, _element.createElement)(_popover.default, {
      focusOnMount: false,
      onClose: onReset,
      position: "top right",
      className: "components-autocomplete__popover",
      anchorRef: anchorRef
    }, (0, _element.createElement)("div", {
      id: listBoxId,
      role: "listbox",
      className: "components-autocomplete__results"
    }, (0, _lodash.map)(items, (option, index) => (0, _element.createElement)(_button.default, {
      key: option.key,
      id: `components-autocomplete-item-${instanceId}-${option.key}`,
      role: "option",
      "aria-selected": index === selectedIndex,
      disabled: option.isDisabled,
      className: (0, _classnames.default)('components-autocomplete__result', className, {
        'is-selected': index === selectedIndex
      }),
      onClick: () => onSelect(option)
    }, option.label))));
  }

  return AutocompleterUI;
}
//# sourceMappingURL=autocompleter-ui.js.map