oa-componentbook 0.17.100 → 0.17.101
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 +115 -39
- package/build/components/oa-component-button/styles.js +1 -1
- package/build/components/oa-component-info/CustomInfo.js +23 -11
- package/build/components/oa-component-modal/CustomModal.js +18 -14
- package/build/components/oa-component-notification/styles.js +1 -1
- package/build/global-css/GridLayout.js +1 -1
- package/build/utils/fix-decimal-places.js +17 -0
- package/build/utils/index.js +7 -0
- package/build/utils/rupee-formatters.js +9 -3
- 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 +7 -3
- package/build/widgets/oa-widget-upload-download/styles.js +1 -1
- package/package.json +1 -1
- package/build/hooks/useResizeObserver.js +0 -11
|
@@ -8,16 +8,13 @@ exports.default = BarChart;
|
|
|
8
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
|
-
var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
|
|
12
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
12
|
var d3 = _interopRequireWildcard(require("d3"));
|
|
14
13
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
var _ExpandLess = _interopRequireDefault(require("@material-ui/icons/ExpandLess"));
|
|
16
14
|
var _colorOptions = require("../../global-css/color-options");
|
|
17
15
|
var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
|
|
18
16
|
var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
|
|
19
17
|
var _utils = require("../../utils");
|
|
20
|
-
var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
|
|
21
18
|
var _templateObject;
|
|
22
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
20
|
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); }
|
|
@@ -25,26 +22,62 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
25
22
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
26
23
|
// const iconHtml = ReactDOMServer.renderToString(<MaterialIcon icon={ExpandLessIcon} size={20} />);
|
|
27
24
|
|
|
28
|
-
const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \n display: inline-block;\n position: relative;\n width: 100%;\n padding-bottom:
|
|
25
|
+
const FullSizeContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \n display: inline-block;\n position: relative;\n width: 100%;\n padding-bottom: ", "%;\n vertical-align: top;\n overflow: hidden;\n\n .bar-chart-svg {\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n }\n"])), props => 100 / props.$aspectRatio);
|
|
26
|
+
function curvedBar(x, y, width, height, r) {
|
|
27
|
+
// x coordinates of top of arcs
|
|
28
|
+
const x0 = x + r;
|
|
29
|
+
const x1 = x + width - r;
|
|
30
|
+
// y coordinates of bottom of arcs
|
|
31
|
+
const y0 = y - height + r;
|
|
32
|
+
|
|
33
|
+
// assemble path:
|
|
34
|
+
const parts = ['M', x, y,
|
|
35
|
+
// step 1
|
|
36
|
+
'L', x, y0,
|
|
37
|
+
// step 2
|
|
38
|
+
'A', r, r, 0, 0, 1, x0, y - height,
|
|
39
|
+
// step 3
|
|
40
|
+
'L', x1, y - height,
|
|
41
|
+
// step 4
|
|
42
|
+
'A', r, r, 0, 0, 1, x + width, y0,
|
|
43
|
+
// step 5
|
|
44
|
+
'L', x + width, y,
|
|
45
|
+
// step 6
|
|
46
|
+
'Z' // step 7
|
|
47
|
+
];
|
|
48
|
+
return parts.join(' ');
|
|
49
|
+
}
|
|
29
50
|
function BarChart(_ref) {
|
|
30
51
|
var _barsConfig$length, _barsConfig$length2;
|
|
31
52
|
let {
|
|
32
53
|
barsConfig,
|
|
33
54
|
showPercentage,
|
|
34
|
-
yStart,
|
|
35
|
-
yEnd,
|
|
36
55
|
yLabel,
|
|
37
56
|
xLabel
|
|
38
57
|
} = _ref;
|
|
39
|
-
const
|
|
40
|
-
const
|
|
58
|
+
const height = 450;
|
|
59
|
+
const width = 600;
|
|
60
|
+
const aspectRatio = width / height;
|
|
41
61
|
const barSpacing = 32;
|
|
42
62
|
const marginBottom = 32;
|
|
43
63
|
const marginTop = 32;
|
|
44
|
-
const marginLeft =
|
|
45
|
-
const marginRight =
|
|
64
|
+
const marginLeft = 48;
|
|
65
|
+
const marginRight = 48;
|
|
66
|
+
const yMin = 0;
|
|
67
|
+
const yMax = showPercentage ? 100 : Math.max(...barsConfig.map(barConfig => barConfig.value));
|
|
68
|
+
const xLabelPlural = "".concat(xLabel, "s");
|
|
69
|
+
const yLabelPlural = "".concat(yLabel, "s");
|
|
46
70
|
const totalForPercentages = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.reduce((accumulator, currentValue) => currentValue.value + accumulator, 0);
|
|
47
71
|
|
|
72
|
+
// This function gets the value for y-axis, based on whether `showPercentage` is true or not.
|
|
73
|
+
const getValueY = value => showPercentage ? (0, _utils.fixMaxDecimalPlaces)(100 * (value / totalForPercentages), 2) : value;
|
|
74
|
+
|
|
75
|
+
/*
|
|
76
|
+
This function gets the labels placed above the bars,
|
|
77
|
+
based on whether `showPercentage` is true or not.
|
|
78
|
+
*/
|
|
79
|
+
const getBarLabel = value => "".concat(getValueY(value)).concat(showPercentage ? '%' : " ".concat(value === 1 ? yLabel : yLabelPlural));
|
|
80
|
+
|
|
48
81
|
// n + 1 bar spacing for n bars.
|
|
49
82
|
const numberOfSpacesPresentInGraph = ((_barsConfig$length = barsConfig === null || barsConfig === void 0 ? void 0 : barsConfig.length) !== null && _barsConfig$length !== void 0 ? _barsConfig$length : 0) + 1;
|
|
50
83
|
const widthOfEachBar = (width - marginLeft - marginRight // Removed left and right margin.
|
|
@@ -63,7 +96,7 @@ function BarChart(_ref) {
|
|
|
63
96
|
Minimum value of scale is at bottom.
|
|
64
97
|
The scale goes from 0 to reduced value of height (remove upper and lower margin from height)
|
|
65
98
|
*/
|
|
66
|
-
const yScale = d3.scaleLinear().domain([
|
|
99
|
+
const yScale = d3.scaleLinear().domain([yMin, yMax]).range([availableHeight, 0]).nice();
|
|
67
100
|
|
|
68
101
|
/*
|
|
69
102
|
Scale for the bars on the X axis.
|
|
@@ -72,25 +105,34 @@ function BarChart(_ref) {
|
|
|
72
105
|
const xScale = d3.scaleBand().domain(barsConfig.map(barConfig => barConfig.label)).range([0, availableWidth]).padding(barSpacingInPercentage); // Inner and outer paddings are equal for symmmetry
|
|
73
106
|
|
|
74
107
|
const updateChartDimensions = barChartSvg => {
|
|
75
|
-
console.log('updateChartDimensions');
|
|
76
|
-
console.log('updateChartDimensions');
|
|
77
108
|
// Adding the svg element on first render.
|
|
78
109
|
barChartSvg.attr('viewBox', "0 0 ".concat(width, " ").concat(height)).attr('preserveAspectRatio', 'xMidYMid meet');
|
|
79
110
|
};
|
|
80
|
-
const addAxesLabel = barChartSvg => {
|
|
81
|
-
const yAxisLabel = barChartSvg.append('text').attr('id', 'y-axis-label').classed('type-b2-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']);
|
|
82
|
-
};
|
|
83
111
|
const updateAxesPosition = barChartSvg => {
|
|
84
|
-
const
|
|
85
|
-
const
|
|
86
|
-
|
|
112
|
+
const xAxisRef = barChartSvg.select('#x-axis');
|
|
113
|
+
const yAxisRef = barChartSvg.select('#y-axis');
|
|
114
|
+
|
|
115
|
+
// Setting the position of X-axis
|
|
116
|
+
const xAxis = xAxisRef.attr('transform', "translate(".concat(marginLeft, ", ").concat(height - marginBottom, ")"));
|
|
117
|
+
const xAxisLabel = barChartSvg.selectAll('#x-axis-label').data([xLabelPlural]) // Singular data join
|
|
118
|
+
.join('text').attr('id', 'x-axis-label').classed('type-b3-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).style('dominant-baseline', 'middle') // This CSS property aligns the <text> element, with the X-axis.
|
|
119
|
+
.attr('transform', "translate(".concat(width - marginRight + 12, ", ").concat(height - marginBottom, ")")).text(d => d);
|
|
120
|
+
|
|
121
|
+
// Setting the position of Y-axis
|
|
122
|
+
const yAxis = yAxisRef.attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop, ")"));
|
|
123
|
+
const yAxisLabel = barChartSvg.selectAll('#y-axis-label').data([yLabelPlural]) // Singular data join
|
|
124
|
+
.join('text').attr('id', 'y-axis-label').classed('type-b3-400', true).style('fill', _ColorVariablesMap.default['--color-primary-content']).attr('transform', "translate(".concat(marginLeft, ", ").concat(marginTop - _TypographiesMap.default['type-b2-400']['line-height'], ")")).attr('text-anchor', 'middle').text(d => d);
|
|
87
125
|
};
|
|
88
126
|
const updateBars = barChartSvg => {
|
|
89
|
-
barChartSvg.selectAll('
|
|
90
|
-
.
|
|
127
|
+
barChartSvg.selectAll('#bar') // We select the id which we add just below, so that the existing bars are updated.
|
|
128
|
+
.data(barsConfig) // Performing a data join for an array of objects.
|
|
129
|
+
.join('path').attr('d', (d, i) => curvedBar(marginRight + xScale(d.label), height - marginBottom, widthOfEachBar, availableHeight - yScale(getValueY(d.value)), 4)).attr('id', 'bar').style('fill', d => {
|
|
91
130
|
var _d$color;
|
|
92
131
|
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
132
|
});
|
|
133
|
+
barChartSvg.selectAll('#bar-label') // We select the id which we add just below, so that the existing bars are updated.
|
|
134
|
+
.data(barsConfig).join('text').attr('id', 'bar-label').style('width', widthOfEachBar).attr('text-anchor', 'middle').text((d, i) => getBarLabel(d.value)).attr('x', (d, i) => marginRight + widthOfEachBar / 2 + xScale(d.label)) // Center position
|
|
135
|
+
.attr('y', (d, i) => marginTop + yScale(getValueY(d.value)) - 12).classed('type-b3-400', true);
|
|
94
136
|
};
|
|
95
137
|
const updateAxesConfiguration = () => {
|
|
96
138
|
const xAxisRef = d3.select('#x-axis');
|
|
@@ -102,24 +144,35 @@ function BarChart(_ref) {
|
|
|
102
144
|
tickSize sets both at once
|
|
103
145
|
*/
|
|
104
146
|
|
|
105
|
-
const yAxisConfiguration = d3.axisLeft(yScale).
|
|
106
|
-
|
|
147
|
+
const yAxisConfiguration = d3.axisLeft(yScale).ticks(5) // Controls the approximate number of ticks to be shown on Y-axis.
|
|
148
|
+
.tickSizeInner(-availableWidth) // This draws the grid lines out of the Y-axis.
|
|
149
|
+
.tickSizeOuter(0).tickPadding(16).tickFormat(showPercentage ? d => "".concat(d, "%") : _utils.rupeeShorthandFormatter);
|
|
107
150
|
|
|
108
|
-
//
|
|
109
|
-
|
|
110
|
-
// .attr("x",0 - (height / 2))
|
|
111
|
-
// .attr("dy", "1em")
|
|
112
|
-
// .style("text-anchor", "middle")
|
|
113
|
-
// .text("Value");
|
|
151
|
+
// TODO: Add smooth transition
|
|
152
|
+
const yAxis = yAxisRef.transition().call(yAxisConfiguration);
|
|
114
153
|
|
|
154
|
+
// After calling the function for the drawing the Y-axis, we remove the tick with value 0.
|
|
155
|
+
yAxisRef.selectAll('.tick').filter(d => d === 0).remove();
|
|
115
156
|
const xAxisConfiguration = d3.axisBottom(xScale).tickSize(0).tickPadding(12);
|
|
116
|
-
|
|
157
|
+
|
|
158
|
+
// TODO: Add smooth transition
|
|
159
|
+
const xAxis = xAxisRef.transition().call(xAxisConfiguration);
|
|
160
|
+
|
|
161
|
+
// Adding typography class to text of all ticks
|
|
162
|
+
d3.selectAll('.tick text').classed('type-b2-400', true);
|
|
163
|
+
|
|
164
|
+
// Setting the color of Y-axis
|
|
165
|
+
yAxisRef.select('path').attr('stroke', _ColorVariablesMap.default['--color-placeholder-text']).attr('marker-end', 'url(#arrowhead-up)');
|
|
166
|
+
|
|
167
|
+
// Setting the color of the ticks (dashed grid of Y-axis)
|
|
168
|
+
yAxisRef.selectAll('.tick line').attr('stroke', _ColorVariablesMap.default['--color-placeholder-text']).style('stroke-dasharray', '3,6');
|
|
169
|
+
|
|
170
|
+
// Setting the color of X-axis
|
|
171
|
+
|
|
172
|
+
xAxisRef.select('path').attr('stroke', _ColorVariablesMap.default['--color-placeholder-text']).attr('marker-end', 'url(#arrowhead-right)');
|
|
117
173
|
};
|
|
118
174
|
(0, _react.useEffect)(() => {
|
|
119
|
-
|
|
120
|
-
addAxesLabel(barChartSvgReference);
|
|
121
|
-
}, []);
|
|
122
|
-
(0, _react.useEffect)(() => {
|
|
175
|
+
// Selecting this bar chart svg, only after mount, so that it is present in the DOM.
|
|
123
176
|
const barChartSvgReference = d3.select(barChartRef.current).select('svg');
|
|
124
177
|
updateChartDimensions(barChartSvgReference);
|
|
125
178
|
updateAxesPosition(barChartSvgReference);
|
|
@@ -127,10 +180,37 @@ function BarChart(_ref) {
|
|
|
127
180
|
updateBars(barChartSvgReference);
|
|
128
181
|
});
|
|
129
182
|
return /*#__PURE__*/_react.default.createElement(FullSizeContainer, {
|
|
183
|
+
$aspectRatio: aspectRatio,
|
|
130
184
|
ref: barChartRef
|
|
131
185
|
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
132
186
|
className: "bar-chart-svg"
|
|
133
|
-
}, /*#__PURE__*/_react.default.createElement("
|
|
187
|
+
}, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("marker", {
|
|
188
|
+
id: "arrowhead-right",
|
|
189
|
+
refX: "1" // X-coordinate of the marker svg which has to matched with end of X-axis
|
|
190
|
+
,
|
|
191
|
+
refY: "5" // Y-coordinate of the marker svg which has to matched with end of X-axis
|
|
192
|
+
,
|
|
193
|
+
markerWidth: "16",
|
|
194
|
+
markerHeight: "13"
|
|
195
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
196
|
+
d: "M 1 0 L 6 5 L 1 10",
|
|
197
|
+
stroke: _ColorVariablesMap.default['--color-placeholder-text'],
|
|
198
|
+
strokeWidth: "1",
|
|
199
|
+
fill: "none"
|
|
200
|
+
})), /*#__PURE__*/_react.default.createElement("marker", {
|
|
201
|
+
id: "arrowhead-up",
|
|
202
|
+
refX: "5" // X-coordinate of the marker svg which has to matched with end of X-axis
|
|
203
|
+
,
|
|
204
|
+
refY: "14" // Y-coordinate of the marker svg which has to matched with end of X-axis
|
|
205
|
+
,
|
|
206
|
+
markerWidth: "11",
|
|
207
|
+
markerHeight: "14"
|
|
208
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
209
|
+
d: "M 0 5 L 5 0 L 10 5 M 5 6 L 5 14",
|
|
210
|
+
stroke: _ColorVariablesMap.default['--color-placeholder-text'],
|
|
211
|
+
strokeWidth: "1",
|
|
212
|
+
fill: "none"
|
|
213
|
+
}))), /*#__PURE__*/_react.default.createElement("g", {
|
|
134
214
|
id: "x-axis"
|
|
135
215
|
}), /*#__PURE__*/_react.default.createElement("g", {
|
|
136
216
|
id: "y-axis"
|
|
@@ -142,16 +222,12 @@ BarChart.propTypes = {
|
|
|
142
222
|
color: _propTypes.default.oneOf(_colorOptions.colorOptions)
|
|
143
223
|
})),
|
|
144
224
|
showPercentage: _propTypes.default.bool,
|
|
145
|
-
yStart: _propTypes.default.number,
|
|
146
|
-
yEnd: _propTypes.default.number,
|
|
147
225
|
yLabel: _propTypes.default.string,
|
|
148
226
|
xLabel: _propTypes.default.string
|
|
149
227
|
};
|
|
150
228
|
BarChart.defaultProps = {
|
|
151
229
|
barsConfig: [],
|
|
152
230
|
showPercentage: false,
|
|
153
|
-
yStart: 0,
|
|
154
|
-
yEnd: 100,
|
|
155
231
|
yLabel: 'Y',
|
|
156
232
|
xLabel: 'X'
|
|
157
233
|
};
|
|
@@ -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) {
|
|
@@ -7,6 +7,7 @@ exports.default = CustomInfo;
|
|
|
7
7
|
require("core-js/modules/es.symbol.description.js");
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _antd = require("antd");
|
|
10
11
|
var _styles = require("./styles");
|
|
11
12
|
var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
|
|
12
13
|
var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
|
|
@@ -18,24 +19,32 @@ function CustomInfo(_ref) {
|
|
|
18
19
|
buttonConfig,
|
|
19
20
|
color,
|
|
20
21
|
description,
|
|
22
|
+
fontColor,
|
|
21
23
|
iconConfig,
|
|
22
24
|
title
|
|
23
25
|
} = _ref;
|
|
24
|
-
|
|
25
|
-
$color: color
|
|
26
|
-
}, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
|
|
26
|
+
const renderIcon = () => !title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
|
|
27
27
|
size: 20
|
|
28
28
|
}) : /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
|
|
29
29
|
size: 24
|
|
30
|
-
})
|
|
30
|
+
});
|
|
31
|
+
const conditionallyAddTooltipToIcon = () => {
|
|
32
|
+
var _iconConfig$tooltipTe;
|
|
33
|
+
return (iconConfig === null || iconConfig === void 0 || (_iconConfig$tooltipTe = iconConfig.tooltipText) === null || _iconConfig$tooltipTe === void 0 ? void 0 : _iconConfig$tooltipTe.length) > 0 ? /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
34
|
+
title: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.tooltipText
|
|
35
|
+
}, renderIcon()) : renderIcon();
|
|
36
|
+
};
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
|
|
38
|
+
$color: color
|
|
39
|
+
}, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
40
|
+
color: fontColor,
|
|
31
41
|
typography: "type-t2-700"
|
|
32
42
|
}, title), description && /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
-
className: "type-b2-400"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}))), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
|
|
43
|
+
className: "type-b2-400",
|
|
44
|
+
style: {
|
|
45
|
+
color: "var(--color-".concat(fontColor, ")")
|
|
46
|
+
}
|
|
47
|
+
}, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon()), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
|
|
39
48
|
}
|
|
40
49
|
CustomInfo.propTypes = {
|
|
41
50
|
buttonConfig: _propTypes.default.shape({
|
|
@@ -51,9 +60,11 @@ CustomInfo.propTypes = {
|
|
|
51
60
|
}),
|
|
52
61
|
color: _propTypes.default.oneOf(_colorOptions.colorOptions),
|
|
53
62
|
description: _propTypes.default.string,
|
|
63
|
+
fontColor: _propTypes.default.oneOf(_colorOptions.colorOptions),
|
|
54
64
|
iconConfig: _propTypes.default.shape({
|
|
55
65
|
icon: _propTypes.default.node,
|
|
56
|
-
position: _propTypes.default.oneOf(['left', 'right'])
|
|
66
|
+
position: _propTypes.default.oneOf(['left', 'right']),
|
|
67
|
+
tooltipText: _propTypes.default.string
|
|
57
68
|
}),
|
|
58
69
|
title: _propTypes.default.string
|
|
59
70
|
};
|
|
@@ -67,6 +78,7 @@ CustomInfo.defaultProps = {
|
|
|
67
78
|
iconConfig: {
|
|
68
79
|
position: 'left'
|
|
69
80
|
},
|
|
81
|
+
fontColor: 'primary-content',
|
|
70
82
|
title: null,
|
|
71
83
|
description: null
|
|
72
84
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
require("core-js/modules/es.object.assign.js");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.default = void 0;
|
|
7
|
-
require("core-js/modules/es.object.assign.js");
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _antd = require("antd");
|
|
@@ -13,21 +13,25 @@ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typ
|
|
|
13
13
|
var _typographyOptions = require("../../global-css/typography-options");
|
|
14
14
|
var _utils = require("../../utils");
|
|
15
15
|
var _styles = require("./styles");
|
|
16
|
+
const _excluded = ["buttonConfig", "children", "data-test", "imgSrc", "onCancel", "open", "title", "typographies", "width"];
|
|
16
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
18
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
18
21
|
function CustomModal(_ref) {
|
|
19
22
|
let {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
23
|
+
buttonConfig,
|
|
24
|
+
children,
|
|
25
|
+
'data-test': dataTest,
|
|
26
|
+
imgSrc,
|
|
27
|
+
// This callback function provided by parent is called upon clicking on the cancel button
|
|
28
|
+
onCancel,
|
|
29
|
+
open,
|
|
30
|
+
title,
|
|
31
|
+
typographies,
|
|
32
|
+
width
|
|
33
|
+
} = _ref,
|
|
34
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
31
35
|
/*
|
|
32
36
|
We make our own callback function, which makes a call to the `onCancel`
|
|
33
37
|
function given to use by the parent.
|
|
@@ -38,7 +42,7 @@ function CustomModal(_ref) {
|
|
|
38
42
|
onCancel();
|
|
39
43
|
// console.log('`handleCancel` callback of CustomModal component called.');
|
|
40
44
|
};
|
|
41
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
|
|
45
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
|
|
42
46
|
centered: true,
|
|
43
47
|
"data-test": dataTest,
|
|
44
48
|
footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
|
|
@@ -60,7 +64,7 @@ function CustomModal(_ref) {
|
|
|
60
64
|
typography: typographies.title
|
|
61
65
|
}, title)),
|
|
62
66
|
width: width
|
|
63
|
-
}, children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
|
|
67
|
+
}, props), children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
|
|
64
68
|
// The label is a string or a number
|
|
65
69
|
((0, _utils.isString)(children) || (0, _utils.isNumber)(children)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
66
70
|
color: "secondary-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(["\nbackground: red;\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 margin: 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 margin: 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 margin: 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;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = fixMaxDecimalPlaces;
|
|
7
|
+
require("core-js/modules/es.parse-float.js");
|
|
8
|
+
require("core-js/modules/es.number.to-fixed.js");
|
|
9
|
+
function fixMaxDecimalPlaces(number, decimalPlaces) {
|
|
10
|
+
// Check if the input is a valid number
|
|
11
|
+
if (typeof number !== 'number' || Number.isNaN(number)) {
|
|
12
|
+
return number; // If not a number, return the same value
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Fix to two decimal places
|
|
16
|
+
return parseFloat(number.toFixed(decimalPlaces));
|
|
17
|
+
}
|
package/build/utils/index.js
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "fixMaxDecimalPlaces", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _fixDecimalPlaces.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
6
12
|
Object.defineProperty(exports, "getUUID", {
|
|
7
13
|
enumerable: true,
|
|
8
14
|
get: function get() {
|
|
@@ -60,5 +66,6 @@ Object.defineProperty(exports, "rupeeShorthandFormatter", {
|
|
|
60
66
|
var _getUuid = _interopRequireDefault(require("./get-uuid"));
|
|
61
67
|
var _hexToRgb = _interopRequireDefault(require("./hex-to-rgb"));
|
|
62
68
|
var _rupeeFormatters = require("./rupee-formatters");
|
|
69
|
+
var _fixDecimalPlaces = _interopRequireDefault(require("./fix-decimal-places"));
|
|
63
70
|
var _typeCheckers = require("./type-checkers");
|
|
64
71
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -4,18 +4,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.rupeeShorthandFormatter = exports.rupeeCommaFormatter = void 0;
|
|
7
|
+
var _fixDecimalPlaces = _interopRequireDefault(require("./fix-decimal-places"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
7
9
|
const thousand = 1000;
|
|
8
10
|
const lakh = 100 * thousand;
|
|
9
11
|
const crore = 100 * lakh;
|
|
10
12
|
const rupeeShorthandFormatter = value => {
|
|
13
|
+
/*
|
|
14
|
+
We multiply and divide by 10, so that decimal values are also visible.
|
|
15
|
+
1100 will be displayed as 1.1K
|
|
16
|
+
*/
|
|
11
17
|
if (value >= crore) {
|
|
12
|
-
return "".concat(
|
|
18
|
+
return "".concat((0, _fixDecimalPlaces.default)(value / crore, 1), "C");
|
|
13
19
|
}
|
|
14
20
|
if (value >= lakh) {
|
|
15
|
-
return "".concat(
|
|
21
|
+
return "".concat((0, _fixDecimalPlaces.default)(value / lakh, 1), "L");
|
|
16
22
|
}
|
|
17
23
|
if (value >= thousand) {
|
|
18
|
-
return "".concat(
|
|
24
|
+
return "".concat((0, _fixDecimalPlaces.default)(value / thousand, 1), "K");
|
|
19
25
|
}
|
|
20
26
|
return value;
|
|
21
27
|
};
|
|
@@ -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 margin: 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 margin: 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 margin: 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 = {
|
|
@@ -85,13 +85,15 @@ function SparePartsWidget(_ref) {
|
|
|
85
85
|
title: 'Spare Part',
|
|
86
86
|
dataIndex: 'scopeName',
|
|
87
87
|
key: 'scopeName',
|
|
88
|
+
width: '40%',
|
|
88
89
|
render: (scopeName, record) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
89
90
|
typography: "type-b2-400"
|
|
90
|
-
}, scopeName), (record === null || record === void 0 ? void 0 : record.subText) && /*#__PURE__*/_react.default.createElement(
|
|
91
|
-
|
|
91
|
+
}, scopeName), (record === null || record === void 0 ? void 0 : record.subText) && /*#__PURE__*/_react.default.createElement("small", {
|
|
92
|
+
className: "type-b2-400"
|
|
92
93
|
}, "(", record === null || record === void 0 ? void 0 : record.subText, ")"))
|
|
93
94
|
}, {
|
|
94
95
|
title: 'Cost',
|
|
96
|
+
width: '20%',
|
|
95
97
|
dataIndex: 'cost',
|
|
96
98
|
key: 'cost',
|
|
97
99
|
render: (cost, record) => renderCost(record.cost - record.discount)
|
|
@@ -100,6 +102,7 @@ function SparePartsWidget(_ref) {
|
|
|
100
102
|
columns.push({
|
|
101
103
|
title: 'Coverage',
|
|
102
104
|
dataIndex: 'isCovered',
|
|
105
|
+
width: '20%',
|
|
103
106
|
key: 'isCovered',
|
|
104
107
|
render: (text, record) => renderCoverage(record.isCovered, record.className)
|
|
105
108
|
});
|
|
@@ -108,6 +111,7 @@ function SparePartsWidget(_ref) {
|
|
|
108
111
|
if (showActionList) {
|
|
109
112
|
columns.push({
|
|
110
113
|
title: 'Action',
|
|
114
|
+
width: '20%',
|
|
111
115
|
key: 'action',
|
|
112
116
|
render: (text, record) => {
|
|
113
117
|
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