@sb1/ffe-file-upload-react 100.12.3 → 101.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/es/FileItem.js +3 -4
  2. package/es/FileUpload.js +13 -14
  3. package/es/getFileContent.js +5 -7
  4. package/es/getUniqueFileName.js +7 -7
  5. package/lib/FileItem.js +5 -6
  6. package/lib/FileUpload.js +18 -19
  7. package/lib/getFileContent.js +5 -7
  8. package/lib/getUniqueFileName.js +7 -7
  9. package/package.json +8 -8
package/es/FileItem.js CHANGED
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
2
  import { Icon } from '@sb1/ffe-icons-react';
3
- export function FileItem(_a) {
4
- var file = _a.file, onFileDeleted = _a.onFileDeleted, cancelText = _a.cancelText, deleteText = _a.deleteText;
5
- var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
6
- var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
3
+ export function FileItem({ file, onFileDeleted, cancelText, deleteText, }) {
4
+ const closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
5
+ const exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
7
6
  return (React.createElement("li", null,
8
7
  // File is loading
9
8
  !file.document && !file.error && (React.createElement("div", { className: "ffe-file-upload__file-item-stencil" },
package/es/FileUpload.js CHANGED
@@ -3,47 +3,46 @@ import { FileItem } from './FileItem';
3
3
  import classNames from 'classnames';
4
4
  import { SecondaryButton } from '@sb1/ffe-buttons-react';
5
5
  import { Icon } from '@sb1/ffe-icons-react';
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, _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
- var fileInputElement = useRef(null);
10
- var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
11
- var handleFilesDropped = function (event) {
6
+ export function FileUpload({ id, label, files, cancelText, deleteText, multiple, title, infoText, infoSubText, uploadTitle, uploadMicroText, uploadSubText, accept = '*', onFilesDropped, onFileDeleted, onFilesSelected, }) {
7
+ const [isHover, setIsHover] = useState(false);
8
+ const fileInputElement = useRef(null);
9
+ const downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
10
+ const handleFilesDropped = (event) => {
12
11
  event.preventDefault();
13
12
  setIsHover(false);
14
13
  onFilesDropped(event.dataTransfer.files);
15
14
  };
16
- var handleFileDeleted = function (event) {
15
+ const handleFileDeleted = (event) => {
17
16
  onFileDeleted(files[event.currentTarget.id]);
18
17
  };
19
- var triggerUploadFileNativeHandler = function () {
18
+ const triggerUploadFileNativeHandler = () => {
20
19
  // clear file input to trigger onChange when uploading same filename
21
20
  if (fileInputElement.current) {
22
21
  fileInputElement.current.value = '';
23
22
  fileInputElement.current.click();
24
23
  }
25
24
  };
26
- var handleFileSelected = function (event) {
25
+ const handleFileSelected = (event) => {
27
26
  onFilesSelected(event.target.files);
28
27
  };
29
28
  return (React.createElement("div", { className: "ffe-file-upload" },
30
29
  React.createElement("div", { className: "ffe-file-upload__title" }, title),
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" },
30
+ Object.keys(files).length > 0 ? (React.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(file => (React.createElement(FileItem, { key: file, file: files[file], cancelText: cancelText, deleteText: deleteText, onFileDeleted: handleFileDeleted }))))) : (React.createElement("div", { className: "ffe-file-upload__info-section" },
32
31
  React.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
33
32
  React.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
34
- React.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: function (event) {
33
+ React.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: event => {
35
34
  event.preventDefault();
36
35
  setIsHover(true);
37
- }, onDragLeave: function () { return setIsHover(false); } },
36
+ }, onDragLeave: () => setIsHover(false) },
38
37
  React.createElement("div", { className: classNames('ffe-file-upload__upload-section-border', {
39
38
  'ffe-file-upload__upload-section-border--hover': isHover,
40
39
  }) },
41
40
  React.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
42
41
  React.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
43
- React.createElement(SecondaryButton, { tabIndex: 0, as: "label", htmlFor: id, leftIcon: React.createElement(Icon, { fileUrl: downloadIcon, size: "md" }), onClick: function (e) {
42
+ React.createElement(SecondaryButton, { tabIndex: 0, as: "label", htmlFor: id, leftIcon: React.createElement(Icon, { fileUrl: downloadIcon, size: "md" }), onClick: e => {
44
43
  e.preventDefault();
45
44
  triggerUploadFileNativeHandler();
46
- }, onKeyUp: function (e) {
45
+ }, onKeyUp: e => {
47
46
  if (e.key === 'Enter' || e.key === ' ') {
48
47
  triggerUploadFileNativeHandler();
49
48
  }
package/es/getFileContent.js CHANGED
@@ -1,10 +1,8 @@
1
- export var getFileContent = function (file) {
2
- return new Promise(function (resolve, reject) {
3
- var reader = new window.FileReader();
4
- reader.onload = function (event) {
5
- return resolve(event.target ? event.target.result : null);
6
- };
7
- reader.onerror = function (error) { return reject(error); };
1
+ export const getFileContent = (file) => {
2
+ return new Promise((resolve, reject) => {
3
+ const reader = new window.FileReader();
4
+ reader.onload = event => resolve(event.target ? event.target.result : null);
5
+ reader.onerror = error => reject(error);
8
6
  reader.readAsDataURL(file);
9
7
  });
10
8
  };
package/es/getUniqueFileName.js CHANGED
@@ -1,11 +1,11 @@
1
- export var getUniqueFileName = function (fileName, existing) {
2
- var dotIndex = fileName.lastIndexOf('.');
3
- var baseName = dotIndex !== -1 ? fileName.slice(0, dotIndex) : fileName;
4
- var fileEnding = dotIndex !== -1 ? fileName.slice(dotIndex) : '';
5
- var newName = fileName;
6
- var counter = 1;
1
+ export const getUniqueFileName = (fileName, existing) => {
2
+ const dotIndex = fileName.lastIndexOf('.');
3
+ const baseName = dotIndex !== -1 ? fileName.slice(0, dotIndex) : fileName;
4
+ const fileEnding = dotIndex !== -1 ? fileName.slice(dotIndex) : '';
5
+ let newName = fileName;
6
+ let counter = 1;
7
7
  while (existing[newName]) {
8
- newName = "".concat(baseName, "-").concat(counter).concat(fileEnding);
8
+ newName = `${baseName}-${counter}${fileEnding}`;
9
9
  counter++;
10
10
  }
11
11
  return newName;
package/lib/FileItem.js CHANGED
@@ -4,12 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.FileItem = FileItem;
7
- var react_1 = __importDefault(require("react"));
8
- var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
9
- function FileItem(_a) {
10
- var file = _a.file, onFileDeleted = _a.onFileDeleted, cancelText = _a.cancelText, deleteText = _a.deleteText;
11
- var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
12
- var exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
7
+ const react_1 = __importDefault(require("react"));
8
+ const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
9
+ function FileItem({ file, onFileDeleted, cancelText, deleteText, }) {
10
+ const closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
11
+ const exclamationIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00ODAuMjExLTM4MC40MTNxLTE3LjM2MyAwLTI5LjUzNy0xMi4wMjRUNDM4LjUtNDIxLjkxM3YtMjY0cTAtMTcuNDUyIDExLjk2My0yOS40NzYgMTEuOTY0LTEyLjAyNCAyOS4zMjYtMTIuMDI0IDE3LjM2MyAwIDI5LjUzNyAxMi4wMjR0MTIuMTc0IDI5LjQ3NnYyNjRxMCAxNy40NTItMTEuOTYzIDI5LjQ3Ni0xMS45NjQgMTIuMDI0LTI5LjMyNiAxMi4wMjRabTAgMTQ3LjgyNnEtMTcuMzYzIDAtMjkuNTM3LTExLjk2My0xMi4xNzQtMTEuOTY0LTEyLjE3NC0yOS4zMjYgMC0xNy4zNjMgMTEuOTYzLTI5LjUzNyAxMS45NjQtMTIuMTc0IDI5LjMyNi0xMi4xNzQgMTcuMzYzIDAgMjkuNTM3IDExLjk2M1E1MjEuNS0yOTEuNjYgNTIxLjUtMjc0LjI5N3EwIDE3LjM2Mi0xMS45NjMgMjkuNTM2LTExLjk2NCAxMi4xNzQtMjkuMzI2IDEyLjE3NFoiLz48L3N2Zz4=';
13
12
  return (react_1.default.createElement("li", null,
14
13
  // File is loading
15
14
  !file.document && !file.error && (react_1.default.createElement("div", { className: "ffe-file-upload__file-item-stencil" },
package/lib/FileUpload.js CHANGED
@@ -37,52 +37,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  };
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
39
  exports.FileUpload = FileUpload;
40
- var react_1 = __importStar(require("react"));
41
- var FileItem_1 = require("./FileItem");
42
- var classnames_1 = __importDefault(require("classnames"));
43
- var ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
44
- var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
45
- function FileUpload(_a) {
46
- 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;
47
- var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[1];
48
- var fileInputElement = (0, react_1.useRef)(null);
49
- var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
50
- var handleFilesDropped = function (event) {
40
+ const react_1 = __importStar(require("react"));
41
+ const FileItem_1 = require("./FileItem");
42
+ const classnames_1 = __importDefault(require("classnames"));
43
+ const ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
44
+ const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
45
+ function FileUpload({ id, label, files, cancelText, deleteText, multiple, title, infoText, infoSubText, uploadTitle, uploadMicroText, uploadSubText, accept = '*', onFilesDropped, onFileDeleted, onFilesSelected, }) {
46
+ const [isHover, setIsHover] = (0, react_1.useState)(false);
47
+ const fileInputElement = (0, react_1.useRef)(null);
48
+ const downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
49
+ const handleFilesDropped = (event) => {
51
50
  event.preventDefault();
52
51
  setIsHover(false);
53
52
  onFilesDropped(event.dataTransfer.files);
54
53
  };
55
- var handleFileDeleted = function (event) {
54
+ const handleFileDeleted = (event) => {
56
55
  onFileDeleted(files[event.currentTarget.id]);
57
56
  };
58
- var triggerUploadFileNativeHandler = function () {
57
+ const triggerUploadFileNativeHandler = () => {
59
58
  // clear file input to trigger onChange when uploading same filename
60
59
  if (fileInputElement.current) {
61
60
  fileInputElement.current.value = '';
62
61
  fileInputElement.current.click();
63
62
  }
64
63
  };
65
- var handleFileSelected = function (event) {
64
+ const handleFileSelected = (event) => {
66
65
  onFilesSelected(event.target.files);
67
66
  };
68
67
  return (react_1.default.createElement("div", { className: "ffe-file-upload" },
69
68
  react_1.default.createElement("div", { className: "ffe-file-upload__title" }, title),
70
- 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" },
69
+ Object.keys(files).length > 0 ? (react_1.default.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(file => (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" },
71
70
  react_1.default.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
72
71
  react_1.default.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
73
- react_1.default.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: function (event) {
72
+ react_1.default.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: event => {
74
73
  event.preventDefault();
75
74
  setIsHover(true);
76
- }, onDragLeave: function () { return setIsHover(false); } },
75
+ }, onDragLeave: () => setIsHover(false) },
77
76
  react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-file-upload__upload-section-border', {
78
77
  'ffe-file-upload__upload-section-border--hover': isHover,
79
78
  }) },
80
79
  react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
81
80
  react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
82
- 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) {
81
+ 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: e => {
83
82
  e.preventDefault();
84
83
  triggerUploadFileNativeHandler();
85
- }, onKeyUp: function (e) {
84
+ }, onKeyUp: e => {
86
85
  if (e.key === 'Enter' || e.key === ' ') {
87
86
  triggerUploadFileNativeHandler();
88
87
  }
package/lib/getFileContent.js CHANGED
@@ -1,13 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getFileContent = void 0;
4
- var getFileContent = function (file) {
5
- return new Promise(function (resolve, reject) {
6
- var reader = new window.FileReader();
7
- reader.onload = function (event) {
8
- return resolve(event.target ? event.target.result : null);
9
- };
10
- reader.onerror = function (error) { return reject(error); };
4
+ const getFileContent = (file) => {
5
+ return new Promise((resolve, reject) => {
6
+ const reader = new window.FileReader();
7
+ reader.onload = event => resolve(event.target ? event.target.result : null);
8
+ reader.onerror = error => reject(error);
11
9
  reader.readAsDataURL(file);
12
10
  });
13
11
  };
package/lib/getUniqueFileName.js CHANGED
@@ -1,14 +1,14 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getUniqueFileName = void 0;
4
- var getUniqueFileName = function (fileName, existing) {
5
- var dotIndex = fileName.lastIndexOf('.');
6
- var baseName = dotIndex !== -1 ? fileName.slice(0, dotIndex) : fileName;
7
- var fileEnding = dotIndex !== -1 ? fileName.slice(dotIndex) : '';
8
- var newName = fileName;
9
- var counter = 1;
4
+ const getUniqueFileName = (fileName, existing) => {
5
+ const dotIndex = fileName.lastIndexOf('.');
6
+ const baseName = dotIndex !== -1 ? fileName.slice(0, dotIndex) : fileName;
7
+ const fileEnding = dotIndex !== -1 ? fileName.slice(dotIndex) : '';
8
+ let newName = fileName;
9
+ let counter = 1;
10
10
  while (existing[newName]) {
11
- newName = "".concat(baseName, "-").concat(counter).concat(fileEnding);
11
+ newName = `${baseName}-${counter}${fileEnding}`;
12
12
  counter++;
13
13
  }
14
14
  return newName;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-file-upload-react",
3
- "version": "100.12.3",
3
+ "version": "101.0.0",
4
4
  "description": "Upload file button with validation and list of uploaded files.",
5
5
  "keywords": [
6
6
  "ffe"
@@ -28,14 +28,14 @@
28
28
  "test:watch": "ffe-buildtool jest --watch"
29
29
  },
30
30
  "dependencies": {
31
- "@sb1/ffe-buttons-react": "^100.12.3",
32
- "@sb1/ffe-file-upload": "^100.12.3",
33
- "@sb1/ffe-form": "^100.12.3",
34
- "@sb1/ffe-icons-react": "^100.12.3",
35
- "classnames": "^2.3.1"
31
+ "@sb1/ffe-buttons-react": "^101.0.0",
32
+ "@sb1/ffe-file-upload": "^101.0.0",
33
+ "@sb1/ffe-form": "^101.0.0",
34
+ "@sb1/ffe-icons-react": "^101.0.0",
35
+ "classnames": "^2.5.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@sb1/ffe-buildtool": "^100.12.3",
38
+ "@sb1/ffe-buildtool": "^101.0.0",
39
39
  "react": "^18.2.0",
40
40
  "react-dom": "^18.2.0"
41
41
  },
@@ -45,5 +45,5 @@
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
- "gitHead": "c250edc3d20e5ed115c5c5951495d700e96a3be3"
48
+ "gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
49
49
  }