@helpscout/hsds-react/components/Dropdown/Dropdown.Container.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.DropdownContainer = void 0;

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

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

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

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

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

var _wedux = require("@helpscout/wedux");

var _getDocumentFromComponent = _interopRequireDefault(require("@helpscout/react-utils/dist/getDocumentFromComponent"));

var _getShallowDiffs = _interopRequireDefault(require("@helpscout/react-utils/dist/getShallowDiffs"));

var _Dropdown = _interopRequireWildcard(require("./Dropdown.store"));

var _Dropdown2 = _interopRequireDefault(require("./Dropdown"));

var _Dropdown3 = _interopRequireDefault(require("./Dropdown.actionTypes"));

var _Dropdown4 = _interopRequireDefault(require("./Dropdown.Block"));

var _Dropdown5 = _interopRequireDefault(require("./Dropdown.Card"));

var _Dropdown6 = _interopRequireDefault(require("./Dropdown.Divider"));

var _Dropdown7 = _interopRequireDefault(require("./Dropdown.Group"));

var _Dropdown8 = _interopRequireDefault(require("./Dropdown.Header"));

var _Dropdown9 = _interopRequireDefault(require("./Dropdown.Item"));

var _Dropdown10 = _interopRequireDefault(require("./Dropdown.Menu"));

var _Dropdown11 = require("./Dropdown.utils");

var _Dropdown12 = require("./Dropdown.actions");

var _Dropdown13 = _interopRequireDefault(require("./Dropdown.Trigger"));

var _id = require("../../utilities/id");

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Deprecated

/* istanbul ignore file */
function noop() {}

var uniqueID = (0, _id.createUniqueIDFactory)('hsds-dropdown-');

var DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(DropdownContainer, _React$PureComponent);

  function DropdownContainer(props, context) {
    var _this;

    _this = _React$PureComponent.call(this, props, context) || this;
    _this.store = void 0;
    var id = props.id || uniqueID();
    var menuId = (0, _Dropdown11.pathResolve)(id, 'menu');
    var triggerId = (0, _Dropdown11.pathResolve)(id, 'trigger'); // Define the initial state for the store

    var initialState = (0, _extends2.default)({}, _this.props, {
      envNode: (0, _getDocumentFromComponent.default)((0, _assertThisInitialized2.default)(_this)),
      // When displaying the dropdown component in an `iframe` (e.g. Beacon),
      // this scopes the window reference to the `iframe`, instead of the main
      // window. When undefined the default window object will be set.
      contentWindow: props.contentWindow || window,
      id: id,
      menuId: menuId,
      triggerId: triggerId,
      indexMap: (0, _Dropdown11.getIndexMapFromItems)(props.items)
    }); // Use the user provided Store, if defined...

    if (props.__store && props.__store.setState) {
      props.__store.setState({
        id: id,
        menuId: menuId,
        triggerId: triggerId
      });

      _this.store = props.__store;
    } // ...Otherwise, create our own default store
    else {
        _this.store = (0, _Dropdown.default)(initialState);
      } // Expose store.getState to internal components
    // This method is cleaner (and simpler) than relying on context or even
    // React.createContext


    _this.store.setState({
      getState: _this.store.getState
    });

    return _this;
  }

  var _proto = DropdownContainer.prototype;

  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
    this.store.subscribe(this.props.subscribe);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.store.unsubscribe(this.props.subscribe);
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    var _this2 = this;

    var state = this.store.getState(); // Batch updates to a single update

    var nextState = {}; // Update items + regenerate the indexMap if items change

    if (nextProps.items !== state.items) {
      nextState = (0, _extends2.default)({}, nextState, (0, _Dropdown12.updateItems)(state, nextProps.items));
    } // Adjust open state, if changed


    if (nextProps.isOpen !== this.props.isOpen) {
      // Queuing this one with RAF
      requestAnimationFrame(function () {
        _this2.rehydrateStoreWithProps((0, _Dropdown12.updateOpen)(state, nextProps.isOpen));
      });
    } // Adjust index, if changed


    if (nextProps.closeOnSelect && !(0, _lodash.default)(nextProps.index) && nextProps.index !== state.index) {
      nextState = (0, _extends2.default)({}, nextState, (0, _Dropdown12.updateIndex)(state, nextProps.index));
    } // Adjust dropUp, if changed


    if (nextProps.dropUp !== state.dropUp) {
      nextState = (0, _extends2.default)({}, nextState, (0, _Dropdown12.updateDropUp)(state, nextProps.dropUp));
    } // This is to handle filterable dropdowns. We need to adjust the internally
    // tracked inputValue and reset the `index` value for a filterable
    // experience.


    if (nextProps.inputValue !== state.inputValue) {
      nextState = (0, _extends2.default)({}, nextState, (0, _Dropdown12.updateInputValue)(state, nextProps.inputValue));
    } // Update selectedItem state, if changed externally


    if (nextProps.selectedItem !== state.selectedItem) {
      nextState = (0, _extends2.default)({}, nextState, (0, _Dropdown12.updateSelectedItem)(state, nextProps.selectedItem));
    }

    var diffs = (0, _getShallowDiffs.default)(this.props, nextProps);

    if (diffs.diffs.length) {
      var _diffs$next = diffs.next,
          children = _diffs$next.children,
          items = _diffs$next.items,
          isOpen = _diffs$next.isOpen,
          index = _diffs$next.index,
          dropUp = _diffs$next.dropUp,
          inputValue = _diffs$next.inputValue,
          changedProps = (0, _objectWithoutPropertiesLoose2.default)(_diffs$next, ["children", "items", "isOpen", "index", "dropUp", "inputValue"]);

      if (Object.keys(changedProps).length) {
        nextState = (0, _extends2.default)({}, nextState, changedProps);
      }
    }

    this.rehydrateStoreWithProps(nextState);
  };

  _proto.rehydrateStoreWithProps = function rehydrateStoreWithProps(props) {
    this.store.setState((0, _Dropdown11.filterNonStoreProps)(props));
  };

  _proto.render = function render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_wedux.Provider, {
      store: this.store,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown2.default, (0, _extends2.default)({}, this.props))
    });
  };

  return DropdownContainer;
}(_react.default.PureComponent);

exports.DropdownContainer = DropdownContainer;
DropdownContainer.defaultProps = (0, _extends2.default)({}, _Dropdown.initialState, {
  onBlur: noop,
  onOpen: noop,
  onClose: noop,
  onFocus: noop,
  isOpen: false,
  innerRef: noop,
  onSelect: noop,
  subscribe: noop,
  trigger: 'Dropdown'
});
DropdownContainer.actionTypes = _Dropdown3.default;
DropdownContainer.Block = _Dropdown4.default;
DropdownContainer.Card = _Dropdown5.default;
DropdownContainer.Divider = _Dropdown6.default;
DropdownContainer.Group = _Dropdown7.default;
DropdownContainer.Header = _Dropdown8.default;
DropdownContainer.Item = _Dropdown9.default;
DropdownContainer.Menu = _Dropdown10.default;
DropdownContainer.Trigger = _Dropdown13.default;
var _default = DropdownContainer;
exports.default = _default;