@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.SnackbarList = SnackbarList;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _ = _interopRequireDefault(require("."));
var _animation = require("../animation");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const SNACKBAR_VARIANTS = {
  init: {
    height: 0,
    opacity: 0
  },
  open: {
    height: 'auto',
    opacity: 1,
    transition: {
      height: {
        type: 'tween',
        duration: 0.3,
        ease: [0, 0, 0.2, 1]
      },
      opacity: {
        type: 'tween',
        duration: 0.25,
        delay: 0.05,
        ease: [0, 0, 0.2, 1]
      }
    }
  },
  exit: {
    opacity: 0,
    transition: {
      type: 'tween',
      duration: 0.1,
      ease: [0, 0, 0.2, 1]
    }
  }
};

/**
 * Renders a list of notices.
 *
 * ```jsx
 * const MySnackbarListNotice = () => (
 *   <SnackbarList
 *     notices={ notices }
 *     onRemove={ removeNotice }
 *   />
 * );
 * ```
 */
function SnackbarList({
  notices,
  className,
  children,
  onRemove
}) {
  const listRef = (0, _element.useRef)(null);
  const isReducedMotion = (0, _compose.useReducedMotion)();
  className = (0, _clsx.default)('components-snackbar-list', className);
  const removeNotice = notice => () => onRemove?.(notice.id);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: className,
    tabIndex: -1,
    ref: listRef,
    "data-testid": "snackbar-list",
    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation.__unstableAnimatePresence, {
      children: notices.map(notice => {
        const {
          content,
          ...restNotice
        } = notice;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation.__unstableMotion.div, {
          layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations
          ,
          initial: "init",
          animate: "open",
          exit: "exit",
          variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "components-snackbar-list__notice-container",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
              ...restNotice,
              onRemove: removeNotice(notice),
              listRef: listRef,
              children: notice.content
            })
          })
        }, notice.id);
      })
    })]
  });
}
var _default = exports.default = SnackbarList;
//# sourceMappingURL=list.js.map