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

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { speak } from '@wordpress/a11y';
import { useEffect, forwardRef, renderToString } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import warning from '@wordpress/warning';
/**
 * Internal dependencies
 */

import Button from '../button';
const NOTICE_TIMEOUT = 10000;
/**
 * Custom hook which announces the message with the given politeness, if a
 * valid message is provided.
 *
 * @param message    Message to announce.
 * @param politeness Politeness to announce.
 */

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

function UnforwardedSnackbar(_ref, ref) {
  let {
    className,
    children,
    spokenMessage = children,
    politeness = 'polite',
    actions = [],
    onRemove,
    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,
    listRef
  } = _ref;

  function dismissMe(event) {
    var _listRef$current;

    if (event && event.preventDefault) {
      event.preventDefault();
    } // Prevent focus loss by moving it to the list element.


    listRef === null || listRef === void 0 ? void 0 : (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.focus();
    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
  }

  function onActionClick(event, onClick) {
    event.stopPropagation();
    onRemove === null || onRemove === void 0 ? void 0 : onRemove();

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

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

  useEffect(() => {
    const timeoutHandle = setTimeout(() => {
      if (!explicitDismiss) {
        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
      }
    }, NOTICE_TIMEOUT);
    return () => clearTimeout(timeoutHandle);
  }, [onDismiss, onRemove, explicitDismiss]);
  const classes = classnames(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" ? warning('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 = classnames('components-snackbar__content', {
    'components-snackbar__content-with-icon': !!icon
  });
  return createElement("div", {
    ref: ref,
    className: classes,
    onClick: !explicitDismiss ? dismissMe : undefined,
    tabIndex: 0,
    role: !explicitDismiss ? 'button' : '',
    onKeyPress: !explicitDismiss ? dismissMe : undefined,
    "aria-label": !explicitDismiss ? __('Dismiss this notice') : ''
  }, createElement("div", {
    className: snackbarContentClassnames
  }, icon && createElement("div", {
    className: "components-snackbar__icon"
  }, icon), children, actions.map((_ref2, index) => {
    let {
      label,
      onClick,
      url
    } = _ref2;
    return createElement(Button, {
      key: index,
      href: url,
      variant: "tertiary",
      onClick: event => onActionClick(event, onClick),
      className: "components-snackbar__action"
    }, label);
  }), explicitDismiss && createElement("span", {
    role: "button",
    "aria-label": "Dismiss this notice",
    tabIndex: 0,
    className: "components-snackbar__dismiss-button",
    onClick: dismissMe,
    onKeyPress: dismissMe
  }, "\u2715")));
}
/**
 * A Snackbar displays a succinct message that is cleared out after a small delay.
 *
 * It can also offer the user options, like viewing a published post.
 * But these options should also be available elsewhere in the UI.
 *
 * ```jsx
 * const MySnackbarNotice = () => (
 *   <Snackbar>Post published successfully.</Snackbar>
 * );
 * ```
 */


export const Snackbar = forwardRef(UnforwardedSnackbar);
export default Snackbar;
//# sourceMappingURL=index.js.map