@wordpress/components/build/snackbar/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 _lodash = require("lodash");

var _web = require("react-spring/web.cjs");

var _compose = require("@wordpress/compose");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Renders a list of notices.
 *
 * @param  {Object}   $0           Props passed to the component.
 * @param  {Array}    $0.notices   Array of notices to render.
 * @param  {Function} $0.onRemove  Function called when a notice should be removed / dismissed.
 * @param  {Object}   $0.className Name of the class used by the component.
 * @param  {Object}   $0.children  Array of children to be rendered inside the notice list.
 * @return {Object}                The rendered notices list.
 */
function SnackbarList({
  notices,
  className,
  children,
  onRemove = _lodash.noop
}) {
  const isReducedMotion = (0, _compose.useReducedMotion)();
  const [refMap] = (0, _element.useState)(() => new WeakMap());
  const transitions = (0, _web.useTransition)(notices, notice => notice.id, {
    from: {
      opacity: 0,
      height: 0
    },
    enter: item => async (next) => await next({
      opacity: 1,
      height: refMap.get(item).offsetHeight
    }),
    leave: () => async next => {
      await next({
        opacity: 0
      });
      await next({
        height: 0
      });
    },
    immediate: isReducedMotion
  });
  className = (0, _classnames.default)('components-snackbar-list', className);

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

  return (0, _element.createElement)("div", {
    className: className
  }, children, transitions.map(({
    item: notice,
    key,
    props: style
  }) => (0, _element.createElement)(_web.animated.div, {
    key: key,
    style: style
  }, (0, _element.createElement)("div", {
    className: "components-snackbar-list__notice-container",
    ref: ref => ref && refMap.set(notice, ref)
  }, (0, _element.createElement)(_.default, (0, _extends2.default)({}, (0, _lodash.omit)(notice, ['content']), {
    onRemove: removeNotice(notice)
  }), notice.content)))));
}

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