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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

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

import Notice from '.';

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 = classnames('components-notice-list', className);
  return createElement("div", {
    className: className
  }, children, [...notices].reverse().map(notice => {
    const {
      content,
      ...restNotice
    } = notice;
    return createElement(Notice, _extends({}, restNotice, {
      key: notice.id,
      onRemove: removeNotice(notice.id)
    }), notice.content);
  }));
}

export default NoticeList;
//# sourceMappingURL=list.js.map