@kineticdata/react/lib/components/common/ToastContainer.js

A React library for the Kinetic Platform

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.showToast = exports.hideToast = exports.clearToasts = exports.ToastState = exports.ToastContainer = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _store = require("../../store");
var _react2 = require("@kineticdata/react");
var _immutable = require("immutable");
var _ComponentConfigContext = require("./ComponentConfigContext");
var _excluded = ["autoHide", "content"];
var ToastState = exports.ToastState = (0, _immutable.Record)({
  title: null,
  content: null,
  icon: null,
  color: null,
  className: '',
  autoHide: true,
  duration: null
});
(0, _store.regHandlers)({
  // Initialize state for toasts as an OrderedMap so the order doesn't change
  INIT_TOASTS: function INIT_TOASTS(state) {
    return state.update('toasts', function (toasts) {
      return _immutable.OrderedMap.isOrderedMap(toasts) ? toasts : (0, _immutable.OrderedMap)(toasts || {});
    });
  },
  ADD_TOAST: function ADD_TOAST(state, action) {
    return state.setIn(['toasts', action.payload.toastKey], action.payload);
  },
  SHOW_TOAST: function SHOW_TOAST(state, action) {
    return state.hasIn(['toasts', action.payload]) ? state.setIn(['toasts', action.payload, 'show'], true) : state;
  },
  HIDE_TOAST: function HIDE_TOAST(state, action) {
    return state.hasIn(['toasts', action.payload]) ? state.setIn(['toasts', action.payload, 'show'], false) : state;
  },
  REMOVE_TOAST: function REMOVE_TOAST(state, action) {
    return state.removeIn(['toasts', action.payload]);
  },
  CLEAR_TOASTS: function CLEAR_TOASTS(state, action) {
    return state.update('toasts', function (toasts) {
      return action.payload ? toasts.filter(function (toast) {
        return toast.containerKey !== action.payload;
      }) : (0, _immutable.OrderedMap)();
    });
  }
});

/**
 * @param {object} toast Options for the toast
 * @param {'success'|'error'} [presetType] Preset for styles
 */
var showToast = exports.showToast = function showToast(toast, presetType) {
  // If presetType is provided, add some default toast properties
  if (presetType) return showToast((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, presetType === 'success' ? {
    color: 'success',
    icon: 'check-circle'
  } : presetType === 'error' ? {
    color: 'danger',
    icon: 'alert-circle'
  } : {}), toast));
  var toastKey = (0, _react2.generateKey)();
  var payload = {
    containerKey: toast.containerKey,
    toast: ToastState(toast).update(
    // Make sure duration is a number, or set to a default numeric value
    'duration', function (duration) {
      return typeof duration === 'number' ? Math.max(duration, 4000) : toast.title && toast.content ? 7000 : 4000;
    }),
    toastKey: toastKey,
    show: false
  };
  // Use set timeout so that if we're redirecting and showing a toast, the
  // toast is added second so that it's not immediately cleared by the redirect
  setTimeout(function () {
    (0, _store.dispatch)('ADD_TOAST', payload);
    // Use set timeout to delay showing the toast by 100ms so that it renders
    // into the dom before being shown so it animates correctly
    setTimeout(function () {
      (0, _store.dispatch)('SHOW_TOAST', toastKey);
    }, 100);
  }, 0);
  return toastKey;
};

// Hides the toast and removes it from state after animation ends
var hideToast = exports.hideToast = function hideToast(toastKey) {
  (0, _store.dispatch)('HIDE_TOAST', toastKey);
  setTimeout(function () {
    (0, _store.dispatch)('REMOVE_TOAST', toastKey);
  }, 300);
};

// Clears all toasts, or if containerKey is provided, only the matching ones
var clearToasts = exports.clearToasts = function clearToasts(containerKey) {
  (0, _store.dispatch)('CLEAR_TOASTS', containerKey);
};
var ToastWrapper = function ToastWrapper(_ref) {
  var Toast = _ref.component,
    show = _ref.show,
    toastKey = _ref.toastKey,
    toast = _ref.toast;
  var _toast$toJS = toast.toJS(),
    autoHide = _toast$toJS.autoHide,
    content = _toast$toJS.content,
    toastProps = (0, _objectWithoutProperties2["default"])(_toast$toJS, _excluded);
  var toggle = (0, _react.useCallback)(function () {
    return hideToast(toastKey);
  }, [toastKey]);
  return /*#__PURE__*/_react["default"].createElement(Toast, Object.assign({
    key: toastKey
  }, toastProps, {
    show: show,
    toggle: toggle,
    autoHide: autoHide
  }), content);
};
var ToastContainerComponent = function ToastContainerComponent(_ref2) {
  var containerKey = _ref2.containerKey,
    components = _ref2.components,
    toasts = _ref2.toasts,
    persistentToasts = _ref2.persistentToasts;
  (0, _react.useEffect)(function () {
    (0, _store.dispatch)('INIT_TOASTS');
    return function () {
      if (containerKey) {
        (0, _store.dispatch)('CLEAR_TOASTS', containerKey);
      }
    };
  }, [containerKey]);
  return /*#__PURE__*/_react["default"].createElement(_ComponentConfigContext.ComponentConfigContext.Consumer, null, function (componentConfig) {
    var component = (0, _immutable.get)(components, 'Toast', componentConfig.get('Toast'));
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
      className: "toast-container",
      "aria-live": "polite",
      "aria-atomic": "true"
    }, toasts.map(function (props) {
      return /*#__PURE__*/_react["default"].createElement(ToastWrapper, Object.assign({
        key: props.toastKey
      }, props, {
        component: component
      }));
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "toast-container-persistent",
      "aria-live": "polite",
      "aria-atomic": "true"
    }, persistentToasts.map(function (props) {
      return /*#__PURE__*/_react["default"].createElement(ToastWrapper, Object.assign({
        key: props.toastKey
      }, props, {
        component: component
      }));
    })));
  });
};
var mapStateToProps = function mapStateToProps(state, props) {
  // Get the toasts for this container
  var containerToasts = state.get('toasts', (0, _immutable.List)()).filter(function (_ref3) {
    var containerKey = _ref3.containerKey;
    return props.containerKey ? containerKey === props.containerKey : !containerKey;
  }).toList().reverse();
  return {
    // Get all toasts that hide automatically
    toasts: containerToasts.filter(function (_ref4) {
      var toast = _ref4.toast;
      return !!toast.autoHide;
    }),
    // Get all toasts that require a user to close
    persistentToasts: containerToasts.filter(function (_ref5) {
      var toast = _ref5.toast;
      return !toast.autoHide;
    })
  };
};
var ToastContainer = exports.ToastContainer = (0, _store.connect)(mapStateToProps)(ToastContainerComponent);
ToastContainer.propTypes = {
  /** A key used to scope toasts to this container */
  containerKey: _propTypes["default"].string,
  components: _propTypes["default"].shape({
    /** Override the default Toast component */
    Toast: _propTypes["default"].func
  })
};