@dxc-technology/halstack-react 0.0.0-227874a → 0.0.0-2480494
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 +8 -4
- package/ThemeContext.js +84 -88
- package/V3Select/V3Select.js +33 -127
- package/V3Textarea/V3Textarea.js +10 -14
- package/accordion/Accordion.d.ts +4 -0
- package/accordion/Accordion.js +35 -130
- package/accordion/types.d.ts +68 -0
- package/accordion/types.js +5 -0
- package/accordion-group/AccordionGroup.d.ts +7 -0
- package/accordion-group/AccordionGroup.js +65 -81
- package/accordion-group/types.d.ts +72 -0
- package/accordion-group/types.js +5 -0
- package/alert/Alert.d.ts +4 -0
- package/alert/Alert.js +38 -151
- package/alert/Alert.stories.tsx +170 -0
- package/alert/types.d.ts +49 -0
- package/alert/types.js +5 -0
- package/badge/Badge.js +9 -13
- package/box/Box.d.ts +4 -0
- package/box/Box.js +13 -43
- package/box/Box.stories.tsx +132 -0
- package/box/types.d.ts +43 -0
- package/box/types.js +5 -0
- package/button/Button.d.ts +4 -0
- package/button/Button.js +22 -81
- package/button/Button.stories.tsx +276 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/card/Card.d.ts +4 -0
- package/card/Card.js +33 -123
- package/card/Card.stories.tsx +201 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +67 -0
- package/card/types.js +5 -0
- package/checkbox/Checkbox.d.ts +4 -0
- package/checkbox/Checkbox.js +13 -59
- package/checkbox/Checkbox.stories.tsx +192 -0
- package/checkbox/types.d.ts +60 -0
- package/checkbox/types.js +5 -0
- package/chip/Chip.js +17 -61
- package/chip/Chip.stories.tsx +121 -0
- package/common/RequiredComponent.js +3 -11
- package/common/variables.js +57 -46
- package/date/Date.js +16 -22
- package/date-input/DateInput.d.ts +4 -0
- package/date-input/DateInput.js +22 -61
- package/date-input/DateInput.stories.tsx +138 -0
- package/date-input/types.d.ts +100 -0
- package/date-input/types.js +5 -0
- package/dialog/Dialog.d.ts +4 -0
- package/dialog/Dialog.js +20 -73
- package/dialog/Dialog.stories.tsx +212 -0
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/dropdown/Dropdown.d.ts +4 -0
- package/dropdown/Dropdown.js +44 -171
- package/dropdown/types.d.ts +89 -0
- package/dropdown/types.js +5 -0
- package/file-input/FileInput.d.ts +4 -0
- package/file-input/FileInput.js +55 -188
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +33 -138
- package/file-input/types.d.ts +87 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +4 -0
- package/footer/Footer.js +38 -193
- package/footer/Footer.stories.jsx +151 -0
- package/footer/Icons.js +13 -13
- package/footer/types.d.ts +61 -0
- package/footer/types.js +5 -0
- package/header/Header.d.ts +7 -0
- package/header/Header.js +60 -206
- package/header/Header.stories.tsx +162 -0
- package/header/Icons.js +7 -32
- package/header/types.d.ts +47 -0
- package/header/types.js +5 -0
- package/heading/Heading.d.ts +4 -0
- package/heading/Heading.js +24 -95
- package/heading/Heading.stories.tsx +53 -0
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/input-text/Icons.js +2 -2
- package/input-text/InputText.js +36 -130
- package/input-text/index.d.ts +1 -1
- package/layout/ApplicationLayout.js +31 -123
- package/layout/Icons.js +7 -7
- package/link/Link.d.ts +3 -0
- package/link/Link.js +18 -94
- package/link/Link.stories.tsx +146 -0
- package/link/types.d.ts +74 -0
- package/link/types.js +5 -0
- package/main.d.ts +44 -40
- package/main.js +91 -87
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +7 -57
- package/number-input/NumberInput.stories.tsx +115 -0
- package/number-input/NumberInputContext.d.ts +4 -0
- package/number-input/NumberInputContext.js +5 -2
- package/number-input/numberInputContextTypes.d.ts +19 -0
- package/number-input/numberInputContextTypes.js +5 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +15 -12
- package/paginator/Icons.js +9 -9
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +24 -131
- package/paginator/Paginator.stories.tsx +63 -0
- package/paginator/types.d.ts +38 -0
- package/paginator/types.js +5 -0
- package/password-input/PasswordInput.d.ts +4 -0
- package/password-input/PasswordInput.js +22 -61
- package/password-input/PasswordInput.stories.tsx +131 -0
- package/password-input/types.d.ts +107 -0
- package/password-input/types.js +5 -0
- package/progress-bar/ProgressBar.d.ts +4 -0
- package/progress-bar/ProgressBar.js +20 -92
- package/progress-bar/ProgressBar.stories.jsx +58 -0
- package/progress-bar/types.d.ts +37 -0
- package/progress-bar/types.js +5 -0
- package/radio/Radio.d.ts +4 -0
- package/radio/Radio.js +15 -50
- package/radio/Radio.stories.tsx +192 -0
- package/radio/types.d.ts +54 -0
- package/radio/types.js +5 -0
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/resultsetTable/ResultsetTable.js +38 -145
- package/resultsetTable/types.d.ts +67 -0
- package/resultsetTable/types.js +5 -0
- package/select/Select.js +194 -465
- package/select/Select.stories.tsx +572 -0
- package/select/index.d.ts +4 -4
- package/sidenav/Sidenav.d.ts +9 -0
- package/sidenav/Sidenav.js +19 -62
- package/sidenav/Sidenav.stories.tsx +165 -0
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/slider/Slider.d.ts +4 -0
- package/slider/Slider.js +72 -159
- package/slider/Slider.stories.tsx +177 -0
- package/slider/types.d.ts +78 -0
- package/slider/types.js +5 -0
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +43 -174
- package/spinner/Spinner.stories.jsx +102 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/switch/Switch.d.ts +4 -0
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +160 -0
- package/switch/types.d.ts +58 -0
- package/switch/types.js +5 -0
- package/table/Table.d.ts +4 -0
- package/table/Table.js +10 -24
- package/table/Table.stories.jsx +276 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tabs/Tabs.d.ts +4 -0
- package/tabs/Tabs.js +31 -161
- package/tabs/Tabs.stories.tsx +121 -0
- package/tabs/types.d.ts +70 -0
- package/tabs/types.js +5 -0
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +37 -126
- package/tag/Tag.stories.tsx +145 -0
- package/tag/types.d.ts +60 -0
- package/tag/types.js +5 -0
- package/text-input/TextInput.d.ts +4 -0
- package/text-input/TextInput.js +120 -324
- package/text-input/types.d.ts +159 -0
- package/text-input/types.js +5 -0
- package/textarea/Textarea.js +20 -72
- package/textarea/Textarea.stories.jsx +135 -0
- package/toggle/Toggle.js +15 -49
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/toggle-group/ToggleGroup.js +28 -138
- package/toggle-group/ToggleGroup.stories.tsx +178 -0
- package/toggle-group/types.d.ts +84 -0
- package/toggle-group/types.js +5 -0
- package/upload/Upload.js +11 -15
- package/upload/buttons-upload/ButtonsUpload.js +13 -37
- package/upload/buttons-upload/Icons.js +7 -7
- package/upload/dragAndDropArea/DragAndDropArea.js +24 -128
- package/upload/dragAndDropArea/Icons.js +6 -6
- package/upload/file-upload/FileToUpload.js +16 -90
- package/upload/file-upload/Icons.js +13 -13
- package/upload/files-upload/FilesToUpload.js +12 -26
- package/upload/transaction/Icons.js +31 -31
- package/upload/transaction/Transaction.js +17 -61
- package/upload/transactions/Transactions.js +13 -57
- package/wizard/Icons.js +8 -8
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +32 -206
- package/wizard/Wizard.stories.jsx +224 -0
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/accordion/index.d.ts +0 -28
- package/accordion-group/index.d.ts +0 -16
- package/alert/index.d.ts +0 -51
- package/box/index.d.ts +0 -25
- package/button/Button.stories.js +0 -27
- package/button/index.d.ts +0 -24
- package/card/index.d.ts +0 -22
- package/checkbox/index.d.ts +0 -24
- package/date-input/index.d.ts +0 -95
- package/dialog/index.d.ts +0 -18
- package/dropdown/index.d.ts +0 -26
- package/file-input/index.d.ts +0 -81
- package/footer/index.d.ts +0 -25
- package/header/index.d.ts +0 -25
- package/heading/index.d.ts +0 -17
- package/link/index.d.ts +0 -23
- package/number-input/index.d.ts +0 -113
- package/paginator/index.d.ts +0 -20
- package/password-input/index.d.ts +0 -94
- package/progress-bar/index.d.ts +0 -18
- package/radio/index.d.ts +0 -23
- package/resultsetTable/index.d.ts +0 -19
- package/sidenav/index.d.ts +0 -13
- package/slider/index.d.ts +0 -29
- package/spinner/index.d.ts +0 -17
- package/switch/index.d.ts +0 -24
- package/table/index.d.ts +0 -13
- package/tabs/index.d.ts +0 -19
- package/tag/index.d.ts +0 -24
- package/text-input/index.d.ts +0 -135
- package/toggle-group/index.d.ts +0 -21
- package/wizard/index.d.ts +0 -18
package/date/Date.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
6
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
@@ -41,17 +41,11 @@ var _variables = require("../common/variables.js");
|
|
|
41
41
|
|
|
42
42
|
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
43
43
|
|
|
44
|
-
var _DxcDate$propTypes;
|
|
44
|
+
var _templateObject, _DxcDate$propTypes;
|
|
45
45
|
|
|
46
|
-
function
|
|
47
|
-
var data = (0, _taggedTemplateLiteral2["default"])([""]);
|
|
46
|
+
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); }
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
return data;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
return data;
|
|
54
|
-
}
|
|
48
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
|
55
49
|
|
|
56
50
|
var DxcDate = function DxcDate(_ref) {
|
|
57
51
|
var value = _ref.value,
|
|
@@ -142,16 +136,16 @@ var DxcDate = function DxcDate(_ref) {
|
|
|
142
136
|
};
|
|
143
137
|
|
|
144
138
|
var calendarSVG = function calendarSVG() {
|
|
145
|
-
return _react["default"].createElement("svg", {
|
|
139
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
146
140
|
xmlns: "http://www.w3.org/2000/svg",
|
|
147
141
|
height: "24",
|
|
148
142
|
viewBox: "0 0 24 24",
|
|
149
143
|
width: "24",
|
|
150
144
|
fill: "currentColor"
|
|
151
|
-
}, _react["default"].createElement("path", {
|
|
145
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
152
146
|
"data-testid": "calendarIcon",
|
|
153
147
|
d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
|
|
154
|
-
}), _react["default"].createElement("path", {
|
|
148
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
155
149
|
d: "M0 0h24v24H0z",
|
|
156
150
|
fill: "none"
|
|
157
151
|
}));
|
|
@@ -295,15 +289,15 @@ var DxcDate = function DxcDate(_ref) {
|
|
|
295
289
|
}
|
|
296
290
|
}
|
|
297
291
|
});
|
|
298
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
292
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
299
293
|
theme: colorsTheme
|
|
300
|
-
}, _react["default"].createElement(_core.MuiThemeProvider, {
|
|
294
|
+
}, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
|
|
301
295
|
theme: dateTheme
|
|
302
|
-
}, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
|
|
296
|
+
}, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
|
|
303
297
|
utils: _dateFns["default"]
|
|
304
|
-
}, _react["default"].createElement(StyledDPicker, {
|
|
298
|
+
}, /*#__PURE__*/_react["default"].createElement(StyledDPicker, {
|
|
305
299
|
margin: margin
|
|
306
|
-
}, _react["default"].createElement(_InputText["default"], {
|
|
300
|
+
}, /*#__PURE__*/_react["default"].createElement(_InputText["default"], {
|
|
307
301
|
label: label,
|
|
308
302
|
name: name,
|
|
309
303
|
suffixIcon: calendarSVG,
|
|
@@ -319,7 +313,7 @@ var DxcDate = function DxcDate(_ref) {
|
|
|
319
313
|
onChange: onChangeInput,
|
|
320
314
|
onBlur: onBlur && handlerInputBlur || null,
|
|
321
315
|
tabIndex: tabIndex
|
|
322
|
-
}), _react["default"].createElement(_Popover["default"], {
|
|
316
|
+
}), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
|
|
323
317
|
open: isOpen,
|
|
324
318
|
anchorEl: anchorEl,
|
|
325
319
|
anchorOrigin: {
|
|
@@ -335,9 +329,9 @@ var DxcDate = function DxcDate(_ref) {
|
|
|
335
329
|
marginTop: "10px"
|
|
336
330
|
}
|
|
337
331
|
}
|
|
338
|
-
}, _react["default"].createElement(_ClickAwayListener["default"], {
|
|
332
|
+
}, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
|
|
339
333
|
onClickAway: handlerPickerClose
|
|
340
|
-
}, _react["default"].createElement(_core.Paper, null, _react["default"].createElement(_pickers.DatePicker, {
|
|
334
|
+
}, /*#__PURE__*/_react["default"].createElement(_core.Paper, null, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
|
|
341
335
|
variant: "static",
|
|
342
336
|
value: getValueForPicker(),
|
|
343
337
|
onChange: function onChange(date) {
|
|
@@ -354,7 +348,7 @@ var sizes = {
|
|
|
354
348
|
fillParent: "100%"
|
|
355
349
|
};
|
|
356
350
|
|
|
357
|
-
var StyledDPicker = _styledComponents["default"].div(_templateObject());
|
|
351
|
+
var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
358
352
|
|
|
359
353
|
DxcDate.propTypes = (_DxcDate$propTypes = {
|
|
360
354
|
value: _propTypes["default"].string,
|
package/date-input/DateInput.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
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 _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
13
|
|
|
16
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -31,25 +29,17 @@ var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
|
|
|
31
29
|
|
|
32
30
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
33
31
|
|
|
34
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
35
|
-
|
|
36
|
-
var _variables = require("../common/variables.js");
|
|
37
|
-
|
|
38
32
|
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
39
33
|
|
|
40
34
|
var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
|
|
41
35
|
|
|
42
|
-
|
|
43
|
-
var data = (0, _taggedTemplateLiteral2["default"])([""]);
|
|
36
|
+
var _templateObject;
|
|
44
37
|
|
|
45
|
-
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
38
|
+
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); }
|
|
48
39
|
|
|
49
|
-
|
|
50
|
-
}
|
|
40
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
|
51
41
|
|
|
52
|
-
var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
42
|
+
var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
53
43
|
var _ref$label = _ref.label,
|
|
54
44
|
label = _ref$label === void 0 ? "" : _ref$label,
|
|
55
45
|
_ref$name = _ref.name,
|
|
@@ -112,7 +102,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
112
102
|
onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
113
103
|
value: newValue,
|
|
114
104
|
error: null,
|
|
115
|
-
date: newDate && newDate.toJSON() ? newDate : null
|
|
105
|
+
date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
|
|
116
106
|
});
|
|
117
107
|
};
|
|
118
108
|
|
|
@@ -125,7 +115,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
125
115
|
onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
126
116
|
value: newValue,
|
|
127
117
|
error: inputError || invalidDateMessage,
|
|
128
|
-
date: momentDate.isValid() ? momentDate.
|
|
118
|
+
date: momentDate.isValid() ? momentDate.toDate() : null
|
|
129
119
|
});
|
|
130
120
|
};
|
|
131
121
|
|
|
@@ -137,7 +127,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
137
127
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
138
128
|
value: value,
|
|
139
129
|
error: inputError || invalidDateMessage,
|
|
140
|
-
date: momentDate.isValid() ? momentDate.
|
|
130
|
+
date: momentDate.isValid() ? momentDate.toDate() : null
|
|
141
131
|
});
|
|
142
132
|
};
|
|
143
133
|
|
|
@@ -158,16 +148,16 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
158
148
|
|
|
159
149
|
var calendarAction = {
|
|
160
150
|
onClick: openCalendar,
|
|
161
|
-
icon: _react["default"].createElement("svg", {
|
|
151
|
+
icon: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
162
152
|
xmlns: "http://www.w3.org/2000/svg",
|
|
163
153
|
height: "24",
|
|
164
154
|
viewBox: "0 0 24 24",
|
|
165
155
|
width: "24",
|
|
166
156
|
fill: "currentColor"
|
|
167
|
-
}, _react["default"].createElement("path", {
|
|
157
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
168
158
|
d: "M0 0h24v24H0z",
|
|
169
159
|
fill: "none"
|
|
170
|
-
}), _react["default"].createElement("path", {
|
|
160
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
171
161
|
d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
|
|
172
162
|
}))
|
|
173
163
|
};
|
|
@@ -308,13 +298,13 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
308
298
|
}
|
|
309
299
|
}
|
|
310
300
|
});
|
|
311
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
301
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
312
302
|
theme: colorsTheme
|
|
313
|
-
}, _react["default"].createElement(_core.MuiThemeProvider, {
|
|
303
|
+
}, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
|
|
314
304
|
theme: dateTheme
|
|
315
|
-
}, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
|
|
305
|
+
}, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
|
|
316
306
|
utils: _dateFns["default"]
|
|
317
|
-
}, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_TextInput["default"], {
|
|
307
|
+
}, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
318
308
|
label: label,
|
|
319
309
|
name: name,
|
|
320
310
|
value: value !== null && value !== void 0 ? value : innerValue,
|
|
@@ -332,7 +322,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
332
322
|
size: size,
|
|
333
323
|
tabIndex: tabIndex,
|
|
334
324
|
ref: ref
|
|
335
|
-
}), _react["default"].createElement(_Popover["default"], {
|
|
325
|
+
}), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
|
|
336
326
|
onKeyDown: handleCalendarOnKeyDown,
|
|
337
327
|
open: isOpen,
|
|
338
328
|
anchorEl: anchorEl,
|
|
@@ -349,12 +339,12 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
349
339
|
marginTop: "10px"
|
|
350
340
|
}
|
|
351
341
|
}
|
|
352
|
-
}, _react["default"].createElement(_ClickAwayListener["default"], {
|
|
342
|
+
}, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
|
|
353
343
|
onClickAway: closeCalendar
|
|
354
|
-
}, _react["default"].createElement(_core.Paper, {
|
|
344
|
+
}, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
|
|
355
345
|
role: "dialog",
|
|
356
346
|
"aria-modal": "true"
|
|
357
|
-
}, _react["default"].createElement(_pickers.DatePicker, {
|
|
347
|
+
}, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
|
|
358
348
|
variant: "static",
|
|
359
349
|
value: getValueForPicker(),
|
|
360
350
|
onChange: function onChange(date) {
|
|
@@ -365,36 +355,7 @@ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
365
355
|
}))))))));
|
|
366
356
|
});
|
|
367
357
|
|
|
368
|
-
var
|
|
369
|
-
|
|
370
|
-
large: "480px",
|
|
371
|
-
fillParent: "100%"
|
|
372
|
-
};
|
|
373
|
-
|
|
374
|
-
var StyledDPicker = _styledComponents["default"].div(_templateObject());
|
|
375
|
-
|
|
376
|
-
DxcDateInput.propTypes = {
|
|
377
|
-
label: _propTypes["default"].string,
|
|
378
|
-
name: _propTypes["default"].string,
|
|
379
|
-
value: _propTypes["default"].string,
|
|
380
|
-
format: _propTypes["default"].string,
|
|
381
|
-
helperText: _propTypes["default"].string,
|
|
382
|
-
placeholder: _propTypes["default"].bool,
|
|
383
|
-
clearable: _propTypes["default"].bool,
|
|
384
|
-
disabled: _propTypes["default"].bool,
|
|
385
|
-
optional: _propTypes["default"].bool,
|
|
386
|
-
onChange: _propTypes["default"].func,
|
|
387
|
-
onBlur: _propTypes["default"].func,
|
|
388
|
-
error: _propTypes["default"].string,
|
|
389
|
-
autocomplete: _propTypes["default"].string,
|
|
390
|
-
size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
|
|
391
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
392
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
393
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
394
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
395
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
396
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
397
|
-
tabIndex: _propTypes["default"].number
|
|
398
|
-
};
|
|
358
|
+
var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
359
|
+
|
|
399
360
|
var _default = DxcDateInput;
|
|
400
361
|
exports["default"] = _default;
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
|
|
3
|
+
import DxcDateInput from "./DateInput";
|
|
4
|
+
import Title from "../../.storybook/components/Title";
|
|
5
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
+
import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
7
|
+
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
title: "Date input",
|
|
11
|
+
component: DxcDateInput,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export const Chromatic = () => (
|
|
15
|
+
<>
|
|
16
|
+
<ExampleContainer>
|
|
17
|
+
<Title title="Complete date input" theme="light" level={4} />
|
|
18
|
+
<DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
|
|
19
|
+
</ExampleContainer>
|
|
20
|
+
<ExampleContainer>
|
|
21
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
22
|
+
<DxcDateInput label="Disabled date input" helperText="Help message" value="06-04-2027" clearable disabled />
|
|
23
|
+
</ExampleContainer>
|
|
24
|
+
<ExampleContainer>
|
|
25
|
+
<Title title="Invalid" theme="light" level={4} />
|
|
26
|
+
<DxcDateInput label="Error date input" error="Error message." placeholder />
|
|
27
|
+
</ExampleContainer>
|
|
28
|
+
<ExampleContainer>
|
|
29
|
+
<Title title="Relation between icons" theme="light" level={4} />
|
|
30
|
+
<DxcDateInput label="Error date input" error="Error message." value="06-04-2027" clearable />
|
|
31
|
+
</ExampleContainer>
|
|
32
|
+
<BackgroundColorProvider color="#333333">
|
|
33
|
+
<DarkContainer>
|
|
34
|
+
<Title title="Dark" theme="dark" level={2} />
|
|
35
|
+
<ExampleContainer>
|
|
36
|
+
<Title title="Complete date input" theme="dark" level={4} />
|
|
37
|
+
<DxcDateInput label="Date input" helperText="Help message" format="yyyy/dd/mm" placeholder optional />
|
|
38
|
+
</ExampleContainer>
|
|
39
|
+
<ExampleContainer>
|
|
40
|
+
<Title title="Disabled" theme="dark" level={4} />
|
|
41
|
+
<DxcDateInput label="Disabled Date input" helperText="Help message" value="06-04-2027" clearable disabled />
|
|
42
|
+
</ExampleContainer>
|
|
43
|
+
<ExampleContainer>
|
|
44
|
+
<Title title="Invalid" theme="dark" level={4} />
|
|
45
|
+
<DxcDateInput label="Error date input" error="Error message." placeholder />
|
|
46
|
+
</ExampleContainer>
|
|
47
|
+
<ExampleContainer>
|
|
48
|
+
<Title title="Relation between icons" theme="dark" level={4} />
|
|
49
|
+
<DxcDateInput label="Error date input" value="06-04-2027" error="Error message." clearable />
|
|
50
|
+
</ExampleContainer>
|
|
51
|
+
</DarkContainer>
|
|
52
|
+
</BackgroundColorProvider>
|
|
53
|
+
<Title title="Margins" theme="light" level={2} />
|
|
54
|
+
<ExampleContainer>
|
|
55
|
+
<Title title="Xxsmall" theme="light" level={4} />
|
|
56
|
+
<DxcDateInput label="Xxsmall" margin="xxsmall" />
|
|
57
|
+
</ExampleContainer>
|
|
58
|
+
<ExampleContainer>
|
|
59
|
+
<Title title="Xsmall" theme="light" level={4} />
|
|
60
|
+
<DxcDateInput label="Xsmall" margin="xsmall" />
|
|
61
|
+
</ExampleContainer>
|
|
62
|
+
<ExampleContainer>
|
|
63
|
+
<Title title="Small" theme="light" level={4} />
|
|
64
|
+
<DxcDateInput label="Small" margin="small" />
|
|
65
|
+
</ExampleContainer>
|
|
66
|
+
<ExampleContainer>
|
|
67
|
+
<Title title="Medium" theme="light" level={4} />
|
|
68
|
+
<DxcDateInput label="Medium" margin="medium" />
|
|
69
|
+
</ExampleContainer>
|
|
70
|
+
<ExampleContainer>
|
|
71
|
+
<Title title="Large" theme="light" level={4} />
|
|
72
|
+
<DxcDateInput label="Large" margin="large" />
|
|
73
|
+
</ExampleContainer>
|
|
74
|
+
<ExampleContainer>
|
|
75
|
+
<Title title="Xlarge" theme="light" level={4} />
|
|
76
|
+
<DxcDateInput label="Xlarge" margin="xlarge" />
|
|
77
|
+
</ExampleContainer>
|
|
78
|
+
<ExampleContainer>
|
|
79
|
+
<Title title="Xxlarge" theme="light" level={4} />
|
|
80
|
+
<DxcDateInput label="Xxlarge" margin="xxlarge" />
|
|
81
|
+
</ExampleContainer>
|
|
82
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
83
|
+
<ExampleContainer>
|
|
84
|
+
<Title title="Medium size" theme="light" level={4} />
|
|
85
|
+
<DxcDateInput label="Medium" size="medium" />
|
|
86
|
+
</ExampleContainer>
|
|
87
|
+
<ExampleContainer>
|
|
88
|
+
<Title title="Large size" theme="light" level={4} />
|
|
89
|
+
<DxcDateInput label="Large" size="large" />
|
|
90
|
+
</ExampleContainer>
|
|
91
|
+
<ExampleContainer>
|
|
92
|
+
<Title title="FillParent size" theme="light" level={4} />
|
|
93
|
+
<DxcDateInput label="FillParent" size="fillParent" />
|
|
94
|
+
</ExampleContainer>
|
|
95
|
+
</>
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
const DatePicker = () => (
|
|
99
|
+
<ExampleContainer expanded>
|
|
100
|
+
<Title title="Show date input" theme="light" level={4} />
|
|
101
|
+
<DxcDateInput label="Date input" value="10-06-2023" />
|
|
102
|
+
</ExampleContainer>
|
|
103
|
+
);
|
|
104
|
+
|
|
105
|
+
export const ShowDatePicker = DatePicker.bind({});
|
|
106
|
+
ShowDatePicker.play = async ({ canvasElement }) => {
|
|
107
|
+
const canvas = within(canvasElement);
|
|
108
|
+
const dateBtn = canvas.getByRole("button");
|
|
109
|
+
await userEvent.click(dateBtn);
|
|
110
|
+
await userEvent.tab();
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const YearPicker = () => (
|
|
114
|
+
<ExampleContainer expanded>
|
|
115
|
+
<Title title="Show date input" theme="light" level={4} />
|
|
116
|
+
<DxcDateInput label="Date input" value="10-06-2023" />
|
|
117
|
+
</ExampleContainer>
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
export const ShowYearPicker = YearPicker.bind({});
|
|
121
|
+
ShowYearPicker.play = async () => {
|
|
122
|
+
await fireEvent.click(screen.getByRole("button"));
|
|
123
|
+
await fireEvent.click(screen.getByText("2023"));
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
const YearPickerFocus = () => (
|
|
127
|
+
<ExampleContainer expanded>
|
|
128
|
+
<Title title="Show date input" theme="light" level={4} />
|
|
129
|
+
<DxcDateInput label="Date input" value="10-06-2023" />
|
|
130
|
+
</ExampleContainer>
|
|
131
|
+
);
|
|
132
|
+
|
|
133
|
+
export const ShowYearPickerFocus = YearPickerFocus.bind({});
|
|
134
|
+
ShowYearPickerFocus.play = async () => {
|
|
135
|
+
await fireEvent.click(screen.getByRole("button"));
|
|
136
|
+
await fireEvent.click(screen.getByText("2023"));
|
|
137
|
+
await screen.getByText("2021").focus();
|
|
138
|
+
};
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
declare type Margin = {
|
|
3
|
+
top?: Space;
|
|
4
|
+
bottom?: Space;
|
|
5
|
+
left?: Space;
|
|
6
|
+
right?: Space;
|
|
7
|
+
};
|
|
8
|
+
declare type Props = {
|
|
9
|
+
/**
|
|
10
|
+
* Text to be placed above the date.
|
|
11
|
+
*/
|
|
12
|
+
label?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Name attribute of the input element.
|
|
15
|
+
*/
|
|
16
|
+
name?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
|
|
19
|
+
*/
|
|
20
|
+
value?: string;
|
|
21
|
+
/**
|
|
22
|
+
* The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
|
|
23
|
+
*/
|
|
24
|
+
format?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Helper text to be placed above the date.
|
|
27
|
+
*/
|
|
28
|
+
helperText?: string;
|
|
29
|
+
/**
|
|
30
|
+
* If true, the date format will appear as placeholder in the field.
|
|
31
|
+
*/
|
|
32
|
+
placeholder?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* If true, the date input will have an action to clear the entered value.
|
|
35
|
+
*/
|
|
36
|
+
clearable?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* If true, the component will be disabled.
|
|
39
|
+
*/
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* If true, the date will be optional, showing '(Optional)'
|
|
43
|
+
* next to the label. Otherwise, the field will be considered required and an error will be
|
|
44
|
+
* passed as a parameter to the OnBlur and onChange functions when it has
|
|
45
|
+
* not been filled.
|
|
46
|
+
*/
|
|
47
|
+
optional?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* This function will be called when the user types within the input
|
|
50
|
+
* element of the component. An object including the string value, the
|
|
51
|
+
* error and the date value will be passed to this function.
|
|
52
|
+
* If the string value is a valid date, error will
|
|
53
|
+
* be null. Also, if the string value is not a valid date, date will be null.
|
|
54
|
+
*/
|
|
55
|
+
onChange?: (val: {
|
|
56
|
+
value: string;
|
|
57
|
+
error: string | null;
|
|
58
|
+
date: Date | null;
|
|
59
|
+
}) => void;
|
|
60
|
+
/**
|
|
61
|
+
* This function will be called when the input element loses the focus.
|
|
62
|
+
* An object including the string value, the error and the date value
|
|
63
|
+
* will be passed to this function. If the string value is a valid date, error will
|
|
64
|
+
* be null. Also, if the string value is not a valid date, date will be null.
|
|
65
|
+
*/
|
|
66
|
+
onBlur?: (val: {
|
|
67
|
+
value: string;
|
|
68
|
+
error: string | null;
|
|
69
|
+
date: Date | null;
|
|
70
|
+
}) => void;
|
|
71
|
+
/**
|
|
72
|
+
* If it is defined, the component will change its appearance, showing
|
|
73
|
+
* the error below the date input component. If it is not defined, the error
|
|
74
|
+
* messages will be managed internally, but never displayed on its own.
|
|
75
|
+
*/
|
|
76
|
+
error?: string;
|
|
77
|
+
/**
|
|
78
|
+
* HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
|
|
79
|
+
* Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
|
|
80
|
+
*/
|
|
81
|
+
autocomplete?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
84
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
85
|
+
*/
|
|
86
|
+
margin?: Space | Margin;
|
|
87
|
+
/**
|
|
88
|
+
* Size of the component.
|
|
89
|
+
*/
|
|
90
|
+
size?: "medium" | "large" | "fillParent";
|
|
91
|
+
/**
|
|
92
|
+
* Value of the tabindex attribute.
|
|
93
|
+
*/
|
|
94
|
+
tabIndex?: number;
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* Reference to the component.
|
|
98
|
+
*/
|
|
99
|
+
export declare type RefType = HTMLDivElement;
|
|
100
|
+
export default Props;
|