@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 _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
 * TypeAheadDropdown module.
 * @module @massds/mayflower-react/TypeAheadDropdown
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-typeahead
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */ // eslint-disable-next-line import/no-unresolved
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(_IconCaretDown["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 = exports["default"] = TypeAheadDropdown;
module.exports = exports.default;