@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 { formatNumber } 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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 _jsxs(Flex.Stack, {
    gap: "small",
    children: [(title || text) && _jsxs(Flex.Stack, {
      gap: "xx-small",
      children: [title && _jsx(Lead, {
        space: "0",
        children: title
      }), text && _jsx(P, {
        className: "dnb-upload__text",
        children: text
      })]
    }), children, displayDl && _jsxs(Dl, {
      bottom: 0,
      layout: "horizontal",
      children: [displayAcceptedFileFormatsListItem && _jsxs(Dl.Item, {
        children: [_jsx(Dt, {
          children: fileTypeDescription
        }), _jsx(Dd, {
          children: prettifiedAcceptedFileFormats
        })]
      }), displayFileMaxSizeItem && _jsxs(Dl.Item, {
        children: [_jsx(Dt, {
          children: fileSizeDescription
        }), _jsx(Dd, {
          children: String(fileSizeContent).replace('%size', formatNumber(fileMaxSize).toString())
        })]
      }), displayFilesAmountLimitItem && _jsxs(Dl.Item, {
        children: [_jsx(Dt, {
          children: fileAmountDescription
        }), _jsx(Dd, {
          children: filesAmountLimit
        })]
      })]
    }), displayAcceptedFileFormatsTable && (_UploadInfoAcceptedFi || (_UploadInfoAcceptedFi = _jsx(UploadInfoAcceptedFileTypesTable, {})))]
  });
};
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 _jsxs(Table, {
    border: true,
    className: "dnb-upload__accepted-file-types-table",
    size: "small",
    children: [_jsx("caption", {
      className: "dnb-sr-only",
      children: fileTypeTableCaption
    }), _jsx("thead", {
      children: _jsxs(Tr, {
        variant: "odd",
        cellSpacing: 0,
        children: [_jsx(Th, {
          children: fileTypeDescription
        }), _jsx(Th, {
          children: fileSizeDescription
        })]
      })
    }), _jsx("tbody", {
      children: Object.keys(acceptedFileTypesGroupedByFileMaxSize).sort((a, b) => Number(b) - Number(a)).map(key => {
        return _jsxs(Tr, {
          variant: "odd",
          children: [_jsx(Td, {
            children: prettifyAcceptedFileFormats(acceptedFileTypesGroupedByFileMaxSize[key].map(acceptedFileTypesObj => acceptedFileTypesObj.fileType))
          }), _jsx(Td, {
            children: key !== '0' && String(fileSizeContent).replace('%size', formatNumber(key).toString())
          })]
        }, key);
      })
    })]
  });
}
export default UploadInfo;
//# sourceMappingURL=UploadInfo.js.map