@wordpress/components/build/snackbar/index.js

UI components for WordPress.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _a11y = require("@wordpress/a11y");

var _i18n = require("@wordpress/i18n");

var _warning = _interopRequireDefault(require("@wordpress/warning"));

var _ = require("../");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const NOTICE_TIMEOUT = 10000;
/** @typedef {import('@wordpress/element').WPElement} WPElement */

/**
 * Custom hook which announces the message with the given politeness, if a
 * valid message is provided.
 *
 * @param {string|WPElement}     [message]  Message to announce.
 * @param {'polite'|'assertive'} politeness Politeness to announce.
 */

function useSpokenMessage(message, politeness) {
  const spokenMessage = typeof message === 'string' ? message : (0, _element.renderToString)(message);
  (0, _element.useEffect)(() => {
    if (spokenMessage) {
      (0, _a11y.speak)(spokenMessage, politeness);
    }
  }, [spokenMessage, politeness]);
}

function Snackbar({
  className,
  children,
  spokenMessage = children,
  politeness = 'polite',
  actions = [],
  onRemove = _lodash.noop,
  icon = null,
  explicitDismiss = false,
  // onDismiss is a callback executed when the snackbar is dismissed.
  // It is distinct from onRemove, which _looks_ like a callback but is
  // actually the function to call to remove the snackbar from the UI.
  onDismiss = _lodash.noop
}, ref) {
  onDismiss = onDismiss || _lodash.noop;

  function dismissMe(event) {
    if (event && event.preventDefault) {
      event.preventDefault();
    }

    onDismiss();
    onRemove();
  }

  function onActionClick(event, onClick) {
    event.stopPropagation();
    onRemove();

    if (onClick) {
      onClick(event);
    }
  }

  useSpokenMessage(spokenMessage, politeness); // Only set up the timeout dismiss if we're not explicitly dismissing.

  (0, _element.useEffect)(() => {
    const timeoutHandle = setTimeout(() => {
      if (!explicitDismiss) {
        onDismiss();
        onRemove();
      }
    }, NOTICE_TIMEOUT);
    return () => clearTimeout(timeoutHandle);
  }, [onDismiss, onRemove]);
  const classes = (0, _classnames.default)(className, 'components-snackbar', {
    'components-snackbar-explicit-dismiss': !!explicitDismiss
  });

  if (actions && actions.length > 1) {
    // we need to inform developers that snackbar only accepts 1 action
    typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? (0, _warning.default)('Snackbar can only have 1 action, use Notice if your message require many messages') : void 0; // return first element only while keeping it inside an array

    actions = [actions[0]];
  }

  const snackbarContentClassnames = (0, _classnames.default)('components-snackbar__content', {
    'components-snackbar__content-with-icon': !!icon
  });
  return (0, _element.createElement)("div", {
    ref: ref,
    className: classes,
    onClick: !explicitDismiss ? dismissMe : _lodash.noop,
    tabIndex: "0",
    role: !explicitDismiss ? 'button' : '',
    onKeyPress: !explicitDismiss ? dismissMe : _lodash.noop,
    "aria-label": !explicitDismiss ? (0, _i18n.__)('Dismiss this notice') : ''
  }, (0, _element.createElement)("div", {
    className: snackbarContentClassnames
  }, icon && (0, _element.createElement)("div", {
    className: "components-snackbar__icon"
  }, icon), children, actions.map(({
    label,
    onClick,
    url
  }, index) => {
    return (0, _element.createElement)(_.Button, {
      key: index,
      href: url,
      isTertiary: true,
      onClick: event => onActionClick(event, onClick),
      className: "components-snackbar__action"
    }, label);
  }), explicitDismiss && (0, _element.createElement)("span", {
    role: "button",
    "aria-label": "Dismiss this notice",
    tabIndex: "0",
    className: "components-snackbar__dismiss-button",
    onClick: dismissMe,
    onKeyPress: dismissMe
  }, "\u2715")));
}

var _default = (0, _element.forwardRef)(Snackbar);

exports.default = _default;
//# sourceMappingURL=index.js.map