@dnb/eufemia/components/upload/UploadInfo.js

DNB Eufemia Design System UI Library

var _UploadInfoAcceptedFi;
import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import React from 'react';
import { defaultProps, UploadContext } from "./UploadContext.js";
import Lead from "../../elements/Lead.js";
import P from "../../elements/P.js";
import Dl from "../../elements/Dl.js";
import Dt from "../../elements/Dt.js";
import Dd from "../../elements/Dd.js";
import { format } from "../number-format/NumberUtils.js";
import { isArrayOfObjects, isArrayOfStrings } from "./UploadVerify.js";
import Table from "../Table.js";
import Tr from "../table/TableTr.js";
import Th from "../table/TableTh.js";
import Td from "../table/TableTd.js";
import Flex from "../../components/Flex.js";
const prettifyAcceptedFileFormats = acceptedFileTypes => acceptedFileTypes.sort().join(', ').toUpperCase();
const UploadInfo = () => {
  const context = React.useContext(UploadContext);
  const {
    title,
    text,
    acceptedFileTypes,
    fileTypeDescription,
    fileSizeDescription,
    fileAmountDescription,
    fileSizeContent,
    filesAmountLimit,
    fileMaxSize,
    children
  } = context;
  const prettifiedAcceptedFileFormats = prettifyAcceptedFileFormats(acceptedFileTypes);
  const isAcceptedFileTypeListOfStrings = isArrayOfStrings(acceptedFileTypes);
  const displayAcceptedFileFormatsListItem = isAcceptedFileTypeListOfStrings && prettifiedAcceptedFileFormats;
  const displayFileMaxSizeItem = isAcceptedFileTypeListOfStrings && fileMaxSize;
  const displayFilesAmountLimitItem = filesAmountLimit < defaultProps.filesAmountLimit;
  const displayAcceptedFileFormatsTable = !displayAcceptedFileFormatsListItem && isArrayOfObjects(acceptedFileTypes);
  const displayDl = displayAcceptedFileFormatsListItem || displayFileMaxSizeItem || displayFilesAmountLimitItem;
  return React.createElement(Flex.Stack, {
    gap: "small"
  }, (title || text) && React.createElement(Flex.Stack, {
    gap: "xx-small"
  }, title && React.createElement(Lead, {
    space: "0"
  }, title), text && React.createElement(P, {
    className: "dnb-upload__text"
  }, text)), children, displayDl && React.createElement(Dl, {
    bottom: 0,
    layout: "horizontal"
  }, displayAcceptedFileFormatsListItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettifiedAcceptedFileFormats)), displayFileMaxSizeItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), displayFilesAmountLimitItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))), displayAcceptedFileFormatsTable && (_UploadInfoAcceptedFi || (_UploadInfoAcceptedFi = React.createElement(UploadInfoAcceptedFileTypesTable, null))));
};
function UploadInfoAcceptedFileTypesTable() {
  const context = React.useContext(UploadContext);
  const {
    acceptedFileTypes,
    fileTypeTableCaption,
    fileTypeDescription,
    fileSizeDescription,
    fileSizeContent,
    fileMaxSize
  } = context;
  const groupByFileMaxSize = (acceptedFileTypes, fallBackFileMaxSize) => {
    const fileMaxSizeIsFalseOrZero = fileMaxSize => {
      return fileMaxSize === false || fileMaxSize === 0;
    };
    const group = {};
    acceptedFileTypes.forEach(item => {
      var _context;
      const itemFileMaxSize = item.fileMaxSize;
      const groupName = itemFileMaxSize ? itemFileMaxSize : fileMaxSizeIsFalseOrZero(itemFileMaxSize) ? 0 : fileMaxSizeIsFalseOrZero(fallBackFileMaxSize) ? 0 : fallBackFileMaxSize;
      group[groupName] = group[groupName] || [];
      _pushInstanceProperty(_context = group[groupName]).call(_context, item);
    });
    return group;
  };
  const acceptedFileTypesGroupedByFileMaxSize = groupByFileMaxSize(acceptedFileTypes, fileMaxSize);
  return React.createElement(Table, {
    border: true,
    className: "dnb-upload__accepted-file-types-table",
    size: "small"
  }, React.createElement("caption", {
    className: "dnb-sr-only"
  }, fileTypeTableCaption), React.createElement("thead", null, React.createElement(Tr, {
    variant: "odd",
    cellSpacing: 0
  }, React.createElement(Th, null, fileTypeDescription), React.createElement(Th, null, fileSizeDescription))), React.createElement("tbody", null, Object.keys(acceptedFileTypesGroupedByFileMaxSize).sort((a, b) => Number(b) - Number(a)).map(key => {
    return React.createElement(Tr, {
      variant: "odd",
      key: key
    }, React.createElement(Td, null, prettifyAcceptedFileFormats(acceptedFileTypesGroupedByFileMaxSize[key].map(acceptedFileTypesObj => acceptedFileTypesObj.fileType))), React.createElement(Td, null, key !== '0' && String(fileSizeContent).replace('%size', format(key).toString())));
  })));
}
export default UploadInfo;
//# sourceMappingURL=UploadInfo.js.map