@sb1/ffe-file-upload-react 6.1.5 → 6.1.7
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 -50
- package/es/file-content.js +0 -3
- package/lib/FileItem.js +9 -14
- package/lib/FileUpload.js +13 -57
- package/lib/file-content.js +0 -5
- package/lib/index.js +0 -4
- package/package.json +50 -50
- package/types/index.d.ts +7 -7
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,19 @@ 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
|
-
onFileDeleted = _this$props.onFileDeleted;
|
|
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;
|
|
105
85
|
return /*#__PURE__*/React.createElement("div", {
|
|
106
86
|
className: "ffe-file-upload"
|
|
107
87
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -114,7 +94,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
114
94
|
file: files[file],
|
|
115
95
|
cancelText: cancelText,
|
|
116
96
|
deleteText: deleteText,
|
|
117
|
-
onFileDeleted: onFileDeleted
|
|
97
|
+
onFileDeleted: _this2.onFileDeleted
|
|
118
98
|
});
|
|
119
99
|
})) : /*#__PURE__*/React.createElement("div", {
|
|
120
100
|
className: "ffe-file-upload__info-section"
|
|
@@ -128,7 +108,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
128
108
|
onDrop: this.onFilesDropped,
|
|
129
109
|
onDragOver: function onDragOver(event) {
|
|
130
110
|
event.preventDefault();
|
|
131
|
-
|
|
132
111
|
_this2.setState({
|
|
133
112
|
hover: true
|
|
134
113
|
});
|
|
@@ -164,24 +143,19 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
164
143
|
}));
|
|
165
144
|
}
|
|
166
145
|
}]);
|
|
167
|
-
|
|
168
146
|
return FileUpload;
|
|
169
147
|
}(React.Component);
|
|
170
|
-
|
|
171
148
|
FileUpload.propTypes = {
|
|
172
149
|
/** ID for the input field. The ID is used as a base for the label ID as well. */
|
|
173
150
|
id: stringType.isRequired,
|
|
174
|
-
|
|
175
151
|
/** Label for the button to trigger native upload handling. */
|
|
176
152
|
label: stringType.isRequired,
|
|
177
|
-
|
|
178
153
|
/**
|
|
179
154
|
* A map of files, indexed by file name (check file-shape on FileItem.js propTypes), that the user has uploaded.
|
|
180
155
|
* Must be maintained outside of `FileUpload`. It is up to the implementation to deny or accept file types, sizes, etc,
|
|
181
156
|
* and it is important that duplicates are not allowed.
|
|
182
157
|
* */
|
|
183
158
|
files: object.isRequired,
|
|
184
|
-
|
|
185
159
|
/**
|
|
186
160
|
* Will be called with `FileList`-object containing the `File`-objects the user selected.
|
|
187
161
|
* See MDN for documentation on
|
|
@@ -189,40 +163,29 @@ FileUpload.propTypes = {
|
|
|
189
163
|
* [File](https://developer.mozilla.org/en-US/docs/Web/API/File).
|
|
190
164
|
*/
|
|
191
165
|
onFilesSelected: func.isRequired,
|
|
192
|
-
|
|
193
166
|
/** Will be called when objects are dropped over the upload-section. */
|
|
194
167
|
onFilesDropped: func.isRequired,
|
|
195
|
-
|
|
196
168
|
/**
|
|
197
169
|
* Called when the user clicks the delete button for a given file. Is called with the `File`
|
|
198
170
|
* object of the file in question.
|
|
199
171
|
*/
|
|
200
172
|
onFileDeleted: func.isRequired,
|
|
201
|
-
|
|
202
173
|
/** Whether or not uploading multiple files at once via the native file handler is allowed*/
|
|
203
174
|
multiple: bool,
|
|
204
|
-
|
|
205
175
|
/** Title module */
|
|
206
176
|
title: stringType.isRequired,
|
|
207
|
-
|
|
208
177
|
/** Text on the info-section */
|
|
209
178
|
infoText: stringType.isRequired,
|
|
210
|
-
|
|
211
179
|
/** Subtext on the info-section */
|
|
212
180
|
infoSubText: stringType,
|
|
213
|
-
|
|
214
181
|
/** Label for the cancel button */
|
|
215
182
|
cancelText: stringType,
|
|
216
|
-
|
|
217
183
|
/** Label for the delete button */
|
|
218
184
|
deleteText: stringType,
|
|
219
|
-
|
|
220
185
|
/** Title on the upload-section */
|
|
221
186
|
uploadTitle: stringType.isRequired,
|
|
222
|
-
|
|
223
187
|
/** MicroText on the upload-section */
|
|
224
188
|
uploadMicroText: stringType.isRequired,
|
|
225
|
-
|
|
226
189
|
/** SubText on the upload-section */
|
|
227
190
|
uploadSubText: stringType.isRequired
|
|
228
191
|
};
|
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,19 @@ 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
|
-
onFileDeleted = _this$props.onFileDeleted;
|
|
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;
|
|
119
92
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
120
93
|
className: "ffe-file-upload"
|
|
121
94
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -128,7 +101,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
128
101
|
file: files[file],
|
|
129
102
|
cancelText: cancelText,
|
|
130
103
|
deleteText: deleteText,
|
|
131
|
-
onFileDeleted: onFileDeleted
|
|
104
|
+
onFileDeleted: _this2.onFileDeleted
|
|
132
105
|
});
|
|
133
106
|
})) : /*#__PURE__*/_react.default.createElement("div", {
|
|
134
107
|
className: "ffe-file-upload__info-section"
|
|
@@ -142,7 +115,6 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
142
115
|
onDrop: this.onFilesDropped,
|
|
143
116
|
onDragOver: function onDragOver(event) {
|
|
144
117
|
event.preventDefault();
|
|
145
|
-
|
|
146
118
|
_this2.setState({
|
|
147
119
|
hover: true
|
|
148
120
|
});
|
|
@@ -178,24 +150,19 @@ var FileUpload = /*#__PURE__*/function (_React$Component) {
|
|
|
178
150
|
}));
|
|
179
151
|
}
|
|
180
152
|
}]);
|
|
181
|
-
|
|
182
153
|
return FileUpload;
|
|
183
154
|
}(_react.default.Component);
|
|
184
|
-
|
|
185
155
|
FileUpload.propTypes = {
|
|
186
156
|
/** ID for the input field. The ID is used as a base for the label ID as well. */
|
|
187
157
|
id: _propTypes.string.isRequired,
|
|
188
|
-
|
|
189
158
|
/** Label for the button to trigger native upload handling. */
|
|
190
159
|
label: _propTypes.string.isRequired,
|
|
191
|
-
|
|
192
160
|
/**
|
|
193
161
|
* A map of files, indexed by file name (check file-shape on FileItem.js propTypes), that the user has uploaded.
|
|
194
162
|
* Must be maintained outside of `FileUpload`. It is up to the implementation to deny or accept file types, sizes, etc,
|
|
195
163
|
* and it is important that duplicates are not allowed.
|
|
196
164
|
* */
|
|
197
165
|
files: _propTypes.object.isRequired,
|
|
198
|
-
|
|
199
166
|
/**
|
|
200
167
|
* Will be called with `FileList`-object containing the `File`-objects the user selected.
|
|
201
168
|
* See MDN for documentation on
|
|
@@ -203,40 +170,29 @@ FileUpload.propTypes = {
|
|
|
203
170
|
* [File](https://developer.mozilla.org/en-US/docs/Web/API/File).
|
|
204
171
|
*/
|
|
205
172
|
onFilesSelected: _propTypes.func.isRequired,
|
|
206
|
-
|
|
207
173
|
/** Will be called when objects are dropped over the upload-section. */
|
|
208
174
|
onFilesDropped: _propTypes.func.isRequired,
|
|
209
|
-
|
|
210
175
|
/**
|
|
211
176
|
* Called when the user clicks the delete button for a given file. Is called with the `File`
|
|
212
177
|
* object of the file in question.
|
|
213
178
|
*/
|
|
214
179
|
onFileDeleted: _propTypes.func.isRequired,
|
|
215
|
-
|
|
216
180
|
/** Whether or not uploading multiple files at once via the native file handler is allowed*/
|
|
217
181
|
multiple: _propTypes.bool,
|
|
218
|
-
|
|
219
182
|
/** Title module */
|
|
220
183
|
title: _propTypes.string.isRequired,
|
|
221
|
-
|
|
222
184
|
/** Text on the info-section */
|
|
223
185
|
infoText: _propTypes.string.isRequired,
|
|
224
|
-
|
|
225
186
|
/** Subtext on the info-section */
|
|
226
187
|
infoSubText: _propTypes.string,
|
|
227
|
-
|
|
228
188
|
/** Label for the cancel button */
|
|
229
189
|
cancelText: _propTypes.string,
|
|
230
|
-
|
|
231
190
|
/** Label for the delete button */
|
|
232
191
|
deleteText: _propTypes.string,
|
|
233
|
-
|
|
234
192
|
/** Title on the upload-section */
|
|
235
193
|
uploadTitle: _propTypes.string.isRequired,
|
|
236
|
-
|
|
237
194
|
/** MicroText on the upload-section */
|
|
238
195
|
uploadMicroText: _propTypes.string.isRequired,
|
|
239
|
-
|
|
240
196
|
/** SubText on the upload-section */
|
|
241
197
|
uploadSubText: _propTypes.string.isRequired
|
|
242
198
|
};
|
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.7",
|
|
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": "7312a8c72d163965802a454d097536fb8f928690"
|
|
52
52
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
export interface FileItem {
|
|
3
|
+
export interface FileItem<T> {
|
|
4
4
|
name: string;
|
|
5
|
-
document?:
|
|
5
|
+
document?: T;
|
|
6
6
|
error?: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
export interface FileUploadProps {
|
|
9
|
+
export interface FileUploadProps<T> {
|
|
10
10
|
id: string;
|
|
11
11
|
label: string;
|
|
12
|
-
files: Record<string, FileItem
|
|
12
|
+
files: Record<string, FileItem<T>>;
|
|
13
13
|
onFilesSelected(fileList: FileList): void;
|
|
14
14
|
onFilesDropped(fileList: FileList): void;
|
|
15
|
-
onFileDeleted(file:
|
|
15
|
+
onFileDeleted(file: FileItem<T>): void;
|
|
16
16
|
multiple?: boolean;
|
|
17
17
|
title: string;
|
|
18
18
|
infoText: string;
|
|
@@ -23,9 +23,9 @@ export interface FileUploadProps {
|
|
|
23
23
|
uploadMicroText: string;
|
|
24
24
|
uploadSubText: string;
|
|
25
25
|
}
|
|
26
|
-
declare class FileUpload extends React.Component<FileUploadProps
|
|
26
|
+
declare class FileUpload<T> extends React.Component<FileUploadProps<T>, any> {}
|
|
27
27
|
|
|
28
|
-
declare function getFileContent(file: File): Promise<
|
|
28
|
+
declare function getFileContent(file: File): Promise<string>;
|
|
29
29
|
|
|
30
30
|
export default FileUpload;
|
|
31
31
|
export { getFileContent };
|