norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
39 lines • 3.02 kB
JavaScript
import { __assign, __makeTemplateObject } from "tslib";
import React from 'react';
import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, timelineItemClasses, TimelineSeparator, } from '@mui/lab';
import { Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import styled from 'styled-components';
export var TimeLine = function (_a) {
var data = _a.data;
var muiTheme = useTheme();
var NormaTimeLine = styled(Timeline)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .", " {\n padding: 0;\n &:before {\n flex: 0;\n padding: 0;\n }\n }\n\n .MuiTimelineDot-root {\n &:last-child {\n &:before {\n content: '';\n width: 70%;\n height: 70%;\n background: ", ";\n position: absolute;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n }\n "], ["\n .", " {\n padding: 0;\n &:before {\n flex: 0;\n padding: 0;\n }\n }\n\n .MuiTimelineDot-root {\n &:last-child {\n &:before {\n content: '';\n width: 70%;\n height: 70%;\n background: ", ";\n position: absolute;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n }\n "])), timelineItemClasses.root, muiTheme.palette.primary.main);
var _getDotStyle = function (last) {
var style = {
background: 'none',
boxShadow: 'none',
padding: '6px',
margin: '0',
border: "3px solid ".concat(muiTheme.palette.primary.main),
};
var lastStyle = {
padding: '8px',
position: 'relative',
left: '-2px',
};
return last ? __assign(__assign({}, style), lastStyle) : style;
};
return (React.createElement(NormaTimeLine, { sx: { padding: '0' } }, data.map(function (item, key) {
var last = key !== data.length - 1;
return (React.createElement(TimelineItem, { key: key, sx: { minHeight: 'auto' } },
React.createElement(TimelineSeparator, null,
React.createElement(TimelineDot, { sx: _getDotStyle(!last) }),
last && React.createElement(TimelineConnector, { sx: { bgcolor: muiTheme.palette.primary.main, width: '5px' } })),
React.createElement(TimelineContent, { sx: { py: 0, pl: 2, pb: '35px' } },
React.createElement(Typography, { sx: { m: 'auto 0' }, className: "TimelineContent__Date", variant: "body1" }, item.date),
item.description && (React.createElement(Typography, { sx: { m: 'auto 0' }, className: "TimelineContent__Description", variant: "body2" }, item.description)),
item.children)));
})));
};
var templateObject_1;
//# sourceMappingURL=TimeLine.js.map