sailboat-design
Version:
A simple sailboat simulator
34 lines (33 loc) • 2.23 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Icon from '../Icon';
import ProcessLine from './processLine';
function FileItem(props) {
var file = props.file, theme = props.theme, onRemove = props.onRemove, onPreview = props.onPreview;
var handleRemove = function () {
if (onRemove)
onRemove(file);
};
var handlePreview = function () {
if (onPreview)
onPreview(file);
};
return (_jsxs("li", __assign({ className: "sailboat-file-item", onClick: handlePreview }, { children: [_jsxs("div", __assign({ className: "file-name file-name-".concat(file.status) }, { children: [_jsx(Icon, { icon: "file-alt", theme: file.status === 'error' ? 'danger' : 'secondary' }), _jsx("span", { children: file.name })] })), _jsxs("div", __assign({ className: "file-status" }, { children: [file.status === 'uploading' && (_jsx(Icon, { icon: "spinner", spin: true, theme: theme })), file.status === 'success' && (_jsx(Icon, { icon: "check-circle", theme: "success" })), file.status === 'error' && _jsx(Icon, { icon: "times-circle", theme: "danger" })] })), _jsx("span", __assign({ className: "file-actions", onClick: handleRemove }, { children: _jsx(Icon, { icon: "xmark" }) }))] })));
}
export function UploadFileList(props) {
var fileList = props.fileList, onRemove = props.onRemove, onPreview = props.onPreview, theme = props.theme;
return (_jsx("ul", __assign({ className: "sailboat-file-list" }, { children: fileList.map(function (file) {
return (_jsxs("div", { children: [_jsx(FileItem, { file: file, onRemove: onRemove, onPreview: onPreview, theme: theme }), file.status === 'uploading' && (_jsx(ProcessLine, { percent: file.percent, theme: theme }))] }, file.uid));
}) })));
}
export default UploadFileList;