web-toolkit/lib/components/Autocomplete.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _useControlled3 = _interopRequireDefault(require("../utils/useControlled"));

var _Box = _interopRequireDefault(require("./Box"));

var _Expander = _interopRequireDefault(require("./Expander"));

var _Input = _interopRequireDefault(require("./Input"));

var _Label = _interopRequireDefault(require("./Label"));

var _List = _interopRequireDefault(require("./List"));

var _Popover = _interopRequireDefault(require("./Popover"));

/*
 * Autocomplete.js
 */
var propTypes = {
  className: _propTypes.default.string,
  value: _propTypes.default.string,
  defaultValue: _propTypes.default.string,

  /** The options shown in the list */
  options: _propTypes.default.arrayOf(_propTypes.default.shape({
    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    label: _propTypes.default.node
  })),

  /** Enables basic filtering of options.
   * Set to `false` if you want to implement your own filtering. */
  enableFilter: _propTypes.default.bool,

  /** Called when the value changes (may prevent the value from updating, in conjuction with `value`) */
  onChange: _propTypes.default.func,

  /** Called when the value changes (passive) */
  onSearch: _propTypes.default.func
};
var defaultProps = {
  defaultValue: '',
  enableFilter: true,
  options: []
};

function Autocomplete(_ref) {
  var className = _ref.className,
      options = _ref.options,
      valueProp = _ref.value,
      defaultValue = _ref.defaultValue,
      enableFilter = _ref.enableFilter,
      refProp = _ref.ref,
      onSearch = _ref.onSearch,
      onChangeProp = _ref.onChange,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "options", "value", "defaultValue", "enableFilter", "ref", "onSearch", "onChange"]);
  var input = (0, _react.useRef)();

  var _useControlled = (0, _useControlled3.default)(valueProp, defaultValue, onChangeProp),
      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
      value = _useControlled2[0],
      setValue = _useControlled2[1];

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isFocused = _useState2[0],
      setIsFocused = _useState2[1];

  var open = isFocused && options.length > 0;
  var lowerCaseValue = value.toLowerCase();
  var filteredOptions = enableFilter === false ? options : options.filter(function (o) {
    return o.value.toLowerCase().includes(lowerCaseValue);
  });

  var onFocus = function onFocus() {
    return setIsFocused(true);
  };

  var onBlur = function onBlur(ev) {
    var _ev$relatedTarget;

    var newValue = ev === null || ev === void 0 ? void 0 : (_ev$relatedTarget = ev.relatedTarget) === null || _ev$relatedTarget === void 0 ? void 0 : _ev$relatedTarget.getAttribute('data-value');

    if (newValue) {
      setValue(newValue);
    }

    setIsFocused(false);
  };

  var elementClassName = (0, _clsx.default)('Autocomplete', className);

  var select = function select(option) {
    setValue(option.value);
    if (input.current) input.current.querySelector('input').blur();
  };

  var onChange = function onChange(newValue) {
    setValue(newValue);
    if (onSearch) onSearch(newValue);
  };

  var onAccept = function onAccept() {
    if (filteredOptions.length > 0) select(filteredOptions[0]);
  };

  var content = /*#__PURE__*/_react.default.createElement(_Expander.default, {
    open: open,
    fitContent: true
  }, /*#__PURE__*/_react.default.createElement(_List.default, {
    border: false,
    separators: false
  }, filteredOptions.map(function (o) {
    return /*#__PURE__*/_react.default.createElement(_List.default.Item, {
      key: o.value,
      activatable: true,
      onClick: function onClick() {
        return select(o);
      },
      "data-value": o.value
    }, o.label || o.value);
  }), filteredOptions.length === 0 && /*#__PURE__*/_react.default.createElement(_List.default.Item, {
    key: "empty"
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    justify: true
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
    muted: true,
    italic: true
  }, "(No results found)")))));

  return /*#__PURE__*/_react.default.createElement(_Popover.default, {
    className: "Autocomplete__popover",
    open: open,
    content: content,
    arrow: false,
    placement: "bottom-start",
    width: "trigger-min",
    shouldAttachEarly: true
  }, /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({
    className: elementClassName,
    value: value,
    onBlur: onBlur,
    onFocus: onFocus,
    onChange: onChange,
    onAccept: onAccept
  }, rest, {
    ref: function ref(_ref2) {
      input.current = _ref2;

      if (refProp) {
        if (typeof refProp === 'function') refProp(_ref2);else refProp.current = _ref2;
      }
    }
  })));
}

var Export = Autocomplete;
Export.propTypes = propTypes;
Export.defaultProps = defaultProps;
var _default = Export;
exports.default = _default;
//# sourceMappingURL=Autocomplete.js.map