@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDLoadingFeed.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect, useRef } from "react";
function HUDLoadingFeed(_ref) {
  var _ref$containerConfigu = _ref.containerConfigurationSettings,
    containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu,
    _ref$itemConfiguratio = _ref.itemConfigurationSettings,
    itemConfigurationSettings = _ref$itemConfiguratio === void 0 ? {} : _ref$itemConfiguratio,
    _ref$animationSpeed = _ref.animationSpeed,
    animationSpeed = _ref$animationSpeed === void 0 ? 469 : _ref$animationSpeed,
    _ref$fadeDuration = _ref.fadeDuration,
    fadeDuration = _ref$fadeDuration === void 0 ? 469 : _ref$fadeDuration,
    _ref$maxVisible = _ref.maxVisible,
    maxVisible = _ref$maxVisible === void 0 ? 5 : _ref$maxVisible,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    feedItems = _useState2[0],
    setFeedItems = _useState2[1];
  var feedRef = useRef(null);
  useEffect(function () {
    if (items.length > 0) {
      var newFeedItems = items.map(function (item, index) {
        return {
          id: "".concat(Date.now(), "-").concat(index),
          content: item,
          fading: false
        };
      });
      setFeedItems(function (prev) {
        return [].concat(_toConsumableArray(prev), _toConsumableArray(newFeedItems));
      });
    }
  }, [items]);
  useEffect(function () {
    feedItems.forEach(function (item, index) {
      if (!item.fading) {
        var fadeTimer = setTimeout(function () {
          setFeedItems(function (prev) {
            return prev.map(function (el) {
              return el.id === item.id ? _objectSpread(_objectSpread({}, el), {}, {
                fading: true
              }) : el;
            });
          });
        }, index * animationSpeed);
        var removeTimer = setTimeout(function () {
          setFeedItems(function (prev) {
            return prev.filter(function (el) {
              return el.id !== item.id;
            });
          });
        }, fadeDuration + animationSpeed);
        return function () {
          clearTimeout(fadeTimer);
          clearTimeout(removeTimer);
        };
      }
    });
  }, [feedItems, fadeDuration, animationSpeed]);
  useEffect(function () {
    if (feedRef.current) {
      feedRef.current.scrollTop = feedRef.current.scrollHeight;
    }
  }, [feedItems]);
  return /*#__PURE__*/React.createElement("div", {
    ref: feedRef,
    style: _objectSpread({
      display: "flex",
      flexDirection: "column",
      overflowY: "hidden",
      fontFamily: "'Roboto', sans-serif",
      borderRadius: "10px",
      background: "rgba(20, 20, 20, 0.85)",
      height: "300px",
      padding: "10px"
    }, containerConfigurationSettings)
  }, feedItems.slice(-maxVisible).map(function (_ref2, index) {
    var id = _ref2.id,
      content = _ref2.content,
      fading = _ref2.fading;
    return /*#__PURE__*/React.createElement("div", {
      key: id,
      style: _objectSpread({
        display: "flex",
        alignItems: "center",
        animation: fading ? "flyUpDisappearance ".concat(animationSpeed, "ms ease forwards") : "slideIn ".concat(animationSpeed, "ms cubic-bezier(0.25, 1, 0.5, 1)"),
        animationDelay: fading ? "0ms" : "".concat(index * 100, "ms"),
        borderRadius: "8px",
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
        background: "rgba(30, 30, 30, 1)",
        color: "#fff",
        opacity: 0.95,
        padding: "12px",
        marginBottom: fading ? 0 : "10px"
      }, itemConfigurationSettings)
    }, content);
  }), /*#__PURE__*/React.createElement("style", null, "\n                    @keyframes slideIn {\n                        0% { transform : translateY(30px); opacity : 0; }\n                        100% { transform : translateY(0); opacity : 1; }\n                    }\n                    @keyframes flyUpDisappearance {\n                        0% { opacity : 1; transform : translateY(0) scale(1); }\n                        100% { opacity : 0; transform : translateY(-50px) scale(0.9); }\n                    }\n                "));
}
;
export default HUDLoadingFeed;