@mapbox/mr-ui/toast/toast.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Toast;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var ToastPrimitive = _interopRequireWildcard(require("@radix-ui/react-toast"));
var _icon = _interopRequireDefault(require("../icon"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Toast(_ref) {
  let {
    content,
    active,
    onExit,
    duration = 5000,
    action,
    closeButton = true
  } = _ref;
  let actionBtnClass = closeButton ? '' : 'pr12';
  return /*#__PURE__*/_react.default.createElement(ToastPrimitive.Provider, {
    swipeDirection: "down",
    duration: duration
  }, /*#__PURE__*/_react.default.createElement(ToastPrimitive.Root, {
    type: "foreground",
    open: active,
    onOpenChange: onExit,
    className: "bg-gray-dark round wmax600 w-11/12 flex flex--center-cross row flex--space-between-main py12 pl12 hmin60 events-all"
  }, /*#__PURE__*/_react.default.createElement(ToastPrimitive.Description, {
    className: "color-gray-lighter txt-truncate w-auto mr12"
  }, content), /*#__PURE__*/_react.default.createElement("span", {
    className: `flex flex-row flex--center-cross ${actionBtnClass} flex-child-no-shrink`
  }, action && /*#__PURE__*/_react.default.createElement(ToastPrimitive.Action, {
    altText: "Open",
    className: "btn",
    type: "button",
    onClick: action.callback,
    "data-testid": "toast-action"
  }, action.text), closeButton && /*#__PURE__*/_react.default.createElement(ToastPrimitive.Close, {
    className: "btn btn--transparent color-gray-light",
    type: "button",
    "aria-label": "Close",
    "data-testid": "toast-close"
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    name: "close"
  })))), /*#__PURE__*/_react.default.createElement(ToastPrimitive.Viewport, {
    className: "fixed left bottom mb24 w-full flex flex--center-main events-none"
  }));
}
Toast.propTypes = {
  /**
   * The toast content. This can either be a string, valid JSX, or a function
   * returning either. Content text will truncate.
   */
  content: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
  /**
   * A function called when popover is dismissed. You need to use this callback
   * to remove the Toast from the rendered page.
   */
  onExit: _propTypes.default.func.isRequired,
  /**
   * Triggers the active state of the toast. When true, the toast appears.
   */
  active: _propTypes.default.bool.isRequired,
  /**
   * The primary action for the toast.
   *
   * The value is an object with the following properties:
   * - `text`: **(required)** The text of the button.
   * - `callback`: **(required)** Invoked when the button is clicked.
   */
  action: _propTypes.default.shape({
    text: _propTypes.default.string.isRequired,
    callback: _propTypes.default.func.isRequired
  }),
  /**
   * The duration the toast should appear for. Recommended toast duration is 5 seconds with 1 extra second for every additional 300 characters in the toast body.
   */
  duration: _propTypes.default.number,
  /**
   * When `true` the toast will have a separate close button (in addition to the call-to-action button).
   * When `false` toast will only have action button.
   */
  closeButton: _propTypes.default.bool
};