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

UI components for WordPress.

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

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

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

import Button from '../button';

const noop = () => {};
/**
 * Custom hook which announces the message with the given politeness, if a
 * valid message is provided.
 */


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

function getDefaultPoliteness(status) {
  switch (status) {
    case 'success':
    case 'warning':
    case 'info':
      return 'polite';

    case 'error':
    default:
      return 'assertive';
  }
}
/**
 * `Notice` is a component used to communicate feedback to the user.
 *
 *```jsx
 * import { Notice } from `@wordpress/components`;
 *
 * const MyNotice = () => (
 *   <Notice status="error">An unknown error occurred.</Notice>
 * );
 * ```
 */


function Notice(_ref) {
  let {
    className,
    status = 'info',
    children,
    spokenMessage = children,
    onRemove = noop,
    isDismissible = true,
    actions = [],
    politeness = getDefaultPoliteness(status),
    __unstableHTML,
    // onDismiss is a callback executed when the notice is dismissed.
    // It is distinct from onRemove, which _looks_ like a callback but is
    // actually the function to call to remove the notice from the UI.
    onDismiss = noop
  } = _ref;
  useSpokenMessage(spokenMessage, politeness);
  const classes = classnames(className, 'components-notice', 'is-' + status, {
    'is-dismissible': isDismissible
  });

  if (__unstableHTML && typeof children === 'string') {
    children = createElement(RawHTML, null, children);
  }

  const onDismissNotice = event => {
    var _event$preventDefault;

    event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
    onDismiss();
    onRemove();
  };

  return createElement("div", {
    className: classes
  }, createElement("div", {
    className: "components-notice__content"
  }, children, createElement("div", {
    className: "components-notice__actions"
  }, actions.map((_ref2, index) => {
    let {
      className: buttonCustomClasses,
      label,
      isPrimary,
      variant,
      noDefaultClasses = false,
      onClick,
      url
    } = _ref2;
    let computedVariant = variant;

    if (variant !== 'primary' && !noDefaultClasses) {
      computedVariant = !url ? 'secondary' : 'link';
    }

    if (typeof computedVariant === 'undefined' && isPrimary) {
      computedVariant = 'primary';
    }

    return createElement(Button, {
      key: index,
      href: url,
      variant: computedVariant,
      onClick: url ? undefined : onClick,
      className: classnames('components-notice__action', buttonCustomClasses)
    }, label);
  }))), isDismissible && createElement(Button, {
    className: "components-notice__dismiss",
    icon: close,
    label: __('Dismiss this notice'),
    onClick: onDismissNotice,
    showTooltip: false
  }));
}

export default Notice;
//# sourceMappingURL=index.js.map