sailboat-design
Version:
A simple sailboat simulator
166 lines (165 loc) • 6.66 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);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { Button } from '../Button/button';
import axios from 'axios';
import UploadFileList from './fileList';
import Dragger from './dragger';
var GeneratUploadFile = /** @class */ (function () {
function GeneratUploadFile(file) {
this.uid = new Date().getTime() + 'upload-file';
this.size = file.size;
this.name = file.name;
this.status = 'ready';
this.percent = 0;
this.raw = file;
this.response = '';
this.error = '';
}
return GeneratUploadFile;
}());
export var Upload = function (props) {
var action = props.action, beforeUpload = props.beforeUpload, onProgress = props.onProgress, onSuccess = props.onSuccess, onError = props.onError, onChange = props.onChange, onRemove = props.onRemove, onPreview = props.onPreview, headers = props.headers, name = props.name, data = props.data, withCredentials = props.withCredentials, accept = props.accept, multiple = props.multiple, children = props.children, dragger = props.dragger, theme = props.theme;
var fileInput = useRef(null);
var _a = useState([]), fileList = _a[0], setFileList = _a[1];
var handleClick = function () {
if (fileInput.current) {
fileInput.current.click();
}
};
var handleRemove = function (file) {
setFileList(function (prevList) {
return prevList.filter(function (item) { return item.uid !== file.uid; });
});
if (onRemove) {
onRemove(file);
}
};
var handlePreview = function (file) {
if (onPreview) {
onPreview(file);
}
};
var handleFileChange = function (e) {
var files = e.target.files;
if (!files) {
return;
}
uploadFiles(files);
if (fileInput.current) {
fileInput.current.value = '';
}
};
var uploadFiles = function (files) {
var postFiles = Array.from(files);
postFiles.forEach(function (file) {
if (!beforeUpload) {
postFile(file);
}
else {
var result = beforeUpload(file);
if (result && result instanceof Promise) {
result.then(function (processedFile) {
postFile(processedFile);
});
}
else if (result !== false) {
postFile(file);
}
}
});
};
var postFile = function (file) {
var uploadFile = new GeneratUploadFile(file);
setFileList(function (prevList) {
return __spreadArray(__spreadArray([], prevList, true), [uploadFile], false);
});
var formData = new FormData();
formData.append(name || file.name, file);
if (data) {
Object.keys(data).forEach(function (key) {
formData.append(key, data[key]);
});
}
axios
.post(action, formData, {
headers: __assign({ 'Content-Type': 'multipart/form-data' }, headers),
withCredentials: withCredentials,
onUploadProgress: function (e) {
var percentage = Math.round((e.loaded * 100) / e.total) || 0;
updateFileList(uploadFile, {
percent: percentage,
status: 'uploading'
});
if (onProgress) {
onProgress(percentage, uploadFile);
}
}
})
.then(function (resp) {
uploadFile.status = 'success';
uploadFile.response = resp.data;
updateFileList(uploadFile, uploadFile);
if (onSuccess) {
onSuccess(resp.data, uploadFile);
}
})
.catch(function (error) {
uploadFile.status = 'error';
uploadFile.error = error;
updateFileList(uploadFile, uploadFile);
if (onError) {
onError(error, uploadFile);
}
})
.finally(function () {
if (onChange) {
onChange(uploadFile);
}
});
};
var updateFileList = function (updateFile, updateObj // 更新任意几项
) {
setFileList(function (prevList) {
return prevList.map(function (file) {
if (file.uid === updateFile.uid) {
return __assign(__assign({}, file), updateObj);
}
else {
return file;
}
});
});
};
var onFileDrop = function (files) {
if (files.length) {
uploadFiles(files);
}
};
return (_jsxs("div", __assign({ className: "sailboat-upload-component" }, { children: [_jsx("div", __assign({ className: "sailboat-upload-area", onClick: handleClick }, { children: dragger ? (_jsx(Dragger, __assign({ theme: theme, onFile: onFileDrop }, { children: children }))) : (_jsx(_Fragment, { children: children ? (children) : (_jsx(Button, __assign({ btnType: "primary" }, { children: "Upload File" }))) })) })), _jsx("input", { style: { display: 'none' }, onChange: handleFileChange, type: "file", className: "sailboat-file-input", ref: fileInput, accept: accept, multiple: multiple }), _jsx(UploadFileList, { fileList: fileList, onRemove: handleRemove, onPreview: handlePreview, theme: theme })] })));
};
Upload.defaultProps = {
name: 'file',
btnText: 'Upload File',
theme: 'primary'
};
export default Upload;