@wordpress/components/build/notice/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 _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _a11y = require("@wordpress/a11y");
var _icons = require("@wordpress/icons");
var _button = _interopRequireDefault(require("../button"));
var _visuallyHidden = require("../visually-hidden");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

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 : (0, _element.renderToString)(message);
  (0, _element.useEffect)(() => {
    if (spokenMessage) {
      (0, _a11y.speak)(spokenMessage, politeness);
    }
  }, [spokenMessage, politeness]);
}
function getDefaultPoliteness(status) {
  switch (status) {
    case 'success':
    case 'warning':
    case 'info':
      return 'polite';
    // The default will also catch the 'error' status.
    default:
      return 'assertive';
  }
}
function getStatusLabel(status) {
  switch (status) {
    case 'warning':
      return (0, _i18n.__)('Warning notice');
    case 'info':
      return (0, _i18n.__)('Information notice');
    case 'error':
      return (0, _i18n.__)('Error notice');
    // The default will also catch the 'success' status.
    default:
      return (0, _i18n.__)('Notice');
  }
}

/**
 * `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({
  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
}) {
  useSpokenMessage(spokenMessage, politeness);
  const classes = (0, _clsx.default)(className, 'components-notice', 'is-' + status, {
    'is-dismissible': isDismissible
  });
  if (__unstableHTML && typeof children === 'string') {
    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
      children: children
    });
  }
  const onDismissNotice = () => {
    onDismiss();
    onRemove();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: classes,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
      children: getStatusLabel(status)
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "components-notice__content",
      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "components-notice__actions",
        children: actions.map(({
          className: buttonCustomClasses,
          label,
          isPrimary,
          variant,
          noDefaultClasses = false,
          onClick,
          url
        }, index) => {
          let computedVariant = variant;
          if (variant !== 'primary' && !noDefaultClasses) {
            computedVariant = !url ? 'secondary' : 'link';
          }
          if (typeof computedVariant === 'undefined' && isPrimary) {
            computedVariant = 'primary';
          }
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
            __next40pxDefaultSize: true,
            href: url,
            variant: computedVariant,
            onClick: url ? undefined : onClick,
            className: (0, _clsx.default)('components-notice__action', buttonCustomClasses),
            children: label
          }, index);
        })
      })]
    }), isDismissible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
      size: "small",
      className: "components-notice__dismiss",
      icon: _icons.close,
      label: (0, _i18n.__)('Close'),
      onClick: onDismissNotice
    })]
  });
}
var _default = exports.default = Notice;
//# sourceMappingURL=index.js.map