@gechiui/components/build/snackbar/list.js

UI components for GeChiUI.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

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

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

var _lodash = require("lodash");

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI 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
    }
  }
};
const SNACKBAR_REDUCE_MOTION_VARIANTS = {
  init: false,
  open: false,
  exit: false
};
/**
 * 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(_ref) {
  let {
    notices,
    className,
    children,
    onRemove = _lodash.noop
  } = _ref;
  const listRef = (0, _element.useRef)();
  const isReducedMotion = (0, _compose.useReducedMotion)();
  className = (0, _classnames.default)('components-snackbar-list', className);

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

  return (0, _element.createElement)("div", {
    className: className,
    tabIndex: -1,
    ref: listRef
  }, children, (0, _element.createElement)(_animation.__unstableAnimatePresence, null, notices.map(notice => {
    return (0, _element.createElement)(_animation.__unstableMotion.div, {
      layout: !isReducedMotion //see https://www.framer.com/docs/animation/#layout-animations
      ,
      initial: 'init',
      animate: 'open',
      exit: 'exit',
      key: notice.id,
      variants: isReducedMotion ? SNACKBAR_REDUCE_MOTION_VARIANTS : SNACKBAR_VARIANTS
    }, (0, _element.createElement)("div", {
      className: "components-snackbar-list__notice-container"
    }, (0, _element.createElement)(_.default, (0, _extends2.default)({}, (0, _lodash.omit)(notice, ['content']), {
      onRemove: removeNotice(notice),
      listRef: listRef
    }), notice.content)));
  })));
}

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