@dxc-technology/halstack-react 0.0.0-d30020b → 0.0.0-d3554d7

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.
Files changed (78) hide show
  1. package/ThemeContext.d.ts +4 -9
  2. package/ThemeContext.js +32 -32
  3. package/accordion/Accordion.test.js +57 -0
  4. package/accordion-group/AccordionGroup.test.js +133 -0
  5. package/alert/Alert.test.js +92 -0
  6. package/badge/Badge.d.ts +4 -0
  7. package/badge/types.d.ts +4 -0
  8. package/badge/types.js +5 -0
  9. package/box/Box.test.js +18 -0
  10. package/button/Button.test.js +35 -0
  11. package/card/Card.test.js +50 -0
  12. package/checkbox/Checkbox.test.js +65 -0
  13. package/chip/Chip.test.js +56 -0
  14. package/common/variables.js +0 -238
  15. package/date-input/DateInput.test.js +469 -0
  16. package/dialog/Dialog.test.js +40 -0
  17. package/dropdown/Dropdown.test.js +189 -0
  18. package/file-input/FileInput.test.js +457 -0
  19. package/footer/Footer.test.js +109 -0
  20. package/header/Header.test.js +63 -0
  21. package/heading/Heading.test.js +186 -0
  22. package/link/Link.test.js +91 -0
  23. package/main.d.ts +3 -6
  24. package/main.js +12 -36
  25. package/number-input/NumberInput.test.js +508 -0
  26. package/package.json +1 -1
  27. package/paginator/Paginator.test.js +266 -0
  28. package/password-input/PasswordInput.test.js +183 -0
  29. package/progress-bar/ProgressBar.test.js +65 -0
  30. package/radio/Radio.test.js +71 -0
  31. package/radio-group/Radio.d.ts +1 -1
  32. package/radio-group/Radio.js +24 -23
  33. package/radio-group/RadioGroup.js +38 -32
  34. package/radio-group/RadioGroup.stories.tsx +57 -40
  35. package/radio-group/RadioGroup.test.js +518 -72
  36. package/radio-group/types.d.ts +3 -2
  37. package/resultsetTable/ResultsetTable.test.js +306 -0
  38. package/select/Select.js +7 -1
  39. package/select/Select.stories.tsx +72 -62
  40. package/select/Select.test.js +1900 -0
  41. package/sidenav/Sidenav.test.js +56 -0
  42. package/slider/Slider.test.js +129 -0
  43. package/spinner/Spinner.test.js +64 -0
  44. package/switch/Switch.test.js +73 -0
  45. package/table/Table.test.js +26 -0
  46. package/tabs/Tabs.test.js +123 -0
  47. package/tag/Tag.test.js +60 -0
  48. package/text-input/TextInput.js +5 -3
  49. package/text-input/TextInput.stories.tsx +20 -2
  50. package/text-input/TextInput.test.js +1691 -0
  51. package/textarea/Textarea.js +5 -3
  52. package/textarea/Textarea.stories.jsx +30 -9
  53. package/textarea/Textarea.test.js +436 -0
  54. package/toggle-group/ToggleGroup.test.js +125 -0
  55. package/wizard/Wizard.test.js +128 -0
  56. package/V3Select/V3Select.js +0 -455
  57. package/V3Select/index.d.ts +0 -27
  58. package/V3Textarea/V3Textarea.js +0 -260
  59. package/V3Textarea/index.d.ts +0 -27
  60. package/date/Date.js +0 -373
  61. package/date/index.d.ts +0 -27
  62. package/input-text/Icons.js +0 -22
  63. package/input-text/InputText.js +0 -611
  64. package/input-text/index.d.ts +0 -36
  65. package/toggle/Toggle.js +0 -186
  66. package/toggle/index.d.ts +0 -21
  67. package/upload/Upload.js +0 -201
  68. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  69. package/upload/buttons-upload/Icons.js +0 -40
  70. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  71. package/upload/dragAndDropArea/Icons.js +0 -39
  72. package/upload/file-upload/FileToUpload.js +0 -115
  73. package/upload/file-upload/Icons.js +0 -66
  74. package/upload/files-upload/FilesToUpload.js +0 -109
  75. package/upload/index.d.ts +0 -15
  76. package/upload/transaction/Icons.js +0 -160
  77. package/upload/transaction/Transaction.js +0 -104
  78. package/upload/transactions/Transactions.js +0 -94
