@dxc-technology/halstack-react 0.0.0-7303985 → 0.0.0-73df362

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 (249) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6589 -0
  3. package/dist/index.d.ts +6589 -0
  4. package/dist/index.js +13665 -0
  5. package/dist/index.mjs +13607 -0
  6. package/package.json +69 -68
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -48
  9. package/ThemeContext.d.ts +0 -15
  10. package/ThemeContext.js +0 -243
  11. package/V3Select/V3Select.js +0 -455
  12. package/V3Select/index.d.ts +0 -27
  13. package/V3Textarea/V3Textarea.js +0 -260
  14. package/V3Textarea/index.d.ts +0 -27
  15. package/accordion/Accordion.d.ts +0 -4
  16. package/accordion/Accordion.js +0 -258
  17. package/accordion/Accordion.stories.tsx +0 -300
  18. package/accordion/types.d.ts +0 -68
  19. package/accordion/types.js +0 -5
  20. package/accordion-group/AccordionGroup.d.ts +0 -7
  21. package/accordion-group/AccordionGroup.js +0 -170
  22. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  23. package/accordion-group/types.d.ts +0 -72
  24. package/accordion-group/types.js +0 -5
  25. package/alert/Alert.d.ts +0 -4
  26. package/alert/Alert.js +0 -290
  27. package/alert/Alert.stories.tsx +0 -170
  28. package/alert/types.d.ts +0 -49
  29. package/alert/types.js +0 -5
  30. package/badge/Badge.js +0 -59
  31. package/box/Box.d.ts +0 -4
  32. package/box/Box.js +0 -126
  33. package/box/Box.stories.tsx +0 -132
  34. package/box/types.d.ts +0 -43
  35. package/box/types.js +0 -5
  36. package/button/Button.d.ts +0 -4
  37. package/button/Button.js +0 -179
  38. package/button/Button.stories.tsx +0 -276
  39. package/button/types.d.ts +0 -57
  40. package/button/types.js +0 -5
  41. package/card/Card.d.ts +0 -4
  42. package/card/Card.js +0 -164
  43. package/card/Card.stories.tsx +0 -201
  44. package/card/ice-cream.jpg +0 -0
  45. package/card/types.d.ts +0 -67
  46. package/card/types.js +0 -5
  47. package/checkbox/Checkbox.d.ts +0 -4
  48. package/checkbox/Checkbox.js +0 -253
  49. package/checkbox/Checkbox.stories.tsx +0 -192
  50. package/checkbox/types.d.ts +0 -60
  51. package/checkbox/types.js +0 -5
  52. package/chip/Chip.d.ts +0 -4
  53. package/chip/Chip.js +0 -199
  54. package/chip/Chip.stories.tsx +0 -121
  55. package/chip/types.d.ts +0 -53
  56. package/chip/types.js +0 -5
  57. package/common/OpenSans.css +0 -81
  58. package/common/RequiredComponent.js +0 -32
  59. package/common/fonts/OpenSans-Bold.ttf +0 -0
  60. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  61. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  62. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  63. package/common/fonts/OpenSans-Italic.ttf +0 -0
  64. package/common/fonts/OpenSans-Light.ttf +0 -0
  65. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  66. package/common/fonts/OpenSans-Regular.ttf +0 -0
  67. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  68. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  69. package/common/utils.js +0 -22
  70. package/common/variables.js +0 -1574
  71. package/date/Date.js +0 -373
  72. package/date/index.d.ts +0 -27
  73. package/date-input/DateInput.d.ts +0 -4
  74. package/date-input/DateInput.js +0 -358
  75. package/date-input/DateInput.stories.tsx +0 -138
  76. package/date-input/types.d.ts +0 -100
  77. package/date-input/types.js +0 -5
  78. package/dialog/Dialog.d.ts +0 -4
  79. package/dialog/Dialog.js +0 -165
  80. package/dialog/Dialog.stories.tsx +0 -212
  81. package/dialog/types.d.ts +0 -43
  82. package/dialog/types.js +0 -5
  83. package/dropdown/Dropdown.d.ts +0 -4
  84. package/dropdown/Dropdown.js +0 -417
  85. package/dropdown/Dropdown.stories.tsx +0 -247
  86. package/dropdown/types.d.ts +0 -89
  87. package/dropdown/types.js +0 -5
  88. package/file-input/FileInput.d.ts +0 -4
  89. package/file-input/FileInput.js +0 -521
  90. package/file-input/FileItem.d.ts +0 -14
  91. package/file-input/FileItem.js +0 -184
  92. package/file-input/types.d.ts +0 -112
  93. package/file-input/types.js +0 -5
  94. package/footer/Footer.d.ts +0 -4
  95. package/footer/Footer.js +0 -260
  96. package/footer/Footer.stories.tsx +0 -130
  97. package/footer/Icons.d.ts +0 -2
  98. package/footer/Icons.js +0 -77
  99. package/footer/types.d.ts +0 -65
  100. package/footer/types.js +0 -5
  101. package/header/Header.d.ts +0 -7
  102. package/header/Header.js +0 -324
  103. package/header/Header.stories.tsx +0 -162
  104. package/header/Icons.d.ts +0 -2
  105. package/header/Icons.js +0 -34
  106. package/header/types.d.ts +0 -47
  107. package/header/types.js +0 -5
  108. package/heading/Heading.d.ts +0 -4
  109. package/heading/Heading.js +0 -159
  110. package/heading/Heading.stories.tsx +0 -53
  111. package/heading/types.d.ts +0 -33
  112. package/heading/types.js +0 -5
  113. package/input-text/Icons.js +0 -22
  114. package/input-text/InputText.js +0 -611
  115. package/input-text/index.d.ts +0 -36
  116. package/layout/ApplicationLayout.d.ts +0 -10
  117. package/layout/ApplicationLayout.js +0 -225
  118. package/layout/ApplicationLayout.stories.tsx +0 -171
  119. package/layout/Icons.js +0 -55
  120. package/layout/types.d.ts +0 -57
  121. package/layout/types.js +0 -5
  122. package/link/Link.d.ts +0 -3
  123. package/link/Link.js +0 -161
  124. package/link/Link.stories.tsx +0 -146
  125. package/link/types.d.ts +0 -74
  126. package/link/types.js +0 -5
  127. package/list/List.d.ts +0 -8
  128. package/list/List.js +0 -47
  129. package/list/List.stories.tsx +0 -85
  130. package/main.d.ts +0 -48
  131. package/main.js +0 -395
  132. package/number-input/NumberInput.d.ts +0 -4
  133. package/number-input/NumberInput.js +0 -83
  134. package/number-input/NumberInput.stories.tsx +0 -115
  135. package/number-input/NumberInputContext.d.ts +0 -4
  136. package/number-input/NumberInputContext.js +0 -19
  137. package/number-input/numberInputContextTypes.d.ts +0 -19
  138. package/number-input/numberInputContextTypes.js +0 -5
  139. package/number-input/types.d.ts +0 -117
  140. package/number-input/types.js +0 -5
  141. package/paginator/Icons.js +0 -66
  142. package/paginator/Paginator.d.ts +0 -4
  143. package/paginator/Paginator.js +0 -192
  144. package/paginator/Paginator.stories.tsx +0 -63
  145. package/paginator/types.d.ts +0 -38
  146. package/paginator/types.js +0 -5
  147. package/password-input/PasswordInput.d.ts +0 -4
  148. package/password-input/PasswordInput.js +0 -163
  149. package/password-input/PasswordInput.stories.tsx +0 -131
  150. package/password-input/types.d.ts +0 -107
  151. package/password-input/types.js +0 -5
  152. package/progress-bar/ProgressBar.d.ts +0 -4
  153. package/progress-bar/ProgressBar.js +0 -170
  154. package/progress-bar/ProgressBar.stories.jsx +0 -58
  155. package/progress-bar/types.d.ts +0 -37
  156. package/progress-bar/types.js +0 -5
  157. package/radio/Radio.d.ts +0 -4
  158. package/radio/Radio.js +0 -174
  159. package/radio/Radio.stories.tsx +0 -192
  160. package/radio/types.d.ts +0 -54
  161. package/radio/types.js +0 -5
  162. package/resultsetTable/ResultsetTable.d.ts +0 -4
  163. package/resultsetTable/ResultsetTable.js +0 -251
  164. package/resultsetTable/ResultsetTable.stories.tsx +0 -276
  165. package/resultsetTable/types.d.ts +0 -67
  166. package/resultsetTable/types.js +0 -5
  167. package/row/Row.d.ts +0 -11
  168. package/row/Row.js +0 -124
  169. package/row/Row.stories.tsx +0 -223
  170. package/select/Select.js +0 -863
  171. package/select/Select.stories.tsx +0 -572
  172. package/select/index.d.ts +0 -131
  173. package/sidenav/Sidenav.d.ts +0 -9
  174. package/sidenav/Sidenav.js +0 -136
  175. package/sidenav/Sidenav.stories.tsx +0 -165
  176. package/sidenav/types.d.ts +0 -50
  177. package/sidenav/types.js +0 -5
  178. package/slider/Slider.d.ts +0 -4
  179. package/slider/Slider.js +0 -317
  180. package/slider/Slider.stories.tsx +0 -177
  181. package/slider/types.d.ts +0 -78
  182. package/slider/types.js +0 -5
  183. package/spinner/Spinner.d.ts +0 -4
  184. package/spinner/Spinner.js +0 -250
  185. package/spinner/Spinner.stories.jsx +0 -102
  186. package/spinner/types.d.ts +0 -32
  187. package/spinner/types.js +0 -5
  188. package/stack/Stack.d.ts +0 -10
  189. package/stack/Stack.js +0 -94
  190. package/stack/Stack.stories.tsx +0 -150
  191. package/switch/Switch.d.ts +0 -4
  192. package/switch/Switch.js +0 -179
  193. package/switch/Switch.stories.tsx +0 -160
  194. package/switch/types.d.ts +0 -58
  195. package/switch/types.js +0 -5
  196. package/table/Table.d.ts +0 -4
  197. package/table/Table.js +0 -118
  198. package/table/Table.stories.jsx +0 -276
  199. package/table/types.d.ts +0 -21
  200. package/table/types.js +0 -5
  201. package/tabs/Tabs.d.ts +0 -4
  202. package/tabs/Tabs.js +0 -213
  203. package/tabs/Tabs.stories.tsx +0 -121
  204. package/tabs/types.d.ts +0 -70
  205. package/tabs/types.js +0 -5
  206. package/tag/Tag.d.ts +0 -4
  207. package/tag/Tag.js +0 -193
  208. package/tag/Tag.stories.tsx +0 -145
  209. package/tag/types.d.ts +0 -60
  210. package/tag/types.js +0 -5
  211. package/text/Text.d.ts +0 -7
  212. package/text/Text.js +0 -30
  213. package/text/Text.stories.tsx +0 -19
  214. package/text-input/TextInput.d.ts +0 -4
  215. package/text-input/TextInput.js +0 -786
  216. package/text-input/TextInput.stories.tsx +0 -456
  217. package/text-input/types.d.ts +0 -159
  218. package/text-input/types.js +0 -5
  219. package/textarea/Textarea.d.ts +0 -4
  220. package/textarea/Textarea.js +0 -284
  221. package/textarea/Textarea.stories.jsx +0 -135
  222. package/textarea/types.d.ts +0 -130
  223. package/textarea/types.js +0 -5
  224. package/toggle/Toggle.js +0 -186
  225. package/toggle/index.d.ts +0 -21
  226. package/toggle-group/ToggleGroup.d.ts +0 -4
  227. package/toggle-group/ToggleGroup.js +0 -214
  228. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  229. package/toggle-group/types.d.ts +0 -97
  230. package/toggle-group/types.js +0 -5
  231. package/upload/Upload.js +0 -201
  232. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  233. package/upload/buttons-upload/Icons.js +0 -40
  234. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  235. package/upload/dragAndDropArea/Icons.js +0 -39
  236. package/upload/file-upload/FileToUpload.js +0 -115
  237. package/upload/file-upload/Icons.js +0 -66
  238. package/upload/files-upload/FilesToUpload.js +0 -109
  239. package/upload/index.d.ts +0 -15
  240. package/upload/transaction/Icons.js +0 -160
  241. package/upload/transaction/Transaction.js +0 -104
  242. package/upload/transactions/Transactions.js +0 -94
  243. package/useTheme.d.ts +0 -2
  244. package/useTheme.js +0 -22
  245. package/wizard/Wizard.d.ts +0 -4
  246. package/wizard/Wizard.js +0 -281
  247. package/wizard/Wizard.stories.tsx +0 -224
  248. package/wizard/types.d.ts +0 -60
  249. package/wizard/types.js +0 -5
