@dnb/eufemia 9.32.1 → 9.34.0

package/es/components/upload/UploadDropzone.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _svg;
+
+const _excluded = ["children", "className"];
+import React from 'react';
+import classnames from 'classnames';
+import HeightAnimation from '../height-animation/HeightAnimation';
+import { UploadContext } from './UploadContext';
+export default function UploadDropzone(_ref) {
+  let {
+    children,
+    className
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const props = rest;
+  const context = React.useContext(UploadContext);
+  const [hover, setHover] = React.useState(false);
+  const hoverTimeout = React.useRef();
+  const {
+    onInputUpload
+  } = context;
+
+  const getFiles = event => {
+    const fileData = event.dataTransfer;
+    const files = [];
+    Array.from(fileData.files).forEach((file, i) => {
+      files.push({
+        file
+      });
+    });
+    return files;
+  };
+
+  const hoverHandler = (event, state) => {
+    event.stopPropagation();
+    event.preventDefault();
+    clearTimers();
+    setHover(state);
+  };
+
+  const dropHandler = event => {
+    const files = getFiles(event);
+    onInputUpload(files);
+    hoverHandler(event, false);
+  };
+
+  const dragEnterHandler = event => {
+    hoverHandler(event, true);
+  };
+
+  const dragLeaveHandler = event => {
+    hoverHandler(event, false);
+  };
+
+  const clearTimers = () => {
+    clearTimeout(hoverTimeout.current);
+  };
+
+  React.useEffect(() => 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/es/components/upload/UploadFileInput.d.ts

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

package/es/components/upload/UploadFileInput.js

@@ -0,0 +1,76 @@
+var _UploadStatus;
+
+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';
+
+const UploadFileInput = () => {
+  const fileInput = useRef(null);
+  const context = React.useContext(UploadContext);
+  const {
+    id,
+    acceptedFileTypes,
+    buttonText,
+    onInputUpload,
+    filesAmountLimit
+  } = context;
+  const {
+    internalFiles
+  } = useUpload(id);
+  const accept = acceptedFileTypes.reduce((accept, format, index) => {
+    const previus = index === 0 ? '' : `${accept},`;
+    return `${previus} .${format}`;
+  }, '');
+  useEffect(() => {
+    fileInput.current.value = null;
+    fileInput.current.accept = accept;
+  }, []);
+
+  const openFileDialog = () => {
+    var _fileInput$current;
+
+    return (_fileInput$current = fileInput.current) === null || _fileInput$current === void 0 ? void 0 : _fileInput$current.click();
+  };
+
+  const sharedId = id || makeUniqueId();
+  return React.createElement("div", {
+    "data-testid": "upload-file-input"
+  }, React.createElement(Button, {
+    top: "medium",
+    id: `${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": `${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) {
+    const target = event.target;
+    const {
+      files
+    } = target;
+    onInputUpload(Array.from(files).map(file => {
+      return {
+        file
+      };
+    }));
+  }
+};
+
+export default UploadFileInput;

package/es/components/upload/UploadFileList.d.ts

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

package/es/components/upload/UploadFileList.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { UploadContext } from './UploadContext';
+import UploadFileListCell from './UploadFileListCell';
+import useUpload from './useUpload';
+
+function UploadFileList() {
+  const context = React.useContext(UploadContext);
+  const {
+    id,
+    fileListAriaLabel,
+    deleteButton,
+    loadingText,
+    onFileDelete,
+    onChange
+  } = context;
+  const {
+    files,
+    setFiles,
+    setInternalFiles
+  } = useUpload(id);
+
+  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((uploadFile, index) => {
+    const onDeleteHandler = () => {
+      if (typeof onFileDelete === 'function') {
+        onFileDelete({
+          fileItem: uploadFile
+        });
+      }
+
+      const cleanedFiles = files.filter(fileListElement => 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/es/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/es/components/upload/UploadFileListCell.js

@@ -0,0 +1,124 @@
+var _ProgressIndicator, _Icon;
+
+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';
+const images = {
+  pdf,
+  xls,
+  ppt,
+  csv,
+  txt,
+  xml,
+  file
+};
+
+const UploadFileListCell = ({
+  uploadFile,
+  onDelete,
+  loadingText,
+  deleteButtonText
+}) => {
+  var _div, _a, _FormStatus;
+
+  const {
+    file,
+    errorMessage,
+    isLoading
+  } = uploadFile;
+  const {
+    name,
+    type
+  } = file;
+  const fileType = type.split('/')[1];
+  const hasWarning = errorMessage != null;
+  const imageUrl = URL.createObjectURL(file);
+  const cellRef = useRef();
+
+  const handleDisappearFocus = () => {
+    try {
+      const cellElement = cellRef.current;
+      const focusElement = getPreviousSibling('.dnb-upload', cellElement).querySelector('.dnb-upload__file-input-button');
+      focusElement.focus();
+    } catch (e) {
+      warn(e);
+    }
+  };
+
+  const 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
+    }));
+    let 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/es/components/upload/UploadInfo.d.ts

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

package/es/components/upload/UploadInfo.js

@@ -0,0 +1,45 @@
+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';
+
+const UploadInfo = () => {
+  const context = React.useContext(UploadContext);
+  const {
+    title,
+    text,
+    acceptedFileTypes,
+    fileTypeDescription,
+    fileSizeDescription,
+    fileAmountDescription,
+    fileSizeContent,
+    filesAmountLimit,
+    fileMaxSize
+  } = context;
+  const 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/es/components/upload/UploadStatus.d.ts

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

package/es/components/upload/UploadStatus.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { UploadContext } from './UploadContext';
+import FormStatus from '../FormStatus';
+import useUpload from './useUpload';
+import HeightAnimation from '../height-animation/HeightAnimation';
+
+const UploadStatus = () => {
+  const context = React.useContext(UploadContext);
+  const {
+    id,
+    filesAmountLimit,
+    errorAmountLimit
+  } = context;
+  const {
+    internalFiles
+  } = useUpload(id);
+  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/es/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/es/components/upload/UploadVerify.js

@@ -0,0 +1,39 @@
+import { format } from '../number-format/NumberUtils';
+const BYTES_IN_A_MEGA_BYTE = 1048576;
+export function verifyFiles(files, context) {
+  const {
+    fileMaxSize,
+    acceptedFileTypes,
+    errorLargeFile,
+    errorUnsupportedFile
+  } = context;
+
+  const handleSize = file => {
+    return file.size / BYTES_IN_A_MEGA_BYTE > fileMaxSize ? String(errorLargeFile).replace('%size', format(fileMaxSize).toString()) : null;
+  };
+
+  const handleType = file => {
+    if (acceptedFileTypes.length === 0) {
+      return false;
+    }
+
+    const foundType = acceptedFileTypes.some(type => {
+      return file.type.includes(type);
+    });
+    return !foundType ? errorUnsupportedFile : null;
+  };
+
+  const cleanedFiles = files.map(item => {
+    const {
+      file
+    } = item;
+    const errorMessage = handleSize(file) || handleType(file);
+
+    if (errorMessage) {
+      item.errorMessage = errorMessage;
+    }
+
+    return item;
+  });
+  return cleanedFiles;
+}

package/es/components/upload/index.d.ts

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

package/es/components/upload/index.js

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

package/es/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);
+      }
+    }
+  }
+}