ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
395 lines • 17.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["class", "style"];
import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import VcUpload from '../vc-upload';
import UploadList from './UploadList';
import { uploadProps } from './interface';
import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import { computed, defineComponent, onMounted, ref, toRef } from 'vue';
import { flattenChildren, initDefaultProps } from '../_util/props-util';
import useMergedState from '../_util/hooks/useMergedState';
import devWarning from '../vc-util/devWarning';
import useConfigInject from '../_util/hooks/useConfigInject';
import classNames from '../_util/classNames';
import { useInjectFormItemContext } from '../form';
export var LIST_IGNORE = "__LIST_IGNORE_".concat(Date.now(), "__");
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'AUpload',
inheritAttrs: false,
props: initDefaultProps(uploadProps(), {
type: 'select',
multiple: false,
action: '',
data: {},
accept: '',
showUploadList: true,
listType: 'text',
disabled: false,
supportServerRender: true
}),
setup: function setup(props, _ref) {
var slots = _ref.slots,
attrs = _ref.attrs,
expose = _ref.expose;
var formItemContext = useInjectFormItemContext();
var _useMergedState = useMergedState(props.defaultFileList || [], {
value: toRef(props, 'fileList'),
postState: function postState(list) {
var timestamp = Date.now();
return (list !== null && list !== void 0 ? list : []).map(function (file, index) {
if (!file.uid && !Object.isFrozen(file)) {
file.uid = "__AUTO__".concat(timestamp, "_").concat(index, "__");
}
return file;
});
}
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
mergedFileList = _useMergedState2[0],
setMergedFileList = _useMergedState2[1];
var dragState = ref('drop');
var upload = ref();
onMounted(function () {
devWarning(props.fileList !== undefined || attrs.value === undefined, 'Upload', '`value` is not a valid prop, do you mean `fileList`?');
devWarning(props.transformFile === undefined, 'Upload', '`transformFile` is deprecated. Please use `beforeUpload` directly.');
devWarning(props.remove === undefined, 'Upload', '`remove` props is deprecated. Please use `remove` event.');
});
var onInternalChange = function onInternalChange(file, changedFileList, event) {
var _props$onUpdateFileL, _props$onChange;
var cloneList = _toConsumableArray(changedFileList);
// Cut to match count
if (props.maxCount === 1) {
cloneList = cloneList.slice(-1);
} else if (props.maxCount) {
cloneList = cloneList.slice(0, props.maxCount);
}
setMergedFileList(cloneList);
var changeInfo = {
file: file,
fileList: cloneList
};
if (event) {
changeInfo.event = event;
}
(_props$onUpdateFileL = props['onUpdate:fileList']) === null || _props$onUpdateFileL === void 0 ? void 0 : _props$onUpdateFileL.call(props, changeInfo.fileList);
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, changeInfo);
formItemContext.onFieldChange();
};
var mergedBeforeUpload = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, fileListArgs) {
var beforeUpload, transformFile, parsedFile, result;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
beforeUpload = props.beforeUpload, transformFile = props.transformFile;
parsedFile = file;
if (!beforeUpload) {
_context.next = 13;
break;
}
_context.next = 5;
return beforeUpload(file, fileListArgs);
case 5:
result = _context.sent;
if (!(result === false)) {
_context.next = 8;
break;
}
return _context.abrupt("return", false);
case 8:
// Hack for LIST_IGNORE, we add additional info to remove from the list
delete file[LIST_IGNORE];
if (!(result === LIST_IGNORE)) {
_context.next = 12;
break;
}
Object.defineProperty(file, LIST_IGNORE, {
value: true,
configurable: true
});
return _context.abrupt("return", false);
case 12:
if (_typeof(result) === 'object' && result) {
parsedFile = result;
}
case 13:
if (!transformFile) {
_context.next = 17;
break;
}
_context.next = 16;
return transformFile(parsedFile);
case 16:
parsedFile = _context.sent;
case 17:
return _context.abrupt("return", parsedFile);
case 18:
case "end":
return _context.stop();
}
}, _callee);
}));
return function mergedBeforeUpload(_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
var onBatchStart = function onBatchStart(batchFileInfoList) {
// Skip file which marked as `LIST_IGNORE`, these file will not add to file list
var filteredFileInfoList = batchFileInfoList.filter(function (info) {
return !info.file[LIST_IGNORE];
});
// Nothing to do since no file need upload
if (!filteredFileInfoList.length) {
return;
}
var objectFileList = filteredFileInfoList.map(function (info) {
return file2Obj(info.file);
});
// Concat new files with prev files
var newFileList = _toConsumableArray(mergedFileList.value);
objectFileList.forEach(function (fileObj) {
// Replace file if exist
newFileList = updateFileList(fileObj, newFileList);
});
objectFileList.forEach(function (fileObj, index) {
// Repeat trigger `onChange` event for compatible
var triggerFileObj = fileObj;
if (!filteredFileInfoList[index].parsedFile) {
// `beforeUpload` return false
var originFileObj = fileObj.originFileObj;
var clone;
try {
clone = new File([originFileObj], originFileObj.name, {
type: originFileObj.type
});
} catch (e) {
clone = new Blob([originFileObj], {
type: originFileObj.type
});
clone.name = originFileObj.name;
clone.lastModifiedDate = new Date();
clone.lastModified = new Date().getTime();
}
clone.uid = fileObj.uid;
triggerFileObj = clone;
} else {
// Inject `uploading` status
fileObj.status = 'uploading';
}
onInternalChange(triggerFileObj, newFileList);
});
};
var onSuccess = function onSuccess(response, file, xhr) {
try {
if (typeof response === 'string') {
response = JSON.parse(response);
}
} catch (e) {
/* do nothing */
}
// removed
if (!getFileItem(file, mergedFileList.value)) {
return;
}
var targetItem = file2Obj(file);
targetItem.status = 'done';
targetItem.percent = 100;
targetItem.response = response;
targetItem.xhr = xhr;
var nextFileList = updateFileList(targetItem, mergedFileList.value);
onInternalChange(targetItem, nextFileList);
};
var onProgress = function onProgress(e, file) {
// removed
if (!getFileItem(file, mergedFileList.value)) {
return;
}
var targetItem = file2Obj(file);
targetItem.status = 'uploading';
targetItem.percent = e.percent;
var nextFileList = updateFileList(targetItem, mergedFileList.value);
onInternalChange(targetItem, nextFileList, e);
};
var onError = function onError(error, response, file) {
// removed
if (!getFileItem(file, mergedFileList.value)) {
return;
}
var targetItem = file2Obj(file);
targetItem.error = error;
targetItem.response = response;
targetItem.status = 'error';
var nextFileList = updateFileList(targetItem, mergedFileList.value);
onInternalChange(targetItem, nextFileList);
};
var handleRemove = function handleRemove(file) {
var currentFile;
var mergedRemove = props.onRemove || props.remove;
Promise.resolve(typeof mergedRemove === 'function' ? mergedRemove(file) : mergedRemove).then(function (ret) {
// Prevent removing file
if (ret === false) {
return;
}
var removedFileList = removeFileItem(file, mergedFileList.value);
if (removedFileList) {
var _mergedFileList$value, _upload$value;
currentFile = _objectSpread(_objectSpread({}, file), {}, {
status: 'removed'
});
(_mergedFileList$value = mergedFileList.value) === null || _mergedFileList$value === void 0 ? void 0 : _mergedFileList$value.forEach(function (item) {
var matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
item.status = 'removed';
}
});
(_upload$value = upload.value) === null || _upload$value === void 0 ? void 0 : _upload$value.abort(currentFile);
onInternalChange(currentFile, removedFileList);
}
});
};
var onFileDrop = function onFileDrop(e) {
dragState.value = e.type;
if (e.type === 'drop') {
var _props$onDrop;
(_props$onDrop = props.onDrop) === null || _props$onDrop === void 0 ? void 0 : _props$onDrop.call(props, e);
}
};
expose({
onBatchStart: onBatchStart,
onSuccess: onSuccess,
onProgress: onProgress,
onError: onError,
fileList: mergedFileList,
upload: upload
});
var _useConfigInject = useConfigInject('upload', props),
prefixCls = _useConfigInject.prefixCls,
direction = _useConfigInject.direction;
var _useLocaleReceiver = useLocaleReceiver('Upload', defaultLocale.Upload, computed(function () {
return props.locale;
})),
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
locale = _useLocaleReceiver2[0];
var renderUploadList = function renderUploadList(button, buttonVisible) {
var removeIcon = props.removeIcon,
previewIcon = props.previewIcon,
downloadIcon = props.downloadIcon,
previewFile = props.previewFile,
onPreview = props.onPreview,
onDownload = props.onDownload,
disabled = props.disabled,
isImageUrl = props.isImageUrl,
progress = props.progress,
itemRender = props.itemRender,
iconRender = props.iconRender,
showUploadList = props.showUploadList;
var _ref3 = typeof showUploadList === 'boolean' ? {} : showUploadList,
showDownloadIcon = _ref3.showDownloadIcon,
showPreviewIcon = _ref3.showPreviewIcon,
showRemoveIcon = _ref3.showRemoveIcon;
return showUploadList ? _createVNode(UploadList, {
"listType": props.listType,
"items": mergedFileList.value,
"previewFile": previewFile,
"onPreview": onPreview,
"onDownload": onDownload,
"onRemove": handleRemove,
"showRemoveIcon": !disabled && showRemoveIcon,
"showPreviewIcon": showPreviewIcon,
"showDownloadIcon": showDownloadIcon,
"removeIcon": removeIcon,
"previewIcon": previewIcon,
"downloadIcon": downloadIcon,
"iconRender": iconRender,
"locale": locale.value,
"isImageUrl": isImageUrl,
"progress": progress,
"itemRender": itemRender,
"appendActionVisible": buttonVisible,
"appendAction": button
}, _objectSpread({}, slots)) : button === null || button === void 0 ? void 0 : button();
};
return function () {
var _props$id, _classNames2, _slots$default2;
var listType = props.listType,
disabled = props.disabled,
type = props.type;
var className = attrs.class,
styleName = attrs.style,
transAttrs = _objectWithoutProperties(attrs, _excluded);
var rcUploadProps = _objectSpread(_objectSpread(_objectSpread({
onBatchStart: onBatchStart,
onError: onError,
onProgress: onProgress,
onSuccess: onSuccess
}, transAttrs), props), {}, {
id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : formItemContext.id.value,
prefixCls: prefixCls.value,
beforeUpload: mergedBeforeUpload,
onChange: undefined
});
delete rcUploadProps.remove;
// Remove id to avoid open by label when trigger is hidden
// !children: https://github.com/ant-design/ant-design/issues/14298
// disabled: https://github.com/ant-design/ant-design/issues/16478
// https://github.com/ant-design/ant-design/issues/24197
if (!slots.default || disabled) {
delete rcUploadProps.id;
}
if (type === 'drag') {
var _classNames, _slots$default;
var dragCls = classNames(prefixCls.value, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-drag"), true), _defineProperty(_classNames, "".concat(prefixCls.value, "-drag-uploading"), mergedFileList.value.some(function (file) {
return file.status === 'uploading';
})), _defineProperty(_classNames, "".concat(prefixCls.value, "-drag-hover"), dragState.value === 'dragover'), _defineProperty(_classNames, "".concat(prefixCls.value, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames), attrs.class);
return _createVNode("span", null, [_createVNode("div", {
"class": dragCls,
"onDrop": onFileDrop,
"onDragover": onFileDrop,
"onDragleave": onFileDrop,
"style": attrs.style
}, [_createVNode(VcUpload, _objectSpread(_objectSpread({}, rcUploadProps), {}, {
"ref": upload,
"class": "".concat(prefixCls.value, "-btn")
}), _objectSpread({
default: function _default() {
return [_createVNode("div", {
"class": "".concat(prefixCls.value, "-drag-container")
}, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)])];
}
}, slots))]), renderUploadList()]);
}
var uploadButtonCls = classNames(prefixCls.value, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls.value, "-select"), true), _defineProperty(_classNames2, "".concat(prefixCls.value, "-select-").concat(listType), true), _defineProperty(_classNames2, "".concat(prefixCls.value, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames2));
var children = flattenChildren((_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots));
var renderUploadButton = function renderUploadButton(uploadButtonStyle) {
return _createVNode("div", {
"class": uploadButtonCls,
"style": uploadButtonStyle
}, [_createVNode(VcUpload, _objectSpread(_objectSpread({}, rcUploadProps), {}, {
"ref": upload
}), slots)]);
};
if (listType === 'picture-card') {
return _createVNode("span", {
"class": classNames("".concat(prefixCls.value, "-picture-card-wrapper"), attrs.class)
}, [renderUploadList(renderUploadButton, !!(children && children.length))]);
}
return _createVNode("span", {
"class": attrs.class
}, [renderUploadButton(children && children.length ? undefined : {
display: 'none'
}), renderUploadList()]);
};
}
});