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.
48 lines • 3.26 kB
JavaScript
import { __assign, __makeTemplateObject } from "tslib";
import React from 'react';
import { Typography } from '@mui/material';
import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot, timelineItemClasses, } from '@mui/lab';
import { palette } from '../../helpers';
import styled from 'styled-components';
var colorMap = {
inherit: palette.inherit,
primary: '#DB6619',
secondary: palette.secondary,
error: palette.error,
warning: palette.warning,
info: palette.info,
success: palette.success,
};
export var TimeLine = function (_a) {
var data = _a.data, _b = _a.theme, theme = _b === void 0 ? 'primary' : _b, color = _a.color;
var _mainColor = color || colorMap[theme];
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, _mainColor);
var _getDotStyle = function (last) {
var style = {
background: 'none',
boxShadow: 'none',
padding: '6px',
margin: '0',
border: "3px solid ".concat(_mainColor),
};
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: _mainColor, 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