@sb1/ffe-file-upload-react 6.1.5 → 6.1.6
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/es/FileItem.js +9 -11
- package/es/FileUpload.js +13 -49
- package/es/file-content.js +0 -3
- package/lib/FileItem.js +9 -14
- package/lib/FileUpload.js +13 -56
- package/lib/file-content.js +0 -5
- package/lib/index.js +0 -4
- package/package.json +50 -50
package/es/FileItem.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { func, shape, object, string as stringType } from 'prop-types';
|
|
3
|
-
|
|
4
3
|
var FileItem = function FileItem(_ref) {
|
|
5
4
|
var file = _ref.file,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return /*#__PURE__*/React.createElement("li", null,
|
|
5
|
+
onFileDeleted = _ref.onFileDeleted,
|
|
6
|
+
cancelText = _ref.cancelText,
|
|
7
|
+
deleteText = _ref.deleteText;
|
|
8
|
+
return /*#__PURE__*/React.createElement("li", null,
|
|
9
|
+
// File is loading
|
|
10
10
|
!file.document && !file.error && /*#__PURE__*/React.createElement("div", {
|
|
11
11
|
className: "ffe-file-upload__file-item-stencil"
|
|
12
12
|
}, /*#__PURE__*/React.createElement("button", {
|
|
@@ -23,7 +23,8 @@ var FileItem = function FileItem(_ref) {
|
|
|
23
23
|
className: "ffe-file-upload__file-item-stencil-info-background"
|
|
24
24
|
}), /*#__PURE__*/React.createElement("div", {
|
|
25
25
|
className: "ffe-file-upload__file-item-stencil-info-filename"
|
|
26
|
-
}, file.name))),
|
|
26
|
+
}, file.name))),
|
|
27
|
+
// File finished loading without error
|
|
27
28
|
file.document && !file.error && /*#__PURE__*/React.createElement("div", {
|
|
28
29
|
className: "ffe-file-upload__file-item-loaded"
|
|
29
30
|
}, /*#__PURE__*/React.createElement("button", {
|
|
@@ -36,7 +37,8 @@ var FileItem = function FileItem(_ref) {
|
|
|
36
37
|
className: "ffe-file-upload__file-item-delete-icon"
|
|
37
38
|
})), /*#__PURE__*/React.createElement("div", {
|
|
38
39
|
className: "ffe-file-upload__file-item-filename"
|
|
39
|
-
}, file.name)),
|
|
40
|
+
}, file.name)),
|
|
41
|
+
// File has error
|
|
40
42
|
file.error && /*#__PURE__*/React.createElement("div", {
|
|
41
43
|
className: "ffe-file-upload__file-item-error"
|
|
42
44
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -57,7 +59,6 @@ var FileItem = function FileItem(_ref) {
|
|
|
57
59
|
className: "ffe-file-upload__file-item-error-message"
|
|
58
60
|
}, file.error))));
|
|
59
61
|
};
|
|
60
|
-
|
|
61
62
|
FileItem.propTypes = {
|
|
62
63
|
/** Shape of the file type, name is required, error and document.content is optional */
|
|
63
64
|
file: shape({
|
|
@@ -65,15 +66,12 @@ FileItem.propTypes = {
|
|
|
65
66
|
document: object,
|
|
66
67
|
error: stringType
|
|
67
68
|
}).isRequired,
|
|
68
|
-
|
|
69
69
|
/**
|
|
70
70
|
* Called when the user clicks the delete button for a given file. Is called with the name of the file in question.
|
|
71
71
|
*/
|
|
72
72
|
onFileDeleted: func.isRequired,
|
|
73
|
-
|
|
74
73
|
/** Label for the cancel button */
|
|
75
74
|
cancelText: stringType,
|
|
76
|
-
|
|
77
75
|
/** Label for the delete button */
|
|
78
76
|
deleteText: stringType
|
|
79
77
|
};
|
package/es/FileUpload.js
CHANGED
|
@@ -1,42 +1,26 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
|
|
3
2
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
4
|
-
|
|
5
3
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
6
|
-
|
|
7
4
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
8
|
-
|
|
9
5
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
10
|
-
|
|
11
6
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
12
|
-
|
|
13
7
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
14
|
-
|
|
15
8
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
16
|
-
|
|
17
9
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
18
|
-
|
|
19
10
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
20
|
-
|
|
21
11
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
22
|
-
|
|
23
12
|
import React from 'react';
|
|
24
13
|
import { object, bool, func, string as stringType } from 'prop-types';
|
|
25
14
|
import FileItem from './FileItem';
|
|
26
15
|
import classNames from 'classnames';
|
|
27
16
|
import { SecondaryButton } from '@sb1/ffe-buttons-react';
|
|
28
17
|
import PilNedIBoksIkon from "@sb1/ffe-icons-react/es/pil-ned-i-boks-ikon";
|
|
29
|
-
|
|
30
18
|
var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
31
19
|
_inherits(FileUpload, _React$Component);
|
|
32
|
-
|
|
33
20
|
var _super = _createSuper(FileUpload);
|
|
34
|
-
|
|
35
21
|
function FileUpload(props) {
|
|
36
22
|
var _this;
|
|
37
|
-
|
|
38
23
|
_classCallCheck(this, FileUpload);
|
|
39
|
-
|
|
40
24
|
_this = _super.call(this, props);
|
|
41
25
|
_this.onFilesSelected = _this.onFilesSelected.bind(_assertThisInitialized(_this));
|
|
42
26
|
_this.onFilesDropped = _this.onFilesDropped.bind(_assertThisInitialized(_this));
|
|
@@ -48,7 +32,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
48
32
|
};
|
|
49
33
|
return _this;
|
|
50
34
|
}
|
|
51
|
-
|
|
52
35
|
_createClass(FileUpload, [{
|
|
53
36
|
key: "setFileInputElement",
|
|
54
37
|
value: function setFileInputElement(element) {
|
|
@@ -61,7 +44,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
61
44
|
if (this.fileInputElement) {
|
|
62
45
|
this.fileInputElement.value = '';
|
|
63
46
|
}
|
|
64
|
-
|
|
65
47
|
this.fileInputElement.click();
|
|
66
48
|
}
|
|
67
49
|
}, {
|
|
@@ -87,21 +69,20 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
87
69
|
key: "render",
|
|
88
70
|
value: function render() {
|
|
89
71
|
var _this2 = this;
|
|
90
|
-
|
|
91
72
|
var _this$props = this.props,
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
73
|
+
id = _this$props.id,
|
|
74
|
+
label = _this$props.label,
|
|
75
|
+
files = _this$props.files,
|
|
76
|
+
cancelText = _this$props.cancelText,
|
|
77
|
+
deleteText = _this$props.deleteText,
|
|
78
|
+
multiple = _this$props.multiple,
|
|
79
|
+
title = _this$props.title,
|
|
80
|
+
infoText = _this$props.infoText,
|
|
81
|
+
infoSubText = _this$props.infoSubText,
|
|
82
|
+
uploadTitle = _this$props.uploadTitle,
|
|
83
|
+
uploadMicroText = _this$props.uploadMicroText,
|
|
84
|
+
uploadSubText = _this$props.uploadSubText,
|
|
85
|
+
onFileDeleted = _this$props.onFileDeleted;
|
|
105
86
|
return /*#__PURE__*/React.createElement("div", {
|
|
106
87
|
className: "ffe-file-upload"
|
|
107
88
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -128,7 +109,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
128
109
|
onDrop: this.onFilesDropped,
|
|
129
110
|
onDragOver: function onDragOver(event) {
|
|
130
111
|
event.preventDefault();
|
|
131
|
-
|
|
132
112
|
_this2.setState({
|
|
133
113
|
hover: true
|
|
134
114
|
});
|
|
@@ -164,24 +144,19 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
164
144
|
}));
|
|
165
145
|
}
|
|
166
146
|
}]);
|
|
167
|
-
|
|
168
147
|
return FileUpload;
|
|
169
148
|
}(React.Component);
|
|
170
|
-
|
|
171
149
|
FileUpload.propTypes = {
|
|
172
150
|
/** ID for the input field. The ID is used as a base for the label ID as well. */
|
|
173
151
|
id: stringType.isRequired,
|
|
174
|
-
|
|
175
152
|
/** Label for the button to trigger native upload handling. */
|
|
176
153
|
label: stringType.isRequired,
|
|
177
|
-
|
|
178
154
|
/**
|
|
179
155
|
* A map of files, indexed by file name (check file-shape on FileItem.js propTypes), that the user has uploaded.
|
|
180
156
|
* Must be maintained outside of `FileUpload`. It is up to the implementation to deny or accept file types, sizes, etc,
|
|
181
157
|
* and it is important that duplicates are not allowed.
|
|
182
158
|
* */
|
|
183
159
|
files: object.isRequired,
|
|
184
|
-
|
|
185
160
|
/**
|
|
186
161
|
* Will be called with `FileList`-object containing the `File`-objects the user selected.
|
|
187
162
|
* See MDN for documentation on
|
|
@@ -189,40 +164,29 @@ FileUpload.propTypes = {
|
|
|
189
164
|
* [File](https://developer.mozilla.org/en-US/docs/Web/API/File).
|
|
190
165
|
*/
|
|
191
166
|
onFilesSelected: func.isRequired,
|
|
192
|
-
|
|
193
167
|
/** Will be called when objects are dropped over the upload-section. */
|
|
194
168
|
onFilesDropped: func.isRequired,
|
|
195
|
-
|
|
196
169
|
/**
|
|
197
170
|
* Called when the user clicks the delete button for a given file. Is called with the `File`
|
|
198
171
|
* object of the file in question.
|
|
199
172
|
*/
|
|
200
173
|
onFileDeleted: func.isRequired,
|
|
201
|
-
|
|
202
174
|
/** Whether or not uploading multiple files at once via the native file handler is allowed*/
|
|
203
175
|
multiple: bool,
|
|
204
|
-
|
|
205
176
|
/** Title module */
|
|
206
177
|
title: stringType.isRequired,
|
|
207
|
-
|
|
208
178
|
/** Text on the info-section */
|
|
209
179
|
infoText: stringType.isRequired,
|
|
210
|
-
|
|
211
180
|
/** Subtext on the info-section */
|
|
212
181
|
infoSubText: stringType,
|
|
213
|
-
|
|
214
182
|
/** Label for the cancel button */
|
|
215
183
|
cancelText: stringType,
|
|
216
|
-
|
|
217
184
|
/** Label for the delete button */
|
|
218
185
|
deleteText: stringType,
|
|
219
|
-
|
|
220
186
|
/** Title on the upload-section */
|
|
221
187
|
uploadTitle: stringType.isRequired,
|
|
222
|
-
|
|
223
188
|
/** MicroText on the upload-section */
|
|
224
189
|
uploadMicroText: stringType.isRequired,
|
|
225
|
-
|
|
226
190
|
/** SubText on the upload-section */
|
|
227
191
|
uploadSubText: stringType.isRequired
|
|
228
192
|
};
|
package/es/file-content.js
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
export var getFileContent = function getFileContent(file) {
|
|
2
2
|
return new Promise(function (resolve, reject) {
|
|
3
3
|
var reader = new window.FileReader();
|
|
4
|
-
|
|
5
4
|
reader.onload = function (event) {
|
|
6
5
|
return resolve(event.target.result);
|
|
7
6
|
};
|
|
8
|
-
|
|
9
7
|
reader.onerror = function (error) {
|
|
10
8
|
return reject(error);
|
|
11
9
|
};
|
|
12
|
-
|
|
13
10
|
reader.readAsDataURL(file);
|
|
14
11
|
});
|
|
15
12
|
};
|
package/lib/FileItem.js
CHANGED
|
@@ -4,19 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = require("prop-types");
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
var FileItem = function FileItem(_ref) {
|
|
15
11
|
var file = _ref.file,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return /*#__PURE__*/_react.default.createElement("li", null,
|
|
12
|
+
onFileDeleted = _ref.onFileDeleted,
|
|
13
|
+
cancelText = _ref.cancelText,
|
|
14
|
+
deleteText = _ref.deleteText;
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement("li", null,
|
|
16
|
+
// File is loading
|
|
20
17
|
!file.document && !file.error && /*#__PURE__*/_react.default.createElement("div", {
|
|
21
18
|
className: "ffe-file-upload__file-item-stencil"
|
|
22
19
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
@@ -33,7 +30,8 @@ var FileItem = function FileItem(_ref) {
|
|
|
33
30
|
className: "ffe-file-upload__file-item-stencil-info-background"
|
|
34
31
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
35
32
|
className: "ffe-file-upload__file-item-stencil-info-filename"
|
|
36
|
-
}, file.name))),
|
|
33
|
+
}, file.name))),
|
|
34
|
+
// File finished loading without error
|
|
37
35
|
file.document && !file.error && /*#__PURE__*/_react.default.createElement("div", {
|
|
38
36
|
className: "ffe-file-upload__file-item-loaded"
|
|
39
37
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
@@ -46,7 +44,8 @@ var FileItem = function FileItem(_ref) {
|
|
|
46
44
|
className: "ffe-file-upload__file-item-delete-icon"
|
|
47
45
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
48
46
|
className: "ffe-file-upload__file-item-filename"
|
|
49
|
-
}, file.name)),
|
|
47
|
+
}, file.name)),
|
|
48
|
+
// File has error
|
|
50
49
|
file.error && /*#__PURE__*/_react.default.createElement("div", {
|
|
51
50
|
className: "ffe-file-upload__file-item-error"
|
|
52
51
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -67,7 +66,6 @@ var FileItem = function FileItem(_ref) {
|
|
|
67
66
|
className: "ffe-file-upload__file-item-error-message"
|
|
68
67
|
}, file.error))));
|
|
69
68
|
};
|
|
70
|
-
|
|
71
69
|
FileItem.propTypes = {
|
|
72
70
|
/** Shape of the file type, name is required, error and document.content is optional */
|
|
73
71
|
file: (0, _propTypes.shape)({
|
|
@@ -75,15 +73,12 @@ FileItem.propTypes = {
|
|
|
75
73
|
document: _propTypes.object,
|
|
76
74
|
error: _propTypes.string
|
|
77
75
|
}).isRequired,
|
|
78
|
-
|
|
79
76
|
/**
|
|
80
77
|
* Called when the user clicks the delete button for a given file. Is called with the name of the file in question.
|
|
81
78
|
*/
|
|
82
79
|
onFileDeleted: _propTypes.func.isRequired,
|
|
83
|
-
|
|
84
80
|
/** Label for the cancel button */
|
|
85
81
|
cancelText: _propTypes.string,
|
|
86
|
-
|
|
87
82
|
/** Label for the delete button */
|
|
88
83
|
deleteText: _propTypes.string
|
|
89
84
|
};
|
package/lib/FileUpload.js
CHANGED
|
@@ -1,56 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _propTypes = require("prop-types");
|
|
13
|
-
|
|
14
10
|
var _FileItem = _interopRequireDefault(require("./FileItem"));
|
|
15
|
-
|
|
16
11
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
-
|
|
18
12
|
var _ffeButtonsReact = require("@sb1/ffe-buttons-react");
|
|
19
|
-
|
|
20
13
|
var _pilNedIBoksIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/pil-ned-i-boks-ikon"));
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
15
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
25
|
-
|
|
26
16
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
27
|
-
|
|
28
17
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
29
|
-
|
|
30
18
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
31
|
-
|
|
32
19
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
33
|
-
|
|
34
20
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
35
|
-
|
|
36
21
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
37
|
-
|
|
38
22
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
39
|
-
|
|
40
23
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
41
|
-
|
|
42
24
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
43
|
-
|
|
44
25
|
var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
45
26
|
_inherits(FileUpload, _React$Component);
|
|
46
|
-
|
|
47
27
|
var _super = _createSuper(FileUpload);
|
|
48
|
-
|
|
49
28
|
function FileUpload(props) {
|
|
50
29
|
var _this;
|
|
51
|
-
|
|
52
30
|
_classCallCheck(this, FileUpload);
|
|
53
|
-
|
|
54
31
|
_this = _super.call(this, props);
|
|
55
32
|
_this.onFilesSelected = _this.onFilesSelected.bind(_assertThisInitialized(_this));
|
|
56
33
|
_this.onFilesDropped = _this.onFilesDropped.bind(_assertThisInitialized(_this));
|
|
@@ -62,7 +39,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
62
39
|
};
|
|
63
40
|
return _this;
|
|
64
41
|
}
|
|
65
|
-
|
|
66
42
|
_createClass(FileUpload, [{
|
|
67
43
|
key: "setFileInputElement",
|
|
68
44
|
value: function setFileInputElement(element) {
|
|
@@ -75,7 +51,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
75
51
|
if (this.fileInputElement) {
|
|
76
52
|
this.fileInputElement.value = '';
|
|
77
53
|
}
|
|
78
|
-
|
|
79
54
|
this.fileInputElement.click();
|
|
80
55
|
}
|
|
81
56
|
}, {
|
|
@@ -101,21 +76,20 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
101
76
|
key: "render",
|
|
102
77
|
value: function render() {
|
|
103
78
|
var _this2 = this;
|
|
104
|
-
|
|
105
79
|
var _this$props = this.props,
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
80
|
+
id = _this$props.id,
|
|
81
|
+
label = _this$props.label,
|
|
82
|
+
files = _this$props.files,
|
|
83
|
+
cancelText = _this$props.cancelText,
|
|
84
|
+
deleteText = _this$props.deleteText,
|
|
85
|
+
multiple = _this$props.multiple,
|
|
86
|
+
title = _this$props.title,
|
|
87
|
+
infoText = _this$props.infoText,
|
|
88
|
+
infoSubText = _this$props.infoSubText,
|
|
89
|
+
uploadTitle = _this$props.uploadTitle,
|
|
90
|
+
uploadMicroText = _this$props.uploadMicroText,
|
|
91
|
+
uploadSubText = _this$props.uploadSubText,
|
|
92
|
+
onFileDeleted = _this$props.onFileDeleted;
|
|
119
93
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
120
94
|
className: "ffe-file-upload"
|
|
121
95
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -142,7 +116,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
142
116
|
onDrop: this.onFilesDropped,
|
|
143
117
|
onDragOver: function onDragOver(event) {
|
|
144
118
|
event.preventDefault();
|
|
145
|
-
|
|
146
119
|
_this2.setState({
|
|
147
120
|
hover: true
|
|
148
121
|
});
|
|
@@ -178,24 +151,19 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
178
151
|
}));
|
|
179
152
|
}
|
|
180
153
|
}]);
|
|
181
|
-
|
|
182
154
|
return FileUpload;
|
|
183
155
|
}(_react.default.Component);
|
|
184
|
-
|
|
185
156
|
FileUpload.propTypes = {
|
|
186
157
|
/** ID for the input field. The ID is used as a base for the label ID as well. */
|
|
187
158
|
id: _propTypes.string.isRequired,
|
|
188
|
-
|
|
189
159
|
/** Label for the button to trigger native upload handling. */
|
|
190
160
|
label: _propTypes.string.isRequired,
|
|
191
|
-
|
|
192
161
|
/**
|
|
193
162
|
* A map of files, indexed by file name (check file-shape on FileItem.js propTypes), that the user has uploaded.
|
|
194
163
|
* Must be maintained outside of `FileUpload`. It is up to the implementation to deny or accept file types, sizes, etc,
|
|
195
164
|
* and it is important that duplicates are not allowed.
|
|
196
165
|
* */
|
|
197
166
|
files: _propTypes.object.isRequired,
|
|
198
|
-
|
|
199
167
|
/**
|
|
200
168
|
* Will be called with `FileList`-object containing the `File`-objects the user selected.
|
|
201
169
|
* See MDN for documentation on
|
|
@@ -203,40 +171,29 @@ FileUpload.propTypes = {
|
|
|
203
171
|
* [File](https://developer.mozilla.org/en-US/docs/Web/API/File).
|
|
204
172
|
*/
|
|
205
173
|
onFilesSelected: _propTypes.func.isRequired,
|
|
206
|
-
|
|
207
174
|
/** Will be called when objects are dropped over the upload-section. */
|
|
208
175
|
onFilesDropped: _propTypes.func.isRequired,
|
|
209
|
-
|
|
210
176
|
/**
|
|
211
177
|
* Called when the user clicks the delete button for a given file. Is called with the `File`
|
|
212
178
|
* object of the file in question.
|
|
213
179
|
*/
|
|
214
180
|
onFileDeleted: _propTypes.func.isRequired,
|
|
215
|
-
|
|
216
181
|
/** Whether or not uploading multiple files at once via the native file handler is allowed*/
|
|
217
182
|
multiple: _propTypes.bool,
|
|
218
|
-
|
|
219
183
|
/** Title module */
|
|
220
184
|
title: _propTypes.string.isRequired,
|
|
221
|
-
|
|
222
185
|
/** Text on the info-section */
|
|
223
186
|
infoText: _propTypes.string.isRequired,
|
|
224
|
-
|
|
225
187
|
/** Subtext on the info-section */
|
|
226
188
|
infoSubText: _propTypes.string,
|
|
227
|
-
|
|
228
189
|
/** Label for the cancel button */
|
|
229
190
|
cancelText: _propTypes.string,
|
|
230
|
-
|
|
231
191
|
/** Label for the delete button */
|
|
232
192
|
deleteText: _propTypes.string,
|
|
233
|
-
|
|
234
193
|
/** Title on the upload-section */
|
|
235
194
|
uploadTitle: _propTypes.string.isRequired,
|
|
236
|
-
|
|
237
195
|
/** MicroText on the upload-section */
|
|
238
196
|
uploadMicroText: _propTypes.string.isRequired,
|
|
239
|
-
|
|
240
197
|
/** SubText on the upload-section */
|
|
241
198
|
uploadSubText: _propTypes.string.isRequired
|
|
242
199
|
};
|
package/lib/file-content.js
CHANGED
|
@@ -4,21 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getFileContent = void 0;
|
|
7
|
-
|
|
8
7
|
var getFileContent = function getFileContent(file) {
|
|
9
8
|
return new Promise(function (resolve, reject) {
|
|
10
9
|
var reader = new window.FileReader();
|
|
11
|
-
|
|
12
10
|
reader.onload = function (event) {
|
|
13
11
|
return resolve(event.target.result);
|
|
14
12
|
};
|
|
15
|
-
|
|
16
13
|
reader.onerror = function (error) {
|
|
17
14
|
return reject(error);
|
|
18
15
|
};
|
|
19
|
-
|
|
20
16
|
reader.readAsDataURL(file);
|
|
21
17
|
});
|
|
22
18
|
};
|
|
23
|
-
|
|
24
19
|
exports.getFileContent = getFileContent;
|
package/lib/index.js
CHANGED
|
@@ -10,12 +10,8 @@ Object.defineProperty(exports, "getFileContent", {
|
|
|
10
10
|
return _fileContent.getFileContent;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
|
-
|
|
14
13
|
var _FileUpload = _interopRequireDefault(require("./FileUpload"));
|
|
15
|
-
|
|
16
14
|
var _fileContent = require("./file-content");
|
|
17
|
-
|
|
18
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
16
|
var _default = _FileUpload.default;
|
|
21
17
|
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
2
|
+
"name": "@sb1/ffe-file-upload-react",
|
|
3
|
+
"version": "6.1.6",
|
|
4
|
+
"description": "Upload file button with validation and list of uploaded files.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"ffe"
|
|
7
|
+
],
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"author": "SpareBank 1",
|
|
10
|
+
"files": [
|
|
11
|
+
"lib",
|
|
12
|
+
"es",
|
|
13
|
+
"types"
|
|
14
|
+
],
|
|
15
|
+
"main": "lib/index.js",
|
|
16
|
+
"module": "es/index.js",
|
|
17
|
+
"types": "types/index.d.ts",
|
|
18
|
+
"sideEffects": false,
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "ssh://git@github.com:SpareBank1/designsystem.git"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "ffe-buildtool babel",
|
|
25
|
+
"watch": "ffe-buildtool babel-watch",
|
|
26
|
+
"lint": "eslint src",
|
|
27
|
+
"test": "ffe-buildtool jest",
|
|
28
|
+
"test:watch": "ffe-buildtool jest --watch"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@sb1/ffe-buttons-react": "^16.0.7",
|
|
32
|
+
"@sb1/ffe-icons-react": "^7.3.4",
|
|
33
|
+
"classnames": "^2.3.1"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@sb1/ffe-buildtool": "^0.5.0",
|
|
37
|
+
"react": "^16.9.0",
|
|
38
|
+
"react-dom": "^16.9.0"
|
|
39
|
+
},
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"@sb1/ffe-core": "*",
|
|
42
|
+
"@sb1/ffe-form": "*",
|
|
43
|
+
"react": ">=16.9.0"
|
|
44
|
+
},
|
|
45
|
+
"publishConfig": {
|
|
46
|
+
"access": "public"
|
|
47
|
+
},
|
|
48
|
+
"depencencies": {
|
|
49
|
+
"prop-types": "^15.6.0"
|
|
50
|
+
},
|
|
51
|
+
"gitHead": "816e0f967f7b2d8fd6cca41bb9d363a4c7933116"
|
|
52
52
|
}
|