@wordpress/components/build/notice/list.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 _ = _interopRequireDefault(require("."));
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * Internal dependencies
 */

const noop = () => {};

/**
 * `NoticeList` is a component used to render a collection of notices.
 *
 *```jsx
 * import { Notice, NoticeList } from `@wordpress/components`;
 *
 * const MyNoticeList = () => {
 *	const [ notices, setNotices ] = useState( [
 *		{
 *			id: 'second-notice',
 *			content: 'second notice content',
 *		},
 *		{
 *			id: 'fist-notice',
 *			content: 'first notice content',
 *		},
 *	] );
 *
 *	const removeNotice = ( id ) => {
 *		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
 *	};
 *
 *	return <NoticeList notices={ notices } onRemove={ removeNotice } />;
 *};
 *```
 */
function NoticeList({
  notices,
  onRemove = noop,
  className,
  children
}) {
  const removeNotice = id => () => onRemove(id);
  className = (0, _clsx.default)('components-notice-list', className);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: className,
    children: [children, [...notices].reverse().map(notice => {
      const {
        content,
        ...restNotice
      } = notice;
      return /*#__PURE__*/(0, _react.createElement)(_.default, {
        ...restNotice,
        key: notice.id,
        onRemove: removeNotice(notice.id)
      }, notice.content);
    })]
  });
}
var _default = exports.default = NoticeList;
//# sourceMappingURL=list.js.map