@@ -1,260 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _utils = require("../common/utils.js");
31
-
32
- var _useTheme = _interopRequireDefault(require("../useTheme"));
33
-
34
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
35
-
36
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
37
-
38
- var _templateObject;
39
-
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); }
41
-
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; }
43
-
44
- var V3DxcTextarea = function V3DxcTextarea(_ref) {
45
- var _ref$label = _ref.label,
46
- label = _ref$label === void 0 ? " " : _ref$label,
47
- _ref$name = _ref.name,
48
- name = _ref$name === void 0 ? "" : _ref$name,
49
- value = _ref.value,
50
- _ref$assistiveText = _ref.assistiveText,
51
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
52
- _ref$disabled = _ref.disabled,
53
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
54
- _ref$onChange = _ref.onChange,
55
- onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
56
- _ref$onBlur = _ref.onBlur,
57
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
58
- _ref$numRows = _ref.numRows,
59
- numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
60
- _ref$invalid = _ref.invalid,
61
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
62
- _ref$required = _ref.required,
63
- required = _ref$required === void 0 ? false : _ref$required,
64
- _ref$placeholder = _ref.placeholder,
65
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
66
- margin = _ref.margin,
67
- _ref$size = _ref.size,
68
- size = _ref$size === void 0 ? "medium" : _ref$size,
69
- _ref$tabIndex = _ref.tabIndex,
70
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
71
-
72
- var _useState = (0, _react.useState)(""),
73
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
74
- innerValue = _useState2[0],
75
- setInnerValue = _useState2[1];
76
-
77
- var colorsTheme = (0, _useTheme["default"])();
78
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
79
-
80
- var handlerTextareaChange = function handlerTextareaChange(event) {
81
- if (value === null || value === undefined) {
82
- if (typeof onChange === "function") {
83
- setInnerValue(event.target.value);
84
- onChange(event.target.value);
85
- } else {
86
- setInnerValue(event.target.value);
87
- }
88
- } else if (onChange !== "") {
89
- if (typeof onChange === "function") {
90
- onChange(event.target.value);
91
- } else {
92
- setInnerValue(event.target.value);
93
- }
94
- }
95
- };
96
-
97
- var handlerTextareaBlur = function handlerTextareaBlur(event) {
98
- setInnerValue(event.target.value);
99
-
100
- if (onBlur) {
101
- onBlur(event.target.value);
102
- }
103
- };
104
-
105
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
106
- theme: colorsTheme.V3Textarea
107
- }, /*#__PURE__*/_react["default"].createElement(TextContainer, {
108
- required: required,
109
- assistiveText: assistiveText,
110
- margin: margin,
111
- size: size,
112
- backgroundType: backgroundType
113
- }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
114
- error: invalid,
115
- value: value !== null ? value : innerValue,
116
- name: name,
117
- multiline: true,
118
- disabled: disabled,
119
- label: required ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label) : label,
120
- helperText: assistiveText,
121
- onChange: handlerTextareaChange,
122
- onBlur: onBlur && handlerTextareaBlur || null,
123
- rows: numRows,
124
- placeholder: placeholder,
125
- inputProps: {
126
- tabIndex: tabIndex
127
- }
128
- })));
129
- };
130
-
131
- var sizes = {
132
- small: "42px",
133
- medium: "240px",
134
- large: "480px",
135
- fillParent: "100%"
136
- };
137
-
138
- var calculateWidth = function calculateWidth(margin, size) {
139
- return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
140
- };
141
-
142
- var TextContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n\n .MuiTextField-root {\n width: 100%;\n\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n padding-left: \"inherit\";\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: \"translate(0, 1.5px) scale(0.75);\";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n transform: \"translate(0, 1.5px) scale(0.75)\";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n &::before {\n border-bottom: ", ";\n }\n\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n\n &::after {\n border-bottom: ", ";\n }\n\n .MuiInputBase-inputMultiline {\n overflow: auto !important;\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n\n &.Mui-error {\n &::before {\n border-width: ", ";\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: calc(", " + 1px);\n border-color: ", ";\n }\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n\n .MuiInputBase-input {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n line-height: ", ";\n padding-left: \"inherit\";\n text-overflow: ellipsis;\n\n &.Mui-disabled {\n cursor: not-allowed;\n color: ", ";\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom-color: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"])), function (props) {
143
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
144
- }, function (props) {
145
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
146
- }, function (props) {
147
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
148
- }, function (props) {
149
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
150
- }, function (props) {
151
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
152
- }, function (props) {
153
- return calculateWidth(props.margin, props.size);
154
- }, function (props) {
155
- return props.theme.fontFamily;
156
- }, function (props) {
157
- return props.theme.assistiveTextFontSize;
158
- }, function (props) {
159
- return props.theme.assistiveTextFontStyle;
160
- }, function (props) {
161
- return props.theme.assistiveTextFontWeight;
162
- }, function (props) {
163
- return props.theme.assistiveTextLetterSpacing;
164
- }, function (props) {
165
- return props.theme.labelFontSize;
166
- }, function (props) {
167
- return props.theme.labelFontStyle;
168
- }, function (props) {
169
- return props.theme.labelFontWeight;
170
- }, function (props) {
171
- return props.theme.labelLetterSpacing;
172
- }, function (props) {
173
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
174
- }, function (props) {
175
- return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
176
- }, function (props) {
177
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
178
- }, function (props) {
179
- return props.theme.fontFamily;
180
- }, function (props) {
181
- return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
182
- }, function (props) {
183
- return props.theme.fontFamily;
184
- }, function (props) {
185
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
186
- }, function (props) {
187
- return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
188
- }, function (props) {
189
- return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
190
- }, function (props) {
191
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
192
- }, function (props) {
193
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
194
- }, function (props) {
195
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
196
- }, function (props) {
197
- return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
198
- }, function (props) {
199
- return props.backgroundType === "dark" ? props.theme.scrollBarTrackColorOnDark : props.theme.scrollBarTrackColor;
200
- }, function (props) {
201
- return props.backgroundType === "dark" ? props.theme.scrollBarThumbColorOnDark : props.theme.scrollBarThumbColor;
202
- }, function (props) {
203
- return props.theme.underlineThickness;
204
- }, function (props) {
205
- return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
206
- }, function (props) {
207
- return props.theme.underlineThickness;
208
- }, function (props) {
209
- return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
210
- }, function (props) {
211
- return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
212
- }, function (props) {
213
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
214
- }, function (props) {
215
- return props.theme.fontFamily;
216
- }, function (props) {
217
- return props.theme.valueFontSize;
218
- }, function (props) {
219
- return props.theme.valueFontStyle;
220
- }, function (props) {
221
- return props.theme.valueFontWeight;
222
- }, function (props) {
223
- return props.theme.valueLetterSpacing;
224
- }, function (props) {
225
- return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
226
- }, function (props) {
227
- return props.theme.valueLineHeight;
228
- }, function (props) {
229
- return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
230
- }, function (props) {
231
- return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
232
- }, function (props) {
233
- return "".concat(props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor, " !important");
234
- }, function (props) {
235
- return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
236
- });
237
-
238
- V3DxcTextarea.propTypes = {
239
- label: _propTypes["default"].string,
240
- name: _propTypes["default"].string,
241
- value: _propTypes["default"].string,
242
- assistiveText: _propTypes["default"].string,
243
- disabled: _propTypes["default"].bool,
244
- required: _propTypes["default"].bool,
245
- invalid: _propTypes["default"].bool,
246
- placeholder: _propTypes["default"].string,
247
- onChange: _propTypes["default"].func,
248
- onBlur: _propTypes["default"].func,
249
- numRows: _propTypes["default"].number,
250
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
251
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
252
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
253
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
254
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
255
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
256
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
257
- tabIndex: _propTypes["default"].number
258
- };
259
- var _default = V3DxcTextarea;
260
- exports["default"] = _default;
@@ -1,27 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent";
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
- label?: string;
12
- name?: string;
13
- value?: string;
14
- assistiveText?: string;
15
- disabled?: boolean,
16
- onChange?: void;
17
- onBlur?: void;
18
- numRows?: number;
19
- required?: boolean;
20
- invalid?: boolean;
21
- placeholder?: string;
22
- margin?: Space | Margin;
23
- size?: Size;
24
- tabIndex?: number;
25
- };
26
-
27
- export default function V3DxcTextarea(props: Props): JSX.Element;
package/date/Date.js DELETED
@@ -1,373 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _pickers = require("@material-ui/pickers");
23
-
24
- var _core = require("@material-ui/core");
25
-
26
- var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
27
-
28
- var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
29
-
30
- var _moment = _interopRequireDefault(require("moment"));
31
-
32
- var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
33
-
34
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
35
-
36
- var _propTypes = _interopRequireDefault(require("prop-types"));
37
-
38
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
39
-
40
- var _variables = require("../common/variables.js");
41
-
42
- var _useTheme = _interopRequireDefault(require("../useTheme"));
43
-
44
- var _templateObject, _DxcDate$propTypes;
45
-
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); }
47
-
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; }
49
-
50
- var DxcDate = function DxcDate(_ref) {
51
- var value = _ref.value,
52
- _ref$format = _ref.format,
53
- format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
54
- _ref$label = _ref.label,
55
- label = _ref$label === void 0 ? "" : _ref$label,
56
- name = _ref.name,
57
- _ref$disabled = _ref.disabled,
58
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
59
- _ref$required = _ref.required,
60
- required = _ref$required === void 0 ? false : _ref$required,
61
- _ref$assistiveText = _ref.assistiveText,
62
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
63
- _ref$invalid = _ref.invalid,
64
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
65
- onChange = _ref.onChange,
66
- _ref$placeholder = _ref.placeholder,
67
- placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
68
- _ref$onBlur = _ref.onBlur,
69
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
70
- margin = _ref.margin,
71
- _ref$size = _ref.size,
72
- size = _ref$size === void 0 ? "medium" : _ref$size,
73
- _ref$tabIndex = _ref.tabIndex,
74
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
75
-
76
- var _useState = (0, _react.useState)(""),
77
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
78
- innerValue = _useState2[0],
79
- setInnerValue = _useState2[1];
80
-
81
- var _useState3 = (0, _react.useState)(false),
82
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
83
- isOpen = _useState4[0],
84
- setIsOpen = _useState4[1];
85
-
86
- var _useState5 = (0, _react.useState)(null),
87
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
88
- anchorEl = _useState6[0],
89
- setAnchorEl = _useState6[1];
90
-
91
- var colorsTheme = (0, _useTheme["default"])();
92
-
93
- var handleMenuItemClick = function handleMenuItemClick(date) {
94
- var stringValue = (0, _moment["default"])(date).format(format.toUpperCase());
95
- if (value == null) setInnerValue(stringValue);
96
- if (typeof onChange === "function") onChange({
97
- stringValue: stringValue,
98
- dateValue: date && date.toJSON() ? date : null
99
- });
100
- };
101
-
102
- var onChangeInput = function onChangeInput(string) {
103
- var momentDate = (0, _moment["default"])(string, format.toUpperCase(), true);
104
-
105
- if (value == null) {
106
- setInnerValue(string);
107
- }
108
-
109
- if (typeof onChange === "function") {
110
- onChange({
111
- stringValue: string,
112
- dateValue: momentDate.isValid() ? momentDate._d : null
113
- });
114
- }
115
- };
116
-
117
- var handlerInputBlur = function handlerInputBlur(inputString) {
118
- setInnerValue(inputString);
119
- if (onBlur) onBlur(inputString);
120
- };
121
-
122
- var getValueForPicker = function getValueForPicker() {
123
- return (0, _moment["default"])(value == null ? innerValue : value, format.toUpperCase(), true).format();
124
- };
125
-
126
- var openCalendar = function openCalendar(event) {
127
- if (event) {
128
- setIsOpen(!isOpen);
129
- setAnchorEl(event.currentTarget);
130
- }
131
- };
132
-
133
- var handlerPickerClose = function handlerPickerClose() {
134
- setIsOpen(false);
135
- handlerInputBlur(value == null ? innerValue : value);
136
- };
137
-
138
- var calendarSVG = function calendarSVG() {
139
- return /*#__PURE__*/_react["default"].createElement("svg", {
140
- xmlns: "http://www.w3.org/2000/svg",
141
- height: "24",
142
- viewBox: "0 0 24 24",
143
- width: "24",
144
- fill: "currentColor"
145
- }, /*#__PURE__*/_react["default"].createElement("path", {
146
- "data-testid": "calendarIcon",
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"
148
- }), /*#__PURE__*/_react["default"].createElement("path", {
149
- d: "M0 0h24v24H0z",
150
- fill: "none"
151
- }));
152
- };
153
-
154
- var dateTheme = (0, _core.createMuiTheme)({
155
- overrides: {
156
- MuiTypography: {
157
- root: {
158
- fontFamily: "".concat(colorsTheme.date.fontFamily, " !important")
159
- }
160
- },
161
- MuiPickersYearSelection: {
162
- container: {
163
- color: colorsTheme.date.pickerYearColor,
164
- "&::-webkit-scrollbar": {
165
- width: "3px"
166
- },
167
- "&::-webkit-scrollbar-track": {
168
- backgroundColor: "#D9D9D9",
169
- borderRadius: "3px"
170
- },
171
- "&::-webkit-scrollbar-thumb": {
172
- backgroundColor: "#666666",
173
- borderRadius: "3px"
174
- }
175
- }
176
- },
177
- MuiPickersToolbar: {
178
- toolbar: {
179
- backgroundColor: colorsTheme.date.pickerBackgroundColor,
180
- color: colorsTheme.date.pickerFontColor
181
- }
182
- },
183
- MuiIconButton: {
184
- root: {
185
- height: "36px",
186
- width: "36px",
187
- padding: "0px"
188
- }
189
- },
190
- MuiTouchRipple: {
191
- child: {
192
- opacity: "0"
193
- }
194
- },
195
- MuiButtonBase: {
196
- root: {
197
- "&:focus": {
198
- outline: colorsTheme.date.focusColor + " solid 2px"
199
- }
200
- }
201
- },
202
- MuiPickersBasePicker: {
203
- pickerView: {
204
- minWidth: "unset",
205
- maxWidth: "unset",
206
- minHeight: "unset",
207
- padding: "0px 10px",
208
- height: colorsTheme.date.pickerHeight,
209
- width: colorsTheme.date.pickerWidth,
210
- backgroundColor: colorsTheme.date.pickerBackgroundColor,
211
- fontFamily: colorsTheme.date.fontFamily
212
- }
213
- },
214
- MuiPickersToolbarText: {
215
- toolbarTxt: {
216
- color: colorsTheme.date.pickerActualDateColor,
217
- fontFamily: colorsTheme.date.fontFamily,
218
- fontSize: "2rem"
219
- },
220
- toolbarBtnSelected: {
221
- color: colorsTheme.date.pickerActualDateColor
222
- }
223
- },
224
- MuiPickersCalendarHeader: {
225
- transitionContainer: {
226
- color: colorsTheme.date.pickerMonthColor
227
- },
228
- dayLabel: {
229
- color: colorsTheme.date.pickerWeekLabelColor,
230
- fontFamily: colorsTheme.date.fontFamily
231
- },
232
- switchHeader: {
233
- backgroundColor: colorsTheme.white,
234
- color: colorsTheme.date.pickerFontColor
235
- },
236
- iconButton: {
237
- backgroundColor: colorsTheme.date.pickerBackgroundColorMonthArrows,
238
- "&:hover": {
239
- backgroundColor: colorsTheme.date.pickerBackgroundColorMonthArrows
240
- }
241
- }
242
- },
243
- MuiPickersCalendar: {
244
- week: {
245
- marginBottom: "2px"
246
- }
247
- },
248
- MuiPickersDay: {
249
- current: {
250
- border: colorsTheme.date.pickerActualDateColor + " 2px solid",
251
- color: colorsTheme.date.pickerFontColor
252
- },
253
- day: {
254
- fontFamily: colorsTheme.date.fontFamily,
255
- color: colorsTheme.date.pickerFontColor,
256
- "&:hover": {
257
- backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor,
258
- color: colorsTheme.date.pickerHoverDateFontColor
259
- }
260
- },
261
- daySelected: {
262
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
263
- color: colorsTheme.date.pickerSelectedDateColor,
264
- "&:hover": {
265
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
266
- color: colorsTheme.date.pickerSelectedDateColor,
267
- opacity: "1"
268
- }
269
- }
270
- },
271
- MuiPickersYear: {
272
- yearSelected: {
273
- color: colorsTheme.date.pickerSelectedDateColor,
274
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
275
- margin: "0px 100px",
276
- borderRadius: "20px"
277
- },
278
- root: {
279
- "&:focus": {
280
- color: colorsTheme.date.pickerHoverDateFontColor,
281
- backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor
282
- }
283
- }
284
- },
285
- MuiPickersModal: {
286
- dialogAction: {
287
- color: "pink"
288
- }
289
- }
290
- }
291
- });
292
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
293
- theme: colorsTheme
294
- }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
295
- theme: dateTheme
296
- }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
297
- utils: _dateFns["default"]
298
- }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, {
299
- margin: margin
300
- }, /*#__PURE__*/_react["default"].createElement(_InputText["default"], {
301
- label: label,
302
- name: name,
303
- suffixIcon: calendarSVG,
304
- required: required,
305
- invalid: invalid,
306
- disabled: disabled,
307
- assistiveText: assistiveText,
308
- margin: margin,
309
- size: size,
310
- placeholder: placeholder ? format.toUpperCase() : null,
311
- value: value == null ? innerValue : value,
312
- onClickSuffix: openCalendar,
313
- onChange: onChangeInput,
314
- onBlur: onBlur && handlerInputBlur || null,
315
- tabIndex: tabIndex
316
- }), /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
317
- open: isOpen,
318
- anchorEl: anchorEl,
319
- anchorOrigin: {
320
- vertical: "bottom",
321
- horizontal: "left"
322
- },
323
- transformOrigin: {
324
- vertical: "top",
325
- horizontal: "center"
326
- },
327
- PaperProps: {
328
- style: {
329
- marginTop: "10px"
330
- }
331
- }
332
- }, /*#__PURE__*/_react["default"].createElement(_ClickAwayListener["default"], {
333
- onClickAway: handlerPickerClose
334
- }, /*#__PURE__*/_react["default"].createElement(_core.Paper, null, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
335
- variant: "static",
336
- value: getValueForPicker(),
337
- onChange: function onChange(date) {
338
- return handleMenuItemClick(date);
339
- },
340
- format: format,
341
- disabled: disabled
342
- }))))))));
343
- };
344
-
345
- var sizes = {
346
- medium: "240px",
347
- large: "480px",
348
- fillParent: "100%"
349
- };
350
-
351
- var StyledDPicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
352
-
353
- DxcDate.propTypes = (_DxcDate$propTypes = {
354
- value: _propTypes["default"].string,
355
- format: _propTypes["default"].string,
356
- label: _propTypes["default"].string,
357
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
358
- name: _propTypes["default"].string,
359
- disabled: _propTypes["default"].bool,
360
- required: _propTypes["default"].bool,
361
- placeholder: _propTypes["default"].bool,
362
- assistiveText: _propTypes["default"].string,
363
- invalid: _propTypes["default"].bool,
364
- onChange: _propTypes["default"].func,
365
- onBlur: _propTypes["default"].func
366
- }, (0, _defineProperty2["default"])(_DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
367
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
368
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
369
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
370
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
371
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _DxcDate$propTypes);
372
- var _default = DxcDate;
373
- exports["default"] = _default;