suomifi-ui-components
Version:
Suomi.fi UI component library
437 lines (434 loc) • 20.3 kB
JavaScript
import { __rest, __assign, __makeTemplateObject, __spreadArray } from 'tslib';
import React, { useRef, useState, useEffect, forwardRef, createRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import { AutoId } from '../../utils/AutoId/AutoId.js';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import { SpacingConsumer } from '../../theme/SpacingProvider/SpacingProvider.js';
import { separateMarginProps } from '../../theme/utils/spacing.js';
import { filterDuplicateKeys, forkRefs } from '../../../utils/common/common.js';
import { baseStyles } from './FileInput.baseStyles.js';
import { Label } from '../Label/Label.js';
import { HtmlDiv, HtmlDivWithRef } from '../../../reset/HtmlDiv/HtmlDiv.js';
import { getConditionalAriaProp } from '../../../utils/aria/aria.js';
import '../../../reset/HtmlA/HtmlA.js';
import '../../../reset/HtmlButton/HtmlButton.js';
import { HtmlFieldSet } from '../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../reset/HtmlH/HtmlH.js';
import { HtmlInput } from '../../../reset/HtmlInput/HtmlInput.js';
import { HtmlLabel } from '../../../reset/HtmlLabel/HtmlLabel.js';
import { HtmlLegend } from '../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../reset/HtmlLi/HtmlLi.js';
import '../../../reset/HtmlNav/HtmlNav.js';
import '../../../reset/HtmlOl/HtmlOl.js';
import '../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../reset/HtmlUl/HtmlUl.js';
import '../../../reset/HtmlTable/HtmlTable.js';
import '../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../reset/HtmlTable/HtmlTableCell.js';
import { HintText } from '../HintText/HintText.js';
import { StatusText } from '../StatusText/StatusText.js';
import { FileItem } from './FileItem.js';
var baseClassName = 'fi-file-input';
var fileInputClassNames = {
fullWidth: "".concat(baseClassName, "--full-width"),
inputOuterWrapper: "".concat(baseClassName, "_input-outer-wrapper"),
dragArea: "".concat(baseClassName, "_drag-area"),
dragTextContainer: "".concat(baseClassName, "_drag-text-container"),
singleFileContainer: "".concat(baseClassName, "_single-file-container"),
multiFileContainer: "".concat(baseClassName, "_multi-file-container"),
inputWrapper: "".concat(baseClassName, "_input-wrapper"),
inputWrapperHidden: "".concat(baseClassName, "_input-wrapper--hidden"),
inputLabel: "".concat(baseClassName, "_input-label"),
inputElement: "".concat(baseClassName, "_input-element"),
error: "".concat(baseClassName, "--error"),
success: "".concat(baseClassName, "--success"),
labelIsVisible: "".concat(baseClassName, "_label--visible"),
statusTextHasContent: "".concat(baseClassName, "_statusText--has-content"),
hiddenUnderFile: "".concat(baseClassName, "_label--hidden-under-file"),
dragAreaHasFile: "".concat(baseClassName, "_drag-area--has-file"),
smallScreen: "".concat(baseClassName, "--small-screen")
};
var BaseFileInput = function BaseFileInput(props) {
var _a, _b, _c, _d, _e, _f;
var className = props.className,
labelText = props.labelText,
labelMode = props.labelMode,
inputButtonText = props.inputButtonText,
dragAreaText = props.dragAreaText,
removeFileText = props.removeFileText,
_g = props.multiFile,
multiFile = _g === void 0 ? false : _g,
multiFileListHeadingText = props.multiFileListHeadingText,
_h = props.filePreview,
filePreview = _h === void 0 ? false : _h,
addedFileAriaText = props.addedFileAriaText,
propOnChange = props.onChange,
propOnBlur = props.onBlur,
controlledValue = props.value,
_j = props.smallScreen,
smallScreen = _j === void 0 ? false : _j,
style = props.style,
optionalText = props.optionalText,
status = props.status,
statusText = props.statusText,
hintText = props.hintText,
id = props.id,
fullWidth = props.fullWidth,
forwardedRef = props.forwardedRef,
_k = props.statusTextAriaLiveMode,
statusTextAriaLiveMode = _k === void 0 ? 'assertive' : _k,
ariaDescribedBy = props["aria-describedby"],
tooltipComponent = props.tooltipComponent;
props.globalMargins;
var rest = __rest(props, ["className", "labelText", "labelMode", "inputButtonText", "dragAreaText", "removeFileText", "multiFile", "multiFileListHeadingText", "filePreview", "addedFileAriaText", "onChange", "onBlur", "value", "smallScreen", "style", "optionalText", "status", "statusText", "hintText", "id", "fullWidth", "forwardedRef", "statusTextAriaLiveMode", 'aria-describedby', "tooltipComponent", "globalMargins"]);
var _l = separateMarginProps(rest),
passProps = _l[1];
var dragAreaRef = useRef(null);
var inputRef = useRef(null);
var buildFileItemRefs = function buildFileItemRefs(fileList) {
var newFileItemRefs = [];
for (var index = 0; index < fileList.length; index += 1) {
var file = fileList[index];
var fnRef = filePreview ? /*#__PURE__*/createRef() : /*#__PURE__*/createRef();
var removeButtonRef = /*#__PURE__*/createRef();
newFileItemRefs.push({
id: "".concat(id, "-").concat(file.name.replace(/\s/g, '')),
fileNameRef: fnRef,
fileSizeElementId: "".concat(id, "-").concat(file.name.replace(/\s/g, ''), "-fileSize"),
removeButtonRef: removeButtonRef
});
}
return newFileItemRefs;
};
var buildFileListFromControlledValueObjects = function buildFileListFromControlledValueObjects(controlledValueObjects) {
var newFileList = new DataTransfer();
controlledValueObjects.forEach(function (fileItem) {
if (fileItem.file) {
newFileList.items.add(fileItem.file);
} else if (fileItem.metadata) {
var _a = fileItem.metadata,
fileName = _a.fileName,
fileType = _a.fileType;
var blob = new Blob([], {
type: fileType
});
var file = new File([blob], fileName, {
type: fileType,
lastModified: -1
});
newFileList.items.add(file);
}
});
return newFileList.files;
};
var _m = useState(controlledValue ? buildFileListFromControlledValueObjects(controlledValue) : null),
files = _m[0],
setFiles = _m[1];
var _o = useState(controlledValue ? buildFileItemRefs(buildFileListFromControlledValueObjects(controlledValue)) : []),
fileItemRefs = _o[0],
setFileItemRefs = _o[1];
var labelId = "".concat(id, "-label");
var hintTextId = "".concat(id, "-hintText");
var statusTextId = "".concat(id, "-statusText");
var multiFileListHeadingId = "".concat(id, "-multiFileListHeading");
var definedRef = forwardedRef || null;
var generalDragEventHandler = function generalDragEventHandler(e, highLight) {
var _a, _b;
e.preventDefault();
e.stopPropagation();
if (highLight === 'add') {
(_a = dragAreaRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('highlight');
} else {
(_b = dragAreaRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove('highlight');
}
};
var dragEnterEventHandler = function dragEnterEventHandler(e) {
generalDragEventHandler(e, 'add');
};
var dragOverEventHandler = function dragOverEventHandler(e) {
generalDragEventHandler(e, 'add');
};
var dragLeaveEventHandler = function dragLeaveEventHandler(e) {
generalDragEventHandler(e, 'remove');
};
var dropEventHandler = function dropEventHandler(e) {
var _a;
generalDragEventHandler(e, 'remove');
var dt = e.dataTransfer;
var incomingFiles = Array.from((dt === null || dt === void 0 ? void 0 : dt.files) || []);
var previousFiles = Array.from(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files) || []);
var previousAndNewFiles = multiFile ? previousFiles.concat(incomingFiles) : incomingFiles.slice(0, 1);
var newFileList = new DataTransfer();
previousAndNewFiles.forEach(function (file) {
newFileList.items.add(file);
});
if (!controlledValue && incomingFiles.length > 0) {
setFilesToStateAndInput(newFileList.files);
}
if (propOnChange) {
var filteredFiles = Array.from(newFileList.files).filter(function (file) {
return file.lastModified !== -1;
});
var filteredFileList_1 = new DataTransfer();
filteredFiles.forEach(function (file) {
return filteredFileList_1.items.add(file);
});
propOnChange(filteredFileList_1.files || new FileList());
}
};
useEffect(function () {
var _a, _b, _c, _d;
(_a = dragAreaRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('dragenter', dragEnterEventHandler, false);
(_b = dragAreaRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('dragover', dragOverEventHandler, false);
(_c = dragAreaRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('dragleave', dragLeaveEventHandler, false);
(_d = dragAreaRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('drop', dropEventHandler, false);
return function () {
var _a, _b, _c, _d;
(_a = dragAreaRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('dragenter', dragEnterEventHandler);
(_b = dragAreaRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('dragover', dragOverEventHandler);
(_c = dragAreaRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('dragleave', dragLeaveEventHandler);
(_d = dragAreaRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('drop', dropEventHandler);
};
}, []);
useEffect(function () {
if (inputRef.current && controlledValue !== undefined) {
var controlledValueAsArray = Array.from(buildFileListFromControlledValueObjects(controlledValue) || []);
var dataTransfer_1 = new DataTransfer();
controlledValueAsArray.forEach(function (file) {
return dataTransfer_1.items.add(file);
});
setFiles(dataTransfer_1.files);
var newFileItemRefs_1 = buildFileItemRefs(dataTransfer_1.files);
setFileItemRefs(newFileItemRefs_1);
inputRef.current.files = dataTransfer_1.files;
if (!multiFile && document.activeElement === inputRef.current && dataTransfer_1.files.length > 0 && !filePreview) {
setTimeout(function () {
var _a;
(_a = newFileItemRefs_1[0].removeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
}
}
}, [controlledValue]);
var setFilesToStateAndInput = function setFilesToStateAndInput(filesToAdd) {
var newFileItemRefs = buildFileItemRefs(filesToAdd || new FileList());
setFileItemRefs(newFileItemRefs);
setFiles(filesToAdd || new FileList());
if (inputRef.current) {
inputRef.current.files = filesToAdd;
}
if (!multiFile && filePreview) {
setTimeout(function () {
var _a;
(_a = newFileItemRefs[0].fileNameRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
}
if (!multiFile && !filePreview) {
setTimeout(function () {
var _a;
(_a = newFileItemRefs[0].removeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
}
};
var removeFile = function removeFile(file) {
var _a, _b;
var initialFilesArray = Array.from(files || []);
var indexOfRemovedFile = initialFilesArray.indexOf(file);
var modifiedFilesArray = __spreadArray([], initialFilesArray, true);
modifiedFilesArray.splice(indexOfRemovedFile, 1);
var newFileList = new DataTransfer();
modifiedFilesArray.forEach(function (f) {
newFileList.items.add(f);
});
if (!multiFile || initialFilesArray.length === 1) {
setTimeout(function () {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
} else if (indexOfRemovedFile === 0) {
(_a = fileItemRefs[indexOfRemovedFile + 1].fileNameRef.current) === null || _a === void 0 ? void 0 : _a.focus();
} else {
(_b = fileItemRefs[indexOfRemovedFile - 1].fileNameRef.current) === null || _b === void 0 ? void 0 : _b.focus();
}
if (propOnChange) {
propOnChange(newFileList.files);
}
if (!controlledValue) {
if (inputRef.current) {
inputRef.current.files = newFileList.files;
}
setFiles(newFileList.files);
var newFileItemRefs = __spreadArray([], fileItemRefs, true);
newFileItemRefs.splice(indexOfRemovedFile, 1);
setFileItemRefs(newFileItemRefs);
}
};
var handleOnChange = function handleOnChange(event) {
var newFileList = new DataTransfer();
var filesFromEvent = event.target.files;
if (filesFromEvent && filesFromEvent.length > 0) {
if (!controlledValue) {
if (multiFile) {
var previousAndNewFiles = Array.from(files || []).concat(Array.from(filesFromEvent || []));
previousAndNewFiles.forEach(function (file) {
newFileList.items.add(file);
});
} else {
var filesFromEventArr = Array.from(filesFromEvent || []);
filesFromEventArr.forEach(function (file) {
newFileList.items.add(file);
});
}
setFilesToStateAndInput(newFileList.files);
} else if (inputRef.current) {
var controlledValueAsArray = Array.from(buildFileListFromControlledValueObjects(controlledValue) || []);
var controlledFileList_1 = new DataTransfer();
controlledValueAsArray.forEach(function (file) {
controlledFileList_1.items.add(file);
newFileList.items.add(file);
});
inputRef.current.files = controlledFileList_1.files;
var filesFromEventArr = Array.from(filesFromEvent || []);
filesFromEventArr.forEach(function (file) {
newFileList.items.add(file);
});
}
if (propOnChange) {
var filteredFiles = Array.from(newFileList.files).filter(function (file) {
return file.lastModified !== -1;
});
var filteredFileList_2 = new DataTransfer();
filteredFiles.forEach(function (file) {
return filteredFileList_2.items.add(file);
});
propOnChange(filteredFileList_2.files);
}
}
};
return /*#__PURE__*/React.createElement(HtmlDiv, {
className: classnames(baseClassName, className, (_a = {}, _a[fileInputClassNames.error] = status === 'error', _a[fileInputClassNames.success] = status === 'success', _a[fileInputClassNames.fullWidth] = fullWidth, _a[fileInputClassNames.smallScreen] = smallScreen, _a)),
style: style
}, /*#__PURE__*/React.createElement(HtmlFieldSet, null, /*#__PURE__*/React.createElement(HtmlLegend, null, /*#__PURE__*/React.createElement(Label, {
id: labelId,
labelMode: labelMode,
optionalText: optionalText,
className: classnames((_b = {}, _b[fileInputClassNames.labelIsVisible] = labelMode !== 'hidden', _b)),
tooltipComponent: tooltipComponent,
onClick: function onClick() {
var _a;
return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
},
asProp: "span"
}, labelText)), /*#__PURE__*/React.createElement(HintText, {
id: hintTextId
}, hintText), /*#__PURE__*/React.createElement(HtmlDiv, {
className: classnames(fileInputClassNames.inputOuterWrapper)
}, /*#__PURE__*/React.createElement(HtmlDivWithRef, {
className: classnames(fileInputClassNames.dragArea, (_c = {}, _c[fileInputClassNames.dragAreaHasFile] = !multiFile && files && files.length > 0, _c)),
forwardedRef: dragAreaRef
}, /*#__PURE__*/React.createElement(HtmlDiv, {
className: classnames(fileInputClassNames.inputWrapper, (_d = {}, _d[fileInputClassNames.inputWrapperHidden] = !multiFile && files && files.length > 0, _d))
}, /*#__PURE__*/React.createElement(HtmlInput, __assign({
id: id,
className: classnames(fileInputClassNames.inputElement, (_e = {}, _e[fileInputClassNames.hiddenUnderFile] = !multiFile && files && files.length > 0, _e)),
type: "file",
multiple: multiFile,
forwardedRef: forkRefs(inputRef, definedRef),
onChange: handleOnChange,
onBlur: function onBlur() {
if (propOnBlur) {
propOnBlur();
}
},
"aria-invalid": status === 'error'
}, getConditionalAriaProp('aria-describedby', [statusText ? statusTextId : undefined, hintText ? hintTextId : undefined, ariaDescribedBy]), {
tabIndex: !multiFile && files && files.length > 0 ? -1 : 0
}, passProps)), /*#__PURE__*/React.createElement(HtmlLabel, {
htmlFor: id,
className: fileInputClassNames.inputLabel
}, inputButtonText), /*#__PURE__*/React.createElement(HtmlDiv, {
className: fileInputClassNames.dragTextContainer
}, dragAreaText)), !multiFile && files && files.length === 1 && ( /*#__PURE__*/React.createElement(HtmlDiv, {
className: fileInputClassNames.singleFileContainer
}, /*#__PURE__*/React.createElement(FileItem, {
file: files[0],
filePreview: filePreview,
multiFile: multiFile,
fileItemRefs: fileItemRefs[0],
addedFileAriaText: addedFileAriaText,
removeFileText: removeFileText,
removeFile: removeFile,
smallScreen: smallScreen,
fileItemDetails: controlledValue && controlledValue[0]
}))))), /*#__PURE__*/React.createElement(StatusText, {
id: statusTextId,
className: classnames((_f = {}, _f[fileInputClassNames.statusTextHasContent] = !!statusText, _f)),
status: status,
ariaLiveMode: statusTextAriaLiveMode
}, statusText)), multiFile && files && files.length > 0 && ( /*#__PURE__*/React.createElement(HtmlDiv, {
className: fileInputClassNames.multiFileContainer
}, /*#__PURE__*/React.createElement(Label, {
mb: "xxs",
id: multiFileListHeadingId
}, "".concat(multiFileListHeadingText, " (").concat(files.length, ")")), files.length === fileItemRefs.length && ( /*#__PURE__*/React.createElement(HtmlDiv, {
role: "list"
}, Array.from(files).map(function (file, index) {
return /*#__PURE__*/React.createElement(FileItem, {
key: file.name,
file: file,
filePreview: filePreview,
multiFile: multiFile,
fileItemRefs: fileItemRefs[index],
addedFileAriaText: addedFileAriaText,
removeFileText: removeFileText,
removeFile: removeFile,
smallScreen: smallScreen,
fileItemDetails: controlledValue && controlledValue[index]
});
}))))));
};
var StyledFileInput = styled(function (_a) {
_a.theme;
var passProps = __rest(_a, ["theme"]);
return /*#__PURE__*/React.createElement(BaseFileInput, __assign({}, passProps));
}).withConfig({
componentId: "sc-1duqwnr-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = __rest(_a, ["theme", "globalMargins"]);
var _b = separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.fileInput, marginProps);
return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var FileInput = /*#__PURE__*/forwardRef(function (props, ref) {
var propId = props.id,
passProps = __rest(props, ["id"]);
return /*#__PURE__*/React.createElement(SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React.createElement(StyledFileInput, __assign({
theme: suomifiTheme,
id: id,
forwardedRef: ref,
globalMargins: margins
}, passProps));
});
});
});
});
FileInput.displayName = 'FileInput';
var templateObject_1;
export { FileInput };
//# sourceMappingURL=FileInput.js.map