suomifi-ui-components
Version:
Suomi.fi UI component library
448 lines (442 loc) • 21.4 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var AutoId = require('../../utils/AutoId/AutoId.js');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../../theme/SpacingProvider/SpacingProvider.js');
var spacing = require('../../theme/utils/spacing.js');
var common = require('../../../utils/common/common.js');
var FileInput_baseStyles = require('./FileInput.baseStyles.js');
var Label = require('../Label/Label.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
var aria = require('../../../utils/aria/aria.js');
require('../../../reset/HtmlA/HtmlA.js');
require('../../../reset/HtmlButton/HtmlButton.js');
var HtmlFieldSet = require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
var HtmlInput = require('../../../reset/HtmlInput/HtmlInput.js');
var HtmlLabel = require('../../../reset/HtmlLabel/HtmlLabel.js');
var HtmlLegend = require('../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../reset/HtmlLi/HtmlLi.js');
require('../../../reset/HtmlNav/HtmlNav.js');
require('../../../reset/HtmlOl/HtmlOl.js');
require('../../../reset/HtmlSpan/HtmlSpan.js');
require('../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../reset/HtmlUl/HtmlUl.js');
require('../../../reset/HtmlTable/HtmlTable.js');
require('../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../reset/HtmlTable/HtmlTableCell.js');
var HintText = require('../HintText/HintText.js');
var StatusText = require('../StatusText/StatusText.js');
var FileItem = require('./FileItem.js');
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 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 = tslib.__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 = spacing.separateMarginProps(rest),
passProps = _l[1];
var dragAreaRef = React.useRef(null);
var inputRef = React.useRef(null);
var onChangeRef = React.useRef(propOnChange);
React.useEffect(function () {
onChangeRef.current = propOnChange;
}, [propOnChange]);
var buildFileItemRefs = function buildFileItemRefs(fileList) {
var newFileItemRefs = [];
for (var index = 0; index < fileList.length; index += 1) {
var file = fileList[index];
var fnRef = filePreview ? /*#__PURE__*/React.createRef() : /*#__PURE__*/React.createRef();
var removeButtonRef = /*#__PURE__*/React.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 = React.useState(controlledValue ? buildFileListFromControlledValueObjects(controlledValue) : null),
files = _m[0],
setFiles = _m[1];
var _o = React.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 (onChangeRef.current) {
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);
});
onChangeRef.current(filteredFileList_1.files || new FileList());
}
};
React.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);
};
}, []);
React.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 = tslib.__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 = tslib.__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 (onChangeRef.current) {
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);
});
onChangeRef.current(filteredFileList_2.files);
}
}
};
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(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__default.default.createElement(HtmlFieldSet.HtmlFieldSet, null, /*#__PURE__*/React__default.default.createElement(HtmlLegend.HtmlLegend, null, /*#__PURE__*/React__default.default.createElement(Label.Label, {
id: labelId,
labelMode: labelMode,
optionalText: optionalText,
className: classnames__default.default((_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__default.default.createElement(HintText.HintText, {
id: hintTextId
}, hintText), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(fileInputClassNames.inputOuterWrapper)
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
className: classnames__default.default(fileInputClassNames.dragArea, (_c = {}, _c[fileInputClassNames.dragAreaHasFile] = !multiFile && files && files.length > 0, _c)),
forwardedRef: dragAreaRef
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(fileInputClassNames.inputWrapper, (_d = {}, _d[fileInputClassNames.inputWrapperHidden] = !multiFile && files && files.length > 0, _d))
}, /*#__PURE__*/React__default.default.createElement(HtmlInput.HtmlInput, tslib.__assign({
id: id,
className: classnames__default.default(fileInputClassNames.inputElement, (_e = {}, _e[fileInputClassNames.hiddenUnderFile] = !multiFile && files && files.length > 0, _e)),
type: "file",
multiple: multiFile,
forwardedRef: common.forkRefs(inputRef, definedRef),
onChange: handleOnChange,
onBlur: function onBlur() {
if (propOnBlur) {
propOnBlur();
}
},
"aria-invalid": status === 'error'
}, aria.getConditionalAriaProp('aria-describedby', [statusText ? statusTextId : undefined, hintText ? hintTextId : undefined, ariaDescribedBy]), {
tabIndex: !multiFile && files && files.length > 0 ? -1 : 0
}, passProps)), /*#__PURE__*/React__default.default.createElement(HtmlLabel.HtmlLabel, {
htmlFor: id,
className: fileInputClassNames.inputLabel
}, inputButtonText), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileInputClassNames.dragTextContainer
}, dragAreaText)), !multiFile && files && files.length === 1 && ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileInputClassNames.singleFileContainer
}, /*#__PURE__*/React__default.default.createElement(FileItem.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__default.default.createElement(StatusText.StatusText, {
id: statusTextId,
className: classnames__default.default((_f = {}, _f[fileInputClassNames.statusTextHasContent] = !!statusText, _f)),
status: status,
ariaLiveMode: statusTextAriaLiveMode
}, statusText)), multiFile && files && files.length > 0 && ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: fileInputClassNames.multiFileContainer
}, /*#__PURE__*/React__default.default.createElement(Label.Label, {
mb: "xxs",
id: multiFileListHeadingId
}, "".concat(multiFileListHeadingText, " (").concat(files.length, ")")), files.length === fileItemRefs.length && ( /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
role: "list"
}, Array.from(files).map(function (file, index) {
return /*#__PURE__*/React__default.default.createElement(FileItem.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.styled(function (_a) {
_a.theme;
var passProps = tslib.__rest(_a, ["theme"]);
return /*#__PURE__*/React__default.default.createElement(BaseFileInput, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1duqwnr-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = tslib.__rest(_a, ["theme", "globalMargins"]);
var _b = spacing.separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.fileInput, marginProps);
return FileInput_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var FileInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
var propId = props.id,
passProps = tslib.__rest(props, ["id"]);
return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React__default.default.createElement(StyledFileInput, tslib.__assign({
theme: suomifiTheme,
id: id,
forwardedRef: ref,
globalMargins: margins
}, passProps));
});
});
});
});
FileInput.displayName = 'FileInput';
var templateObject_1;
exports.FileInput = FileInput;
//# sourceMappingURL=FileInput.js.map