@ntragas/pouncejstest/dist/cjs/components/Snackbar/SnackbarContext.js

A collection of UI components from Panther labs

"use strict";

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

exports.__esModule = true;
exports.useSnackbar = exports.SnackbarConsumer = exports.SnackbarProvider = void 0;

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _resizeObserver = require("@juggle/resize-observer");

var _reactSpring = require("react-spring");

var _reactUseMeasure = _interopRequireDefault(require("react-use-measure"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _Snackbar = _interopRequireDefault(require("../Snackbar"));

var _helpers = require("../../utils/helpers");

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

var generateSnackbarId = function generateSnackbarId() {
  return Math.random().toString(36).substr(2, 5);
};

var PUSH_SNACKBAR = 'PUSH_SNACKBAR';
var UPDATE_SNACKBAR = 'UPDATE_SNACKBAR';
var REMOVE_SNACKBAR = 'REMOVE_SNACKBAR';

var snackbarStateReducer = function snackbarStateReducer(snackbars, action) {
  switch (action.type) {
    case PUSH_SNACKBAR:
      return [].concat(snackbars, [(0, _extends2.default)({
        id: action.payload.id
      }, action.payload.props)]);

    case UPDATE_SNACKBAR:
      return snackbars.map(function (snackbar) {
        return snackbar.id === action.payload.id ? (0, _extends2.default)({}, snackbar, action.payload.props) : snackbar;
      });

    case REMOVE_SNACKBAR:
      return snackbars.filter(function (s) {
        return s.id !== action.payload.id;
      });

    default:
      return snackbars;
  }
};

var SnackbarContext = /*#__PURE__*/_react.default.createContext({
  pushSnackbar: function pushSnackbar() {
    return '';
  },
  updateSnackbar: function updateSnackbar() {
    return '';
  }
});
/**
 * A component that acts both as a state-manager and provider. It provides access to methods for
 * managing snackbar instances
 */


var SnackbarProvider = function SnackbarProvider(_ref) {
  var children = _ref.children;

  var _React$useReducer = _react.default.useReducer(snackbarStateReducer, []),
      snackbars = _React$useReducer[0],
      dispatch = _React$useReducer[1];

  var pushSnackbar = _react.default.useCallback(function (props) {
    var id = generateSnackbarId();
    dispatch({
      type: PUSH_SNACKBAR,
      payload: {
        id,
        props
      }
    });
    return id;
  }, [dispatch]);

  var updateSnackbar = _react.default.useCallback(function (id, props) {
    dispatch({
      type: UPDATE_SNACKBAR,
      payload: {
        id,
        props
      }
    });
    return id;
  }, [dispatch]);

  var removeSnackbar = _react.default.useCallback(function (id) {
    dispatch({
      type: REMOVE_SNACKBAR,
      payload: {
        id
      }
    });
    return id;
  }, [dispatch]);

  var _useMeasure = (0, _reactUseMeasure.default)({
    debounce: 100,
    scroll: false,
    polyfill: _resizeObserver.ResizeObserver
  }),
      ref = _useMeasure[0],
      height = _useMeasure[1].height; // eslint-disable-next-line @typescript-eslint/no-explicit-any


  var transitions = (0, _reactSpring.useTransition)(snackbars, snackbars.map(function (_ref2) {
    var id = _ref2.id;
    return id;
  }), {
    from: {
      opacity: 0,
      height: 0
    },
    enter: {
      opacity: 1,
      height
    },
    leave: {
      opacity: 0,
      height: 0,
      pointerEvents: 'none'
    },
    // Snackbars can have varying heights. As sooon as the latest is measured, update the height
    // calculations of this same latest one. This way the last snackbar can always have the
    // correct height, its own (not the heights of the ones animated before)
    update: function update(item) {
      if (item.id === snackbars[snackbars.length - 1].id) {
        return {
          height
        };
      }
    }
  });

  var renderSnackbars = function renderSnackbars() {
    if (!_helpers.isBrowser) {
      return null;
    }

    return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_Flex.default, {
      position: "fixed",
      bottom: 3,
      right: 6,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "flex-end",
      zIndex: 9999
    }, transitions.map(function (_ref3) {
      var _ref3$item = _ref3.item,
          id = _ref3$item.id,
          snackbarPublicProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3$item, ["id"]),
          key = _ref3.key,
          styles = _ref3.props;
      return /*#__PURE__*/_react.default.createElement(_reactSpring.animated.div, {
        key: key,
        style: styles
      }, /*#__PURE__*/_react.default.createElement(_Box.default, {
        pt: 3,
        ref: ref
      }, /*#__PURE__*/_react.default.createElement(_Snackbar.default, (0, _extends2.default)({
        destroy: function destroy() {
          return removeSnackbar(id);
        }
      }, snackbarPublicProps))));
    })), document.body);
  };

  var contextPayload = _react.default.useMemo(function () {
    return {
      pushSnackbar,
      updateSnackbar,
      removeSnackbar
    };
  }, [pushSnackbar, updateSnackbar, removeSnackbar]);

  return /*#__PURE__*/_react.default.createElement(SnackbarContext.Provider, {
    value: contextPayload
  }, renderSnackbars(), children);
};
/** A shortcut for the consumer component */


exports.SnackbarProvider = SnackbarProvider;
var SnackbarConsumer = SnackbarContext.Consumer;
/** An alternative to the consumer component through hooks */

exports.SnackbarConsumer = SnackbarConsumer;

var useSnackbar = function useSnackbar() {
  return _react.default.useContext(SnackbarContext);
};

exports.useSnackbar = useSnackbar;