oa-componentbook 0.17.100 → 0.18.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/oa-component-bar-chart/BarChart.js +32 -40
- package/build/components/oa-component-button/styles.js +1 -1
- package/build/components/oa-component-notification/CustomNotification.js +5 -2
- package/build/components/oa-component-notification/styles.js +1 -1
- package/build/global-css/GridLayout.js +1 -1
- package/build/widgets/oa-widget-approval/styles.js +1 -1
- package/build/widgets/oa-widget-key-value/styles.js +1 -1
- package/build/widgets/oa-widget-spare-part/SparePartsWidget.js +18 -9
- package/build/widgets/oa-widget-upload-download/styles.js +1 -1
- package/package.json +1 -1
- package/build/hooks/useResizeObserver.js +0 -11
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = BarChart;
|
|
8
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
9
9
|
require("core-js/modules/es.array.reduce.js");
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
|
|
@@ -23,9 +23,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
23
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
25
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
const iconHtml = ReactDOMServer.renderToString( /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
27
|
+
icon: _ExpandLess.default,
|
|
28
|
+
size: 20
|
|
29
|
+
}));
|
|
30
|
+
const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n\n .black {\n color: var(--color-primary-content);\n }\n"])));
|
|
29
31
|
function BarChart(_ref) {
|
|
30
32
|
var _barsConfig$length, _barsConfig$length2;
|
|
31
33
|
let {
|
|
@@ -36,8 +38,8 @@ function BarChart(_ref) {
|
|
|
36
38
|
yLabel,
|
|
37
39
|
xLabel
|
|
38
40
|
} = _ref;
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
+
const height = 420;
|
|
42
|
+
const width = 600;
|
|
41
43
|
const barSpacing = 32;
|
|
42
44
|
const marginBottom = 32;
|
|
43
45
|
const marginTop = 32;
|
|
@@ -71,20 +73,21 @@ function BarChart(_ref) {
|
|
|
71
73
|
*/
|
|
72
74
|
const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label)).range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
|
|
73
75
|
|
|
74
|
-
|
|
75
|
-
console.log('updateChartDimensions');
|
|
76
|
-
console.log('updateChartDimensions');
|
|
76
|
+
(0, _react.useEffect)(() => {
|
|
77
77
|
// Adding the svg element on first render.
|
|
78
|
-
barChartSvg
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
78
|
+
const barChartSvg = d3.select(barChartRef.current).append('svg') // If we chain methods after this one, we will be executing commands on the 'svg' element.
|
|
79
|
+
.attr('width', width) // Make these dimensions responsive
|
|
80
|
+
.attr('height', height);
|
|
81
|
+
|
|
82
|
+
// Adding the X axis.
|
|
83
|
+
const xAxis = barChartSvg.append('g').attr('id', 'x-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
|
|
84
|
+
const yAxis = barChartSvg.append('g').attr('id', 'y-axis').attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
|
|
85
|
+
const yAxisLabel = barChartSvg.append('text').classed('type-b2-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).text(yLabel);
|
|
86
|
+
// Removing the svg element, as a cleanup operation, before dismount.
|
|
87
|
+
return () => {
|
|
88
|
+
barChartSvg.remove();
|
|
89
|
+
};
|
|
90
|
+
});
|
|
88
91
|
const updateBars = barChartSvg => {
|
|
89
92
|
barChartSvg.selectAll('rect').data(barsConfig) // Performing a data join for an array of objects.
|
|
90
93
|
.join('rect').attr('x', (d, i) => marginRight + xScale(d.label)).attr('y', (d, i) => marginBottom + yScale(d.value)).attr('height', d => availableHeight - yScale(d.value)).attr('width', widthOfEachBar).style('fill', d => {
|
|
@@ -92,7 +95,7 @@ function BarChart(_ref) {
|
|
|
92
95
|
return _ColorVariablesMap.default["--color-".concat((_d$color = d === null || d === void 0 ? void 0 : d.color) !== null && _d$color !== void 0 ? _d$color : 'warning')];
|
|
93
96
|
});
|
|
94
97
|
};
|
|
95
|
-
const
|
|
98
|
+
const updateAxes = () => {
|
|
96
99
|
const xAxisRef = d3.select('#x-axis');
|
|
97
100
|
const yAxisRef = d3.select('#y-axis');
|
|
98
101
|
|
|
@@ -102,10 +105,9 @@ function BarChart(_ref) {
|
|
|
102
105
|
tickSize sets both at once
|
|
103
106
|
*/
|
|
104
107
|
|
|
105
|
-
const yAxisConfiguration = d3.axisLeft(yScale).
|
|
108
|
+
const yAxisConfiguration = d3.axisLeft(yScale).tickSize(0).tickPadding(16).tickFormat(_utils.rupeeShorthandFormatter);
|
|
106
109
|
const yAxis = yAxisRef.call(yAxisConfiguration);
|
|
107
|
-
|
|
108
|
-
// const yAxisSymbol = yAxisRef.append('g').html(iconHtml);
|
|
110
|
+
const yAxisSymbol = yAxisRef.append('g').html(iconHtml);
|
|
109
111
|
// .attr("y", 0 – margin.left)
|
|
110
112
|
// .attr("x",0 - (height / 2))
|
|
111
113
|
// .attr("dy", "1em")
|
|
@@ -116,25 +118,15 @@ function BarChart(_ref) {
|
|
|
116
118
|
const xAxis = xAxisRef.call(xAxisConfiguration);
|
|
117
119
|
};
|
|
118
120
|
(0, _react.useEffect)(() => {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
updateAxesPosition(barChartSvgReference);
|
|
126
|
-
updateAxesConfiguration();
|
|
127
|
-
updateBars(barChartSvgReference);
|
|
128
|
-
});
|
|
121
|
+
// D3 code to create the graph
|
|
122
|
+
const barChartSvg = d3.select(barChartRef.current).select('svg');
|
|
123
|
+
updateBars(barChartSvg);
|
|
124
|
+
updateAxes();
|
|
125
|
+
}, [barsConfig]); // Empty dependency array so that this code is called on every re-render
|
|
126
|
+
|
|
129
127
|
return /*#__PURE__*/_react.default.createElement(FullSizeContainer, {
|
|
130
128
|
ref: barChartRef
|
|
131
|
-
}
|
|
132
|
-
className: "bar-chart-svg"
|
|
133
|
-
}, /*#__PURE__*/_react.default.createElement("g", {
|
|
134
|
-
id: "x-axis"
|
|
135
|
-
}), /*#__PURE__*/_react.default.createElement("g", {
|
|
136
|
-
id: "y-axis"
|
|
137
|
-
})));
|
|
129
|
+
});
|
|
138
130
|
}
|
|
139
131
|
BarChart.propTypes = {
|
|
140
132
|
barsConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
14
14
|
var _default = exports.default = {};
|
|
15
15
|
const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n .text-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px; \n text-align: left;\n }\n"])));
|
|
16
|
-
const EllipsisTypography = exports.EllipsisTypography = (0, _styledComponents.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block
|
|
16
|
+
const EllipsisTypography = exports.EllipsisTypography = (0, _styledComponents.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block; \n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 84px;\n"])));
|
|
17
17
|
const ColoredStyledButton = exports.ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 2.25rem;\n min-width: 100px;\n padding: 0.625rem 1rem;\n\n &.small {\n height: 30px;\n min-width: 80px;\n padding: 10px 16px;\n }\n\n &.medium {\n height: 36px;\n min-width: 100px;\n padding: 10px 16px;\n }\n\n &.large {\n height: 48px;\n min-width: 136px;\n padding: 10px 24px;\n }\n\n &.medium-text-only,\n &.small-text-only {\n min-width: auto;\n height: auto;\n padding: 4px 0;\n }\n\n &.large-text-only {\n min-width: auto;\n height: auto;\n padding: 8px 0;\n }\n\n &.primary {\n background: var(--color-primary);\n border: 1px solid var(--color-primary);\n color: var(--color-primary-background);\n }\n &.primary:hover {\n background: var(--color-primary-hover);\n border: 1px solid var(--color-primary-hover);\n }\n\n &.primary-disabled {\n background: var(--color-disabled-button);\n cursor: not-allowed;\n color: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n }\n\n &.secondary {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n &.secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary-hover);\n color: var(--color-primary-hover);\n }\n\n &.secondary-disabled {\n background: transparent;\n border: 1px solid var(--color-disabled-button);\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.text-only {\n border: none;\n background: transparent;\n color: var(--color-primary);\n }\n &.text-only:hover {\n color: var(--color-primary-hover);\n }\n\n &.text-only-disabled {\n border: none;\n background: transparent;\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.danger-primary {\n background: var(--color-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-negative);\n }\n &.danger-primary:hover {\n background: var(--color-hover-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-hover-negative);\n }\n\n &.danger-secondary {\n background: transparent;\n border: 1px solid var(--color-negative);\n color: var(--color-negative);\n }\n &.danger-secondary:hover {\n background: transparent;\n border: 1px solid var(--color-hover-negative);\n color: var(--color-hover-negative);\n }\n\n &.danger-text-only {\n border: none;\n color: var(--color-negative);\n background: transparent;\n }\n &.danger-text-only:hover {\n border: none;\n color: var(--color-hover-negative);\n background: transparent;\n }\n"])));
|
|
18
18
|
function getButtonTypography(size) {
|
|
19
19
|
switch (size) {
|
|
@@ -67,10 +67,13 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
67
67
|
api.open({
|
|
68
68
|
message: customNotification,
|
|
69
69
|
style: {
|
|
70
|
-
padding: '8px 16px
|
|
70
|
+
padding: '8px 16px 8px 16px',
|
|
71
71
|
borderRadius: '4px',
|
|
72
72
|
borderLeft: "4px solid ".concat(borderColor),
|
|
73
|
-
boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
|
|
73
|
+
boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)',
|
|
74
|
+
display: 'flex',
|
|
75
|
+
justifyContent: 'space-between',
|
|
76
|
+
alignItems: 'center'
|
|
74
77
|
},
|
|
75
78
|
closeIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
76
79
|
color: "primary-content",
|
|
@@ -9,4 +9,4 @@ var _templateObject; // NotificationStyles.js
|
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = exports.default = {};
|
|
12
|
-
const StyledNotification = exports.StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between; \n align-item: center;\n small{\n font-size: inherit;\n display: block;\n padding: 4px 0 0;\n }\n .anticon-close{\n color: var(--color-secondary-content);\n }\n \n"])));
|
|
12
|
+
const StyledNotification = exports.StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-notification-notice-close{\n position: inherit !important;\n}\n.ant-notification-notice-message{\n margin-bottom: 0;\n}\n display: flex;\n justify-content: space-between; \n align-item: center;\n small{\n font-size: inherit;\n display: block;\n padding: 4px 0 0;\n }\n .anticon-close{\n color: var(--color-secondary-content);\n \n }\n \n"])));
|
|
@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
21
21
|
// TODO: Figure out a way to make this work with storybook.
|
|
22
22
|
// Can be used to wrap the entire application, to make these styles available to every component
|
|
23
23
|
|
|
24
|
-
const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width:
|
|
24
|
+
const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n}\n"])));
|
|
25
25
|
var _default = exports.default = GridLayout;
|
|
@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\
|
|
11
|
+
const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nlabel.ant-radio-wrapper:first-child{\n margin-inline-end: 32px;\n}\n .container {\n margin-bottom: 16px;\n }\n\n h4{\n padding: 0 0 4px;\n }\n.view-button {\n justify-content: start;\n}\n .ant-form-item.custom-radio-group {\n margin-bottom: 12px;\n }\n\n .ant-divider-horizontal {\n margin: 16px 0px 16px;\n }\n\n .ant-form-item .ant-form-item-control-input {\n min-height: auto;\n }\n\n .ant-radio-group-outline {\n display: flex;\n justify-content: start;\n }\n\n textarea {\n padding: 16px; \n min-height: 88px;\n resize: none;\n border-radius: 4px;\n border: 1px solid var(--color-placeholder-text);\n }\n\n h5 {\n margin: 0 0 4px;\n color: var(--color-primary-content);\n }\n\n radiofield label {\n white-space: nowrap;\n }\n\n docdetailstag a {\n white-space: nowrap;\n }\n\n .view-button {\n margin: 8px 0 0 0;\n }\n"])));
|
|
12
12
|
const RedText = exports.RedText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n color: red;\n margin-left: 4px;\n"])));
|
|
@@ -9,6 +9,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4; // Ke
|
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .col-md-4:last-child {\n margin: 0;\n }\n .valuestyle {\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n\n .valuestyle b {\n width: 38.734%;\n font-style: normal;\n color: var(--color-primary-content); \n }\n\n .valuestyle span {\n max-width: 180px;\n font-style: normal;\n color: var(--color-secondary-content);\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])));
|
|
12
|
-
const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n max-width:
|
|
12
|
+
const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n.container-fluid{\n width: 100%;\n padding: 0 16px;\n}\n.row {\n display: flex;\n flex-direction: column;\n}\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n}\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n .col-sm-7 {\n width: 58.33333%;\n }\n .col-sm-8 {\n width: 66.66667%;\n }\n .col-sm-9 {\n width: 75%;\n }\n .col-sm-10 {\n width: 83.33333%;\n }\n .col-sm-11 {\n width: 91.66667%;\n }\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n .col-md-2 {\n width: 16.66667%;\n }\n .col-md-3 {\n width: 25%;\n }\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter{\n padding: 0 24px 0 0;\n }\n .col-lg-1 {\n width: 8.33333%;\n }\n .col-lg-2 {\n width: 16.66667%;\n }\n .col-lg-3 {\n width: 25%;\n float: left;\n }\n .col-lg-4 {\n width: 33.33333%;\n float: left;\n }\n .col-lg-5 {\n width: 41.66667%;\n }\n .col-lg-6 {\n width: 50%;\n }\n .col-lg-7 {\n width: 58.33333%;\n }\n .col-lg-8 {\n width: 66.66667%;\n }\n .col-lg-9 {\n width: 75%;\n }\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .gutter{\n padding: 0 32px 0 0;\n }\n .col-xl-1 {\n width: 8.33333%;\n }\n\n \n}\n@media (max-width: 767px) {\n .gutter{\n padding: 0;\n }\n}\n"])));
|
|
13
13
|
const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--color-primary-content);\n font-weight: 400;\n"])));
|
|
14
14
|
const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n /* vertical-align: bottom; */\n color: var(--color-secondary-content);\n font-weight: 400;\n word-break: break-word;\n"])));
|
|
@@ -23,7 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
23
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
25
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
26
|
-
const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n .text-only-size{\n justify-content: left;\n }\n"])));
|
|
26
|
+
const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n .text-only-size{\n justify-content: left;\n }\n small{\n color: var(--color-secondary-content);\n display: block;\n }\n"])));
|
|
27
27
|
const CostBreakdown = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: var(--color-secondary-background);\n padding: 0 12px;\n border-radius: 4px;\n ul{\n display: flex;\n margin: 0;\n border-bottom: 1px solid var(--color-divider);\n padding: 12px 0;\n }\n ul:last-child{\n border-bottom: none;\n }\n ul li{\n width: 100%;\n list-style: none;\n }\n ul li:first-child{\n color: var(--color-primary-content);\n font-style: normal;\n }\n ul li:last-child{\n font-style: normal;\n color: var(--color-secondary-content);\n }\n"])));
|
|
28
28
|
// Mapping of how costs are covered
|
|
29
29
|
const costCoveredBy = {
|
|
@@ -76,22 +76,29 @@ function SparePartsWidget(_ref) {
|
|
|
76
76
|
showCostBreakdown,
|
|
77
77
|
coverageShow
|
|
78
78
|
} = _ref;
|
|
79
|
-
const sparePartList =
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
79
|
+
const [sparePartList, setSparePartList] = (0, _react.useState)([]);
|
|
80
|
+
const [actionList, setActionList] = (0, _react.useState)(false);
|
|
81
|
+
(0, _react.useEffect)(() => {
|
|
82
|
+
const tempSparePartsList = [...scopeDetails.unCoveredScope, ...scopeDetails.coveredScope];
|
|
83
|
+
setActionList(tempSparePartsList.some(sparePart => {
|
|
84
|
+
var _sparePart$action;
|
|
85
|
+
return (sparePart === null || sparePart === void 0 || (_sparePart$action = sparePart.action) === null || _sparePart$action === void 0 ? void 0 : _sparePart$action.length) > 0;
|
|
86
|
+
}));
|
|
87
|
+
setSparePartList(tempSparePartsList);
|
|
88
|
+
}, [scopeDetails]);
|
|
84
89
|
const columns = [{
|
|
85
90
|
title: 'Spare Part',
|
|
86
91
|
dataIndex: 'scopeName',
|
|
87
92
|
key: 'scopeName',
|
|
93
|
+
width: '40%',
|
|
88
94
|
render: (scopeName, record) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
89
95
|
typography: "type-b2-400"
|
|
90
|
-
}, scopeName), (record === null || record === void 0 ? void 0 : record.subText) && /*#__PURE__*/_react.default.createElement(
|
|
91
|
-
|
|
96
|
+
}, scopeName), (record === null || record === void 0 ? void 0 : record.subText) && /*#__PURE__*/_react.default.createElement("small", {
|
|
97
|
+
className: "type-b2-400"
|
|
92
98
|
}, "(", record === null || record === void 0 ? void 0 : record.subText, ")"))
|
|
93
99
|
}, {
|
|
94
100
|
title: 'Cost',
|
|
101
|
+
width: '20%',
|
|
95
102
|
dataIndex: 'cost',
|
|
96
103
|
key: 'cost',
|
|
97
104
|
render: (cost, record) => renderCost(record.cost - record.discount)
|
|
@@ -100,14 +107,16 @@ function SparePartsWidget(_ref) {
|
|
|
100
107
|
columns.push({
|
|
101
108
|
title: 'Coverage',
|
|
102
109
|
dataIndex: 'isCovered',
|
|
110
|
+
width: '20%',
|
|
103
111
|
key: 'isCovered',
|
|
104
112
|
render: (text, record) => renderCoverage(record.isCovered, record.className)
|
|
105
113
|
});
|
|
106
114
|
}
|
|
107
115
|
// check if there are any actions then create action column
|
|
108
|
-
if (
|
|
116
|
+
if (actionList) {
|
|
109
117
|
columns.push({
|
|
110
118
|
title: 'Action',
|
|
119
|
+
width: '20%',
|
|
111
120
|
key: 'action',
|
|
112
121
|
render: (text, record) => {
|
|
113
122
|
var _record$action;
|
|
@@ -10,5 +10,5 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
12
|
const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n gap: 4px;\n\n .text-container img:hover{\n opacity: 0.4;\n }\n .ant-btn-link{\n display: flex;\n padding: 0!important;\n height: auto !important;\n align-items: center;\n }\n\n .ant-btn >.anticon+span {\n margin-inline-start: 4px;\n }\n"])));
|
|
13
|
-
const StyledUpload = exports.StyledUpload = (0, _styledComponents.default)(_antd.Upload)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n button{\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n } \n\n display: flex;\n gap: 4px;\n\n .ant-upload-icon {\n display: none;\n }\n\n .ant-upload-list-item-progress {\n display: none;\n }\n\n .ant-upload-list-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width:
|
|
13
|
+
const StyledUpload = exports.StyledUpload = (0, _styledComponents.default)(_antd.Upload)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n button{\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n } \n\n display: flex;\n gap: 4px;\n\n .ant-upload-icon {\n display: none;\n }\n\n .ant-upload-list-item-progress {\n display: none;\n }\n\n .ant-upload-list-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 88px;\n text-align: left;\n }\n"])));
|
|
14
14
|
const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
|
package/package.json
CHANGED