@synerise/ds-file-uploader 0.6.0 → 0.6.4
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/CHANGELOG.md +32 -0
- package/dist/AvatarUploader/AvatarUploader.js +6 -20
- package/dist/AvatarUploader/AvatarUploader.styles.js +2 -2
- package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.js +5 -19
- package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.styles.js +5 -5
- package/dist/FileUploader.js +7 -21
- package/dist/FileUploader.styles.js +2 -2
- package/dist/FileView/FileView.js +3 -16
- package/dist/FileView/FileView.styles.js +5 -5
- package/dist/ItemUploader/ItemUploader.js +3 -16
- package/dist/ItemUploader/ItemUploader.styles.js +2 -2
- package/dist/ItemUploader/UploaderButton/FileViewItem.js +2 -15
- package/dist/ItemUploader/UploaderButton/FileViewItem.styles.js +4 -4
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.6.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.6.3...@synerise/ds-file-uploader@0.6.4) (2021-11-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-file-uploader
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.6.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.6.2...@synerise/ds-file-uploader@0.6.3) (2021-11-22)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-file-uploader
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.6.1...@synerise/ds-file-uploader@0.6.2) (2021-11-16)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @synerise/ds-file-uploader
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.5.94...@synerise/ds-file-uploader@0.6.1) (2021-11-09)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @synerise/ds-file-uploader
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
# [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@0.5.94...@synerise/ds-file-uploader@0.6.0) (2021-11-09)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @synerise/ds-file-uploader
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
-
|
|
5
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
-
|
|
7
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
-
|
|
9
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
10
|
-
|
|
11
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
-
|
|
13
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
-
|
|
15
3
|
import * as React from 'react';
|
|
16
4
|
import { FormattedMessage } from 'react-intl';
|
|
17
5
|
import { useDropzone } from 'react-dropzone';
|
|
@@ -73,9 +61,8 @@ var AvatarUploader = function AvatarUploader(_ref) {
|
|
|
73
61
|
} : _ref$texts;
|
|
74
62
|
|
|
75
63
|
var _React$useState = React.useState(true),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
setUploadSuccess = _React$useState2[1];
|
|
64
|
+
uploadSuccess = _React$useState[0],
|
|
65
|
+
setUploadSuccess = _React$useState[1];
|
|
79
66
|
|
|
80
67
|
var readFilesContent = React.useCallback(function (addedFiles) {
|
|
81
68
|
var readerPromises = addedFiles.map(function (file) {
|
|
@@ -123,13 +110,12 @@ var AvatarUploader = function AvatarUploader(_ref) {
|
|
|
123
110
|
|
|
124
111
|
var hasError = Boolean(error) || !uploadSuccess;
|
|
125
112
|
|
|
126
|
-
var _React$
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
setPressed = _React$useState4[1];
|
|
113
|
+
var _React$useState2 = React.useState(false),
|
|
114
|
+
pressed = _React$useState2[0],
|
|
115
|
+
setPressed = _React$useState2[1];
|
|
130
116
|
|
|
131
117
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
132
|
-
className: "ds-file-avatar-uploader "
|
|
118
|
+
className: "ds-file-avatar-uploader " + (className || '')
|
|
133
119
|
}, label && /*#__PURE__*/React.createElement(S.Label, null, /*#__PURE__*/React.createElement("span", null, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
|
|
134
120
|
trigger: "hover",
|
|
135
121
|
placement: "top",
|
|
@@ -52,7 +52,7 @@ export var DropAreaButton = styled.button.withConfig({
|
|
|
52
52
|
}, IconContainer, function (props) {
|
|
53
53
|
return props.theme.palette['grey-800'];
|
|
54
54
|
}, function (props) {
|
|
55
|
-
return props.hasError && "\n background-color: "
|
|
55
|
+
return props.hasError && "\n background-color: " + props.theme.palette['red-050'] + ";\n border-color: " + props.theme.palette['red-600'] + ";\n ";
|
|
56
56
|
}, function (props) {
|
|
57
57
|
return props.pressed && !props.disabled && css(["&&&:active,&&&{background-color:", ";}"], hexToRgba(props.theme.palette['grey-200'], 0.4));
|
|
58
58
|
}, function (props) {
|
|
@@ -80,7 +80,7 @@ export var DropAreaButton = styled.button.withConfig({
|
|
|
80
80
|
}, function (props) {
|
|
81
81
|
return props.theme.palette['blue-050'];
|
|
82
82
|
}, IconContainer, function (props) {
|
|
83
|
-
return props.isDropping && !props.disabled && "\n height: "
|
|
83
|
+
return props.isDropping && !props.disabled && "\n height: " + (props.mode === 'multi-large' ? '200px' : '80px') + ";\n background-color: " + props.theme.palette['blue-050'] + " !important;\n border-color: " + props.theme.palette['blue-300'] + " !important;\n\n span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n color: " + props.theme.palette['blue-500'] + " !important;\n }\n\n " + IconContainer + " {\n fill: " + props.theme.palette['blue-500'] + " !important;\n }\n ";
|
|
84
84
|
});
|
|
85
85
|
export var ErrorMessage = styled(Typography.Text).withConfig({
|
|
86
86
|
displayName: "AvatarUploaderstyles__ErrorMessage",
|
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import * as React from 'react';
|
|
14
2
|
import Tooltip from '@synerise/ds-tooltip';
|
|
15
3
|
import Icon, { RepeatM, FileTypeImageM, Close3M, FileM } from '@synerise/ds-icon';
|
|
@@ -40,19 +28,17 @@ var FileViewAvatar = function FileViewAvatar(_ref) {
|
|
|
40
28
|
var hasProgress = typeof progress === 'number';
|
|
41
29
|
|
|
42
30
|
var _React$useState = React.useState(false),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
setPressed = _React$useState2[1];
|
|
31
|
+
pressed = _React$useState[0],
|
|
32
|
+
setPressed = _React$useState[1];
|
|
46
33
|
|
|
47
34
|
var handleRemoveAvatar = function handleRemoveAvatar() {
|
|
48
35
|
onRemove && onRemove();
|
|
49
36
|
setPressed(false);
|
|
50
37
|
};
|
|
51
38
|
|
|
52
|
-
var _React$
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
removeButtonSetPressed = _React$useState4[1];
|
|
39
|
+
var _React$useState2 = React.useState(false),
|
|
40
|
+
removeButtonPressed = _React$useState2[0],
|
|
41
|
+
removeButtonSetPressed = _React$useState2[1];
|
|
56
42
|
|
|
57
43
|
var handleRemove = function handleRemove() {
|
|
58
44
|
onRemove && onRemove();
|
|
@@ -23,7 +23,7 @@ export var SmallLoader = styled(Loader).withConfig({
|
|
|
23
23
|
displayName: "FileViewAvatarstyles__SmallLoader",
|
|
24
24
|
componentId: "sc-1jbyu2z-3"
|
|
25
25
|
})(["border:1px solid ", ";border-top:2px solid transparent;border-radius:50%;animation:", " 2s linear infinite;"], function (props) {
|
|
26
|
-
return props.theme.palette[
|
|
26
|
+
return props.theme.palette[props.color + "-600"];
|
|
27
27
|
}, spinnerAnimation);
|
|
28
28
|
export var PlaceholderImage = styled.div.withConfig({
|
|
29
29
|
displayName: "FileViewAvatarstyles__PlaceholderImage",
|
|
@@ -83,7 +83,7 @@ export var AvatarContainer = styled.div.withConfig({
|
|
|
83
83
|
})(["background:url('", "') 50% 50% no-repeat;background-size:cover;min-width:80px;min-height:80px;width:80px;height:80px;border-radius:3px;overflow:visible;margin-right:14px;", ";&:hover{", "{display:flex;overflow:visible;}}"], function (props) {
|
|
84
84
|
return props.source;
|
|
85
85
|
}, function (props) {
|
|
86
|
-
return props.disabled && "\n background-color: "
|
|
86
|
+
return props.disabled && "\n background-color: " + props.theme.palette['grey-100'] + ";\n opacity: 0.4;\n ";
|
|
87
87
|
}, RemoveWrapper);
|
|
88
88
|
export var FileView = styled.button.withConfig({
|
|
89
89
|
displayName: "FileViewAvatarstyles__FileView",
|
|
@@ -99,7 +99,7 @@ export var FileView = styled.button.withConfig({
|
|
|
99
99
|
}, PreviewImage, IconContainer, function (props) {
|
|
100
100
|
return props.theme.palette['blue-600'];
|
|
101
101
|
}, function (props) {
|
|
102
|
-
return props.removable && !props.disabled && "\n "
|
|
102
|
+
return props.removable && !props.disabled && "\n " + RemoveButtonWrapper + " {\n display: block;\n }\n ";
|
|
103
103
|
}, function (props) {
|
|
104
104
|
return props.theme.palette['blue-600'];
|
|
105
105
|
}, function (props) {
|
|
@@ -115,9 +115,9 @@ export var FileView = styled.button.withConfig({
|
|
|
115
115
|
}, PreviewImage, IconContainer, function (props) {
|
|
116
116
|
return props.theme.palette['blue-600'];
|
|
117
117
|
}, function (props) {
|
|
118
|
-
return props.disabled && "\n background-color: "
|
|
118
|
+
return props.disabled && "\n background-color: " + props.theme.palette['grey-100'] + ";\n opacity: 0.4;\n ";
|
|
119
119
|
}, function (props) {
|
|
120
|
-
return props.error && "\n && {\n padding-right: 7px;\n border: 1px solid "
|
|
120
|
+
return props.error && "\n && {\n padding-right: 7px;\n border: 1px solid " + props.theme.palette['red-600'] + ";\n background-color: " + props.theme.palette['grey-050'] + ";\n " + Name + " {\n padding-right: 4px;\n }\n }\n ";
|
|
121
121
|
}, function (props) {
|
|
122
122
|
return props.progress && "\n && {\n padding-right: 7px;\n }\n ";
|
|
123
123
|
});
|
package/dist/FileUploader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly)
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
2
2
|
|
|
3
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4
4
|
|
|
@@ -6,18 +6,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
6
6
|
|
|
7
7
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
8
8
|
|
|
9
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
-
|
|
11
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
-
|
|
13
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
-
|
|
15
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
16
|
-
|
|
17
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
18
|
-
|
|
19
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
-
|
|
21
9
|
import * as React from 'react';
|
|
22
10
|
import { FormattedMessage } from 'react-intl';
|
|
23
11
|
import { useDropzone } from 'react-dropzone';
|
|
@@ -82,9 +70,8 @@ var FileUploader = function FileUploader(_ref) {
|
|
|
82
70
|
} : _ref$texts;
|
|
83
71
|
|
|
84
72
|
var _React$useState = React.useState(true),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
setUploadSuccess = _React$useState2[1];
|
|
73
|
+
uploadSuccess = _React$useState[0],
|
|
74
|
+
setUploadSuccess = _React$useState[1];
|
|
88
75
|
|
|
89
76
|
var readFilesContent = React.useCallback(function (addedFiles) {
|
|
90
77
|
var readerPromises = addedFiles.map(function (file) {
|
|
@@ -132,14 +119,13 @@ var FileUploader = function FileUploader(_ref) {
|
|
|
132
119
|
|
|
133
120
|
var hasError = Boolean(error) || !uploadSuccess;
|
|
134
121
|
|
|
135
|
-
var _React$
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
setPressed = _React$useState4[1];
|
|
122
|
+
var _React$useState2 = React.useState(false),
|
|
123
|
+
pressed = _React$useState2[0],
|
|
124
|
+
setPressed = _React$useState2[1];
|
|
139
125
|
|
|
140
126
|
var errors = hasError && !uploadSuccess ? [error].concat('To many files uploaded') : [error];
|
|
141
127
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
142
|
-
className: "ds-file-uploader "
|
|
128
|
+
className: "ds-file-uploader " + (className || '')
|
|
143
129
|
}, label && /*#__PURE__*/React.createElement(S.Label, null, /*#__PURE__*/React.createElement("span", null, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
|
|
144
130
|
trigger: "hover",
|
|
145
131
|
placement: "top",
|
|
@@ -51,7 +51,7 @@ export var DropAreaButton = styled.button.withConfig({
|
|
|
51
51
|
}, IconContainer, function (props) {
|
|
52
52
|
return props.theme.palette['grey-700'];
|
|
53
53
|
}, function (props) {
|
|
54
|
-
return props.hasError && "\n background-color: "
|
|
54
|
+
return props.hasError && "\n background-color: " + props.theme.palette['red-050'] + ";\n border-color: " + props.theme.palette['red-600'] + ";\n ";
|
|
55
55
|
}, function (props) {
|
|
56
56
|
return props.pressed && !props.disabled && css(["&&&:active,&&&{background-color:", ";}"], hexToRgba(props.theme.palette['grey-200'], 0.4));
|
|
57
57
|
}, function (props) {
|
|
@@ -79,7 +79,7 @@ export var DropAreaButton = styled.button.withConfig({
|
|
|
79
79
|
}, function (props) {
|
|
80
80
|
return props.theme.palette['blue-050'];
|
|
81
81
|
}, IconContainer, function (props) {
|
|
82
|
-
return props.isDropping && !props.disabled && "\n height: "
|
|
82
|
+
return props.isDropping && !props.disabled && "\n height: " + (props.mode === 'multi-large' && props.filesLength === 0 ? '160px' : 'auto') + ";\n background-color: " + props.theme.palette['blue-050'] + " !important;\n border-color: " + props.theme.palette['blue-300'] + " !important;\n\n span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n color: " + props.theme.palette['blue-500'] + " !important;\n }\n\n " + IconContainer + " {\n fill: " + props.theme.palette['blue-500'] + " !important;\n }\n ";
|
|
83
83
|
});
|
|
84
84
|
export var ErrorMessage = styled(Typography.Text).withConfig({
|
|
85
85
|
displayName: "FileUploaderstyles__ErrorMessage",
|
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import * as React from 'react';
|
|
14
2
|
import filesize from 'filesize.js';
|
|
15
3
|
import ProgressBar from '@synerise/ds-progress-bar';
|
|
@@ -56,9 +44,8 @@ var FileView = function FileView(_ref) {
|
|
|
56
44
|
var hasProgress = typeof progress === 'number';
|
|
57
45
|
|
|
58
46
|
var _React$useState = React.useState(false),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
setPressed = _React$useState2[1];
|
|
47
|
+
pressed = _React$useState[0],
|
|
48
|
+
setPressed = _React$useState[1];
|
|
62
49
|
|
|
63
50
|
var handleRemove = function handleRemove() {
|
|
64
51
|
onRemove && onRemove();
|
|
@@ -100,7 +87,7 @@ var FileView = function FileView(_ref) {
|
|
|
100
87
|
onClick: function onClick(event) {
|
|
101
88
|
onRemove && onRemove();
|
|
102
89
|
|
|
103
|
-
if (retryButtonProps
|
|
90
|
+
if (retryButtonProps != null && retryButtonProps.onClick) {
|
|
104
91
|
retryButtonProps.onClick(event);
|
|
105
92
|
}
|
|
106
93
|
},
|
|
@@ -82,15 +82,15 @@ export var FileViewContainer = styled.button.withConfig({
|
|
|
82
82
|
}, function (props) {
|
|
83
83
|
return props.theme.palette['grey-300'];
|
|
84
84
|
}, function (props) {
|
|
85
|
-
return props.removable && !props.disabled && "\n "
|
|
85
|
+
return props.removable && !props.disabled && "\n " + RemoveButtonWrapper + " {\n display: block;\n }\n ";
|
|
86
86
|
}, function (props) {
|
|
87
|
-
return !props.disabled && "\n "
|
|
87
|
+
return !props.disabled && "\n " + CheckButtonWrapper + " {\n display: none;\n }\n ";
|
|
88
88
|
}, function (props) {
|
|
89
89
|
return props.theme.palette['blue-500'];
|
|
90
90
|
}, function (props) {
|
|
91
91
|
return props.theme.palette['grey-050'];
|
|
92
92
|
}, function (props) {
|
|
93
|
-
return props.pressed && "\n "
|
|
93
|
+
return props.pressed && "\n " + CheckButtonWrapper + " {\n display: none;\n }\n ";
|
|
94
94
|
}, function (props) {
|
|
95
95
|
return props.theme.palette['grey-050'];
|
|
96
96
|
}, function (props) {
|
|
@@ -98,7 +98,7 @@ export var FileViewContainer = styled.button.withConfig({
|
|
|
98
98
|
}, function (props) {
|
|
99
99
|
return props.theme.palette['grey-100'];
|
|
100
100
|
}, function (props) {
|
|
101
|
-
return props.disabled && "\n background-color: "
|
|
101
|
+
return props.disabled && "\n background-color: " + props.theme.palette['grey-050'] + ";\n opacity: 0.4;\n ";
|
|
102
102
|
}, function (props) {
|
|
103
|
-
return props.error && !props.progress && "\n && {\n border: 1px solid "
|
|
103
|
+
return props.error && !props.progress && "\n && {\n border: 1px solid " + props.theme.palette['red-600'] + ";\n\n " + SizeOrError + " {\n color: " + props.theme.palette['red-600'] + ";\n }\n }\n ";
|
|
104
104
|
});
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
-
|
|
5
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
-
|
|
7
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
-
|
|
9
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
10
|
-
|
|
11
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
-
|
|
13
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
-
|
|
15
3
|
import * as React from 'react';
|
|
16
4
|
import { FormattedMessage } from 'react-intl';
|
|
17
5
|
import { useDropzone } from 'react-dropzone';
|
|
@@ -73,9 +61,8 @@ var ItemUploader = function ItemUploader(_ref) {
|
|
|
73
61
|
} : _ref$texts;
|
|
74
62
|
|
|
75
63
|
var _React$useState = React.useState(true),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
setUploadSuccess = _React$useState2[1];
|
|
64
|
+
uploadSuccess = _React$useState[0],
|
|
65
|
+
setUploadSuccess = _React$useState[1];
|
|
79
66
|
|
|
80
67
|
var readFilesContent = React.useCallback(function (addedFiles) {
|
|
81
68
|
var readerPromises = addedFiles.map(function (file) {
|
|
@@ -123,7 +110,7 @@ var ItemUploader = function ItemUploader(_ref) {
|
|
|
123
110
|
var hasError = Boolean(error) || !uploadSuccess;
|
|
124
111
|
var errors = hasError && !uploadSuccess ? [error].concat('To many files uploaded') : [error];
|
|
125
112
|
return /*#__PURE__*/React.createElement(S.Container, {
|
|
126
|
-
className: "ds-file-avatar-uploader "
|
|
113
|
+
className: "ds-file-avatar-uploader " + (className || '')
|
|
127
114
|
}, label && /*#__PURE__*/React.createElement(S.Label, null, /*#__PURE__*/React.createElement("span", null, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
|
|
128
115
|
trigger: "hover",
|
|
129
116
|
placement: "top",
|
|
@@ -43,7 +43,7 @@ export var DropAreaButton = styled.button.withConfig({
|
|
|
43
43
|
}, IconContainer, function (props) {
|
|
44
44
|
return props.theme.palette['grey-800'];
|
|
45
45
|
}, function (props) {
|
|
46
|
-
return props.hasError && "\n background-color: "
|
|
46
|
+
return props.hasError && "\n background-color: " + props.theme.palette['red-050'] + ";\n border-color: " + props.theme.palette['red-600'] + ";\n ";
|
|
47
47
|
}, function (props) {
|
|
48
48
|
return props.pressed && !props.disabled && css(["&&&:active,&&&{background-color:", ";}"], props.theme.palette['grey-100']);
|
|
49
49
|
}, function (props) {
|
|
@@ -71,7 +71,7 @@ export var DropAreaButton = styled.button.withConfig({
|
|
|
71
71
|
}, function (props) {
|
|
72
72
|
return props.theme.palette['blue-050'];
|
|
73
73
|
}, IconContainer, function (props) {
|
|
74
|
-
return props.isDropping && !props.disabled && "\n height: "
|
|
74
|
+
return props.isDropping && !props.disabled && "\n height: " + (props.mode === 'multi-large' ? '168px' : 'auto') + ";\n background-color: " + props.theme.palette['blue-050'] + " !important;\n border-color: " + props.theme.palette['blue-300'] + " !important;\n\n span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n color: " + props.theme.palette['blue-500'] + " !important;\n }\n\n " + IconContainer + " {\n fill: " + props.theme.palette['blue-500'] + " !important;\n }\n ";
|
|
75
75
|
});
|
|
76
76
|
export var ErrorMessage = styled(Typography.Text).withConfig({
|
|
77
77
|
displayName: "ItemUploaderstyles__ErrorMessage",
|
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import * as React from 'react';
|
|
14
2
|
import Tooltip from '@synerise/ds-tooltip';
|
|
15
3
|
import Icon, { RepeatM, FileTypeTextM, Close3M, FileM } from '@synerise/ds-icon';
|
|
@@ -36,9 +24,8 @@ var FileViewItem = function FileViewItem(_ref) {
|
|
|
36
24
|
var hasProgress = typeof progress === 'number';
|
|
37
25
|
|
|
38
26
|
var _React$useState = React.useState(false),
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
removeButtonSetPressed = _React$useState2[1];
|
|
27
|
+
removeButtonPressed = _React$useState[0],
|
|
28
|
+
removeButtonSetPressed = _React$useState[1];
|
|
42
29
|
|
|
43
30
|
var handleRemove = function handleRemove() {
|
|
44
31
|
onRemove && onRemove();
|
|
@@ -23,7 +23,7 @@ export var SmallLoader = styled(Loader).withConfig({
|
|
|
23
23
|
displayName: "FileViewItemstyles__SmallLoader",
|
|
24
24
|
componentId: "sc-1rkoxpv-3"
|
|
25
25
|
})(["border:1px solid ", ";border-top:2px solid transparent;border-radius:50%;animation:", " 2s linear infinite;"], function (props) {
|
|
26
|
-
return props.theme.palette[
|
|
26
|
+
return props.theme.palette[props.color + "-600"];
|
|
27
27
|
}, spinnerAnimation);
|
|
28
28
|
export var PlaceholderImage = styled.div.withConfig({
|
|
29
29
|
displayName: "FileViewItemstyles__PlaceholderImage",
|
|
@@ -73,7 +73,7 @@ export var FileView = styled.button.withConfig({
|
|
|
73
73
|
}, PreviewImage, IconContainer, function (props) {
|
|
74
74
|
return props.theme.palette['blue-600'];
|
|
75
75
|
}, function (props) {
|
|
76
|
-
return props.removable && !props.disabled && "\n "
|
|
76
|
+
return props.removable && !props.disabled && "\n " + RemoveButtonWrapper + " {\n display: block;\n }\n ";
|
|
77
77
|
}, function (props) {
|
|
78
78
|
return props.theme.palette['blue-600'];
|
|
79
79
|
}, function (props) {
|
|
@@ -89,9 +89,9 @@ export var FileView = styled.button.withConfig({
|
|
|
89
89
|
}, PreviewImage, IconContainer, function (props) {
|
|
90
90
|
return props.theme.palette['blue-600'];
|
|
91
91
|
}, function (props) {
|
|
92
|
-
return props.disabled && "\n background-color: "
|
|
92
|
+
return props.disabled && "\n background-color: " + props.theme.palette['grey-100'] + ";\n opacity: 0.4;\n ";
|
|
93
93
|
}, function (props) {
|
|
94
|
-
return props.error && "\n && {\n padding-right: 7px;\n border: 1px solid "
|
|
94
|
+
return props.error && "\n && {\n padding-right: 7px;\n border: 1px solid " + props.theme.palette['red-600'] + ";\n background-color: " + props.theme.palette['grey-050'] + ";\n " + Name + " {\n padding-right: 4px;\n }\n }\n ";
|
|
95
95
|
}, function (props) {
|
|
96
96
|
return props.progress && "\n && {\n padding-right: 7px;\n }\n ";
|
|
97
97
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-file-uploader",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.4",
|
|
4
4
|
"description": "FileUploader UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-button": "^0.16.
|
|
36
|
-
"@synerise/ds-icon": "^0.46.
|
|
37
|
-
"@synerise/ds-progress-bar": "^0.6.
|
|
38
|
-
"@synerise/ds-tooltip": "^0.11.
|
|
39
|
-
"@synerise/ds-typography": "^0.12.
|
|
35
|
+
"@synerise/ds-button": "^0.16.2",
|
|
36
|
+
"@synerise/ds-icon": "^0.46.2",
|
|
37
|
+
"@synerise/ds-progress-bar": "^0.6.4",
|
|
38
|
+
"@synerise/ds-tooltip": "^0.11.2",
|
|
39
|
+
"@synerise/ds-typography": "^0.12.2",
|
|
40
40
|
"filesize.js": "^2.0.0",
|
|
41
41
|
"react-dropzone": "^10.2.1"
|
|
42
42
|
},
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"@synerise/ds-core": "*",
|
|
45
45
|
"react": ">=16.9.0 < 17.0.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "3e5f807c3c9ce7bbcb707b1e229ad5d7ef50d830"
|
|
48
48
|
}
|