@dxc-technology/halstack-react 0.0.0-ba36a4a → 0.0.0-ba408d4
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/BackgroundColorContext.js +50 -0
- package/ThemeContext.js +246 -0
- package/{dist/select/Select.js → V3Select/V3Select.js} +116 -246
- package/V3Select/index.d.ts +27 -0
- package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +14 -18
- package/V3Textarea/index.d.ts +27 -0
- package/{dist/accordion → accordion}/Accordion.js +23 -87
- package/accordion/index.d.ts +28 -0
- package/{dist/accordion-group → accordion-group}/AccordionGroup.js +13 -15
- package/accordion-group/index.d.ts +16 -0
- package/{dist/alert → alert}/Alert.js +42 -136
- package/alert/index.d.ts +51 -0
- package/badge/Badge.js +59 -0
- package/{dist/box → box}/Box.js +9 -13
- package/box/index.d.ts +25 -0
- package/button/Button.d.ts +4 -0
- package/{dist/button → button}/Button.js +16 -72
- package/button/Button.stories.tsx +306 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/{dist/card → card}/Card.js +19 -73
- package/card/index.d.ts +22 -0
- package/{dist/checkbox → checkbox}/Checkbox.js +16 -41
- package/checkbox/index.d.ts +24 -0
- package/{dist/chip → chip}/Chip.js +17 -61
- package/chip/index.d.ts +22 -0
- package/{dist/common → common}/OpenSans.css +0 -0
- package/{dist/common → common}/RequiredComponent.js +3 -11
- package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/{dist/common → common}/utils.js +0 -0
- package/{dist/common → common}/variables.js +347 -139
- package/{dist/date → date}/Date.js +20 -28
- package/date/index.d.ts +27 -0
- package/{dist/new-date/NewDate.js → date-input/DateInput.js} +85 -92
- package/date-input/index.d.ts +95 -0
- package/{dist/dialog → dialog}/Dialog.js +16 -50
- package/dialog/index.d.ts +18 -0
- package/{dist/dropdown → dropdown}/Dropdown.js +37 -131
- package/dropdown/index.d.ts +26 -0
- package/file-input/FileInput.js +532 -0
- package/file-input/FileItem.js +193 -0
- package/file-input/index.d.ts +81 -0
- package/{dist/footer → footer}/Footer.js +53 -151
- package/footer/Icons.js +77 -0
- package/footer/index.d.ts +25 -0
- package/header/Header.js +326 -0
- package/header/Icons.js +59 -0
- package/header/index.d.ts +25 -0
- package/{dist/heading → heading}/Heading.js +30 -72
- package/heading/index.d.ts +17 -0
- package/input-text/Icons.js +22 -0
- package/{dist/input-text → input-text}/InputText.js +37 -133
- package/input-text/index.d.ts +36 -0
- package/{dist/layout → layout}/ApplicationLayout.js +35 -131
- package/layout/Icons.js +55 -0
- package/{dist/link → link}/Link.js +20 -78
- package/link/index.d.ts +23 -0
- package/main.d.ts +44 -0
- package/{dist/main.js → main.js} +104 -92
- package/{dist/number/Number.js → number-input/NumberInput.js} +10 -20
- package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
- package/number-input/index.d.ts +113 -0
- package/package.json +31 -23
- package/paginator/Icons.js +66 -0
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +198 -0
- package/paginator/types.d.ts +38 -0
- package/paginator/types.js +5 -0
- package/{dist/password/Password.js → password-input/PasswordInput.js} +27 -28
- package/password-input/index.d.ts +94 -0
- package/{dist/progress-bar → progress-bar}/ProgressBar.js +18 -72
- package/progress-bar/index.d.ts +18 -0
- package/{dist/radio → radio}/Radio.js +12 -26
- package/radio/index.d.ts +23 -0
- package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
- package/resultsetTable/index.d.ts +19 -0
- package/select/Select.js +865 -0
- package/select/index.d.ts +131 -0
- package/{dist/sidenav → sidenav}/Sidenav.js +17 -49
- package/sidenav/index.d.ts +13 -0
- package/{dist/slider → slider}/Slider.js +79 -58
- package/slider/index.d.ts +29 -0
- package/{dist/spinner → spinner}/Spinner.js +38 -152
- package/spinner/index.d.ts +17 -0
- package/{dist/switch → switch}/Switch.js +12 -26
- package/switch/index.d.ts +24 -0
- package/{dist/table → table}/Table.js +10 -24
- package/table/index.d.ts +13 -0
- package/{dist/tabs → tabs}/Tabs.js +26 -110
- package/tabs/index.d.ts +19 -0
- package/{dist/tag → tag}/Tag.js +40 -120
- package/tag/index.d.ts +24 -0
- package/text-input/TextInput.js +825 -0
- package/text-input/index.d.ts +135 -0
- package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +81 -110
- package/textarea/index.d.ts +117 -0
- package/{dist/toggle → toggle}/Toggle.js +15 -49
- package/toggle/index.d.ts +21 -0
- package/toggle-group/ToggleGroup.js +243 -0
- package/toggle-group/index.d.ts +21 -0
- package/{dist/upload → upload}/Upload.js +11 -15
- package/upload/buttons-upload/ButtonsUpload.js +111 -0
- package/upload/buttons-upload/Icons.js +40 -0
- package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
- package/upload/dragAndDropArea/Icons.js +39 -0
- package/upload/file-upload/FileToUpload.js +115 -0
- package/upload/file-upload/Icons.js +66 -0
- package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
- package/upload/index.d.ts +15 -0
- package/upload/transaction/Icons.js +160 -0
- package/upload/transaction/Transaction.js +104 -0
- package/upload/transactions/Transactions.js +94 -0
- package/{dist/useTheme.js → useTheme.js} +0 -0
- package/wizard/Icons.js +65 -0
- package/{dist/wizard → wizard}/Wizard.js +32 -172
- package/wizard/index.d.ts +18 -0
- package/README.md +0 -66
- package/babel.config.js +0 -8
- package/dist/BackgroundColorContext.js +0 -46
- package/dist/ThemeContext.js +0 -240
- package/dist/badge/Badge.js +0 -63
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/readme.md +0 -73
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo.svg +0 -15
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.js +0 -403
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.svg +0 -8
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/InputText.stories.js +0 -209
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/link/readme.md +0 -51
- package/dist/new-input-text/NewInputText.js +0 -961
- package/dist/paginator/Paginator.js +0 -289
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/password/styles.css +0 -3
- package/dist/progress-bar/ProgressBar.stories.js +0 -280
- package/dist/progress-bar/readme.md +0 -63
- package/dist/radio/Radio.stories.js +0 -166
- package/dist/radio/readme.md +0 -70
- package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/select/Select.stories.js +0 -235
- package/dist/select/readme.md +0 -72
- package/dist/slider/Slider.stories.js +0 -241
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.stories.js +0 -183
- package/dist/spinner/readme.md +0 -65
- package/dist/switch/Switch.stories.js +0 -134
- package/dist/switch/readme.md +0 -133
- package/dist/tabs/Tabs.stories.js +0 -130
- package/dist/tabs/readme.md +0 -78
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/dist/tabs-for-sections/readme.md +0 -78
- package/dist/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/toggle-group/ToggleGroup.js +0 -223
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
- package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
- package/dist/upload/buttons-upload/upload-button.svg +0 -1
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
- package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
- package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
- package/dist/upload/file-upload/FileToUpload.js +0 -184
- package/dist/upload/file-upload/audio-icon.svg +0 -4
- package/dist/upload/file-upload/close.svg +0 -4
- package/dist/upload/file-upload/file-icon.svg +0 -4
- package/dist/upload/file-upload/video-icon.svg +0 -4
- package/dist/upload/readme.md +0 -37
- package/dist/upload/transaction/Transaction.js +0 -175
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/upload/transactions/Transactions.js +0 -138
- package/dist/wizard/invalid_icon.svg +0 -5
- package/dist/wizard/valid_icon.svg +0 -5
- package/dist/wizard/validation-wrong.svg +0 -6
- package/test/Accordion.test.js +0 -33
- package/test/AccordionGroup.test.js +0 -125
- package/test/Alert.test.js +0 -53
- package/test/Box.test.js +0 -10
- package/test/Button.test.js +0 -18
- package/test/Card.test.js +0 -30
- package/test/Checkbox.test.js +0 -45
- package/test/Chip.test.js +0 -25
- package/test/Date.test.js +0 -393
- package/test/Dialog.test.js +0 -23
- package/test/Dropdown.test.js +0 -145
- package/test/Footer.test.js +0 -99
- package/test/Header.test.js +0 -39
- package/test/Heading.test.js +0 -35
- package/test/InputText.test.js +0 -240
- package/test/Link.test.js +0 -43
- package/test/NewDate.test.js +0 -203
- package/test/NewInputText.test.js +0 -817
- package/test/NewTextarea.test.js +0 -201
- package/test/Number.test.js +0 -241
- package/test/Paginator.test.js +0 -177
- package/test/Password.test.js +0 -76
- package/test/ProgressBar.test.js +0 -35
- package/test/Radio.test.js +0 -37
- package/test/ResultsetTable.test.js +0 -330
- package/test/Select.test.js +0 -189
- package/test/Sidenav.test.js +0 -45
- package/test/Slider.test.js +0 -82
- package/test/Spinner.test.js +0 -32
- package/test/Switch.test.js +0 -45
- package/test/Table.test.js +0 -36
- package/test/Tabs.test.js +0 -109
- package/test/TabsForSections.test.js +0 -34
- package/test/Tag.test.js +0 -32
- package/test/TextArea.test.js +0 -52
- package/test/ToggleGroup.test.js +0 -81
- package/test/Upload.test.js +0 -60
- package/test/Wizard.test.js +0 -130
- package/test/mocks/pngMock.js +0 -1
- package/test/mocks/svgMock.js +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -29,65 +29,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
|
29
29
|
|
|
30
30
|
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"]);
|
|
34
|
-
|
|
35
|
-
_templateObject6 = function _templateObject6() {
|
|
36
|
-
return data;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
return data;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function _templateObject5() {
|
|
43
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"]);
|
|
44
|
-
|
|
45
|
-
_templateObject5 = function _templateObject5() {
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return data;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function _templateObject4() {
|
|
53
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-overflow: ellipsis;\n"]);
|
|
54
|
-
|
|
55
|
-
_templateObject4 = function _templateObject4() {
|
|
56
|
-
return data;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
return data;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function _templateObject3() {
|
|
63
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n width: 685px;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: 8px;\n align-items: baseline;\n justify-content: space-between;\n"]);
|
|
64
|
-
|
|
65
|
-
_templateObject3 = function _templateObject3() {
|
|
66
|
-
return data;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
return data;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function _templateObject2() {
|
|
73
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n .MuiLinearProgress-root {\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n }\n .MuiLinearProgress-bar {\n background-color: ", ";\n }\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
|
|
74
|
-
|
|
75
|
-
_templateObject2 = function _templateObject2() {
|
|
76
|
-
return data;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return data;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function _templateObject() {
|
|
83
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n"]);
|
|
32
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
84
33
|
|
|
85
|
-
|
|
86
|
-
return data;
|
|
87
|
-
};
|
|
34
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
88
35
|
|
|
89
|
-
|
|
90
|
-
}
|
|
36
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
91
37
|
|
|
92
38
|
var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
93
39
|
var _ref$label = _ref.label,
|
|
@@ -102,32 +48,32 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
|
102
48
|
margin = _ref.margin;
|
|
103
49
|
var colorsTheme = (0, _useTheme["default"])();
|
|
104
50
|
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
105
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
51
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
106
52
|
theme: colorsTheme.progressBar
|
|
107
|
-
}, _react["default"].createElement(BackgroundProgressBar, {
|
|
53
|
+
}, /*#__PURE__*/_react["default"].createElement(BackgroundProgressBar, {
|
|
108
54
|
overlay: overlay
|
|
109
|
-
}, _react["default"].createElement(DXCProgressBar, {
|
|
55
|
+
}, /*#__PURE__*/_react["default"].createElement(DXCProgressBar, {
|
|
110
56
|
overlay: overlay,
|
|
111
57
|
margin: margin,
|
|
112
58
|
backgroundType: backgroundType
|
|
113
|
-
}, _react["default"].createElement(InfoProgressBar, null, _react["default"].createElement(ProgressBarLabel, {
|
|
59
|
+
}, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
|
|
114
60
|
overlay: overlay,
|
|
115
61
|
backgroundType: backgroundType
|
|
116
|
-
}, label), _react["default"].createElement(ProgressBarProgress, {
|
|
62
|
+
}, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
|
|
117
63
|
overlay: overlay,
|
|
118
64
|
showValue: showValue,
|
|
119
65
|
backgroundType: backgroundType
|
|
120
|
-
}, value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), _react["default"].createElement(_LinearProgress["default"], {
|
|
66
|
+
}, value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
|
|
121
67
|
variant: showValue ? "determinate" : "indeterminate",
|
|
122
68
|
value: value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100,
|
|
123
69
|
helperText: helperText
|
|
124
|
-
}), helperText && _react["default"].createElement(HelperText, {
|
|
70
|
+
}), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
125
71
|
overlay: overlay,
|
|
126
72
|
backgroundType: backgroundType
|
|
127
73
|
}, helperText))));
|
|
128
74
|
};
|
|
129
75
|
|
|
130
|
-
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject(), function (props) {
|
|
76
|
+
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n width: 100%;\n"])), function (props) {
|
|
131
77
|
return props.overlay === true ? "".concat(props.theme.overlayColor) : "transparent";
|
|
132
78
|
}, function (props) {
|
|
133
79
|
return props.overlay === true && "0.8";
|
|
@@ -155,7 +101,7 @@ var BackgroundProgressBar = _styledComponents["default"].div(_templateObject(),
|
|
|
155
101
|
return props.overlay ? 1300 : "";
|
|
156
102
|
});
|
|
157
103
|
|
|
158
|
-
var DXCProgressBar = _styledComponents["default"].div(_templateObject2(), function (props) {
|
|
104
|
+
var DXCProgressBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n .MuiLinearProgress-root {\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n }\n .MuiLinearProgress-bar {\n background-color: ", ";\n }\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
159
105
|
return props.overlay === true && "100" || "0";
|
|
160
106
|
}, function (props) {
|
|
161
107
|
return props.overlay === true ? "80%" : "100%";
|
|
@@ -181,9 +127,9 @@ var DXCProgressBar = _styledComponents["default"].div(_templateObject2(), functi
|
|
|
181
127
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
182
128
|
});
|
|
183
129
|
|
|
184
|
-
var InfoProgressBar = _styledComponents["default"].div(_templateObject3());
|
|
130
|
+
var InfoProgressBar = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n width: 685px;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: 8px;\n align-items: baseline;\n justify-content: space-between;\n"])));
|
|
185
131
|
|
|
186
|
-
var ProgressBarLabel = _styledComponents["default"].div(_templateObject4(), function (props) {
|
|
132
|
+
var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
187
133
|
return props.theme.labelFontFamily;
|
|
188
134
|
}, function (props) {
|
|
189
135
|
return props.theme.labelFontStyle;
|
|
@@ -197,7 +143,7 @@ var ProgressBarLabel = _styledComponents["default"].div(_templateObject4(), func
|
|
|
197
143
|
return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.labelFontColor;
|
|
198
144
|
});
|
|
199
145
|
|
|
200
|
-
var ProgressBarProgress = _styledComponents["default"].div(_templateObject5(), function (props) {
|
|
146
|
+
var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"])), function (props) {
|
|
201
147
|
return props.theme.valueFontFamily;
|
|
202
148
|
}, function (props) {
|
|
203
149
|
return props.theme.valueFontStyle;
|
|
@@ -213,7 +159,7 @@ var ProgressBarProgress = _styledComponents["default"].div(_templateObject5(), f
|
|
|
213
159
|
return props.value !== "" && props.showValue === true && "block" || "none";
|
|
214
160
|
});
|
|
215
161
|
|
|
216
|
-
var HelperText = _styledComponents["default"].span(_templateObject6(), function (props) {
|
|
162
|
+
var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
217
163
|
return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.helperTextFontColor;
|
|
218
164
|
}, function (props) {
|
|
219
165
|
return props.theme.fontFamily;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
type Margin = {
|
|
3
|
+
top?: Space;
|
|
4
|
+
bottom?: Space;
|
|
5
|
+
left?: Space;
|
|
6
|
+
right?: Space;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
type Props = {
|
|
10
|
+
label?: string;
|
|
11
|
+
helperText?: string;
|
|
12
|
+
overlay?: boolean;
|
|
13
|
+
value?: number;
|
|
14
|
+
showValue?: boolean,
|
|
15
|
+
margin?: Space | Margin;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default function DxcProgressBar(props: Props): JSX.Element;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -35,25 +35,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
|
35
35
|
|
|
36
36
|
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n"]);
|
|
40
|
-
|
|
41
|
-
_templateObject2 = function _templateObject2() {
|
|
42
|
-
return data;
|
|
43
|
-
};
|
|
38
|
+
var _templateObject, _templateObject2;
|
|
44
39
|
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function _templateObject() {
|
|
49
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n\n display: inline-flex;\n align-items: center;\n max-height: 42px;\n position: relative;\n flex-direction: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n .MuiButtonBase-root {\n width: auto;\n height: auto;\n padding: 10px;\n margin: 2px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n .MuiIconButton-label {\n .MuiSvgIcon-root {\n height: ", ";\n width: ", ";\n }\n color: ", ";\n\n > div > :nth-child(2) path {\n color: ", ";\n }\n }\n\n &.Mui-focusVisible {\n background-color: transparent;\n .MuiSvgIcon-root {\n outline: ", "\n auto 1px;\n }\n }\n :hover {\n background-color: transparent;\n }\n .MuiTouchRipple-ripple {\n height: 40px !important;\n width: 40px !important;\n top: 0px !important;\n left: 0px !important;\n }\n }\n .MuiRadio-colorSecondary.Mui-checked {\n color: ", ";\n :hover {\n background-color: transparent;\n }\n }\n"]);
|
|
50
|
-
|
|
51
|
-
_templateObject = function _templateObject() {
|
|
52
|
-
return data;
|
|
53
|
-
};
|
|
40
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
54
41
|
|
|
55
|
-
|
|
56
|
-
}
|
|
42
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
57
43
|
|
|
58
44
|
var DxcRadio = function DxcRadio(_ref) {
|
|
59
45
|
var _ref$checked = _ref.checked,
|
|
@@ -90,16 +76,16 @@ var DxcRadio = function DxcRadio(_ref) {
|
|
|
90
76
|
}
|
|
91
77
|
};
|
|
92
78
|
|
|
93
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
79
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
94
80
|
theme: colorsTheme.radio
|
|
95
|
-
}, _react["default"].createElement(RadioContainer, {
|
|
81
|
+
}, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
|
|
96
82
|
id: name,
|
|
97
83
|
labelPosition: labelPosition,
|
|
98
84
|
disabled: disabled,
|
|
99
85
|
margin: margin,
|
|
100
86
|
size: size,
|
|
101
87
|
backgroundType: backgroundType
|
|
102
|
-
}, _react["default"].createElement(_Radio["default"], {
|
|
88
|
+
}, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
|
|
103
89
|
checked: checked != null && checked || innerChecked,
|
|
104
90
|
name: name,
|
|
105
91
|
onClick: handlerRadioChange,
|
|
@@ -107,13 +93,13 @@ var DxcRadio = function DxcRadio(_ref) {
|
|
|
107
93
|
label: label,
|
|
108
94
|
disabled: disabled,
|
|
109
95
|
disableRipple: true
|
|
110
|
-
}), _react["default"].createElement(LabelContainer, {
|
|
96
|
+
}), /*#__PURE__*/_react["default"].createElement(LabelContainer, {
|
|
111
97
|
checked: checked || innerChecked,
|
|
112
98
|
labelPosition: labelPosition,
|
|
113
99
|
disabled: disabled,
|
|
114
100
|
onClick: !disabled && handlerRadioChange || null,
|
|
115
101
|
backgroundType: backgroundType
|
|
116
|
-
}, required && _react["default"].createElement(_RequiredComponent["default"], null), label)));
|
|
102
|
+
}, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label)));
|
|
117
103
|
};
|
|
118
104
|
|
|
119
105
|
var sizes = {
|
|
@@ -132,7 +118,7 @@ var calculateWidth = function calculateWidth(margin, size) {
|
|
|
132
118
|
return sizes[size];
|
|
133
119
|
};
|
|
134
120
|
|
|
135
|
-
var RadioContainer = _styledComponents["default"].span(_templateObject(), function (props) {
|
|
121
|
+
var RadioContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n\n display: inline-flex;\n align-items: center;\n max-height: 42px;\n position: relative;\n flex-direction: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n .MuiButtonBase-root {\n width: auto;\n height: auto;\n padding: 10px;\n margin: 2px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n .MuiIconButton-label {\n .MuiSvgIcon-root {\n height: ", ";\n width: ", ";\n }\n color: ", ";\n\n > div > :nth-child(2) path {\n color: ", ";\n }\n }\n\n &.Mui-focusVisible {\n background-color: transparent;\n .MuiSvgIcon-root {\n outline: ", "\n auto 1px;\n }\n }\n :hover {\n background-color: transparent;\n }\n .MuiTouchRipple-ripple {\n height: 40px !important;\n width: 40px !important;\n top: 0px !important;\n left: 0px !important;\n }\n }\n .MuiRadio-colorSecondary.Mui-checked {\n color: ", ";\n :hover {\n background-color: transparent;\n }\n }\n"])), function (props) {
|
|
136
122
|
return calculateWidth(props.margin, props.size);
|
|
137
123
|
}, function (props) {
|
|
138
124
|
return props.labelPosition === "before" ? "row-reverse" : "row";
|
|
@@ -174,7 +160,7 @@ var RadioContainer = _styledComponents["default"].span(_templateObject(), functi
|
|
|
174
160
|
return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
|
|
175
161
|
});
|
|
176
162
|
|
|
177
|
-
var LabelContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
|
|
163
|
+
var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n"])), function (props) {
|
|
178
164
|
return props.theme.fontFamily;
|
|
179
165
|
}, function (props) {
|
|
180
166
|
return props.theme.fontSize;
|
package/radio/index.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
|
+
top?: Space;
|
|
5
|
+
bottom?: Space;
|
|
6
|
+
left?: Space;
|
|
7
|
+
right?: Space;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
type Props = {
|
|
11
|
+
checked?: boolean;
|
|
12
|
+
value?: any;
|
|
13
|
+
label?: string;
|
|
14
|
+
labelPosition?: "before" | "after";
|
|
15
|
+
name?: string,
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
onClick?: void;
|
|
18
|
+
required?: boolean;
|
|
19
|
+
margin?: Space | Margin;
|
|
20
|
+
size?: Size;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default function DxcRadio(props: Props): JSX.Element;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -31,95 +31,11 @@ var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
|
|
|
31
31
|
|
|
32
32
|
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n overflow: hidden;\n"]);
|
|
36
|
-
|
|
37
|
-
_templateObject9 = function _templateObject9() {
|
|
38
|
-
return data;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
return data;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
function _templateObject8() {
|
|
45
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 60px;\n"]);
|
|
46
|
-
|
|
47
|
-
_templateObject8 = function _templateObject8() {
|
|
48
|
-
return data;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
return data;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function _templateObject7() {
|
|
55
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n"]);
|
|
56
|
-
|
|
57
|
-
_templateObject7 = function _templateObject7() {
|
|
58
|
-
return data;
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
return data;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function _templateObject6() {
|
|
65
|
-
var data = (0, _taggedTemplateLiteral2["default"])([""]);
|
|
66
|
-
|
|
67
|
-
_templateObject6 = function _templateObject6() {
|
|
68
|
-
return data;
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
return data;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function _templateObject5() {
|
|
75
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: ", ";\n"]);
|
|
34
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
76
35
|
|
|
77
|
-
|
|
78
|
-
return data;
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
return data;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
function _templateObject4() {
|
|
85
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n top: 409px;\n left: 390px;\n height: 14px;\n cursor: pointer;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
|
|
86
|
-
|
|
87
|
-
_templateObject4 = function _templateObject4() {
|
|
88
|
-
return data;
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
return data;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function _templateObject3() {
|
|
95
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n > div:nth-child(1) {\n position: absolute;\n left: calc(50% - 68.5px);\n bottom: calc(50% - 68.5px - 30px);\n }\n & tr {\n height: ", ";\n }\n"]);
|
|
96
|
-
|
|
97
|
-
_templateObject3 = function _templateObject3() {
|
|
98
|
-
return data;
|
|
99
|
-
};
|
|
36
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
100
37
|
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
function _templateObject2() {
|
|
105
|
-
var data = (0, _taggedTemplateLiteral2["default"])([""]);
|
|
106
|
-
|
|
107
|
-
_templateObject2 = function _templateObject2() {
|
|
108
|
-
return data;
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
return data;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
function _templateObject() {
|
|
115
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n & table {\n table-layout: auto;\n }\n"]);
|
|
116
|
-
|
|
117
|
-
_templateObject = function _templateObject() {
|
|
118
|
-
return data;
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
return data;
|
|
122
|
-
}
|
|
38
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
123
39
|
|
|
124
40
|
function normalizeSortValue(sortValue) {
|
|
125
41
|
return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
|
|
@@ -154,46 +70,46 @@ var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIn
|
|
|
154
70
|
};
|
|
155
71
|
|
|
156
72
|
var ArrowUp = function ArrowUp() {
|
|
157
|
-
return _react["default"].createElement("svg", {
|
|
73
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
158
74
|
xmlns: "http://www.w3.org/2000/svg",
|
|
159
75
|
height: "24",
|
|
160
76
|
viewBox: "0 0 24 24",
|
|
161
77
|
width: "24",
|
|
162
78
|
fill: "currentColor"
|
|
163
|
-
}, _react["default"].createElement("path", {
|
|
79
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
164
80
|
d: "M0 0h24v24H0V0z",
|
|
165
81
|
fill: "none"
|
|
166
|
-
}), _react["default"].createElement("path", {
|
|
82
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
167
83
|
d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
|
|
168
84
|
}));
|
|
169
85
|
};
|
|
170
86
|
|
|
171
87
|
var ArrowDown = function ArrowDown() {
|
|
172
|
-
return _react["default"].createElement("svg", {
|
|
88
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
173
89
|
xmlns: "http://www.w3.org/2000/svg",
|
|
174
90
|
height: "24",
|
|
175
91
|
viewBox: "0 0 24 24",
|
|
176
92
|
width: "24",
|
|
177
93
|
fill: "currentColor"
|
|
178
|
-
}, _react["default"].createElement("path", {
|
|
94
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
179
95
|
d: "M0 0h24v24H0V0z",
|
|
180
96
|
fill: "none"
|
|
181
|
-
}), _react["default"].createElement("path", {
|
|
97
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
182
98
|
d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
183
99
|
}));
|
|
184
100
|
};
|
|
185
101
|
|
|
186
102
|
var BothArrows = function BothArrows() {
|
|
187
|
-
return _react["default"].createElement("svg", {
|
|
103
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
188
104
|
xmlns: "http://www.w3.org/2000/svg",
|
|
189
105
|
height: "24",
|
|
190
106
|
viewBox: "0 0 24 24",
|
|
191
107
|
width: "24",
|
|
192
108
|
fill: "currentColor"
|
|
193
|
-
}, _react["default"].createElement("path", {
|
|
109
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
194
110
|
d: "M0 0h24v24H0z",
|
|
195
111
|
fill: "none"
|
|
196
|
-
}), _react["default"].createElement("path", {
|
|
112
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
197
113
|
d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
|
|
198
114
|
}));
|
|
199
115
|
};
|
|
@@ -243,7 +159,7 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
|
243
159
|
};
|
|
244
160
|
|
|
245
161
|
var getIconForSortableColumn = function getIconForSortableColumn(clickedColumnIndex) {
|
|
246
|
-
return sortColumnIndex === clickedColumnIndex ? sortOrder === "asc" ? _react["default"].createElement(ArrowUp, null) : _react["default"].createElement(ArrowDown, null) : _react["default"].createElement(BothArrows, null);
|
|
162
|
+
return sortColumnIndex === clickedColumnIndex ? sortOrder === "asc" ? /*#__PURE__*/_react["default"].createElement(ArrowUp, null) : /*#__PURE__*/_react["default"].createElement(ArrowDown, null) : /*#__PURE__*/_react["default"].createElement(BothArrows, null);
|
|
247
163
|
};
|
|
248
164
|
|
|
249
165
|
(0, _react.useEffect)(function () {
|
|
@@ -259,31 +175,31 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
|
259
175
|
var filteredResultset = (0, _react.useMemo)(function () {
|
|
260
176
|
return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
|
|
261
177
|
}, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
|
|
262
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
178
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
263
179
|
theme: colorsTheme.table
|
|
264
|
-
}, _react["default"].createElement(DxcResultsetTableContainer, {
|
|
180
|
+
}, /*#__PURE__*/_react["default"].createElement(DxcResultsetTableContainer, {
|
|
265
181
|
margin: margin
|
|
266
|
-
}, _react["default"].createElement(TableContainer, null, _react["default"].createElement(_Table["default"], null, _react["default"].createElement(HeaderRow, null, _react["default"].createElement("tr", null, columns.map(function (column, index) {
|
|
267
|
-
return _react["default"].createElement(TableHeader, {
|
|
182
|
+
}, /*#__PURE__*/_react["default"].createElement(TableContainer, null, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement(HeaderRow, null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
|
|
183
|
+
return /*#__PURE__*/_react["default"].createElement(TableHeader, {
|
|
268
184
|
key: "tableHeader_".concat(index)
|
|
269
|
-
}, _react["default"].createElement(HeaderContainer, {
|
|
185
|
+
}, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
|
|
270
186
|
key: "headerContainer_".concat(index),
|
|
271
187
|
onClick: function onClick() {
|
|
272
188
|
return column.isSortable && changeSorting(index);
|
|
273
189
|
},
|
|
274
190
|
tabIndex: column.isSortable ? tabIndex : -1
|
|
275
|
-
}, _react["default"].createElement(TitleDiv, {
|
|
191
|
+
}, /*#__PURE__*/_react["default"].createElement(TitleDiv, {
|
|
276
192
|
isSortable: column.isSortable
|
|
277
|
-
}, column.displayValue), column.isSortable && _react["default"].createElement(SortIcon, null, getIconForSortableColumn(index))));
|
|
278
|
-
}))), _react["default"].createElement(TableRowGroup, null, filteredResultset.map(function (cells, index) {
|
|
279
|
-
return _react["default"].createElement("tr", {
|
|
193
|
+
}, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, getIconForSortableColumn(index))));
|
|
194
|
+
}))), /*#__PURE__*/_react["default"].createElement(TableRowGroup, null, filteredResultset.map(function (cells, index) {
|
|
195
|
+
return /*#__PURE__*/_react["default"].createElement("tr", {
|
|
280
196
|
key: "resultSetTableCell_".concat(index)
|
|
281
197
|
}, cells.map(function (cellContent, index) {
|
|
282
|
-
return _react["default"].createElement("td", {
|
|
198
|
+
return /*#__PURE__*/_react["default"].createElement("td", {
|
|
283
199
|
key: "resultSetTableCellContent_".concat(index)
|
|
284
200
|
}, cellContent.displayValue);
|
|
285
201
|
}));
|
|
286
|
-
})))), _react["default"].createElement(PaginatorContainer, null, _react["default"].createElement(_Paginator["default"], {
|
|
202
|
+
})))), /*#__PURE__*/_react["default"].createElement(PaginatorContainer, null, /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
|
|
287
203
|
totalItems: rows.length,
|
|
288
204
|
itemsPerPage: itemsPerPage,
|
|
289
205
|
itemsPerPageOptions: itemsPerPageOptions,
|
|
@@ -295,31 +211,31 @@ var DxcResultsetTable = function DxcResultsetTable(_ref) {
|
|
|
295
211
|
}))));
|
|
296
212
|
};
|
|
297
213
|
|
|
298
|
-
var TableContainer = _styledComponents["default"].div(_templateObject());
|
|
214
|
+
var TableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & table {\n table-layout: auto;\n }\n"])));
|
|
299
215
|
|
|
300
|
-
var PaginatorContainer = _styledComponents["default"].div(_templateObject2());
|
|
216
|
+
var PaginatorContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
301
217
|
|
|
302
|
-
var TableRowGroup = _styledComponents["default"].tbody(_templateObject3(), function (props) {
|
|
218
|
+
var TableRowGroup = _styledComponents["default"].tbody(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n > div:nth-child(1) {\n position: absolute;\n left: calc(50% - 68.5px);\n bottom: calc(50% - 68.5px - 30px);\n }\n & tr {\n height: ", ";\n }\n"])), function (props) {
|
|
303
219
|
return props.theme.rowHeight || "70px";
|
|
304
220
|
});
|
|
305
221
|
|
|
306
|
-
var SortIcon = _styledComponents["default"].div(_templateObject4(), function (props) {
|
|
222
|
+
var SortIcon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n top: 409px;\n left: 390px;\n height: 14px;\n cursor: pointer;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
307
223
|
return props.theme.sortIconColor;
|
|
308
224
|
});
|
|
309
225
|
|
|
310
|
-
var TitleDiv = _styledComponents["default"].div(_templateObject5(), function (props) {
|
|
226
|
+
var TitleDiv = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: ", ";\n"])), function (props) {
|
|
311
227
|
return props.isSortable && "pointer" || "default";
|
|
312
228
|
});
|
|
313
229
|
|
|
314
|
-
var TableHeader = _styledComponents["default"].th(_templateObject6());
|
|
230
|
+
var TableHeader = _styledComponents["default"].th(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
315
231
|
|
|
316
|
-
var HeaderContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
|
|
232
|
+
var HeaderContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n"])), function (props) {
|
|
317
233
|
return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
|
|
318
234
|
});
|
|
319
235
|
|
|
320
|
-
var HeaderRow = _styledComponents["default"].thead(_templateObject8());
|
|
236
|
+
var HeaderRow = _styledComponents["default"].thead(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n height: 60px;\n"])));
|
|
321
237
|
|
|
322
|
-
var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject9(), function (props) {
|
|
238
|
+
var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
323
239
|
return props.theme.fontSizeBase;
|
|
324
240
|
}, function (props) {
|
|
325
241
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
type Margin = {
|
|
3
|
+
top?: Space;
|
|
4
|
+
bottom?: Space;
|
|
5
|
+
left?: Space;
|
|
6
|
+
right?: Space;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
type Props = {
|
|
10
|
+
columns?: any;
|
|
11
|
+
rows?: any;
|
|
12
|
+
itemsPerPage?: number;
|
|
13
|
+
itemsPerPageOptions?: number[];
|
|
14
|
+
itemsPerPageFunction?: void,
|
|
15
|
+
margin?: Space | Margin;
|
|
16
|
+
tabIndex?: number;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export default function DxcResultsetTable(props: Props): JSX.Element;
|