suomifi-ui-components
Version:
Suomi.fi UI component library
148 lines (142 loc) • 8.47 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var Button = require('../../Button/Button.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
var suomifiIcons = require('suomifi-icons');
var Link = require('../../Link/Link/Link.js');
var styled = require('styled-components');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
require('../../theme/SpacingProvider/SpacingProvider.js');
var FileInput_baseStyles = require('./FileInput.baseStyles.js');
var classnames = require('classnames');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(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__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileItemClassNames.fileItemOuterWrapper,
role: multiFile ? 'listitem' : undefined
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileItemClassNames.fileItem
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileItemClassNames.fileInfo
}, (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) === 'error' && ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconErrorFilled, {
className: fileItemClassNames.errorIcon
})), (fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) === 'loading' && ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconPreloader, {
className: fileItemClassNames.loadingIcon
})), !(fileItemDetails === null || fileItemDetails === void 0 ? void 0 : fileItemDetails.status) && /*#__PURE__*/React__default.default.createElement(suomifiIcons.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__default.default.createElement(Link.Link, {
ref: fileItemRefs.fileNameRef,
href: getPreviewLinkHref(),
className: classnames__default.default(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__default.default.createElement(HtmlDiv.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__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileItemClassNames.fileSize,
id: filePreview ? fileItemRefs.fileSizeElementId : undefined
}, getFileSizeText())), /*#__PURE__*/React__default.default.createElement(Button.Button, {
variant: smallScreen && !multiFile ? 'secondary' : 'secondaryNoBorder',
icon: fileItemDetails && fileItemDetails.buttonIcon ? fileItemDetails.buttonIcon : ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.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__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileItemClassNames.fileItemErrorText
}, fileItemDetails.errorText)));
};
var StyledFileItem = styled.styled(function (_a) {
_a.theme;
var passProps = tslib.__rest(_a, ["theme"]);
return /*#__PURE__*/React__default.default.createElement(BaseFileItem, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-x3ym3q-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return FileInput_baseStyles.baseStyles(theme);
});
var FileItem = function FileItem(props) {
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(StyledFileItem, tslib.__assign({
theme: suomifiTheme
}, props));
});
};
FileItem.displayName = 'FileItem';
var templateObject_1;
exports.FileItem = FileItem;
//# sourceMappingURL=FileItem.js.map