tdesign-react
Version:
TDesign Component for React
299 lines (295 loc) • 12.3 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import React, { forwardRef } from 'react';
import { UploadIcon } from 'tdesign-icons-react';
import classNames from 'classnames';
import NormalFile from './themes/NormalFile.js';
import DraggerFile from './themes/DraggerFile.js';
import ImageCard from './themes/ImageCard.js';
import ImageFlowList from './themes/MultipleFlowList.js';
import useUpload from './hooks/useUpload.js';
import { Button } from '../button/index.js';
import { uploadDefaultProps } from './defaultProps.js';
import CustomFile from './themes/CustomFile.js';
import parseTNode from '../_util/parseTNode.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-87d110df.js';
import '../_chunks/dep-026a4c6b.js';
import '../_chunks/dep-f83e4452.js';
import '../_chunks/dep-b908e1fe.js';
import '../loading/index.js';
import '../loading/Loading.js';
import '../_chunks/dep-48805ab8.js';
import '../_chunks/dep-3a09424a.js';
import 'lodash-es';
import '../hooks/useConfig.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-f97636ce.js';
import '../_chunks/dep-9dbbf468.js';
import 'dayjs';
import '../common/Portal.js';
import 'react-dom';
import '../hooks/useLayoutEffect.js';
import '../loading/gradient.js';
import '../_chunks/dep-c48e2ca1.js';
import '../_chunks/dep-6af6bc60.js';
import '../hooks/useDomRefCallback.js';
import '../loading/defaultProps.js';
import '../loading/plugin.js';
import '../_util/react-render.js';
import '../_chunks/dep-52ff3837.js';
import '../common/PluginContainer.js';
import '../config-provider/ConfigProvider.js';
import '../link/index.js';
import '../link/Link.js';
import '../_chunks/dep-6b660ef0.js';
import '../link/defaultProps.js';
import '../hooks/useCommonClassName.js';
import './hooks/useDrag.js';
import '../image-viewer/index.js';
import '../image-viewer/ImageViewer.js';
import '../_chunks/dep-6a010af7.js';
import '../_chunks/dep-76b39920.js';
import '../hooks/useImagePreviewUrl.js';
import '../image/index.js';
import '../image/Image.js';
import '../_chunks/dep-4450afc0.js';
import '../locale/LocalReceiver.js';
import '../image/defaultProps.js';
import '../space/index.js';
import '../space/Space.js';
import 'react-is';
import '../space/defaultProps.js';
import '../tooltip/index.js';
import '../tooltip/Tooltip.js';
import '../popup/index.js';
import '../popup/Popup.js';
import 'react-transition-group';
import '../_util/ref.js';
import '../_util/isFragment.js';
import '../hooks/useAnimation.js';
import '../hooks/useAttach.js';
import '../hooks/useControlled.js';
import '../_util/noop.js';
import '../hooks/useMutationObserver.js';
import '../hooks/useLatest.js';
import '../hooks/usePopper.js';
import '@popperjs/core';
import 'react-fast-compare';
import '../hooks/useWindowSize.js';
import '../popup/defaultProps.js';
import '../popup/hooks/useTrigger.js';
import '../_util/composeRefs.js';
import '../_util/listener.js';
import '../popup/utils/transition.js';
import '../popup/PopupPlugin.js';
import '../tooltip/defaultProps.js';
import '../tooltip/TooltipLite.js';
import '../hooks/useSwitch.js';
import '../hooks/usePersistFn.js';
import '../dialog/index.js';
import '../dialog/Dialog.js';
import '../hooks/useDeepEffect.js';
import '../hooks/useSetState.js';
import '../dialog/defaultProps.js';
import '../dialog/DialogCard.js';
import '../button/Button.js';
import '../hooks/useRipple.js';
import '../button/defaultProps.js';
import '../dialog/hooks/useDialogDrag.js';
import '../hooks/useMouseEvent.js';
import '../dialog/hooks/useDialogEsc.js';
import '../dialog/hooks/useDialogPosition.js';
import '../dialog/hooks/useLockStyle.js';
import '../_chunks/dep-51092aec.js';
import '../dialog/utils.js';
import '../dialog/plugin.js';
import '../image-viewer/hooks/useIconMap.js';
import '../image-viewer/hooks/useIndex.js';
import '../image-viewer/hooks/useMirror.js';
import '../image-viewer/hooks/usePosition.js';
import '../image-viewer/hooks/useRotate.js';
import '../image-viewer/hooks/useScale.js';
import '../image-viewer/utils.js';
import '../image-viewer/defaultProps.js';
import '../image-viewer/hooks/useImageScale.js';
import '../image-viewer/hooks/useList.js';
import '../image-viewer/hooks/useViewerScale.js';
import '../_chunks/dep-91b20286.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function TdUpload(originalProps, ref) {
var props = useDefaultProps(originalProps, uploadDefaultProps);
var theme = props.theme,
imageProps = props.imageProps;
var _useUpload = useUpload(props),
locale = _useUpload.locale,
classPrefix = _useUpload.classPrefix,
triggerUploadText = _useUpload.triggerUploadText,
toUploadFiles = _useUpload.toUploadFiles,
displayFiles = _useUpload.displayFiles,
uploadValue = _useUpload.uploadValue,
sizeOverLimitMessage = _useUpload.sizeOverLimitMessage,
uploading = _useUpload.uploading,
tipsClasses = _useUpload.tipsClasses,
errorClasses = _useUpload.errorClasses,
placeholderClass = _useUpload.placeholderClass,
inputRef = _useUpload.inputRef,
disabled = _useUpload.disabled,
onRemove = _useUpload.onRemove,
uploadFiles = _useUpload.uploadFiles,
onNormalFileChange = _useUpload.onNormalFileChange,
onDragFileChange = _useUpload.onDragFileChange,
onPasteFileChange = _useUpload.onPasteFileChange,
triggerUpload = _useUpload.triggerUpload,
cancelUpload = _useUpload.cancelUpload,
uploadFilePercent = _useUpload.uploadFilePercent;
React.useImperativeHandle(ref, function () {
return {
upload: inputRef.current,
uploading: uploading,
uploadFilePercent: uploadFilePercent,
triggerUpload: triggerUpload,
uploadFiles: uploadFiles,
cancelUpload: cancelUpload
};
});
var _useGlobalIcon = useGlobalIcon({
UploadIcon: UploadIcon
}),
UploadIcon$1 = _useGlobalIcon.UploadIcon;
var renderTrigger = function renderTrigger() {
var getDefaultTrigger = function getDefaultTrigger() {
if (theme === "file-input") {
return /* @__PURE__ */React.createElement(Button, _objectSpread({
disabled: disabled,
variant: "outline"
}, props.triggerButtonProps), triggerUploadText);
}
return /* @__PURE__ */React.createElement(Button, _objectSpread({
disabled: disabled,
variant: "outline",
icon: /* @__PURE__ */React.createElement(UploadIcon$1, null)
}, props.triggerButtonProps), triggerUploadText);
};
return parseTNode(props.trigger, {
dragActive: false,
files: uploadValue
}) || props.children || getDefaultTrigger();
};
var triggerElement = renderTrigger();
var commonDisplayFileProps = {
accept: props.accept,
files: uploadValue,
toUploadFiles: toUploadFiles,
displayFiles: displayFiles,
theme: theme,
abridgeName: props.abridgeName,
placeholder: props.placeholder,
disabled: props.disabled,
tips: props.tips,
sizeOverLimitMessage: sizeOverLimitMessage,
uploading: uploading,
classPrefix: classPrefix,
tipsClasses: tipsClasses,
errorClasses: errorClasses,
placeholderClass: placeholderClass,
locale: locale,
autoUpload: props.autoUpload,
showUploadProgress: props.showUploadProgress,
fileListDisplay: props.fileListDisplay,
imageViewerProps: props.imageViewerProps,
onRemove: onRemove
};
var dragProps = {
onDragFileChange: onDragFileChange,
onDragenter: props.onDragenter,
onDragleave: props.onDragleave,
onDrop: props.onDrop
};
var getNormalFileNode = function getNormalFileNode() {
return /* @__PURE__ */React.createElement(NormalFile, _objectSpread(_objectSpread({}, commonDisplayFileProps), {}, {
multiple: props.multiple
}), /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-upload__trigger"),
onClick: triggerUpload
}, triggerElement));
};
var getSingleFileDraggerUploadNode = function getSingleFileDraggerUploadNode() {
return /* @__PURE__ */React.createElement(DraggerFile, _objectSpread(_objectSpread({}, commonDisplayFileProps), {}, {
dragEvents: dragProps,
trigger: props.trigger,
cancelUpload: cancelUpload,
triggerUpload: triggerUpload,
uploadFiles: uploadFiles
}));
};
var getImageCardUploadNode = function getImageCardUploadNode() {
return /* @__PURE__ */React.createElement(ImageCard, _objectSpread(_objectSpread({}, commonDisplayFileProps), {}, {
multiple: props.multiple,
max: props.max,
showUploadProgress: props.showUploadProgress,
triggerUpload: triggerUpload,
uploadFiles: uploadFiles,
cancelUpload: cancelUpload,
onPreview: props.onPreview,
showImageFileName: props.showImageFileName,
imageProps: imageProps
}));
};
var getFlowListNode = function getFlowListNode() {
return /* @__PURE__ */React.createElement(ImageFlowList, _objectSpread(_objectSpread({}, commonDisplayFileProps), {}, {
isBatchUpload: props.isBatchUpload,
draggable: props.draggable,
dragEvents: dragProps,
uploadFiles: uploadFiles,
cancelUpload: cancelUpload,
onPreview: props.onPreview,
showThumbnail: props.showThumbnail,
showImageFileName: props.showImageFileName,
uploadButton: props.uploadButton,
cancelUploadButton: props.cancelUploadButton
}), /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-upload__trigger"),
onClick: triggerUpload
}, triggerElement));
};
var getCustomFile = function getCustomFile() {
return /* @__PURE__ */React.createElement(CustomFile, _objectSpread(_objectSpread({}, commonDisplayFileProps), {}, {
draggable: props.draggable,
dragContent: props.dragContent,
dragEvents: dragProps,
triggerUpload: triggerUpload,
childrenNode: props.children,
trigger: props.trigger
}), triggerElement);
};
var uploadClasses = [props.className, "".concat(classPrefix, "-upload"), _defineProperty({}, "".concat(classPrefix, "-upload--theme-").concat(props.theme), props.theme === "file-input")];
return /* @__PURE__ */React.createElement("div", {
className: classNames(uploadClasses),
style: props.style,
onPaste: props.uploadPastedFiles ? onPasteFileChange : void 0
}, /* @__PURE__ */React.createElement("input", {
ref: inputRef,
type: "file",
disabled: disabled,
onChange: onNormalFileChange,
multiple: props.multiple,
accept: props.accept,
hidden: true
}), ["file", "file-input"].includes(theme) && !props.draggable && getNormalFileNode(), ["file", "image"].includes(theme) && props.draggable && getSingleFileDraggerUploadNode(), theme === "image" && !props.draggable && getImageCardUploadNode(), ["image-flow", "file-flow"].includes(theme) && getFlowListNode(), theme === "custom" && getCustomFile(), props.tips && /* @__PURE__ */React.createElement("small", {
className: classNames([tipsClasses, _defineProperty({}, "".concat(classPrefix, "-upload__tips-").concat(props.status), props.status)])
}, props.tips), sizeOverLimitMessage && /* @__PURE__ */React.createElement("small", {
className: classNames(errorClasses)
}, sizeOverLimitMessage));
}
var Upload = /*#__PURE__*/forwardRef(TdUpload);
Upload.displayName = "Upload";
export { Upload as default };
//# sourceMappingURL=upload.js.map