@dnb/eufemia 9.32.1 → 9.34.0

package/components/upload/UploadContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export var defaultProps = {
+  fileMaxSize: 5,
+  filesAmountLimit: 100
+};
+export var UploadContext = createContext(null);

package/components/upload/UploadDropzone.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { UploadAllProps } from './types';
+export default function UploadDropzone({ children, className, ...rest }: Partial<UploadAllProps>): JSX.Element;

package/components/upload/UploadDropzone.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _svg;
+
+var _excluded = ["children", "className"];
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import React from 'react';
+import classnames from 'classnames';
+import HeightAnimation from '../height-animation/HeightAnimation';
+import { UploadContext } from './UploadContext';
+export default function UploadDropzone(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = rest;
+  var context = React.useContext(UploadContext);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      hover = _React$useState2[0],
+      setHover = _React$useState2[1];
+
+  var hoverTimeout = React.useRef();
+  var onInputUpload = context.onInputUpload;
+
+  var getFiles = function getFiles(event) {
+    var fileData = event.dataTransfer;
+    var files = [];
+    Array.from(fileData.files).forEach(function (file, i) {
+      files.push({
+        file: file
+      });
+    });
+    return files;
+  };
+
+  var hoverHandler = function hoverHandler(event, state) {
+    event.stopPropagation();
+    event.preventDefault();
+    clearTimers();
+    setHover(state);
+  };
+
+  var dropHandler = function dropHandler(event) {
+    var files = getFiles(event);
+    onInputUpload(files);
+    hoverHandler(event, false);
+  };
+
+  var dragEnterHandler = function dragEnterHandler(event) {
+    hoverHandler(event, true);
+  };
+
+  var dragLeaveHandler = function dragLeaveHandler(event) {
+    hoverHandler(event, false);
+  };
+
+  var clearTimers = function clearTimers() {
+    clearTimeout(hoverTimeout.current);
+  };
+
+  React.useEffect(function () {
+    return clearTimers;
+  }, []);
+  return React.createElement(HeightAnimation, _extends({
+    className: classnames(className, hover && 'dnb-upload--active'),
+    onDrop: dropHandler,
+    onDragOver: dragEnterHandler,
+    onDragLeave: dragLeaveHandler
+  }, props), children, _svg || (_svg = React.createElement("svg", {
+    className: "dnb-upload__outline",
+    "aria-hidden": true,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none"
+  }, React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "0.5rem",
+    ry: "0.5rem",
+    strokeWidth: "3",
+    strokeDashoffset: "4",
+    strokeDasharray: "8 8"
+  }))));
+}

package/components/upload/UploadFileInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const UploadFileInput: () => JSX.Element;
+export default UploadFileInput;

package/components/upload/UploadFileInput.js

@@ -0,0 +1,79 @@
+var _UploadStatus;
+
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import React, { useEffect, useRef } from 'react';
+import Button from '../button/Button';
+import { folder as FolderIcon } from '../../icons';
+import { makeUniqueId } from '../../shared/component-helper';
+import { UploadContext } from './UploadContext';
+import UploadStatus from './UploadStatus';
+import useUpload from './useUpload';
+
+var UploadFileInput = function UploadFileInput() {
+  var fileInput = useRef(null);
+  var context = React.useContext(UploadContext);
+  var id = context.id,
+      acceptedFileTypes = context.acceptedFileTypes,
+      buttonText = context.buttonText,
+      onInputUpload = context.onInputUpload,
+      filesAmountLimit = context.filesAmountLimit;
+
+  var _useUpload = useUpload(id),
+      internalFiles = _useUpload.internalFiles;
+
+  var accept = acceptedFileTypes.reduce(function (accept, format, index) {
+    var previus = index === 0 ? '' : "".concat(accept, ",");
+    return "".concat(previus, " .").concat(format);
+  }, '');
+  useEffect(function () {
+    fileInput.current.value = null;
+    fileInput.current.accept = accept;
+  }, []);
+
+  var openFileDialog = function openFileDialog() {
+    var _fileInput$current;
+
+    return (_fileInput$current = fileInput.current) === null || _fileInput$current === void 0 ? void 0 : _fileInput$current.click();
+  };
+
+  var sharedId = id || makeUniqueId();
+  return React.createElement("div", {
+    "data-testid": "upload-file-input"
+  }, React.createElement(Button, {
+    top: "medium",
+    id: "".concat(sharedId, "-input"),
+    "data-testid": "upload-file-input-button",
+    className: "dnb-upload__file-input-button",
+    icon: FolderIcon,
+    icon_position: "left",
+    variant: "secondary",
+    wrap: true,
+    onClick: openFileDialog,
+    disabled: internalFiles.length > filesAmountLimit
+  }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", {
+    "aria-labelledby": "".concat(sharedId, "-input"),
+    "data-testid": "upload-file-input-input",
+    ref: fileInput,
+    className: "dnb-upload__file-input",
+    type: "file",
+    onChange: handleFileInput,
+    multiple: filesAmountLimit > 1
+  }));
+
+  function handleFileInput(event) {
+    var target = event.target;
+    var files = target.files;
+    onInputUpload(Array.from(files).map(function (file) {
+      return {
+        file: file
+      };
+    }));
+  }
+};
+
+export default UploadFileInput;

