sag_components 1.0.449 → 1.0.451
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/dist/stories/CampaignTool/Card.stories.js +93 -0
- package/dist/stories/CampaignTool/MultipleCard.stories.js +33 -0
- package/dist/stories/CampaignTool/Table.stories.js +12 -4
- package/dist/stories/components/CampaignTool/Card.js +72 -0
- package/dist/stories/components/CampaignTool/Card.style.js +19 -0
- package/dist/stories/components/CampaignTool/MultipleCard.js +26 -0
- package/dist/stories/components/CampaignTool/MultipleCard.style.js +12 -0
- package/dist/stories/components/CampaignTool/Table.js +12 -9
- package/dist/stories/components/CommonFunctions.js +16 -16
- package/package.json +5 -5
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.SingleCard = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _Card = _interopRequireDefault(require("../components/CampaignTool/Card"));
|
|
10
|
+
const data = [{
|
|
11
|
+
key: '1',
|
|
12
|
+
icon: 'cart',
|
|
13
|
+
label: 'Products',
|
|
14
|
+
value: 335
|
|
15
|
+
}, {
|
|
16
|
+
key: '2',
|
|
17
|
+
icon: 'gift',
|
|
18
|
+
label: 'Brands',
|
|
19
|
+
value: 161
|
|
20
|
+
}, {
|
|
21
|
+
key: '3',
|
|
22
|
+
icon: 'label',
|
|
23
|
+
label: 'Offers',
|
|
24
|
+
value: 223
|
|
25
|
+
}, {
|
|
26
|
+
key: '4',
|
|
27
|
+
icon: 'truck',
|
|
28
|
+
label: 'Suppliers',
|
|
29
|
+
value: 246
|
|
30
|
+
}, {
|
|
31
|
+
key: '5',
|
|
32
|
+
icon: '',
|
|
33
|
+
label: 'Total budget',
|
|
34
|
+
value: 45
|
|
35
|
+
}, {
|
|
36
|
+
key: '6',
|
|
37
|
+
icon: '',
|
|
38
|
+
label: 'Self-funded budget',
|
|
39
|
+
value: 146
|
|
40
|
+
}];
|
|
41
|
+
var _default = exports.default = {
|
|
42
|
+
title: 'Campaign Tool/Card',
|
|
43
|
+
component: _Card.default,
|
|
44
|
+
tags: ['autodocs'],
|
|
45
|
+
argTypes: {
|
|
46
|
+
cardTitle: {
|
|
47
|
+
name: 'cardTitle',
|
|
48
|
+
control: {
|
|
49
|
+
type: 'text'
|
|
50
|
+
},
|
|
51
|
+
description: 'Card title'
|
|
52
|
+
},
|
|
53
|
+
buttonText: {
|
|
54
|
+
name: 'buttonText',
|
|
55
|
+
control: {
|
|
56
|
+
type: 'text'
|
|
57
|
+
},
|
|
58
|
+
description: 'Button text'
|
|
59
|
+
},
|
|
60
|
+
width: {
|
|
61
|
+
name: 'Width',
|
|
62
|
+
control: {
|
|
63
|
+
type: 'text'
|
|
64
|
+
},
|
|
65
|
+
description: 'Table width'
|
|
66
|
+
},
|
|
67
|
+
height: {
|
|
68
|
+
name: 'Height',
|
|
69
|
+
control: {
|
|
70
|
+
type: 'text'
|
|
71
|
+
},
|
|
72
|
+
description: 'Table height'
|
|
73
|
+
},
|
|
74
|
+
onCardButtonClick: {
|
|
75
|
+
name: 'Button event',
|
|
76
|
+
action: 'onClick',
|
|
77
|
+
description: 'Click on a side big button'
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// showPagination: {
|
|
81
|
+
// name: 'Show Pagination',
|
|
82
|
+
// control: { type: 'boolean' },
|
|
83
|
+
// description: 'hide/show pagination',
|
|
84
|
+
// defaultValue: true,
|
|
85
|
+
// },
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const Template = args => /*#__PURE__*/_react.default.createElement(_Card.default, args);
|
|
90
|
+
const SingleCard = exports.SingleCard = Template.bind({});
|
|
91
|
+
_Card.default.args = {
|
|
92
|
+
data
|
|
93
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.CardsList = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _MultipleCard = _interopRequireDefault(require("../components/CampaignTool/MultipleCard"));
|
|
10
|
+
var _default = exports.default = {
|
|
11
|
+
title: 'Campaign Tool/MultipleCard',
|
|
12
|
+
component: _MultipleCard.default,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
width: {
|
|
16
|
+
name: 'Width',
|
|
17
|
+
control: {
|
|
18
|
+
type: 'text'
|
|
19
|
+
},
|
|
20
|
+
description: 'Table width'
|
|
21
|
+
},
|
|
22
|
+
height: {
|
|
23
|
+
name: 'Height',
|
|
24
|
+
control: {
|
|
25
|
+
type: 'text'
|
|
26
|
+
},
|
|
27
|
+
description: 'Table height'
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const Template = args => /*#__PURE__*/_react.default.createElement(_MultipleCard.default, args);
|
|
32
|
+
const CardsList = exports.CardsList = Template.bind({});
|
|
33
|
+
CardsList.args = {};
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.default = exports.
|
|
7
|
+
exports.default = exports.MainTable = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _Table = require("../components/CampaignTool/Table");
|
|
10
10
|
const theData = [{
|
|
@@ -86,11 +86,19 @@ var _default = exports.default = {
|
|
|
86
86
|
},
|
|
87
87
|
description: 'hide/show pagination',
|
|
88
88
|
defaultValue: true
|
|
89
|
+
},
|
|
90
|
+
rangePagination: {
|
|
91
|
+
name: 'Range Pagination',
|
|
92
|
+
control: {
|
|
93
|
+
type: 'number'
|
|
94
|
+
},
|
|
95
|
+
description: 'How many button representing pages will shown in the range'
|
|
89
96
|
}
|
|
90
97
|
}
|
|
91
98
|
};
|
|
92
99
|
const Template = args => /*#__PURE__*/_react.default.createElement(_Table.Table, args);
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
data: theData
|
|
100
|
+
const MainTable = exports.MainTable = Template.bind({});
|
|
101
|
+
MainTable.args = {
|
|
102
|
+
data: theData,
|
|
103
|
+
rangePagination: 5
|
|
96
104
|
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _Card = require("./Card.style");
|
|
10
|
+
const Card = props => {
|
|
11
|
+
const {
|
|
12
|
+
data,
|
|
13
|
+
cardTitle,
|
|
14
|
+
buttonText,
|
|
15
|
+
onCardButtonClick,
|
|
16
|
+
width,
|
|
17
|
+
height
|
|
18
|
+
} = props;
|
|
19
|
+
const onCardButtonClickHandle = e => {
|
|
20
|
+
onCardButtonClick(e);
|
|
21
|
+
};
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_Card.CardFrame, {
|
|
23
|
+
width: width,
|
|
24
|
+
height: height
|
|
25
|
+
}, /*#__PURE__*/_react.default.createElement(_Card.CardDetails, null, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, null, cardTitle), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum minima "), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "commodi optio molesti"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "optio molesti")), /*#__PURE__*/_react.default.createElement(_Card.SegmentsContainer, {
|
|
26
|
+
rows: data.lenght
|
|
27
|
+
}, data.map(segment =>
|
|
28
|
+
/*#__PURE__*/
|
|
29
|
+
// TODO: make icons
|
|
30
|
+
_react.default.createElement(_Card.Segment, null, segment.value, /*#__PURE__*/_react.default.createElement("br", null), segment.label))), /*#__PURE__*/_react.default.createElement(_Card.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Card.Button, {
|
|
31
|
+
onClick: e => onCardButtonClickHandle(e)
|
|
32
|
+
}, buttonText)));
|
|
33
|
+
};
|
|
34
|
+
var _default = exports.default = Card;
|
|
35
|
+
Card.defaultProps = {
|
|
36
|
+
data: [{
|
|
37
|
+
key: '1',
|
|
38
|
+
icon: 'cart',
|
|
39
|
+
label: 'Products',
|
|
40
|
+
value: 335
|
|
41
|
+
}, {
|
|
42
|
+
key: '2',
|
|
43
|
+
icon: 'gift',
|
|
44
|
+
label: 'Brands',
|
|
45
|
+
value: 161
|
|
46
|
+
}, {
|
|
47
|
+
key: '3',
|
|
48
|
+
icon: 'label',
|
|
49
|
+
label: 'Offers',
|
|
50
|
+
value: 223
|
|
51
|
+
}, {
|
|
52
|
+
key: '4',
|
|
53
|
+
icon: 'truck',
|
|
54
|
+
label: 'Suppliers',
|
|
55
|
+
value: 246
|
|
56
|
+
}, {
|
|
57
|
+
key: '5',
|
|
58
|
+
icon: '',
|
|
59
|
+
label: 'Total budget',
|
|
60
|
+
value: 45
|
|
61
|
+
}, {
|
|
62
|
+
key: '6',
|
|
63
|
+
icon: '',
|
|
64
|
+
label: 'Self-funded budget',
|
|
65
|
+
value: 146
|
|
66
|
+
}],
|
|
67
|
+
cardTitle: 'March 2024',
|
|
68
|
+
buttonText: 'Campaign Details',
|
|
69
|
+
onCardButtonClick: () => {},
|
|
70
|
+
width: '100%',
|
|
71
|
+
height: 'auto'
|
|
72
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.SegmentsContainer = exports.Segment = exports.CardTitle = exports.CardFrame = exports.CardDetails = exports.CardDetailText = exports.ButtonWrap = exports.Button = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
11
|
+
/* eslint-disable import/prefer-default-export */
|
|
12
|
+
const CardFrame = exports.CardFrame = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n background-color: white;\n border: 1px solid gray;\n border-left: 5px solid #6e9eed;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: stretch;\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
|
|
13
|
+
const CardDetails = exports.CardDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 16px 20px;\n"])));
|
|
14
|
+
const CardTitle = exports.CardTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 22px;\n margin: 0;\n"])));
|
|
15
|
+
const CardDetailText = exports.CardDetailText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n font-size: 12px;\n"])));
|
|
16
|
+
const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n flex-grow: 1;\n gap: 20px;\n flex-wrap: wrap;\n padding: 16px;\n grid-template-rows: repeat(2, 1fr);\n grid-template-columns: repeat(3, 1fr);\n"])));
|
|
17
|
+
const Segment = exports.Segment = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 1 0px;\n display: flex;\n gap: 8px;\n font-size: 12px;\n border: 1px solid gray;\n padding: 8px;\n"])));
|
|
18
|
+
const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n padding: 30px;\n background-color: bisque;\n"])));
|
|
19
|
+
const Button = exports.Button = _styledComponents.default.button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 20px;\n color: white;\n background-color: gray;\n border: none;\n padding: 8px 16px;\n cursor: pointer;\n &:hover, &:focus {\n background-color: rebeccapurple;\n }\n"])));
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _Card = _interopRequireDefault(require("./Card"));
|
|
10
|
+
var _MultipleCard = require("./MultipleCard.style");
|
|
11
|
+
const MultipleCard = props => {
|
|
12
|
+
const {
|
|
13
|
+
data,
|
|
14
|
+
width,
|
|
15
|
+
height
|
|
16
|
+
} = props;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_MultipleCard.CardsWrapper, {
|
|
18
|
+
width: width,
|
|
19
|
+
height: height
|
|
20
|
+
}, /*#__PURE__*/_react.default.createElement(_Card.default, null), /*#__PURE__*/_react.default.createElement(_Card.default, null), /*#__PURE__*/_react.default.createElement(_Card.default, null), /*#__PURE__*/_react.default.createElement(_Card.default, null));
|
|
21
|
+
};
|
|
22
|
+
var _default = exports.default = MultipleCard;
|
|
23
|
+
MultipleCard.defaultProps = {
|
|
24
|
+
width: '100%',
|
|
25
|
+
height: 'auto'
|
|
26
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CardsWrapper = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject;
|
|
11
|
+
/* eslint-disable import/prefer-default-export */
|
|
12
|
+
const CardsWrapper = exports.CardsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
|
|
@@ -19,7 +19,8 @@ const Table = props => {
|
|
|
19
19
|
onPaginationClick,
|
|
20
20
|
actionsColumn,
|
|
21
21
|
sizingTable,
|
|
22
|
-
showPagination
|
|
22
|
+
showPagination,
|
|
23
|
+
rangePagination
|
|
23
24
|
} = props;
|
|
24
25
|
const [sortBy, setSortBy] = (0, _react.useState)(null);
|
|
25
26
|
const [sortOrder, setSortOrder] = (0, _react.useState)('asc');
|
|
@@ -31,6 +32,7 @@ const Table = props => {
|
|
|
31
32
|
selected: [],
|
|
32
33
|
unselected: []
|
|
33
34
|
});
|
|
35
|
+
const [activePage, setActivePage] = (0, _react.useState)(1);
|
|
34
36
|
const [arrow, setArrow] = (0, _react.useState)(null);
|
|
35
37
|
const handleSort = (event, columnName) => {
|
|
36
38
|
if (!event.target.classList.contains('dragger')) {
|
|
@@ -102,6 +104,7 @@ const Table = props => {
|
|
|
102
104
|
}
|
|
103
105
|
};
|
|
104
106
|
const onPaginationClickHandler = (event, page) => {
|
|
107
|
+
setActivePage(page);
|
|
105
108
|
onPaginationClick(event, page);
|
|
106
109
|
};
|
|
107
110
|
(0, _react.useEffect)(() => {
|
|
@@ -117,9 +120,8 @@ const Table = props => {
|
|
|
117
120
|
}, [resizing]);
|
|
118
121
|
let m_pos; // Declare m_pos here so it's accessible in handleMouseMove
|
|
119
122
|
|
|
120
|
-
const pageCount = 3; // Set the desired number of pages
|
|
121
123
|
const pages = Array.from({
|
|
122
|
-
length:
|
|
124
|
+
length: rangePagination
|
|
123
125
|
}, (_, index) => index + 1);
|
|
124
126
|
return /*#__PURE__*/_react.default.createElement(_Table.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_Table.TableTag, {
|
|
125
127
|
width: width,
|
|
@@ -151,21 +153,21 @@ const Table = props => {
|
|
|
151
153
|
key: column
|
|
152
154
|
}, row[column])))))), showPagination && /*#__PURE__*/_react.default.createElement(_Table.Pagination, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
|
|
153
155
|
className: "double-arrow",
|
|
154
|
-
onClick: event => onPaginationClickHandler(event,
|
|
156
|
+
onClick: event => onPaginationClickHandler(event, 1)
|
|
155
157
|
}, "\xAB")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
|
|
156
158
|
className: "single-arrow",
|
|
157
|
-
onClick: event => onPaginationClickHandler(event,
|
|
159
|
+
onClick: event => onPaginationClickHandler(event, activePage - 1)
|
|
158
160
|
}, "\u2039")), pages.map(page => /*#__PURE__*/_react.default.createElement("li", {
|
|
159
161
|
key: page
|
|
160
162
|
}, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
|
|
161
|
-
className: page ===
|
|
163
|
+
className: page === activePage ? 'active' : '',
|
|
162
164
|
onClick: event => onPaginationClickHandler(event, page)
|
|
163
165
|
}, page))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
|
|
164
166
|
className: "single-arrow",
|
|
165
|
-
onClick: event => onPaginationClickHandler(event,
|
|
167
|
+
onClick: event => onPaginationClickHandler(event, activePage + 1)
|
|
166
168
|
}, "\u203A")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
|
|
167
169
|
className: "double-arrow",
|
|
168
|
-
onClick: event => onPaginationClickHandler(event,
|
|
170
|
+
onClick: event => onPaginationClickHandler(event, pages.length)
|
|
169
171
|
}, "\xBB"))));
|
|
170
172
|
};
|
|
171
173
|
exports.Table = Table;
|
|
@@ -185,5 +187,6 @@ Table.defaultProps = {
|
|
|
185
187
|
onPaginationClick: () => {},
|
|
186
188
|
showPagination: true,
|
|
187
189
|
sizingTable: true,
|
|
188
|
-
actionsColumn: true
|
|
190
|
+
actionsColumn: true,
|
|
191
|
+
rangePagination: 5
|
|
189
192
|
};
|
|
@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
|
|
7
7
|
const getCurrencySign = (currencyTypeToConvert, value) => {
|
|
8
8
|
if (value === undefined || value === null) {
|
|
9
|
-
return
|
|
9
|
+
return '';
|
|
10
10
|
}
|
|
11
11
|
if (isNaN(parseFloat(value))) {
|
|
12
|
-
return
|
|
12
|
+
return '';
|
|
13
13
|
}
|
|
14
|
-
if (!currencyTypeToConvert) return
|
|
15
|
-
let currencySign =
|
|
16
|
-
const currencyFormatter = new Intl.NumberFormat(
|
|
17
|
-
style:
|
|
14
|
+
if (!currencyTypeToConvert) return '';
|
|
15
|
+
let currencySign = '';
|
|
16
|
+
const currencyFormatter = new Intl.NumberFormat('en-US', {
|
|
17
|
+
style: 'currency',
|
|
18
18
|
currency: currencyTypeToConvert
|
|
19
19
|
});
|
|
20
20
|
currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
|
|
@@ -23,21 +23,21 @@ const getCurrencySign = (currencyTypeToConvert, value) => {
|
|
|
23
23
|
exports.getCurrencySign = getCurrencySign;
|
|
24
24
|
const getFormattedUnits = num => {
|
|
25
25
|
if (num === undefined || num === null) {
|
|
26
|
-
return
|
|
26
|
+
return '';
|
|
27
27
|
}
|
|
28
28
|
if (isNaN(parseFloat(num))) {
|
|
29
|
-
return
|
|
29
|
+
return '';
|
|
30
30
|
}
|
|
31
31
|
if (Math.abs(num) >= 1000000000) {
|
|
32
|
-
return
|
|
32
|
+
return 'B';
|
|
33
33
|
}
|
|
34
34
|
if (Math.abs(num) >= 1000000) {
|
|
35
|
-
return
|
|
35
|
+
return 'M';
|
|
36
36
|
}
|
|
37
37
|
if (Math.abs(num) >= 1000) {
|
|
38
|
-
return
|
|
38
|
+
return 'K';
|
|
39
39
|
}
|
|
40
|
-
return
|
|
40
|
+
return '';
|
|
41
41
|
};
|
|
42
42
|
exports.getFormattedUnits = getFormattedUnits;
|
|
43
43
|
const getFormattedValue = num => {
|
|
@@ -50,13 +50,13 @@ const getFormattedValue = num => {
|
|
|
50
50
|
|
|
51
51
|
// if (typeof num === 'number') {
|
|
52
52
|
if (Math.abs(num) >= 1000000000) {
|
|
53
|
-
return (num / 1000000000).toFixed(1).replace(/\.0$/,
|
|
53
|
+
return (num / 1000000000).toFixed(1).replace(/\.0$/, '');
|
|
54
54
|
}
|
|
55
55
|
if (Math.abs(num) >= 1000000) {
|
|
56
|
-
return (num / 1000000).toFixed(1).replace(/\.0$/,
|
|
56
|
+
return (num / 1000000).toFixed(1).replace(/\.0$/, '');
|
|
57
57
|
}
|
|
58
58
|
if (Math.abs(num) >= 1000) {
|
|
59
|
-
return (num / 1000).toFixed(1).replace(/\.0$/,
|
|
59
|
+
return (num / 1000).toFixed(1).replace(/\.0$/, '');
|
|
60
60
|
}
|
|
61
61
|
return num;
|
|
62
62
|
// }
|
|
@@ -65,7 +65,7 @@ exports.getFormattedValue = getFormattedValue;
|
|
|
65
65
|
const getNumberWithCommas = x => {
|
|
66
66
|
let param = x.toString();
|
|
67
67
|
const pattern = /(-?\d+)(\d{3})/;
|
|
68
|
-
while (pattern.test(param)) param = param.replace(pattern,
|
|
68
|
+
while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
|
|
69
69
|
return param;
|
|
70
70
|
};
|
|
71
71
|
exports.getNumberWithCommas = getNumberWithCommas;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sag_components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.451",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"author": "SAG",
|
|
15
15
|
"license": "ISC",
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"@babel/cli": "^7.23.
|
|
17
|
+
"@babel/cli": "^7.23.9",
|
|
18
18
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
19
|
-
"@babel/preset-env": "^7.23.
|
|
19
|
+
"@babel/preset-env": "^7.23.9",
|
|
20
20
|
"@babel/preset-react": "^7.23.3",
|
|
21
21
|
"@babel/preset-typescript": "^7.23.3",
|
|
22
22
|
"@storybook/addon-designs": "^7.0.9",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.11.3",
|
|
52
52
|
"@emotion/styled": "^11.11.0",
|
|
53
|
-
"@mui/icons-material": "^5.15.
|
|
54
|
-
"@mui/material": "^5.15.
|
|
53
|
+
"@mui/icons-material": "^5.15.7",
|
|
54
|
+
"@mui/material": "^5.15.7",
|
|
55
55
|
"@mui/x-date-pickers": "^6.18.6",
|
|
56
56
|
"classnames": "^2.3.2",
|
|
57
57
|
"dayjs": "^1.11.10",
|