@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 _element = require("@wordpress/element");

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

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

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

/**
 * 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(_ref) {
  let {
    notices,
    onRemove = noop,
    className,
    children
  } = _ref;

  const removeNotice = id => () => onRemove(id);

  className = (0, _classnames.default)('components-notice-list', className);
  return (0, _element.createElement)("div", {
    className: className
  }, children, [...notices].reverse().map(notice => {
    const {
      content,
      ...restNotice
    } = notice;
    return (0, _element.createElement)(_.default, (0, _extends2.default)({}, restNotice, {
      key: notice.id,
      onRemove: removeNotice(notice.id)
    }), notice.content);
  }));
}

var _default = NoticeList;
exports.default = _default;
//# sourceMappingURL=list.js.map