suomifi-ui-components/dist/esm/core/Form/FileInput/FileItem.js

Suomi.fi UI component library

import { __rest, __assign, __makeTemplateObject } from 'tslib';
import React from 'react';
import { Button } from '../../Button/Button.js';
import { HtmlDiv, HtmlDivWithRef } from '../../../reset/HtmlDiv/HtmlDiv.js';
import { IconErrorFilled, IconPreloader, IconGenericFile, IconRemove } from 'suomifi-icons';
import { Link } from '../../Link/Link/Link.js';
import { styled } from 'styled-components';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import '../../theme/SpacingProvider/SpacingProvider.js';
import { baseStyles } from './FileInput.baseStyles.js';
import classnames from 'classnames';

var baseClassName = 'fi-file-input';
var fileItemClassNames = {
  fileItemOuterWrapper: "".concat(baseClassName, "_file-item-outer-wrapper"),
  fileItem: "".concat(baseClassName, "_file-item"),
  fileInfo: "".concat(baseClassName, "_file-info"),
  fileName: "".concat(baseClassName, "_file-name"),
  fileSize: "".concat(baseClassName, "_file-size"),
  removeFileButton: "".concat(baseClassName, "_remove-file-button"),
  errorIcon: "".concat(baseClassName, "_error-icon"),
  loadingIcon: "".concat(baseClassName, "_loading-icon"),
  fileItemErrorText: "".concat(baseClassName, "_file-item-error-text")
};
var BaseFileItem = function BaseFileItem(props) {
  var file = props.file,
    filePreview = props.filePreview,
    multiFile = props.multiFile,
    fileItemRefs = props.fileItemRefs,
    addedFileAriaText = props.addedFileAriaText,
    removeFileText = props.removeFileText,
    removeFile = props.removeFile,
    smallScreen = props.smallScreen,
    fileItemDetails = props.fileItemDetails;
  var _a = (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.metadata) || {},
    metadataFileName = _a.fileName,
    metadataFileSize = _a.fileSize;
  var filePreviewCallBack = fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.filePreviewOnClick;
  var fileUrl = fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.fileURL;
  var getPreviewLinkHref = function getPreviewLinkHref() {
    if (filePreviewCallBack) return '';
    if (fileUrl) return fileUrl;
    if (file) return URL.createObjectURL(file);
    return '';
  };
  var getFileSizeText = function getFileSizeText() {
    var fileSize = metadataFileSize || (file === null || file === void 0 ? void 0 : file.size);
    if (!fileSize || fileSize < 1024) {
      return "".concat(fileSize, " B");
    }
    if (fileSize < 1024 * 1024) {
      return "".concat((fileSize / 1024).toFixed(1), " KB");
    }
    return "".concat((fileSize / 1024 / 1024).toFixed(1), " MB");
  };
  var getButtonText = function getButtonText() {
    if (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.buttonText) {
      return fileItemDetails.buttonText;
    }
    return !multiFile || multiFile && !smallScreen ? removeFileText : undefined;
  };
  var getFileAriaLabel = function getFileAriaLabel() {
    if ((fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) !== 'loading' && !(fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.ariaLoadingText)) {
      return "".concat(addedFileAriaText, " ").concat((file === null || file === void 0 ? void 0 : file.name) || metadataFileName, " ").concat((fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.errorText) ? fileItemDetails.errorText : '');
    }
    return "".concat(fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.ariaLoadingText, " ").concat((file === null || file === void 0 ? void 0 : file.name) || metadataFileName);
  };
  return /*#__PURE__*/React.createElement(HtmlDiv, {
    className: fileItemClassNames.fileItemOuterWrapper,
    role: multiFile ? 'listitem' : undefined
  }, /*#__PURE__*/React.createElement(HtmlDiv, {
    className: fileItemClassNames.fileItem
  }, /*#__PURE__*/React.createElement(HtmlDiv, {
    className: fileItemClassNames.fileInfo
  }, (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) === 'error' && ( /*#__PURE__*/React.createElement(IconErrorFilled, {
    className: fileItemClassNames.errorIcon
  })), (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) === 'loading' && ( /*#__PURE__*/React.createElement(IconPreloader, {
    className: fileItemClassNames.loadingIcon
  })), !(fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) && /*#__PURE__*/React.createElement(IconGenericFile, null), filePreview && (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) !== 'error' && (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) !== 'loading' ? ( /*#__PURE__*/React.createElement(Link, {
    ref: fileItemRefs.fileNameRef,
    href: getPreviewLinkHref(),
    className: classnames(fileItemClassNames.fileName, 'is-link'),
    target: "_blank",
    "aria-label": getFileAriaLabel(),
    "aria-describedby": fileItemRefs.fileSizeElementId,
    onClick: function onClick(e) {
      if (filePreviewCallBack) {
        e.preventDefault();
        filePreviewCallBack();
      }
    }
  }, (file === null || file === void 0 ? void 0 : file.name) || metadataFileName)) : ( /*#__PURE__*/React.createElement(HtmlDivWithRef, {
    forwardedRef: fileItemRefs.fileNameRef,
    className: fileItemClassNames.fileName,
    "aria-label": getFileAriaLabel(),
    "aria-describedby": fileItemRefs.fileSizeElementId
  }, (file === null || file === void 0 ? void 0 : file.name) || metadataFileName)), /*#__PURE__*/React.createElement(HtmlDiv, {
    className: fileItemClassNames.fileSize,
    id: filePreview ? fileItemRefs.fileSizeElementId : undefined
  }, getFileSizeText())), /*#__PURE__*/React.createElement(Button, {
    variant: smallScreen && !multiFile ? 'secondary' : 'secondaryNoBorder',
    icon: fileItemDetails && fileItemDetails.buttonIcon ? fileItemDetails.buttonIcon : ( /*#__PURE__*/React.createElement(IconRemove, null)),
    onClick: function onClick() {
      if (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.buttonOnClick) {
        fileItemDetails.buttonOnClick();
      } else if (file) {
        removeFile(file);
      }
    },
    "aria-label": "".concat((fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.buttonText) ? fileItemDetails.buttonText : removeFileText, " ").concat((file === null || file === void 0 ? void 0 : file.name) || metadataFileName),
    className: fileItemClassNames.removeFileButton,
    ref: fileItemRefs.removeButtonRef
  }, getButtonText())), (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.errorText) && ( /*#__PURE__*/React.createElement(HtmlDiv, {
    className: fileItemClassNames.fileItemErrorText
  }, fileItemDetails.errorText)));
};
var StyledFileItem = styled(function (_a) {
  _a.theme;
    var passProps = __rest(_a, ["theme"]);
  return /*#__PURE__*/React.createElement(BaseFileItem, __assign({}, passProps));
}).withConfig({
  componentId: "sc-x3ym3q-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
  var theme = _a.theme;
  return baseStyles(theme);
});
var FileItem = function FileItem(props) {
  return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
    var suomifiTheme = _a.suomifiTheme;
    return /*#__PURE__*/React.createElement(StyledFileItem, __assign({
      theme: suomifiTheme
    }, props));
  });
};
FileItem.displayName = 'FileItem';
var templateObject_1;

export { FileItem };
//# sourceMappingURL=FileItem.js.map