@@ -1,89 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
10
- declare type Option = {
11
- /**
12
- * Option display value.
13
- */
14
- label?: string;
15
- /**
16
- * Element used as the icon that will be placed next to the
17
- * option label.
18
- */
19
- icon?: SVG;
20
- /**
21
- * @deprecated URL of the icon that will be placed next to the option label.
22
- */
23
- iconSrc?: string;
24
- /**
25
- * Option inner value.
26
- */
27
- value: string;
28
- };
29
- declare type Props = {
30
- /**
31
- * An array of objects representing the options.
32
- */
33
- options: Option[];
34
- /**
35
- * In case options include icons, whether the icon should appear
36
- * after or before the label.
37
- */
38
- optionsIconPosition?: "before" | "after";
39
- /**
40
- * Element used as the icon that will be placed next to the
41
- * dropdown label.
42
- */
43
- icon?: SVG;
44
- /**
45
- * @deprecated URL of the icon that will be placed next to the
46
- * dropdown label.
47
- */
48
- iconSrc?: string;
49
- /**
50
- * Whether the icon should appear after or before the label.
51
- */
52
- iconPosition?: "before" | "after";
53
- /**
54
- * Text to be placed within the dropdown.
55
- */
56
- label?: string;
57
- /**
58
- * Whether the arrow next to the label must be displayed or not.
59
- */
60
- caretHidden?: boolean;
61
- /**
62
- * This function will be called every time the selection changes.
63
- * The value of the selected option will be passed as a parameter.
64
- */
65
- onSelectOption: (value: string) => void;
66
- /**
67
- * If true, the options are showed when the dropdown is hover.
68
- */
69
- expandOnHover?: boolean;
70
- /**
71
- * Size of the margin to be applied to the component.
72
- * You can pass an object with 'top', 'bottom', 'left' and 'right'
73
- * properties in order to specify different margin sizes.
74
- */
75
- margin?: Space | Margin;
76
- /**
77
- * Size of the component.
78
- */
79
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
80
- /**
81
- * Value of the tabindex.
82
- */
83
- tabIndex?: number;
84
- /**
85
- * If true, the component will be disabled.
86
- */
87
- disabled?: boolean;
88
- };
89
- export default Props;
package/dropdown/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import FileInputPropsType from "./types";
3
- declare const DxcFileInput: ({ name, mode, label, buttonLabel, dropAreaLabel, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, value, margin, tabIndex, }: FileInputPropsType) => JSX.Element;
4
- export default DxcFileInput;
@@ -1,521 +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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
17
-
18
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
19
-
20
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
21
-
22
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
23
-
24
- var _react = _interopRequireWildcard(require("react"));
25
-
26
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
27
-
28
- var _uuid = require("uuid");
29
-
30
- var _variables = require("../common/variables.js");
31
-
32
- var _useTheme = _interopRequireDefault(require("../useTheme"));
33
-
34
- var _Button = _interopRequireDefault(require("../button/Button"));
35
-
36
- var _FileItem = _interopRequireDefault(require("./FileItem"));
37
-
38
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
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 audioIcon = /*#__PURE__*/_react["default"].createElement("svg", {
45
- xmlns: "http://www.w3.org/2000/svg",
46
- width: "24",
47
- height: "24",
48
- viewBox: "0 0 24 24",
49
- fill: "currentColor"
50
- }, /*#__PURE__*/_react["default"].createElement("path", {
51
- fill: "none",
52
- d: "M0 0h24v24H0V0z"
53
- }), /*#__PURE__*/_react["default"].createElement("path", {
54
- d: "M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"
55
- }));
56
-
57
- var videoIcon = /*#__PURE__*/_react["default"].createElement("svg", {
58
- xmlns: "http://www.w3.org/2000/svg",
59
- width: "24",
60
- height: "24",
61
- viewBox: "0 0 24 24",
62
- fill: "currentColor"
63
- }, /*#__PURE__*/_react["default"].createElement("path", {
64
- d: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"
65
- }), /*#__PURE__*/_react["default"].createElement("path", {
66
- d: "M0 0h24v24H0z",
67
- fill: "none"
68
- }));
69
-
70
- var fileIcon = /*#__PURE__*/_react["default"].createElement("svg", {
71
- xmlns: "http://www.w3.org/2000/svg",
72
- width: "24",
73
- height: "24",
74
- viewBox: "0 0 24 24",
75
- fill: "currentColor"
76
- }, /*#__PURE__*/_react["default"].createElement("path", {
77
- fill: "none",
78
- d: "M0 0h24v24H0V0z"
79
- }), /*#__PURE__*/_react["default"].createElement("path", {
80
- d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
81
- }));
82
-
83
- var DxcFileInput = function DxcFileInput(_ref) {
84
- var _ref$name = _ref.name,
85
- name = _ref$name === void 0 ? "" : _ref$name,
86
- _ref$mode = _ref.mode,
87
- mode = _ref$mode === void 0 ? "file" : _ref$mode,
88
- _ref$label = _ref.label,
89
- label = _ref$label === void 0 ? "" : _ref$label,
90
- buttonLabel = _ref.buttonLabel,
91
- dropAreaLabel = _ref.dropAreaLabel,
92
- _ref$helperText = _ref.helperText,
93
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
94
- accept = _ref.accept,
95
- minSize = _ref.minSize,
96
- maxSize = _ref.maxSize,
97
- _ref$showPreview = _ref.showPreview,
98
- showPreview = _ref$showPreview === void 0 ? false : _ref$showPreview,
99
- _ref$multiple = _ref.multiple,
100
- multiple = _ref$multiple === void 0 ? true : _ref$multiple,
101
- _ref$disabled = _ref.disabled,
102
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
103
- callbackFile = _ref.callbackFile,
104
- value = _ref.value,
105
- margin = _ref.margin,
106
- _ref$tabIndex = _ref.tabIndex,
107
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
108
-
109
- var _useState = (0, _react.useState)(false),
110
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
111
- isDragging = _useState2[0],
112
- setIsDragging = _useState2[1];
113
-
114
- var _useState3 = (0, _react.useState)([]),
115
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
116
- files = _useState4[0],
117
- setFiles = _useState4[1];
118
-
119
- var _useState5 = (0, _react.useState)("file-input-".concat((0, _uuid.v4)())),
120
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
121
- fileInputId = _useState6[0];
122
-
123
- var colorsTheme = (0, _useTheme["default"])();
124
- (0, _react.useEffect)(function () {
125
- if (value) {
126
- setFiles(value);
127
- } else {
128
- setFiles([]);
129
- }
130
- }, [value]);
131
-
132
- var handleClick = function handleClick() {
133
- document.getElementById(fileInputId).click();
134
- };
135
-
136
- var checkFileSize = function checkFileSize(file) {
137
- if (file.size < minSize) {
138
- return "File size must be greater than min size.";
139
- }
140
-
141
- if (file.size > maxSize) {
142
- return "File size must be less than max size.";
143
- }
144
- };
145
-
146
- var getFilePreview = function getFilePreview(file) {
147
- if (file.type.includes("video")) {
148
- return videoIcon;
149
- }
150
-
151
- if (file.type.includes("audio")) {
152
- return audioIcon;
153
- }
154
-
155
- if (file.type.includes("image")) {
156
- return new Promise(function (resolve) {
157
- var reader = new FileReader();
158
- reader.readAsDataURL(file);
159
-
160
- reader.onload = function (e) {
161
- resolve(e.target.result);
162
- };
163
- });
164
- }
165
-
166
- return fileIcon;
167
- };
168
-
169
- var getFilesToAdd = /*#__PURE__*/function () {
170
- var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(selectedFiles) {
171
- var filesToAdd;
172
- return _regenerator["default"].wrap(function _callee$(_context) {
173
- while (1) {
174
- switch (_context.prev = _context.next) {
175
- case 0:
176
- _context.next = 2;
177
- return Promise.all(selectedFiles.map(function (selectedFile) {
178
- return getFilePreview(selectedFile);
179
- })).then(function (previews) {
180
- return selectedFiles.map(function (selectedFile, index) {
181
- var fileInfo = {
182
- file: selectedFile,
183
- error: checkFileSize(selectedFile),
184
- preview: previews[index]
185
- };
186
- return fileInfo;
187
- });
188
- });
189
-
190
- case 2:
191
- filesToAdd = _context.sent;
192
- return _context.abrupt("return", filesToAdd);
193
-
194
- case 4:
195
- case "end":
196
- return _context.stop();
197
- }
198
- }
199
- }, _callee);
200
- }));
201
-
202
- return function getFilesToAdd(_x) {
203
- return _ref2.apply(this, arguments);
204
- };
205
- }();
206
-
207
- var addFile = /*#__PURE__*/function () {
208
- var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(selectedFiles) {
209
- var filesToAdd, finalFiles, fileToAdd;
210
- return _regenerator["default"].wrap(function _callee2$(_context2) {
211
- while (1) {
212
- switch (_context2.prev = _context2.next) {
213
- case 0:
214
- if (!multiple) {
215
- _context2.next = 8;
216
- break;
217
- }
218
-
219
- _context2.next = 3;
220
- return getFilesToAdd(selectedFiles);
221
-
222
- case 3:
223
- filesToAdd = _context2.sent;
224
- finalFiles = [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(filesToAdd));
225
-
226
- if (typeof callbackFile === "function") {
227
- callbackFile(finalFiles);
228
- }
229
-
230
- _context2.next = 19;
231
- break;
232
-
233
- case 8:
234
- if (!(selectedFiles.length === 1)) {
235
- _context2.next = 14;
236
- break;
237
- }
238
-
239
- _context2.next = 11;
240
- return getFilesToAdd(selectedFiles);
241
-
242
- case 11:
243
- _context2.t0 = _context2.sent;
244
- _context2.next = 17;
245
- break;
246
-
247
- case 14:
248
- _context2.next = 16;
249
- return getFilesToAdd([selectedFiles[0]]);
250
-
251
- case 16:
252
- _context2.t0 = _context2.sent;
253
-
254
- case 17:
255
- fileToAdd = _context2.t0;
256
-
257
- if (typeof callbackFile === "function") {
258
- callbackFile(fileToAdd);
259
- }
260
-
261
- case 19:
262
- case "end":
263
- return _context2.stop();
264
- }
265
- }
266
- }, _callee2);
267
- }));
268
-
269
- return function addFile(_x2) {
270
- return _ref3.apply(this, arguments);
271
- };
272
- }();
273
-
274
- var selectFiles = function selectFiles(e) {
275
- var selectedFiles = e.target.files;
276
- var filesArray = Object.keys(selectedFiles).map(function (key) {
277
- return selectedFiles[key];
278
- });
279
- addFile(filesArray);
280
- };
281
-
282
- var onDelete = function onDelete(fileName) {
283
- var filesCopy = (0, _toConsumableArray2["default"])(files);
284
- var fileToRemove = filesCopy.find(function (file) {
285
- return file.file.name === fileName;
286
- });
287
- var fileIndex = filesCopy.indexOf(fileToRemove);
288
- filesCopy.splice(fileIndex, 1);
289
-
290
- if (typeof callbackFile === "function") {
291
- callbackFile(filesCopy);
292
- }
293
- };
294
-
295
- var handleDrag = function handleDrag(e) {
296
- e.preventDefault();
297
- e.stopPropagation();
298
- };
299
-
300
- var handleDragIn = function handleDragIn(e) {
301
- if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setIsDragging(true);
302
- };
303
-
304
- var handleDragOut = function handleDragOut(e) {
305
- // only if dragged items leave container (outside, not to childs)
306
- if (!e.currentTarget.contains(e.relatedTarget)) setIsDragging(false);
307
- };
308
-
309
- var handleDrop = function handleDrop(e) {
310
- e.preventDefault();
311
- e.stopPropagation();
312
- setIsDragging(false);
313
- var filesObject = e.dataTransfer.files;
314
-
315
- if (filesObject && filesObject.length > 0) {
316
- var filesArray = Object.keys(filesObject).map(function (key) {
317
- return filesObject[key];
318
- });
319
- addFile(filesArray);
320
- }
321
- };
322
-
323
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
324
- theme: colorsTheme.fileInput
325
- }, /*#__PURE__*/_react["default"].createElement(FileInputContainer, {
326
- margin: margin,
327
- name: name
328
- }, /*#__PURE__*/_react["default"].createElement(Label, {
329
- htmlFor: fileInputId,
330
- disabled: disabled
331
- }, label), /*#__PURE__*/_react["default"].createElement(HelperText, {
332
- disabled: disabled
333
- }, helperText), mode === "file" ? /*#__PURE__*/_react["default"].createElement(FileContainer, {
334
- multiple: multiple,
335
- files: files
336
- }, /*#__PURE__*/_react["default"].createElement(HiddenInputFile, {
337
- id: fileInputId,
338
- type: "file",
339
- accept: accept,
340
- multiple: multiple,
341
- onChange: selectFiles
342
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
343
- mode: "secondary",
344
- label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? "Select files" : "Select file",
345
- onClick: handleClick,
346
- disabled: disabled,
347
- size: "medium",
348
- tabIndex: tabIndex
349
- }), files.map(function (file) {
350
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(FileItemContainer, {
351
- mode: mode,
352
- multiple: multiple,
353
- files: files
354
- }, /*#__PURE__*/_react["default"].createElement(_FileItem["default"], {
355
- mode: mode,
356
- multiple: multiple,
357
- name: file.file.name,
358
- error: file.error,
359
- showPreview: mode === "file" && !multiple ? false : showPreview,
360
- numFiles: files.length,
361
- preview: file.preview,
362
- type: file.file.type,
363
- onDelete: onDelete,
364
- tabIndex: tabIndex
365
- })));
366
- })) : /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(HiddenInputFile, {
367
- id: fileInputId,
368
- type: "file",
369
- accept: accept,
370
- multiple: multiple,
371
- onChange: selectFiles
372
- }), /*#__PURE__*/_react["default"].createElement(DragDropArea, {
373
- isDragging: isDragging,
374
- disabled: disabled,
375
- mode: mode,
376
- onDrop: handleDrop,
377
- onDragEnter: handleDragIn,
378
- onDragOver: handleDrag,
379
- onDragLeave: handleDragOut
380
- }, /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
381
- mode: mode
382
- }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
383
- mode: "secondary",
384
- label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : "Select",
385
- onClick: handleClick,
386
- disabled: disabled,
387
- size: "fitContent"
388
- })), mode === "dropzone" ? /*#__PURE__*/_react["default"].createElement(DropzoneLabel, {
389
- disabled: disabled
390
- }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? "or drop files" : "or drop a file") : /*#__PURE__*/_react["default"].createElement(FiledropLabel, {
391
- disabled: disabled
392
- }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? "or drop files" : "or drop a file")), files.map(function (file) {
393
- return /*#__PURE__*/_react["default"].createElement(FileItemContainer, {
394
- mode: mode,
395
- multiple: multiple,
396
- files: files
397
- }, /*#__PURE__*/_react["default"].createElement(_FileItem["default"], {
398
- mode: mode,
399
- multiple: multiple,
400
- name: file.file.name,
401
- error: file.error,
402
- showPreview: showPreview,
403
- numFiles: files.length,
404
- preview: file.preview,
405
- type: file.file.type,
406
- onDelete: onDelete,
407
- tabIndex: tabIndex
408
- }));
409
- })), files.length === 1 && files.map(function (file) {
410
- return file.error && mode === "file" && !multiple && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, file.error);
411
- })));
412
- };
413
-
414
- var FileInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: fit-content;\n"])), function (props) {
415
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
416
- }, function (props) {
417
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
418
- }, function (props) {
419
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
420
- }, function (props) {
421
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
422
- }, function (props) {
423
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
424
- });
425
-
426
- var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (props) {
427
- return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
428
- }, function (props) {
429
- return props.theme.labelFontFamily;
430
- }, function (props) {
431
- return props.theme.labelFontSize;
432
- }, function (props) {
433
- return props.theme.labelFontWeight;
434
- }, function (props) {
435
- return props.theme.labelLineHeight;
436
- });
437
-
438
- var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (props) {
439
- return props.disabled ? props.theme.disabledHelperTextFontcolor : props.theme.helperTextFontColor;
440
- }, function (props) {
441
- return props.theme.helperTextFontFamily;
442
- }, function (props) {
443
- return props.theme.helperTextFontSize;
444
- }, function (props) {
445
- return props.theme.helperTextFontWeight;
446
- }, function (props) {
447
- return props.theme.helperTextLineHeight;
448
- });
449
-
450
- var DragDropArea = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n overflow: hidden;\n box-sizing: border-box;\n flex-direction: ", ";\n ", ";\n align-items: center;\n height: ", ";\n width: 320px;\n\n box-shadow: 0 0 0 2px transparent;\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n\n ", "\n\n cursor: ", ";\n"])), function (props) {
451
- return props.mode === "filedrop" ? "row" : "column";
452
- }, function (props) {
453
- return props.mode === "dropzone" && "justify-content: center; padding: 1rem;";
454
- }, function (props) {
455
- return props.mode === "filedrop" ? "48px" : "160px";
456
- }, function (props) {
457
- return props.theme.dropBorderRadius;
458
- }, function (props) {
459
- return props.theme.dropBorderThickness;
460
- }, function (props) {
461
- return props.theme.dropBorderStyle;
462
- }, function (props) {
463
- return props.disabled ? props.theme.disabledDropBorderColor : props.theme.dropBorderColor;
464
- }, function (props) {
465
- return props.isDragging && "\n background-color: ".concat(props.theme.dragoverDropBackgroundColor, ";\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.theme.focusDropBorderColor, ";\n ");
466
- }, function (props) {
467
- return props.disabled && "not-allowed";
468
- });
469
-
470
- var FileContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n margin-top: 0.25rem;\n"])), function (props) {
471
- return props.multiple || props.files.length > 1 ? "column" : "row";
472
- });
473
-
474
- var HiddenInputFile = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n visibility: hidden;\n position: absolute;\n width: 0px;\n height: 0px;\n"])));
475
-
476
- var ButtonContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n"])), function (props) {
477
- return props.mode === "filedrop" && "padding: 2px 12px 2px 3px";
478
- });
479
-
480
- var DropzoneLabel = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 3;\n text-align: center;\n margin-top: 0.5rem;\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), function (props) {
481
- return props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor;
482
- }, function (props) {
483
- return props.theme.dropLabelFontFamily;
484
- }, function (props) {
485
- return props.theme.dropLabelFontSize;
486
- }, function (props) {
487
- return props.theme.dropLabelFontWeight;
488
- });
489
-
490
- var FiledropLabel = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n margin-right: 1rem;\n"])), function (props) {
491
- return props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor;
492
- }, function (props) {
493
- return props.theme.dropLabelFontFamily;
494
- }, function (props) {
495
- return props.theme.dropLabelFontSize;
496
- }, function (props) {
497
- return props.theme.dropLabelFontWeight;
498
- });
499
-
500
- var Container = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin-top: 0.25rem;\n"])));
501
-
502
- var FileItemContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n margin-top: ", ";\n margin-left: ", ";\n"])), function (props) {
503
- return (props.multiple || props.files.length > 1 || props.mode !== "file") && "4px";
504
- }, function (props) {
505
- return props.mode === "file" && props.files.length === 1 && !props.multiple && "4px";
506
- });
507
-
508
- var ErrorMessage = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: 0.25rem;\n"])), function (props) {
509
- return props.theme.errorMessageFontColor;
510
- }, function (props) {
511
- return props.theme.errorMessageFontFamily;
512
- }, function (props) {
513
- return props.theme.errorMessageFontSize;
514
- }, function (props) {
515
- return props.theme.errorMessageFontWeight;
516
- }, function (props) {
517
- return props.theme.errorMessageLineHeight;
518
- });
519
-
520
- var _default = DxcFileInput;
521
- exports["default"] = _default;
@@ -1,14 +0,0 @@
1
- /// <reference types="react" />
2
- declare const FileItem: ({ mode, multiple, name, error, showPreview, preview, type, numFiles, onDelete, tabIndex, }: {
3
- mode: any;
4
- multiple: any;
5
- name?: string;
6
- error?: string;
7
- showPreview: any;
8
- preview: any;
9
- type: any;
10
- numFiles: any;
11
- onDelete: any;
12
- tabIndex: any;
13
- }) => JSX.Element;
14
- export default FileItem;