package/components/upload/UploadFileList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function UploadFileList(): JSX.Element;
+export default UploadFileList;

package/components/upload/UploadFileList.js

@@ -0,0 +1,62 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import React from 'react';
+import { UploadContext } from './UploadContext';
+import UploadFileListCell from './UploadFileListCell';
+import useUpload from './useUpload';
+
+function UploadFileList() {
+  var context = React.useContext(UploadContext);
+  var id = context.id,
+      fileListAriaLabel = context.fileListAriaLabel,
+      deleteButton = context.deleteButton,
+      loadingText = context.loadingText,
+      onFileDelete = context.onFileDelete,
+      onChange = context.onChange;
+
+  var _useUpload = useUpload(id),
+      files = _useUpload.files,
+      setFiles = _useUpload.setFiles,
+      setInternalFiles = _useUpload.setInternalFiles;
+
+  if (files == null || files.length < 1) {
+    return null;
+  }
+
+  return React.createElement("ul", {
+    "data-testid": "upload-file-list",
+    className: "dnb-upload__file-list",
+    "aria-label": fileListAriaLabel
+  }, files.map(function (uploadFile, index) {
+    var onDeleteHandler = function onDeleteHandler() {
+      if (typeof onFileDelete === 'function') {
+        onFileDelete({
+          fileItem: uploadFile
+        });
+      }
+
+      var cleanedFiles = files.filter(function (fileListElement) {
+        return fileListElement.file != uploadFile.file;
+      });
+      setFiles(cleanedFiles);
+      setInternalFiles(cleanedFiles);
+
+      if (typeof onChange === 'function') {
+        onChange({
+          files: cleanedFiles
+        });
+      }
+    };
+
+    return React.createElement(UploadFileListCell, {
+      key: index,
+      uploadFile: uploadFile,
+      onDelete: onDeleteHandler,
+      deleteButtonText: deleteButton,
+      loadingText: loadingText
+    });
+  }));
+}
+
+export default UploadFileList;

