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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireDefault(require("react"));
var _UploadContext = require("./UploadContext.js");
var _Lead = _interopRequireDefault(require("../../elements/Lead.js"));
var _P = _interopRequireDefault(require("../../elements/P.js"));
var _Dl = _interopRequireDefault(require("../../elements/Dl.js"));
var _Dt = _interopRequireDefault(require("../../elements/Dt.js"));
var _Dd = _interopRequireDefault(require("../../elements/Dd.js"));
var _NumberUtils = require("../number-format/NumberUtils.js");
var _UploadVerify = require("./UploadVerify.js");
var _Table = _interopRequireDefault(require("../Table.js"));
var _TableTr = _interopRequireDefault(require("../table/TableTr.js"));
var _TableTh = _interopRequireDefault(require("../table/TableTh.js"));
var _TableTd = _interopRequireDefault(require("../table/TableTd.js"));
var _Flex = _interopRequireDefault(require("../../components/Flex.js"));
var _UploadInfoAcceptedFi;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const prettifyAcceptedFileFormats = acceptedFileTypes => acceptedFileTypes.sort().join(', ').toUpperCase();
const UploadInfo = () => {
  const context = _react.default.useContext(_UploadContext.UploadContext);
  const {
    title,
    text,
    acceptedFileTypes,
    fileTypeDescription,
    fileSizeDescription,
    fileAmountDescription,
    fileSizeContent,
    filesAmountLimit,
    fileMaxSize,
    children
  } = context;
  const prettifiedAcceptedFileFormats = prettifyAcceptedFileFormats(acceptedFileTypes);
  const isAcceptedFileTypeListOfStrings = (0, _UploadVerify.isArrayOfStrings)(acceptedFileTypes);
  const displayAcceptedFileFormatsListItem = isAcceptedFileTypeListOfStrings && prettifiedAcceptedFileFormats;
  const displayFileMaxSizeItem = isAcceptedFileTypeListOfStrings && fileMaxSize;
  const displayFilesAmountLimitItem = filesAmountLimit < _UploadContext.defaultProps.filesAmountLimit;
  const displayAcceptedFileFormatsTable = !displayAcceptedFileFormatsListItem && (0, _UploadVerify.isArrayOfObjects)(acceptedFileTypes);
  const displayDl = displayAcceptedFileFormatsListItem || displayFileMaxSizeItem || displayFilesAmountLimitItem;
  return _react.default.createElement(_Flex.default.Stack, {
    gap: "small"
  }, (title || text) && _react.default.createElement(_Flex.default.Stack, {
    gap: "xx-small"
  }, title && _react.default.createElement(_Lead.default, {
    space: "0"
  }, title), text && _react.default.createElement(_P.default, {
    className: "dnb-upload__text"
  }, text)), children, displayDl && _react.default.createElement(_Dl.default, {
    bottom: 0,
    layout: "horizontal"
  }, displayAcceptedFileFormatsListItem && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileTypeDescription), _react.default.createElement(_Dd.default, null, prettifiedAcceptedFileFormats)), displayFileMaxSizeItem && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileSizeDescription), _react.default.createElement(_Dd.default, null, String(fileSizeContent).replace('%size', (0, _NumberUtils.format)(fileMaxSize).toString()))), displayFilesAmountLimitItem && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileAmountDescription), _react.default.createElement(_Dd.default, null, filesAmountLimit))), displayAcceptedFileFormatsTable && (_UploadInfoAcceptedFi || (_UploadInfoAcceptedFi = _react.default.createElement(UploadInfoAcceptedFileTypesTable, null))));
};
function UploadInfoAcceptedFileTypesTable() {
  const context = _react.default.useContext(_UploadContext.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] || [];
      (0, _push.default)(_context = group[groupName]).call(_context, item);
    });
    return group;
  };
  const acceptedFileTypesGroupedByFileMaxSize = groupByFileMaxSize(acceptedFileTypes, fileMaxSize);
  return _react.default.createElement(_Table.default, {
    border: true,
    className: "dnb-upload__accepted-file-types-table",
    size: "small"
  }, _react.default.createElement("caption", {
    className: "dnb-sr-only"
  }, fileTypeTableCaption), _react.default.createElement("thead", null, _react.default.createElement(_TableTr.default, {
    variant: "odd",
    cellSpacing: 0
  }, _react.default.createElement(_TableTh.default, null, fileTypeDescription), _react.default.createElement(_TableTh.default, null, fileSizeDescription))), _react.default.createElement("tbody", null, Object.keys(acceptedFileTypesGroupedByFileMaxSize).sort((a, b) => Number(b) - Number(a)).map(key => {
    return _react.default.createElement(_TableTr.default, {
      variant: "odd",
      key: key
    }, _react.default.createElement(_TableTd.default, null, prettifyAcceptedFileFormats(acceptedFileTypesGroupedByFileMaxSize[key].map(acceptedFileTypesObj => acceptedFileTypesObj.fileType))), _react.default.createElement(_TableTd.default, null, key !== '0' && String(fileSizeContent).replace('%size', (0, _NumberUtils.format)(key).toString())));
  })));
}
var _default = exports.default = UploadInfo;
//# sourceMappingURL=UploadInfo.js.map