@xfe-repo/web-components 1.8.6 → 1.8.8

package/dist/index.d.mts

@@ -13,7 +13,7 @@ import * as antd_es__util_type from 'antd/es/_util/type';
 import { ColumnProps } from 'antd/es/table';
 import { DragEndEvent } from '@dnd-kit/core';
 import * as _ant_design_icons_lib_components_IconFont from '@ant-design/icons/lib/components/IconFont';
-import { UploadFile, UploadListType } from 'antd/es/upload/interface';
+import { UploadFile, UploadListType, UploadProps } from 'antd/es/upload/interface';
 import { DrawerProps } from 'antd/lib/drawer';
 import { ModalProps } from 'antd/lib/modal';
 import dayjs, { Dayjs } from 'dayjs';
@@ -691,6 +691,15 @@ declare const ModalGroup: FunctionComponent<OSSImageGroupProps>;
 declare const PreviewGroup: typeof Image.PreviewGroup;
 interface OSSImageProps extends ImageProps {
     resizeWidth?: number;
+    resizeHeight?: number;
+    /** 缩放模式
+     * lfit（默认值）：等比缩放至指定宽高区域内最大图形。
+     * fill：等比缩放至覆盖指定宽高区域并居中裁剪。
+     * mfit：等比缩放至覆盖指定宽高区域。
+     * pad：等比缩放至指定宽高内最大图形并填充颜色至指定尺寸。
+     * fixed：固定宽高，强制缩放。
+     * https://help.aliyun.com/zh/oss/user-guide/resize-images-4#fb97a01efc5o6 */
+    resizeMode?: 'lfit' | 'mfit' | 'fill' | 'pad' | 'fixed';
     clearDefault?: boolean;
 }
 declare const OSSImage: MemoExoticComponent<FunctionComponent<OSSImageProps>> & {
@@ -790,6 +799,7 @@ type FileUploadProps = {
     remote?: boolean;
     pastable?: boolean;
     deleteConfirm?: boolean;
+    beforeUpload?: UploadProps['beforeUpload'];
 };
 declare const FileUpload: (props: FileUploadProps) => react_jsx_runtime.JSX.Element;
 
@@ -973,6 +983,7 @@ type EffectFileUploadProps = {
     remote?: boolean;
     pastable?: boolean;
     deleteConfirm?: boolean;
+    beforeUpload?: UploadProps['beforeUpload'];
     disabled?: boolean;
     needSave?: boolean;
     uploadOnAdd?: boolean;

package/dist/index.d.ts

@@ -13,7 +13,7 @@ import * as antd_es__util_type from 'antd/es/_util/type';
 import { ColumnProps } from 'antd/es/table';
 import { DragEndEvent } from '@dnd-kit/core';
 import * as _ant_design_icons_lib_components_IconFont from '@ant-design/icons/lib/components/IconFont';
-import { UploadFile, UploadListType } from 'antd/es/upload/interface';
+import { UploadFile, UploadListType, UploadProps } from 'antd/es/upload/interface';
 import { DrawerProps } from 'antd/lib/drawer';
 import { ModalProps } from 'antd/lib/modal';
 import dayjs, { Dayjs } from 'dayjs';
@@ -691,6 +691,15 @@ declare const ModalGroup: FunctionComponent<OSSImageGroupProps>;
 declare const PreviewGroup: typeof Image.PreviewGroup;
 interface OSSImageProps extends ImageProps {
     resizeWidth?: number;
+    resizeHeight?: number;
+    /** 缩放模式
+     * lfit（默认值）：等比缩放至指定宽高区域内最大图形。
+     * fill：等比缩放至覆盖指定宽高区域并居中裁剪。
+     * mfit：等比缩放至覆盖指定宽高区域。
+     * pad：等比缩放至指定宽高内最大图形并填充颜色至指定尺寸。
+     * fixed：固定宽高，强制缩放。
+     * https://help.aliyun.com/zh/oss/user-guide/resize-images-4#fb97a01efc5o6 */
+    resizeMode?: 'lfit' | 'mfit' | 'fill' | 'pad' | 'fixed';
     clearDefault?: boolean;
 }
 declare const OSSImage: MemoExoticComponent<FunctionComponent<OSSImageProps>> & {
@@ -790,6 +799,7 @@ type FileUploadProps = {
     remote?: boolean;
     pastable?: boolean;
     deleteConfirm?: boolean;
+    beforeUpload?: UploadProps['beforeUpload'];
 };
 declare const FileUpload: (props: FileUploadProps) => react_jsx_runtime.JSX.Element;
 
@@ -973,6 +983,7 @@ type EffectFileUploadProps = {
     remote?: boolean;
     pastable?: boolean;
     deleteConfirm?: boolean;
+    beforeUpload?: UploadProps['beforeUpload'];
     disabled?: boolean;
     needSave?: boolean;
     uploadOnAdd?: boolean;

package/dist/index.js

@@ -3072,9 +3072,11 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
 var PreviewGroup = import_antd16.Image.PreviewGroup;
 var fallback = "https://imgs.eshetang.com/product/default-product-1608019533274.png";
 var _OSSImage = (0, import_react24.memo)(function(props) {
-    var _props_src = props.src, src = _props_src === void 0 ? "" : _props_src, _props_resizeWidth = props.resizeWidth, resizeWidth = _props_resizeWidth === void 0 ? 750 : _props_resizeWidth, preview = props.preview, clearDefault = props.clearDefault, params = _object_without_properties(props, [
+    var _props_src = props.src, src = _props_src === void 0 ? "" : _props_src, tmp = props.resizeWidth, width = tmp === void 0 ? 750 : tmp, height = props.resizeHeight, mode = props.resizeMode, preview = props.preview, clearDefault = props.clearDefault, params = _object_without_properties(props, [
         "src",
         "resizeWidth",
+        "resizeHeight",
+        "resizeMode",
         "preview",
         "clearDefault"
     ]);
@@ -3095,7 +3097,9 @@ var _OSSImage = (0, import_react24.memo)(function(props) {
     };
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_antd16.Image, _object_spread_props(_object_spread({}, params), {
         src: (0, import_tools2.resizeAliYun)(src, {
-            width: resizeWidth
+            width: width,
+            height: height,
+            mode: mode
         }),
         preview: resizePreview(),
         fallback: clearDefault ? void 0 : fallback,
@@ -3415,16 +3419,20 @@ var UploadGroup = (0, import_react29.memo)(function(props) {
 // src/EffectFileUpload/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var _EffectFileUpload = (0, import_react30.memo)((0, import_react30.forwardRef)(function(props, ref) {
-    var value = props.value, defaultValue = props.defaultValue, files = props.files, needSave = props.needSave, extFormData = props.extFormData, max = props.max, accept = props.accept, disabled = props.disabled, className = props.className, name = props.name, remote = props.remote, pastable = props.pastable, deleteConfirm = props.deleteConfirm;
+    var value = props.value, defaultValue = props.defaultValue, files = props.files, needSave = props.needSave, extFormData = props.extFormData, disabled = props.disabled, name = props.name, pastable = props.pastable, restProps = _object_without_properties(props, [
+        "value",
+        "defaultValue",
+        "files",
+        "needSave",
+        "extFormData",
+        "disabled",
+        "name",
+        "pastable"
+    ]);
     var onChange = props.onChange, onFileChange = props.onFileChange, onUpload = props.onUpload, onUploadDone = props.onUploadDone, uploadOnAdd = props.uploadOnAdd;
-    var passProps = {
-        max: max,
-        accept: accept,
-        className: className,
-        remote: remote,
-        pastable: pastable,
-        deleteConfirm: deleteConfirm
-    };
+    var passProps = _object_spread({
+        pastable: pastable
+    }, restProps);
     var _ref = _sliced_to_array((0, import_react30.useState)(files || transformSimpleFile2UploadFile(value)), 2), uploadFiles = _ref[0], setUploadFiles = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react30.useState)(value || defaultValue || []), 2), simpleFiles = _ref1[0], setSimpleFiles = _ref1[1];
     var uploadTasksRef = (0, import_react30.useRef)([]);
@@ -3942,7 +3950,7 @@ var previewImage = function previewImage(file) {
 };
 var FileUpload = function FileUpload(props) {
     var _props_value = props.value, value = _props_value === void 0 ? [] : _props_value, defaultValue = props.defaultValue, onChange = props.onChange, disabled = props.disabled, classNames2 = props.classNames, children = props.children, accept = props.accept, _props_max = props.max, max = _props_max === void 0 ? 9 : _props_max, deleteConfirm = props.deleteConfirm;
-    var remote = props.remote, pastable = props.pastable, _props_multiple = props.multiple, multiple = _props_multiple === void 0 ? true : _props_multiple, _props_type = props.type, type = _props_type === void 0 ? "picture-card" : _props_type;
+    var remote = props.remote, pastable = props.pastable, _props_multiple = props.multiple, multiple = _props_multiple === void 0 ? true : _props_multiple, _props_type = props.type, type = _props_type === void 0 ? "picture-card" : _props_type, beforeUpload = props.beforeUpload;
     var _ref = _sliced_to_array((0, import_react34.useState)(-1), 2), previewImageIndex = _ref[0], setPreviewImageIndex = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react34.useState)(defaultValue || value || []), 2), fileList = _ref1[0], setFileList = _ref1[1];
     var _ref2 = _sliced_to_array((0, import_react34.useState)(), 2), bufferAddFile = _ref2[0], setBufferAddFile = _ref2[1];
@@ -4054,10 +4062,131 @@ var FileUpload = function FileUpload(props) {
             });
         })();
     }, []);
-    var handleBeforeUpload = (0, import_react34.useCallback)(function(_, files) {
-        void handleAdd(files);
+    var handleBeforeUpload = (0, import_react34.useCallback)(function(file, files) {
+        if (file !== files[0]) return false;
+        if (!beforeUpload) {
+            void handleAdd(files);
+            return false;
+        }
+        var processFiles = function processFiles() {
+            return _async_to_generator(function() {
+                var processedFiles, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, originFile, result, processedFile, error, err;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            processedFiles = [];
+                            _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                            _state.label = 1;
+                        case 1:
+                            _state.trys.push([
+                                1,
+                                8,
+                                9,
+                                10
+                            ]);
+                            _iterator = files[Symbol.iterator]();
+                            _state.label = 2;
+                        case 2:
+                            if (!!(_iteratorNormalCompletion = (_step = _iterator.next()).done)) return [
+                                3,
+                                7
+                            ];
+                            originFile = _step.value;
+                            _state.label = 3;
+                        case 3:
+                            _state.trys.push([
+                                3,
+                                5,
+                                ,
+                                6
+                            ]);
+                            return [
+                                4,
+                                beforeUpload(originFile, files)
+                            ];
+                        case 4:
+                            result = _state.sent();
+                            if (result === false || result === import_antd21.Upload.LIST_IGNORE) return [
+                                3,
+                                6
+                            ];
+                            if (_instanceof(result, Blob)) {
+                                processedFile = _instanceof(result, File) ? result : new File([
+                                    result
+                                ], originFile.name, {
+                                    type: result.type || originFile.type,
+                                    lastModified: originFile.lastModified
+                                });
+                                Object.assign(processedFile, {
+                                    uid: originFile.uid
+                                });
+                                processedFiles.push(processedFile);
+                            } else {
+                                processedFiles.push(originFile);
+                            }
+                            return [
+                                3,
+                                6
+                            ];
+                        case 5:
+                            error = _state.sent();
+                            console.error(error);
+                            return [
+                                3,
+                                6
+                            ];
+                        case 6:
+                            _iteratorNormalCompletion = true;
+                            return [
+                                3,
+                                2
+                            ];
+                        case 7:
+                            return [
+                                3,
+                                10
+                            ];
+                        case 8:
+                            err = _state.sent();
+                            _didIteratorError = true;
+                            _iteratorError = err;
+                            return [
+                                3,
+                                10
+                            ];
+                        case 9:
+                            try {
+                                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                    _iterator.return();
+                                }
+                            } finally{
+                                if (_didIteratorError) {
+                                    throw _iteratorError;
+                                }
+                            }
+                            return [
+                                7
+                            ];
+                        case 10:
+                            return [
+                                4,
+                                handleAdd(processedFiles)
+                            ];
+                        case 11:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        void processFiles();
         return false;
-    }, []);
+    }, [
+        beforeUpload,
+        handleAdd
+    ]);
     var handlePreview = function handlePreview(file) {
         return _async_to_generator(function() {
             var preview, isImageUrl, previewIndex;

package/dist/index.mjs

@@ -2790,9 +2790,11 @@ import { jsx as jsx20 } from "react/jsx-runtime";
 var PreviewGroup = Image2.PreviewGroup;
 var fallback = "https://imgs.eshetang.com/product/default-product-1608019533274.png";
 var _OSSImage = memo16(function(props) {
-    var _props_src = props.src, src = _props_src === void 0 ? "" : _props_src, _props_resizeWidth = props.resizeWidth, resizeWidth = _props_resizeWidth === void 0 ? 750 : _props_resizeWidth, preview = props.preview, clearDefault = props.clearDefault, params = _object_without_properties(props, [
+    var _props_src = props.src, src = _props_src === void 0 ? "" : _props_src, tmp = props.resizeWidth, width = tmp === void 0 ? 750 : tmp, height = props.resizeHeight, mode = props.resizeMode, preview = props.preview, clearDefault = props.clearDefault, params = _object_without_properties(props, [
         "src",
         "resizeWidth",
+        "resizeHeight",
+        "resizeMode",
         "preview",
         "clearDefault"
     ]);
@@ -2813,7 +2815,9 @@ var _OSSImage = memo16(function(props) {
     };
     return /* @__PURE__ */ jsx20(Image2, _object_spread_props(_object_spread({}, params), {
         src: resizeAliYun(src, {
-            width: resizeWidth
+            width: width,
+            height: height,
+            mode: mode
         }),
         preview: resizePreview(),
         fallback: clearDefault ? void 0 : fallback,
@@ -3133,16 +3137,20 @@ var UploadGroup = memo18(function(props) {
 // src/EffectFileUpload/index.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var _EffectFileUpload = memo19(forwardRef2(function(props, ref) {
-    var value = props.value, defaultValue = props.defaultValue, files = props.files, needSave = props.needSave, extFormData = props.extFormData, max = props.max, accept = props.accept, disabled = props.disabled, className = props.className, name = props.name, remote = props.remote, pastable = props.pastable, deleteConfirm = props.deleteConfirm;
+    var value = props.value, defaultValue = props.defaultValue, files = props.files, needSave = props.needSave, extFormData = props.extFormData, disabled = props.disabled, name = props.name, pastable = props.pastable, restProps = _object_without_properties(props, [
+        "value",
+        "defaultValue",
+        "files",
+        "needSave",
+        "extFormData",
+        "disabled",
+        "name",
+        "pastable"
+    ]);
     var onChange = props.onChange, onFileChange = props.onFileChange, onUpload = props.onUpload, onUploadDone = props.onUploadDone, uploadOnAdd = props.uploadOnAdd;
-    var passProps = {
-        max: max,
-        accept: accept,
-        className: className,
-        remote: remote,
-        pastable: pastable,
-        deleteConfirm: deleteConfirm
-    };
+    var passProps = _object_spread({
+        pastable: pastable
+    }, restProps);
     var _useState11 = _sliced_to_array(useState11(files || transformSimpleFile2UploadFile(value)), 2), uploadFiles = _useState11[0], setUploadFiles = _useState11[1];
     var _useState111 = _sliced_to_array(useState11(value || defaultValue || []), 2), simpleFiles = _useState111[0], setSimpleFiles = _useState111[1];
     var uploadTasksRef = useRef8([]);
@@ -3660,7 +3668,7 @@ var previewImage = function previewImage(file) {
 };
 var FileUpload = function FileUpload(props) {
     var _props_value = props.value, value = _props_value === void 0 ? [] : _props_value, defaultValue = props.defaultValue, onChange = props.onChange, disabled = props.disabled, classNames2 = props.classNames, children = props.children, accept = props.accept, _props_max = props.max, max = _props_max === void 0 ? 9 : _props_max, deleteConfirm = props.deleteConfirm;
-    var remote = props.remote, pastable = props.pastable, _props_multiple = props.multiple, multiple = _props_multiple === void 0 ? true : _props_multiple, _props_type = props.type, type = _props_type === void 0 ? "picture-card" : _props_type;
+    var remote = props.remote, pastable = props.pastable, _props_multiple = props.multiple, multiple = _props_multiple === void 0 ? true : _props_multiple, _props_type = props.type, type = _props_type === void 0 ? "picture-card" : _props_type, beforeUpload = props.beforeUpload;
     var _useState14 = _sliced_to_array(useState14(-1), 2), previewImageIndex = _useState14[0], setPreviewImageIndex = _useState14[1];
     var _useState141 = _sliced_to_array(useState14(defaultValue || value || []), 2), fileList = _useState141[0], setFileList = _useState141[1];
     var _useState142 = _sliced_to_array(useState14(), 2), bufferAddFile = _useState142[0], setBufferAddFile = _useState142[1];
@@ -3772,10 +3780,131 @@ var FileUpload = function FileUpload(props) {
             });
         })();
     }, []);
-    var handleBeforeUpload = useCallback14(function(_, files) {
-        void handleAdd(files);
+    var handleBeforeUpload = useCallback14(function(file, files) {
+        if (file !== files[0]) return false;
+        if (!beforeUpload) {
+            void handleAdd(files);
+            return false;
+        }
+        var processFiles = function processFiles() {
+            return _async_to_generator(function() {
+                var processedFiles, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, originFile, result, processedFile, error, err;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            processedFiles = [];
+                            _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                            _state.label = 1;
+                        case 1:
+                            _state.trys.push([
+                                1,
+                                8,
+                                9,
+                                10
+                            ]);
+                            _iterator = files[Symbol.iterator]();
+                            _state.label = 2;
+                        case 2:
+                            if (!!(_iteratorNormalCompletion = (_step = _iterator.next()).done)) return [
+                                3,
+                                7
+                            ];
+                            originFile = _step.value;
+                            _state.label = 3;
+                        case 3:
+                            _state.trys.push([
+                                3,
+                                5,
+                                ,
+                                6
+                            ]);
+                            return [
+                                4,
+                                beforeUpload(originFile, files)
+                            ];
+                        case 4:
+                            result = _state.sent();
+                            if (result === false || result === Upload.LIST_IGNORE) return [
+                                3,
+                                6
+                            ];
+                            if (_instanceof(result, Blob)) {
+                                processedFile = _instanceof(result, File) ? result : new File([
+                                    result
+                                ], originFile.name, {
+                                    type: result.type || originFile.type,
+                                    lastModified: originFile.lastModified
+                                });
+                                Object.assign(processedFile, {
+                                    uid: originFile.uid
+                                });
+                                processedFiles.push(processedFile);
+                            } else {
+                                processedFiles.push(originFile);
+                            }
+                            return [
+                                3,
+                                6
+                            ];
+                        case 5:
+                            error = _state.sent();
+                            console.error(error);
+                            return [
+                                3,
+                                6
+                            ];
+                        case 6:
+                            _iteratorNormalCompletion = true;
+                            return [
+                                3,
+                                2
+                            ];
+                        case 7:
+                            return [
+                                3,
+                                10
+                            ];
+                        case 8:
+                            err = _state.sent();
+                            _didIteratorError = true;
+                            _iteratorError = err;
+                            return [
+                                3,
+                                10
+                            ];
+                        case 9:
+                            try {
+                                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                    _iterator.return();
+                                }
+                            } finally{
+                                if (_didIteratorError) {
+                                    throw _iteratorError;
+                                }
+                            }
+                            return [
+                                7
+                            ];
+                        case 10:
+                            return [
+                                4,
+                                handleAdd(processedFiles)
+                            ];
+                        case 11:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        void processFiles();
         return false;
-    }, []);
+    }, [
+        beforeUpload,
+        handleAdd
+    ]);
     var handlePreview = function handlePreview(file) {
         return _async_to_generator(function() {
             var preview, isImageUrl, previewIndex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfe-repo/web-components",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": [
@@ -52,8 +52,8 @@
     "esbuild-plugin-less": "^1.3.9",
     "eslint": "8.57.1",
     "vitest": "^4.0.14",
-    "@xfe-repo/eslint-config": "1.6.0",
-    "@xfe-repo/typescript-config": "1.6.1"
+    "@xfe-repo/typescript-config": "1.6.2",
+    "@xfe-repo/eslint-config": "1.6.0"
   },
   "peerDependencies": {
     "@ant-design/icons": "^5.0.0",
@@ -64,9 +64,9 @@
     "react-use": "^17.5.1",
     "swr": "^2.2.5",
     "@xfe-repo/web-micro": "1.7.0",
-    "@xfe-repo/web-service": "1.6.0",
+    "@xfe-repo/web-utils": "1.6.2",
     "@xfe-repo/web-router": "1.6.1",
-    "@xfe-repo/web-utils": "1.6.1"
+    "@xfe-repo/web-service": "1.6.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"