package/components/upload/UploadFileListCell.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { UploadFile } from './types';
+export declare type UploadFileListCellProps = {
+    /**
+     * Uploaded file
+     */
+    uploadFile: UploadFile;
+    /**
+     * Calls onDelete when clicking the delete button
+     */
+    onDelete: () => void;
+    /**
+     * Text
+     */
+    loadingText: React.ReactNode;
+    deleteButtonText: React.ReactNode;
+};
+declare const UploadFileListCell: ({ uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
+export default UploadFileListCell;

package/components/upload/UploadFileListCell.js

@@ -0,0 +1,128 @@
+var _ProgressIndicator, _Icon;
+
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/web.url.js";
+import "core-js/modules/web.url-search-params.js";
+import React, { useRef } from 'react';
+import Button from '../button/Button';
+import Icon from '../../components/Icon';
+import FormStatus from '../../components/FormStatus';
+import ProgressIndicator from '../../components/progress-indicator';
+import P from '../../elements/P';
+import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
+import { getPreviousSibling, warn } from '../../shared/component-helper';
+var images = {
+  pdf: pdf,
+  xls: xls,
+  ppt: ppt,
+  csv: csv,
+  txt: txt,
+  xml: xml,
+  file: file
+};
+
+var UploadFileListCell = function UploadFileListCell(_ref) {
+  var _div, _a, _FormStatus;
+
+  var uploadFile = _ref.uploadFile,
+      onDelete = _ref.onDelete,
+      loadingText = _ref.loadingText,
+      deleteButtonText = _ref.deleteButtonText;
+  var file = uploadFile.file,
+      errorMessage = uploadFile.errorMessage,
+      isLoading = uploadFile.isLoading;
+  var name = file.name,
+      type = file.type;
+  var fileType = type.split('/')[1];
+  var hasWarning = errorMessage != null;
+  var imageUrl = URL.createObjectURL(file);
+  var cellRef = useRef();
+
+  var handleDisappearFocus = function handleDisappearFocus() {
+    try {
+      var cellElement = cellRef.current;
+      var focusElement = getPreviousSibling('.dnb-upload', cellElement).querySelector('.dnb-upload__file-input-button');
+      focusElement.focus();
+    } catch (e) {
+      warn(e);
+    }
+  };
+
+  var onDeleteHandler = function onDeleteHandler() {
+    handleDisappearFocus();
+    onDelete();
+  };
+
+  return React.createElement("li", {
+    "data-testid": "upload-file-list-cell",
+    className: 'dnb-upload__file-cell' + (hasWarning ? " dnb-upload__file-cell--warning" : ""),
+    ref: cellRef
+  }, React.createElement("div", {
+    className: "dnb-upload__file-cell__content"
+  }, React.createElement("div", {
+    className: "dnb-upload__file-cell__content__left"
+  }, getIcon(), getTitle()), React.createElement("div", null, React.createElement(Button, {
+    "data-testid": "upload-delete-button",
+    icon: TrashIcon,
+    variant: "tertiary",
+    onClick: onDeleteHandler,
+    icon_position: "left"
+  }, deleteButtonText))), getWarning());
+
+  function getIcon() {
+    if (isLoading) {
+      return _ProgressIndicator || (_ProgressIndicator = React.createElement(ProgressIndicator, {
+        "data-testid": "upload-progress-indicator"
+      }));
+    }
+
+    if (hasWarning) return _Icon || (_Icon = React.createElement(Icon, {
+      icon: ExclamationIcon
+    }));
+    var iconFileType = fileType;
+
+    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+      iconFileType = 'file';
+    }
+
+    return React.createElement(Icon, {
+      icon: images[iconFileType]
+    });
+  }
+
+  function getTitle() {
+    return isLoading ? _div || (_div = React.createElement("div", {
+      className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
+    }, loadingText)) : React.createElement("div", {
+      className: "dnb-upload__file-cell__text-container"
+    }, _a || (_a = React.createElement("a", {
+      "data-testid": "upload-file-anchor",
+      target: "_blank",
+      href: imageUrl,
+      className: "dnb-anchor dnb-upload__file-cell__title",
+      rel: "noopener noreferrer"
+    }, name)), React.createElement(P, {
+      "data-testid": "upload-subtitle",
+      className: "dnb-upload__file-cell__subtitle",
+      size: "x-small",
+      top: "xx-small"
+    }, fileType.toUpperCase()));
+  }
+
+  function getWarning() {
+    return hasWarning ? _FormStatus || (_FormStatus = React.createElement(FormStatus, {
+      "data-testid": "upload-warning",
+      top: "small",
+      text: errorMessage,
+      stretch: true
+    })) : null;
+  }
+};
+
+export default UploadFileListCell;

package/components/upload/UploadInfo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const UploadInfo: () => JSX.Element;
+export default UploadInfo;

package/components/upload/UploadInfo.js

@@ -0,0 +1,48 @@
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import React from 'react';
+import { defaultProps, UploadContext } from './UploadContext';
+import Lead from '../../elements/Lead';
+import P from '../../elements/P';
+import Dl from '../../elements/Dl';
+import Dt from '../../elements/Dt';
+import Dd from '../../elements/Dd';
+import { format } from '../number-format/NumberUtils';
+
+var UploadInfo = function UploadInfo() {
+  var context = React.useContext(UploadContext);
+  var title = context.title,
+      text = context.text,
+      acceptedFileTypes = context.acceptedFileTypes,
+      fileTypeDescription = context.fileTypeDescription,
+      fileSizeDescription = context.fileSizeDescription,
+      fileAmountDescription = context.fileAmountDescription,
+      fileSizeContent = context.fileSizeContent,
+      filesAmountLimit = context.filesAmountLimit,
+      fileMaxSize = context.fileMaxSize;
+  var prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
+  return React.createElement(React.Fragment, null, React.createElement(Lead, {
+    "data-testid": "upload-title",
+    space: "0"
+  }, title), React.createElement(P, {
+    "data-testid": "upload-text",
+    top: "xx-small",
+    className: "dnb-upload__text"
+  }, text), React.createElement(Dl, {
+    top: "small",
+    bottom: 0,
+    direction: "horizontal",
+    className: "dnb-upload__condition-list"
+  }, React.createElement(Dl.Item, null, React.createElement(Dt, {
+    "data-testid": "upload-accepted-formats"
+  }, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, {
+    "data-testid": "upload-file-size"
+  }, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, {
+    "data-testid": "upload-file-amount-limit"
+  }, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
+};
+
+export default UploadInfo;

package/components/upload/UploadStatus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const UploadStatus: () => JSX.Element;
+export default UploadStatus;

package/components/upload/UploadStatus.js

@@ -0,0 +1,26 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import React from 'react';
+import { UploadContext } from './UploadContext';
+import FormStatus from '../FormStatus';
+import useUpload from './useUpload';
+import HeightAnimation from '../height-animation/HeightAnimation';
+
+var UploadStatus = function UploadStatus() {
+  var context = React.useContext(UploadContext);
+  var id = context.id,
+      filesAmountLimit = context.filesAmountLimit,
+      errorAmountLimit = context.errorAmountLimit;
+
+  var _useUpload = useUpload(id),
+      internalFiles = _useUpload.internalFiles;
+
+  return React.createElement(HeightAnimation, {
+    open: internalFiles.length > filesAmountLimit
+  }, React.createElement(FormStatus, {
+    top: true,
+    stretch: true
+  }, String(errorAmountLimit).replace('%amount', String(filesAmountLimit))));
+};
+
+export default UploadStatus;

package/components/upload/UploadVerify.d.ts

@@ -0,0 +1,2 @@
+import { UploadContextProps, UploadFile } from './types';
+export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];

package/components/upload/UploadVerify.js

@@ -0,0 +1,42 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.map.js";
+import { format } from '../number-format/NumberUtils';
+var BYTES_IN_A_MEGA_BYTE = 1048576;
+export function verifyFiles(files, context) {
+  var fileMaxSize = context.fileMaxSize,
+      acceptedFileTypes = context.acceptedFileTypes,
+      errorLargeFile = context.errorLargeFile,
+      errorUnsupportedFile = context.errorUnsupportedFile;
+
+  var handleSize = function handleSize(file) {
+    return file.size / BYTES_IN_A_MEGA_BYTE > fileMaxSize ? String(errorLargeFile).replace('%size', format(fileMaxSize).toString()) : null;
+  };
+
+  var handleType = function handleType(file) {
+    if (acceptedFileTypes.length === 0) {
+      return false;
+    }
+
+    var foundType = acceptedFileTypes.some(function (type) {
+      return file.type.includes(type);
+    });
+    return !foundType ? errorUnsupportedFile : null;
+  };
+
+  var cleanedFiles = files.map(function (item) {
+    var file = item.file;
+    var errorMessage = handleSize(file) || handleType(file);
+
+    if (errorMessage) {
+      item.errorMessage = errorMessage;
+    }
+
+    return item;
+  });
+  return cleanedFiles;
+}

package/components/upload/index.d.ts

@@ -0,0 +1,3 @@
+export default Upload;
+export * from "./Upload";
+import Upload from "./Upload";

package/components/upload/index.js

@@ -0,0 +1,3 @@
+import Upload from './Upload';
+export default Upload;
+export * from './Upload';

package/components/upload/style/_upload.scss

@@ -0,0 +1,91 @@
+/*
+* Upload component
+*
+*/
+
+.dnb-upload {
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+  padding: var(--spacing-medium);
+
+  @include allBelow(small) {
+    padding: var(--spacing-medium) var(--spacing-small);
+  }
+
+  background-color: var(--color-white);
+
+  // svg element
+  &__outline {
+    content: '';
+
+    pointer-events: none;
+
+    position: absolute;
+    inset: 0;
+
+    height: 100%;
+    width: 100%;
+  }
+
+  &__file-input {
+    position: absolute;
+    visibility: hidden;
+  }
+
+  &__file-list {
+    position: relative;
+
+    padding: 0;
+    margin-top: var(--spacing-medium);
+    margin-bottom: 0;
+
+    list-style: none;
+  }
+
+  // Border on top/bottom of list items
+  &__file-list::before,
+  &__file-cell::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    height: 1px;
+    background-color: var(--color-black-8);
+  }
+
+  &__file-cell {
+    position: relative;
+    padding: var(--spacing-small) 0;
+
+    // Align border to bottom
+    &::after {
+      top: auto;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: row;
+
+      justify-content: space-between;
+      align-items: center;
+
+      &__left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+
+    &__text-container {
+      display: flex;
+      flex-direction: column;
+
+      margin-left: var(--spacing-small);
+
+      &--loading {
+        font-size: var(--font-size-basis);
+      }
+    }
+  }
+}