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

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

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

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

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

var _animation = require("../animation");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
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 }
 *   />
 * );
 * ```
 */

function SnackbarList(_ref) {
  let {
    notices,
    className,
    children,
    onRemove
  } = _ref;
  const listRef = (0, _element.useRef)(null);
  const isReducedMotion = (0, _compose.useReducedMotion)();
  className = (0, _classnames.default)('components-snackbar-list', className);

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

  return (0, _element.createElement)("div", {
    className: className,
    tabIndex: -1,
    ref: listRef
  }, children, (0, _element.createElement)(_animation.__unstableAnimatePresence, null, notices.map(notice => {
    const {
      content,
      ...restNotice
    } = notice;
    return (0, _element.createElement)(_animation.__unstableMotion.div, {
      initial: 'init',
      animate: 'open',
      exit: 'exit',
      key: notice.id,
      variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
    }, (0, _element.createElement)("div", {
      className: "components-snackbar-list__notice-container"
    }, (0, _element.createElement)(_.default, (0, _extends2.default)({}, restNotice, {
      onRemove: removeNotice(notice),
      listRef: listRef
    }), notice.content)));
  })));
}

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