@flatbiz/antd
Version:
298 lines (293 loc) • 11.3 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { a as _slicedToArray, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { useState, useMemo } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Button, Tabs, Spin, message } from 'antd';
import { d as dialogPreviewImage } from './preview-image-BGEPfC0y.js';
import { U as UploadWrapper } from './upload-wrapper-DmZglNR4.js';
import _DeleteOutlined from '@ant-design/icons/es/icons/DeleteOutlined.js';
import _EyeOutlined from '@ant-design/icons/es/icons/EyeOutlined.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg', 'heic', 'heif'];
function isImageFile(name, url) {
var str = name || url || '';
var ext = str.slice(str.lastIndexOf('.') + 1).toLowerCase();
return IMAGE_EXTENSIONS.includes(ext);
}
var FileListView = function FileListView(props) {
var _props$uploadList;
var uploadList = props.uploadList,
onPreview = props.onPreview,
onRemove = props.onRemove;
if (!((_props$uploadList = props.uploadList) !== null && _props$uploadList !== void 0 && _props$uploadList.length)) {
return null;
}
return /*#__PURE__*/jsx("ul", {
className: "upload-multi-type-file-list",
children: uploadList.map(function (item, index) {
var isImage = isImageFile(item.name, item.url);
return /*#__PURE__*/jsxs("li", {
className: "upload-multi-type-file-item",
children: [/*#__PURE__*/jsx("span", {
className: "upload-multi-type-file-name",
title: item.name,
children: isImage ? /*#__PURE__*/jsx("span", {
className: "upload-multi-type-file-name-image",
onClick: function onClick() {
return onPreview(item.url);
},
children: item.name
}) : /*#__PURE__*/jsx("span", {
children: item.name
})
}), /*#__PURE__*/jsxs("span", {
className: "upload-multi-type-file-actions",
children: [isImage ? /*#__PURE__*/jsx(Button, {
type: "text",
size: "small",
icon: /*#__PURE__*/jsx(_EyeOutlined, {}),
className: "upload-multi-type-action-btn",
onClick: function onClick() {
return onPreview(item.url);
},
"aria-label": "\u9884\u89C8"
}) : null, /*#__PURE__*/jsx(Button, {
type: "text",
size: "small",
hidden: props.disabled,
icon: /*#__PURE__*/jsx(_DeleteOutlined, {}),
className: "upload-multi-type-action-btn upload-multi-type-action-btn-danger",
onClick: function onClick() {
return onRemove(index);
},
"aria-label": "\u5220\u9664"
})]
})]
}, "".concat(item.url, "-").concat(index));
})
});
};
function getImageFileFromPaste(e) {
var _e$clipboardData;
var items = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.items;
if (!items) return null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
return items[i].getAsFile();
}
}
return null;
}
/**
* 上传组件，同时支持多种上传方式，支持【点击&拖拽上传】、【粘贴上传】
* ```
* @example
* const onUploadFile = useMemoizedFn(async (file: File) => {
* const formData = new FormData();
* formData.append('file', file);
* const respData = await serviceHandle.upload<{
* url: string;
* name?: string;
* }>('https://pubtest.hnapay.com/api/file/upload', formData);
* return respData;
* });
*
* <UploadMultiType onUploadFile={onUploadFile} maxCount={1} />
* ```
*/
var UploadMultiType = function UploadMultiType(props) {
var value = props.value,
onChange = props.onChange;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
showPasteSuccess = _useState2[0],
setShowPasteSuccess = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
loading = _useState4[0],
setLoading = _useState4[1];
var maxCount = props.maxCount;
var _useState5 = useState(function () {
return Array.isArray(value) && value.length > 0 ? value.map(function (item) {
var _item$name, _item$url, _item$url$split, _item$url2;
return {
name: (_item$name = item === null || item === void 0 ? void 0 : item.name) !== null && _item$name !== void 0 ? _item$name : item === null || item === void 0 || (_item$url = item.url) === null || _item$url === void 0 || (_item$url$split = _item$url.split) === null || _item$url$split === void 0 ? void 0 : _item$url$split.call(_item$url, '/').pop(),
url: (_item$url2 = item === null || item === void 0 ? void 0 : item.url) !== null && _item$url2 !== void 0 ? _item$url2 : ''
};
}) : [];
}),
_useState6 = _slicedToArray(_useState5, 2),
uploadList = _useState6[0],
setUploadList = _useState6[1];
var onChangeHandler = useMemoizedFn(function (data) {
return new Promise(function ($return, $error) {
var $Try_1_Finally = function ($Try_1_Exit) {
return function ($Try_1_Value) {
try {
setLoading(false);
return $Try_1_Exit && $Try_1_Exit.call(this, $Try_1_Value);
} catch ($boundEx) {
return $error($boundEx);
}
}.bind(this);
}.bind(this);
var files, _props$onUploadFile, respData, fileName, newItem;
files = data;
if (!(files !== null && files !== void 0 && files.length)) return $return();
setLoading(true);
var $Try_1_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_1_Catch = function (error) {
try {
void message.error((error === null || error === void 0 ? void 0 : error['message']) || '上传操作失败');
throw error;
} catch ($boundEx) {
return $Try_1_Finally($error)($boundEx);
}
};
try {
return Promise.resolve((_props$onUploadFile = props.onUploadFile) === null || _props$onUploadFile === void 0 ? void 0 : _props$onUploadFile.call(props, files[0])).then(function ($await_2) {
try {
respData = $await_2;
fileName = (respData === null || respData === void 0 ? void 0 : respData.name) || (respData === null || respData === void 0 ? void 0 : respData.url.split('/').pop());
newItem = {
name: fileName,
url: respData === null || respData === void 0 ? void 0 : respData.url
};
if (maxCount && maxCount == 1) {
setUploadList([newItem]);
onChange === null || onChange === void 0 || onChange([newItem]);
} else {
setUploadList(function (prev) {
var prevListNew = prev;
if (maxCount && prevListNew.length >= maxCount) {
prevListNew = prevListNew.slice(0, maxCount - 1);
}
var mergedList = [].concat(_toConsumableArray(prevListNew), [newItem]);
onChange === null || onChange === void 0 || onChange(mergedList);
return mergedList;
});
}
return $Try_1_Finally($Try_1_Post)();
} catch ($boundEx) {
return $Try_1_Catch($boundEx);
}
}, $Try_1_Catch);
} catch (error) {
$Try_1_Catch(error);
}
});
});
var onPaste = useMemoizedFn(function (e) {
return new Promise(function ($return, $error) {
var file;
e.preventDefault();
file = getImageFileFromPaste(e);
if (!file) return $return();
return Promise.resolve(onChangeHandler === null || onChangeHandler === void 0 ? void 0 : onChangeHandler([file])).then(function ($await_3) {
try {
setShowPasteSuccess(true);
setTimeout(function () {
setShowPasteSuccess(false);
}, 1500);
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
});
});
var onPreview = useMemoizedFn(function (url) {
dialogPreviewImage.show({
imageUrl: url
});
});
var onRemove = useMemoizedFn(function (index) {
setUploadList(function (prev) {
var next = prev.filter(function (_, i) {
return i !== index;
});
onChange === null || onChange === void 0 || onChange(next);
return next;
});
});
var accept = useMemo(function () {
if (props.accept) {
return props.accept;
}
return props.onlyUploadImage ? 'image/*' : undefined;
}, [props.accept, props.onlyUploadImage]);
if (props.disabled) {
if (!(uploadList !== null && uploadList !== void 0 && uploadList.length)) {
return null;
}
return /*#__PURE__*/jsx("div", {
className: "v-upload-multi-type-disabled",
children: /*#__PURE__*/jsx(FileListView, {
uploadList: uploadList,
onPreview: onPreview,
onRemove: onRemove,
disabled: props.disabled
})
});
}
return /*#__PURE__*/jsx("div", {
className: 'v-upload-multi-type',
children: /*#__PURE__*/jsxs("div", {
className: "v-upload-multi-type-inner",
children: [/*#__PURE__*/jsx(Tabs, {
destroyOnHidden: false,
items: [{
key: 'dragger',
label: '点击&拖拽上传',
forceRender: true,
children: /*#__PURE__*/jsx(Spin, {
spinning: loading,
children: /*#__PURE__*/jsx(UploadWrapper, {
name: "file",
accept: accept,
maxCount: maxCount,
autoSubmit: false,
onChange: onChangeHandler,
isDragger: true,
showUploadList: false
})
})
}, {
key: 'paste',
label: '粘贴上传',
forceRender: true,
children: /*#__PURE__*/jsx(Spin, {
spinning: loading,
children: /*#__PURE__*/jsx("div", {
className: "upload-image-paste-zone",
onPaste: onPaste,
tabIndex: 0,
role: "textbox",
"aria-label": "\u7C98\u8D34\u56FE\u7247\u533A\u57DF",
children: showPasteSuccess ? /*#__PURE__*/jsx("span", {
className: "upload-image-paste-tip success",
children: "\u5DF2\u7C98\u8D34\u4E0A\u4F20\u56FE\u7247\u6210\u529F"
}) : /*#__PURE__*/jsx("span", {
className: "upload-image-paste-tip",
children: "\u5728\u6B64\u533A\u57DF\u70B9\u51FB\u540E\u4F7F\u7528 Ctrl+V / Cmd+V \u7C98\u8D34\u56FE\u7247"
})
})
})
}]
}), uploadList.length > 0 ? /*#__PURE__*/jsx(FileListView, {
uploadList: uploadList,
onPreview: onPreview,
onRemove: onRemove,
disabled: props.disabled
}) : null]
})
});
};
export { UploadMultiType as U };
//# sourceMappingURL=content-CXmBn9B0.js.map