@wulperstudio/cms/node/organisms/TimeLineV2/TimeLineV2.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TimeLineV2 = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _uuid = require("uuid");
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _lab = require("@mui/lab");
var _components = require("../../components");
var _jsxRuntime = require("react/jsx-runtime");
var TimeLineV2 = exports.TimeLineV2 = function TimeLineV2(_ref) {
  var items = _ref.items,
    timeLineProps = _ref.timeLineProps,
    EntryProps = _ref.EntryProps;
  var theme = (0, _material.useTheme)();
  var _React$useState = _react["default"].useState([]),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    data = _React$useState2[0],
    setData = _React$useState2[1];
  _react["default"].useEffect(function () {
    setData(items);
  }, [items]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_lab.Timeline, Object.assign({
    sx: {
      padding: 0,
      margin: 0
    }
  }, timeLineProps, {
    children: [data.map(function (_ref2) {
      var timeLineContent = _ref2.timeLineContent,
        timeLineSeparator = _ref2.timeLineSeparator;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_lab.TimelineItem, {
        sx: {
          '&::before': {
            content: 'none'
          }
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_lab.TimelineSeparator, {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.TimelineDot, Object.assign({
            sx: {
              p: '6px'
            }
          }, timeLineSeparator.timelineDotProps, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
              icon: timeLineSeparator.icon,
              color: timeLineSeparator.colorIcon
            })
          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_lab.TimelineConnector, Object.assign({
            sx: {
              backgroundColor: theme.palette.background.paper
            }
          }, timeLineSeparator.timelineConnectorProps))]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_lab.TimelineContent, {
          sx: {
            py: '12px',
            px: 2
          },
          children: [timeLineContent.date && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
            variant: "body2",
            component: "span",
            color: "text.secondary",
            children: timeLineContent.date
          }), timeLineContent.content]
        })]
      }, (0, _uuid.v4)());
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Entry, Object.assign({}, EntryProps))]
  }));
};