aws-northstar
Version:
NorthStar Design System
77 lines (73 loc) • 4.76 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
/** *******************************************************************************************************************
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. *
******************************************************************************************************************** */
import React, { useCallback, useMemo, useRef, useState } from 'react';
import CloudUpload from '@material-ui/icons/CloudUpload';
import Button from '../Button';
import FileTokenLabel from './components/FileTokenLabel';
import FormField from '../FormField';
import TokenGroup from '../TokenGroup';
/**
* File upload is a form element that enables users to select one or multiple local files to upload.
* The file(s) can then be uploaded upon form submission or processed further in the browser.
*/
const FileUpload = (_a) => {
var { description, label, controlId, name, hintText, errorText, multiple = false, accept, buttonText, files = [], onChange } = _a, props = __rest(_a, ["description", "label", "controlId", "name", "hintText", "errorText", "multiple", "accept", "buttonText", "files", "onChange"]);
const [selectedFiles, setSelectedFiles] = useState(files);
const inputElement = useRef(null);
const displayedButtonText = useMemo(() => {
return buttonText || `Choose ${multiple ? 'files' : 'file'}`;
}, [buttonText, multiple]);
const testId = props['data-testid'] || 'file-upload';
const handleFileSelectionDismiss = useCallback((dismissedItem) => {
const newFiles = selectedFiles.filter((file) => file.name !== dismissedItem.value);
setSelectedFiles(newFiles);
onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
}, [selectedFiles, setSelectedFiles, onChange]);
const footer = useMemo(() => {
if (!selectedFiles || selectedFiles.length === 0) {
return null;
}
if (!multiple) {
return (React.createElement(FileTokenLabel, { name: selectedFiles[0].name, size: selectedFiles[0].size, lastModified: selectedFiles[0].lastModified }));
}
const items = selectedFiles.map((file) => ({
label: React.createElement(FileTokenLabel, { name: file.name, size: file.size, lastModified: file.lastModified }),
value: file.name,
}));
return React.createElement(TokenGroup, { items: items, onDismiss: handleFileSelectionDismiss, inline: false });
}, [selectedFiles, multiple, handleFileSelectionDismiss]);
const handleFileSelectionButtonClick = useCallback(() => {
var _a;
(_a = inputElement.current) === null || _a === void 0 ? void 0 : _a.click();
}, []);
const handleFileSelectionChange = useCallback((event) => {
const newFiles = multiple ? [...selectedFiles, ...event.target.files] : [...event.target.files];
setSelectedFiles(newFiles);
onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
}, [selectedFiles, setSelectedFiles, onChange, multiple]);
return (React.createElement(FormField, { controlId: controlId, description: description, label: label, footer: footer, hintText: hintText, errorText: errorText, "data-testid": testId },
React.createElement("input", { ref: inputElement, id: controlId, name: name, style: { display: 'none' }, type: "file", multiple: multiple, accept: accept, onChange: handleFileSelectionChange, "data-testid": `${testId}-input` }),
React.createElement(Button, { "data-testid": `${testId}-button`, icon: CloudUpload, onClick: handleFileSelectionButtonClick }, displayedButtonText)));
};
export default FileUpload;