aling
Version:
奇怪的组件库
73 lines (72 loc) • 4.42 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;
};
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Upload } from "antd";
import { Box } from "@mui/system";
import { AddOutline } from "antd-mobile-icons";
import PreviewWrapper from "./components/PreviewWrapper";
import FilePreview from "./components/FilePreview";
import FileViewer from "./components/FileViewer";
const WxUploader = React.forwardRef((_a, ref) => {
var _b, _c;
var { onChange, sx, beformOnChange, filePreview, value, children, uploadIcon, maxCount } = _a, otr = __rest(_a, ["onChange", "sx", "beformOnChange", "filePreview", "value", "children", "uploadIcon", "maxCount"]);
const [fileList, setFileList] = useState([]);
const [filesInfo, setFilesInfo] = useState();
const UploadButton = useMemo(() => React.createElement("button", { type: "button" }, uploadIcon || React.createElement(AddOutline, null)), [uploadIcon]);
const [viewOpen, setViewOpen] = useState(undefined);
const onRemove = useCallback((key) => {
var _a, _b;
const newList = fileList.filter((file, index) => key !== index);
const newInfo = filesInfo
? Object.assign(Object.assign({}, filesInfo), { file: (_a = filesInfo.fileList) === null || _a === void 0 ? void 0 : _a[key], fileList: (_b = filesInfo === null || filesInfo === void 0 ? void 0 : filesInfo.fileList) === null || _b === void 0 ? void 0 : _b.filter((_file, index) => key !== index) }) : filesInfo;
setFileList(newList);
setFilesInfo(newInfo);
onChange && onChange(newList, newInfo);
}, [setFileList, setFilesInfo, fileList, filesInfo]);
//当filesInfo变化时触发onChange并更新fileList
//useEffect(() => {}, [filesInfo, setFileList, beformOnChange]);
useEffect(() => {
if (value !== undefined) {
setFilesInfo({ fileList: value, file: value[0] });
setFileList(value);
}
}, [value]);
console.log(fileList);
return (React.createElement(Box, { sx: Object.assign({ display: "flex", justifyContent: "flex-start", flexWrap: "wrap" }, sx) },
(fileList === null || fileList === void 0 ? void 0 : fileList.length)
? fileList.map((file, index) => (React.createElement(PreviewWrapper, { onViewFile: () => {
setViewOpen(index);
}, key: index, maskStatus: (file instanceof Object && file.status) || "done", onRemove: () => onRemove(index) },
React.createElement(FilePreview, { filePreview: filePreview, fileInfo: file }))))
: null,
React.createElement(Upload, Object.assign({ fileList: fileList, showUploadList: false, onChange: (info) => {
setFilesInfo(info);
setFileList((info === null || info === void 0 ? void 0 : info.fileList) || []);
onChange && onChange((beformOnChange && beformOnChange(info.fileList, filesInfo)) || info.fileList, filesInfo);
}, maxCount: maxCount }, otr),
React.createElement(Box, { sx: {
button: {
border: 0,
background: "none",
backgroundColor: "#f5f5f5",
width: 80,
borderRadius: 1,
fontSize: 32,
height: 80,
color: "#999999",
},
} }, maxCount !== undefined && ((_c = (_b = filesInfo === null || filesInfo === void 0 ? void 0 : filesInfo.fileList) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) >= maxCount ? undefined : children == undefined ? UploadButton : children)),
React.createElement(FileViewer, { onClose: () => {
setViewOpen(undefined);
}, destroyOnClose: true, defaultIndex: viewOpen, visible: viewOpen !== undefined, fileList: fileList })));
});
export default WxUploader;