@sb1/ffe-file-upload-react 11.0.13 → 11.0.15
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/FileUpload.js +14 -8
- package/lib/FileItem.js +1 -2
- package/lib/FileUpload.js +15 -10
- package/package.json +4 -4
package/es/FileUpload.js
CHANGED
|
@@ -4,10 +4,10 @@ import classNames from 'classnames';
|
|
|
4
4
|
import { SecondaryButton } from '@sb1/ffe-buttons-react';
|
|
5
5
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
6
6
|
export function FileUpload(_a) {
|
|
7
|
-
var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText,
|
|
8
|
-
var
|
|
7
|
+
var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText, _b = _a.accept, accept = _b === void 0 ? '*' : _b, onFilesDropped = _a.onFilesDropped, onFileDeleted = _a.onFileDeleted, onFilesSelected = _a.onFilesSelected;
|
|
8
|
+
var _c = useState(false), isHover = _c[0], setIsHover = _c[1];
|
|
9
9
|
var fileInputElement = useRef(null);
|
|
10
|
-
var downloadIcon = 'data:image/svg+xml;base64,
|
|
10
|
+
var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
|
|
11
11
|
var handleFilesDropped = function (event) {
|
|
12
12
|
event.preventDefault();
|
|
13
13
|
setIsHover(false);
|
|
@@ -31,7 +31,7 @@ export function FileUpload(_a) {
|
|
|
31
31
|
Object.keys(files).length > 0 ? (React.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(function (file) { return (React.createElement(FileItem, { key: file, file: files[file], cancelText: cancelText, deleteText: deleteText, onFileDeleted: handleFileDeleted })); }))) : (React.createElement("div", { className: "ffe-file-upload__info-section" },
|
|
32
32
|
React.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
|
|
33
33
|
React.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
|
|
34
|
-
React.createElement("div", { className: "ffe-file-upload__upload-section",
|
|
34
|
+
React.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: function (event) {
|
|
35
35
|
event.preventDefault();
|
|
36
36
|
setIsHover(true);
|
|
37
37
|
}, onDragLeave: function () { return setIsHover(false); } },
|
|
@@ -40,8 +40,14 @@ export function FileUpload(_a) {
|
|
|
40
40
|
}) },
|
|
41
41
|
React.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
|
|
42
42
|
React.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
|
|
43
|
-
React.createElement(SecondaryButton, { leftIcon: React.createElement(Icon, { fileUrl: downloadIcon, size: "
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
React.createElement(SecondaryButton, { tabIndex: 0, as: "label", htmlFor: id, leftIcon: React.createElement(Icon, { fileUrl: downloadIcon, size: "md" }), onClick: function (e) {
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
triggerUploadFileNativeHandler();
|
|
46
|
+
}, onKeyUp: function (e) {
|
|
47
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
48
|
+
triggerUploadFileNativeHandler();
|
|
49
|
+
}
|
|
50
|
+
} }, label),
|
|
51
|
+
React.createElement("input", { id: id, type: "file", multiple: multiple, ref: fileInputElement, onChange: handleFileSelected, accept: accept }),
|
|
52
|
+
React.createElement("div", { className: "ffe-file-upload__upload-section-subtext" }, uploadSubText)))));
|
|
47
53
|
}
|
package/lib/FileItem.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.FileItem =
|
|
6
|
+
exports.FileItem = FileItem;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
8
|
var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
|
|
9
9
|
function FileItem(_a) {
|
|
@@ -36,4 +36,3 @@ function FileItem(_a) {
|
|
|
36
36
|
react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-filename" }, file.name),
|
|
37
37
|
react_1.default.createElement("div", { className: "ffe-file-upload__file-item-error-message" }, file.error))))));
|
|
38
38
|
}
|
|
39
|
-
exports.FileItem = FileItem;
|
package/lib/FileUpload.js
CHANGED
|
@@ -26,17 +26,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.FileUpload =
|
|
29
|
+
exports.FileUpload = FileUpload;
|
|
30
30
|
var react_1 = __importStar(require("react"));
|
|
31
31
|
var FileItem_1 = require("./FileItem");
|
|
32
32
|
var classnames_1 = __importDefault(require("classnames"));
|
|
33
33
|
var ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
|
|
34
34
|
var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
|
|
35
35
|
function FileUpload(_a) {
|
|
36
|
-
var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText,
|
|
37
|
-
var
|
|
36
|
+
var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText, _b = _a.accept, accept = _b === void 0 ? '*' : _b, onFilesDropped = _a.onFilesDropped, onFileDeleted = _a.onFileDeleted, onFilesSelected = _a.onFilesSelected;
|
|
37
|
+
var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[1];
|
|
38
38
|
var fileInputElement = (0, react_1.useRef)(null);
|
|
39
|
-
var downloadIcon = 'data:image/svg+xml;base64,
|
|
39
|
+
var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
|
|
40
40
|
var handleFilesDropped = function (event) {
|
|
41
41
|
event.preventDefault();
|
|
42
42
|
setIsHover(false);
|
|
@@ -60,7 +60,7 @@ function FileUpload(_a) {
|
|
|
60
60
|
Object.keys(files).length > 0 ? (react_1.default.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(function (file) { return (react_1.default.createElement(FileItem_1.FileItem, { key: file, file: files[file], cancelText: cancelText, deleteText: deleteText, onFileDeleted: handleFileDeleted })); }))) : (react_1.default.createElement("div", { className: "ffe-file-upload__info-section" },
|
|
61
61
|
react_1.default.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
|
|
62
62
|
react_1.default.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
|
|
63
|
-
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section",
|
|
63
|
+
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: function (event) {
|
|
64
64
|
event.preventDefault();
|
|
65
65
|
setIsHover(true);
|
|
66
66
|
}, onDragLeave: function () { return setIsHover(false); } },
|
|
@@ -69,9 +69,14 @@ function FileUpload(_a) {
|
|
|
69
69
|
}) },
|
|
70
70
|
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
|
|
71
71
|
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
|
|
72
|
-
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { leftIcon: react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: downloadIcon, size: "
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { tabIndex: 0, as: "label", htmlFor: id, leftIcon: react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: downloadIcon, size: "md" }), onClick: function (e) {
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
triggerUploadFileNativeHandler();
|
|
75
|
+
}, onKeyUp: function (e) {
|
|
76
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
77
|
+
triggerUploadFileNativeHandler();
|
|
78
|
+
}
|
|
79
|
+
} }, label),
|
|
80
|
+
react_1.default.createElement("input", { id: id, type: "file", multiple: multiple, ref: fileInputElement, onChange: handleFileSelected, accept: accept }),
|
|
81
|
+
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-subtext" }, uploadSubText)))));
|
|
76
82
|
}
|
|
77
|
-
exports.FileUpload = FileUpload;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-file-upload-react",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.15",
|
|
4
4
|
"description": "Upload file button with validation and list of uploaded files.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ffe"
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@sb1/ffe-buttons-react": "^23.0.6",
|
|
33
|
-
"@sb1/ffe-file-upload": "^10.0.
|
|
34
|
-
"@sb1/ffe-form": "^29.0.
|
|
33
|
+
"@sb1/ffe-file-upload": "^10.0.49",
|
|
34
|
+
"@sb1/ffe-form": "^29.0.23",
|
|
35
35
|
"@sb1/ffe-icons-react": "^10.0.5",
|
|
36
36
|
"classnames": "^2.3.1"
|
|
37
37
|
},
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "69d97e8e9e9dbdf4ad0351e41f1a620c1359a45f"
|
|
50
50
|
}
|