@massds/mayflower-react/dist/TypeAheadDropdown/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

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

var _index = _interopRequireDefault(require("../ButtonWithIcon/index.js"));

var _index2 = _interopRequireDefault(require("../InputTextFuzzy/index.js"));

var _IconChevron = _interopRequireDefault(require("../Icon/IconChevron.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var TypeAheadDropdown = function TypeAheadDropdown(props) {
  var _React$useState = _react["default"].useState(false),
      buttonExpand = _React$useState[0],
      setButtonExpand = _React$useState[1];

  var _React$useState2 = _react["default"].useState(props.dropdownButton.text),
      buttonText = _React$useState2[0],
      setButtonText = _React$useState2[1];

  var _React$useState3 = _react["default"].useState(),
      buttonClicked = _React$useState3[0],
      setButtonClicked = _React$useState3[1];

  var buttonRef = _react["default"].useRef();

  var wrapperRef = _react["default"].useRef();

  var handleRefMouseDown = function handleRefMouseDown() {
    setButtonClicked(true);
  };

  var handleClick = function handleClick() {
    setButtonExpand(!buttonExpand);
  };

  var handleKeyDown = function handleKeyDown(event) {
    // If the user pressed escape, or pressed enter with nothing selected close
    // the panel.
    if (event.key === 'Escape' || event.key === 'Enter' && event.target.value === '') {
      closeDropdown();
    }

    if (event.key === 'Escape' && buttonRef) {
      buttonRef.focus();
    }

    if (typeof props.onKeyDown === 'function') {
      props.onKeyDown(event);
    }
  };

  var handleInputBlur = function handleInputBlur() {
    if (buttonClicked) {
      closeDropdown();
    }
  };

  var handleSelect = function handleSelect(event, _ref) {
    var suggestion = _ref.suggestion;
    // Stop the filters form submission if enter is pressed in the selector.
    event.preventDefault(); // Update this component state and pass the event out to the calling code.

    var text = suggestion.item.text;

    if (text.length > 0) {
      setButtonText(text);
      setButtonExpand(false);

      if (typeof props.inputText.onSuggestionClick === 'function') {
        props.inputText.onSuggestionClick(event, {
          suggestion: suggestion
        });
      }
    }
  };

  var handleClickOutside = function handleClickOutside(event) {
    // Close the panel if the user clicks outside the component.
    var node = wrapperRef.current;

    if (node && !node.contains(event.target)) {
      if (buttonExpand) {
        setButtonExpand(false);
      }
    }
  };

  var closeDropdown = function closeDropdown() {
    setButtonExpand(false);
  }; // update state from prop


  _react["default"].useEffect(function () {
    var defaultValue = props.defaultValue;

    if (defaultValue !== undefined) {
      setButtonText(defaultValue);
      setButtonExpand(false);
    }
  }, [props.defaultValue]);

  _react["default"].useEffect(function () {
    setButtonClicked(false);
    document.addEventListener('mousedown', handleClickOutside);
    buttonRef.current.addEventListener('mousedown', handleRefMouseDown);
    return function () {
      document.removeEventListener('mousedown', handleClickOutside);

      if (buttonRef && buttonRef.current) {
        buttonRef.current.removeEventListener('mousedown', handleRefMouseDown);
      }
    };
  });

  var dropdownButton = _extends({
    onClick: handleClick,
    setButtonRef: buttonRef,
    expanded: buttonExpand,
    icon: /*#__PURE__*/_react["default"].createElement(_IconChevron["default"], {
      height: 20,
      width: 20
    }),
    size: ''
  }, props.dropdownButton);

  dropdownButton.text = buttonText || dropdownButton.text;

  var inputTextFuzzyProps = _extends({}, props.inputText, {
    onKeyDown: handleKeyDown,
    onSuggestionClick: handleSelect,
    onBlur: handleInputBlur,
    autoFocusInput: true
  });

  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: wrapperRef
  }, /*#__PURE__*/_react["default"].createElement(_index["default"], dropdownButton), buttonExpand && /*#__PURE__*/_react["default"].createElement(_index2["default"], inputTextFuzzyProps));
};

TypeAheadDropdown.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The props to set up the dropdown button */
  dropdownButton: _propTypes["default"].shape(_index["default"].propTypes).isRequired,

  /** The props to set up the inputTextFuzzy */
  inputText: _propTypes["default"].shape(_index2["default"].propTypes).isRequired,

  /** Default text value for the selection */
  defaultValue: _propTypes["default"].string,

  /** Custom keydown callback */
  onKeyDown: _propTypes["default"].func,

  /** Custom suggestion onClick callback */
  onSuggestionClick: _propTypes["default"].func
} : {};
var _default = TypeAheadDropdown;
exports["default"] = _default;
module.exports = exports.default;