@wordpress/components/build-module/snackbar/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';
/**
 * WordPress dependencies
 */

import { useReducedMotion } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
/**
 * Internal dependencies
 */

import Snackbar from '.';
import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '../animation';
const SNACKBAR_VARIANTS = {
  init: {
    height: 0,
    opacity: 0
  },
  open: {
    height: 'auto',
    opacity: 1,
    transition: {
      height: {
        stiffness: 1000,
        velocity: -100
      }
    }
  },
  exit: {
    opacity: 0,
    transition: {
      duration: 0.5
    }
  }
};
/**
 * Renders a list of notices.
 *
 * ```jsx
 * const MySnackbarListNotice = () => (
 *   <SnackbarList
 *     notices={ notices }
 *     onRemove={ removeNotice }
 *   />
 * );
 * ```
 */

export function SnackbarList(_ref) {
  let {
    notices,
    className,
    children,
    onRemove
  } = _ref;
  const listRef = useRef(null);
  const isReducedMotion = useReducedMotion();
  className = classnames('components-snackbar-list', className);

  const removeNotice = notice => () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(notice.id);

  return createElement("div", {
    className: className,
    tabIndex: -1,
    ref: listRef
  }, children, createElement(AnimatePresence, null, notices.map(notice => {
    const {
      content,
      ...restNotice
    } = notice;
    return createElement(motion.div, {
      initial: 'init',
      animate: 'open',
      exit: 'exit',
      key: notice.id,
      variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
    }, createElement("div", {
      className: "components-snackbar-list__notice-container"
    }, createElement(Snackbar, _extends({}, restNotice, {
      onRemove: removeNotice(notice),
      listRef: listRef
    }), notice.content)));
  })));
}
export default SnackbarList;
//# sourceMappingURL=list.js.map