@pisell/materials 1.0.650 → 1.0.652

package/es/components/dataSourceComponents/dataSourceForm/group/index.js

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import classNames from 'classnames';
+import { Col, Row } from 'antd';
+import { useSize } from "ahooks";
 import useFormSetting from "../provider/hooks/useFormSetting";
 import usePisellConfig from "../../../pisell-config-provider/hooks/usePisellConfig";
 import "./index.less";
-import { Col, Row } from 'antd';
 /**
  * @title: 表单分组组件
  * @description: 用于在表单中划分分组，支持标题、描述、背景色等配置
@@ -19,6 +20,8 @@ var FormGroup = function FormGroup(props) {
     showBackgroundColor = props.showBackgroundColor,
     propsBackgroundColor = props.backgroundColor,
     children = props.children;
+  var ref = useRef(null);
+  var size = useSize(ref);
   var _useFormSetting = useFormSetting(),
     formSettingGroupInfoPosition = _useFormSetting.groupInfoPosition;
   var _usePisellConfig = usePisellConfig(),
@@ -27,8 +30,11 @@ var FormGroup = function FormGroup(props) {
   // 根据平台判断分组信息位置 默认移动端为top
   var groupInfoPosition = useMemo(function () {
     var isMobile = platform === 'h5';
-    return isMobile ? 'top' : formSettingGroupInfoPosition;
-  }, [platform, formSettingGroupInfoPosition]);
+    if (isMobile || ((size === null || size === void 0 ? void 0 : size.width) || 0) < 500) {
+      return 'top';
+    }
+    return formSettingGroupInfoPosition;
+  }, [platform, formSettingGroupInfoPosition, size === null || size === void 0 ? void 0 : size.width]);
 
   // 根据配置决定背景色是否生效
   var backgroundColor = showBackgroundColor ? propsBackgroundColor : undefined;
@@ -51,7 +57,8 @@ var FormGroup = function FormGroup(props) {
     className: classNames('pisell-lowcode-data-source-form-group', {
       'pisell-lowcode-data-source-form-group-top': groupInfoPosition === 'top',
       'pisell-lowcode-data-source-form-group-side': groupInfoPosition === 'side'
-    })
+    }),
+    ref: ref
   }, /*#__PURE__*/React.createElement(Row, {
     style: {
       flex: 1

package/es/components/dataSourceComponents/dataSourceForm/utils.d.ts

@@ -35,7 +35,7 @@ export declare const isValidDomain: (value: string) => boolean;
  * @Date: 2024-11-23 17:14:25
  */
 export declare const withFormItem: <P extends object>(WrappedComponent: React.ComponentType<P>, overlayProps?: {
-    otherFormItemProps?: Record<string, any> | ((props: Record<string, any>) => Record<string, any>) | undefined;
+    otherFormItemProps?: Record<string, any> | ((props: Record<string, any>, others?: Record<string, any>) => Record<string, any>) | undefined;
     innerProps?: Record<string, any> | undefined;
 } | undefined) => React.FC<P & WithFormItemProps>;
 export declare const withDataSource: <P extends unknown>(WrappedComponent: React.ComponentType<P>) => (props: P & {

package/es/components/dataSourceComponents/dataSourceForm/utils.js

@@ -359,7 +359,9 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
     }, [hideLabel, propsLabelCol]);
     var otherFormItemProps = useMemo(function () {
       if (isFunction(overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.otherFormItemProps)) {
-        return overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.otherFormItemProps(otherProps);
+        return overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.otherFormItemProps(otherProps, {
+          rules: rules
+        });
       }
       return (overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.otherFormItemProps) || {};
     }, [overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.otherFormItemProps, otherProps]);

package/es/components/dataSourceComponents/fields/Upload/BaseUpload.js

@@ -35,7 +35,7 @@ import useEngineContext from "../../../../hooks/useEngineContext";
 import { getText } from "../../../../locales";
 import { DEFAULT_MAX_COUNT, SUPPORTED_LANGUAGES } from "./constants";
 import { useIsShop } from "../../hooks/usePlatform";
-import { getPointSuffix, checkFileCount, getFileType, getMediaMetadata, getFileMetadataParams, getDefaultFileList, createMultilingualData, createMultilingualFileList, isValueEqual, getBaseTime } from "./utils";
+import { getPointSuffix, getFileType, getMediaMetadata, getFileMetadataParams, getDefaultFileList, createMultilingualData, createMultilingualFileList, isValueEqual, getBaseTime } from "./utils";
 import { uploadFile } from "./shopUploadServe";
 
 // @ts-ignore
@@ -59,7 +59,6 @@ var BaseUpload = function BaseUpload(props) {
     propsMediaUploadUrl = props.mediaUploadUrl,
     propsGetHeaders = props.getHeaders,
     restProps = _objectWithoutProperties(props, _excluded);
-  console.log(typeMaxSizeMap, 'typeMaxSizeMap');
   var isShop = useIsShop();
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -314,7 +313,7 @@ var BaseUpload = function BaseUpload(props) {
   }, []);
   var beforeUpload = useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, newFileList) {
-      var currentFileCount, fileType, typeMaxSize, _maxSize, pointSuffix, _checkFileCount, success, message, metadata, cover, restMetadata;
+      var currentFileCount, fileType, typeMaxSize, _maxSize, pointSuffix, metadata, cover, restMetadata;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -342,42 +341,29 @@ var BaseUpload = function BaseUpload(props) {
             typeError.run(getText('pisell-upload-setting-type-error')(pointSuffix));
             return _context.abrupt("return", Upload.LIST_IGNORE);
           case 12:
-            _checkFileCount = checkFileCount({
-              minCount: minCount || 0,
-              maxCount: maxCount || DEFAULT_MAX_COUNT,
-              valueLength: fileList.length + currentFileCount,
-              multiple: !!multiple
-            }), success = _checkFileCount.success, message = _checkFileCount.message;
-            if (success) {
-              _context.next = 16;
-              break;
-            }
-            countError.run(message);
-            return _context.abrupt("return", Upload.LIST_IGNORE);
-          case 16:
-            _context.prev = 16;
-            _context.next = 19;
+            _context.prev = 12;
+            _context.next = 15;
             return getMediaMetadata(file);
-          case 19:
+          case 15:
             metadata = _context.sent;
             if (metadata) {
               cover = metadata.cover, restMetadata = _objectWithoutProperties(metadata, _excluded2);
               file.metadata = restMetadata;
               file.cover = cover;
             }
-            _context.next = 26;
+            _context.next = 22;
             break;
-          case 23:
-            _context.prev = 23;
-            _context.t0 = _context["catch"](16);
+          case 19:
+            _context.prev = 19;
+            _context.t0 = _context["catch"](12);
             console.error('获取媒体元数据失败:', _context.t0);
-          case 26:
+          case 22:
             return _context.abrupt("return", file);
-          case 27:
+          case 23:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[16, 23]]);
+      }, _callee, null, [[12, 19]]);
     }));
     return function (_x2, _x3) {
       return _ref3.apply(this, arguments);

package/es/components/dataSourceComponents/fields/Upload/ReadPretty.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Image } from 'antd';
+import { Image, Space } from 'antd';
 import { isArr, isString } from '@pisell/utils';
 import useTranslationOriginal from "../../../../hooks/useTranslationOriginal";
 
@@ -29,7 +29,7 @@ var UploadReadPretty = function UploadReadPretty(props) {
   if (!normalizedValue.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", null, normalizedValue.map(function (item, index) {
+  return /*#__PURE__*/React.createElement(Space, null, normalizedValue.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Image, {
       key: "".concat(String(item), "-").concat(index),
       className: "pisell-upload-read-pretty",

package/es/components/dataSourceComponents/fields/Upload/ReadPretty.less

@@ -5,6 +5,7 @@
   padding: 10px;
   border-radius: 10px;
   border: 1px solid var(--Gray-300, #d0d5dd);
+  object-fit: contain;
 }
 .pisell-upload-read-pretty-mask {
   border-radius: 10px;

package/es/components/dataSourceComponents/fields/Upload/index.js

@@ -1,4 +1,38 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { withFormItem } from "../../dataSourceForm/utils";
 import UploadWithMode from "./WithMode";
-var Upload = withFormItem(UploadWithMode);
+import { checkFileCount } from "./utils";
+import { DEFAULT_MAX_COUNT } from "./constants";
+var Upload = withFormItem(UploadWithMode, {
+  otherFormItemProps: function otherFormItemProps(props, others) {
+    var rule = {};
+    if (props.multiple) {
+      rule = {
+        validator: function validator(_, value) {
+          var _checkFileCount = checkFileCount({
+              minCount: props.minCount || 0,
+              maxCount: props.maxCount || DEFAULT_MAX_COUNT,
+              valueLength: value.length,
+              multiple: !!props.multiple
+            }),
+            success = _checkFileCount.success,
+            message = _checkFileCount.message;
+          if (!success) {
+            return Promise.reject(new Error(message));
+          } else {
+            return Promise.resolve();
+          }
+        }
+      };
+    }
+    return {
+      rules: [].concat(_toConsumableArray((others === null || others === void 0 ? void 0 : others.rules) || []), [rule])
+    };
+  }
+});
 export default Upload;

package/es/components/dataSourceComponents/fields/Upload/type.d.ts

@@ -10,6 +10,7 @@ export interface UploadFile extends AntdUploadFile {
 }
 export interface UploadProps {
     renderMode?: string;
+    fieldKey: string;
     maxSize?: number;
     minCount?: number;
     maxCount?: number;

package/lib/components/dataSourceComponents/dataSourceForm/group/index.js

@@ -34,10 +34,11 @@ __export(group_exports, {
 module.exports = __toCommonJS(group_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_ahooks = require("ahooks");
 var import_useFormSetting = __toESM(require("../provider/hooks/useFormSetting"));
 var import_usePisellConfig = __toESM(require("../../../pisell-config-provider/hooks/usePisellConfig"));
 var import_index = require("./index.less");
-var import_antd = require("antd");
 var FormGroup = (props) => {
   const {
     title,
@@ -48,12 +49,17 @@ var FormGroup = (props) => {
     backgroundColor: propsBackgroundColor,
     children
   } = props;
+  const ref = (0, import_react.useRef)(null);
+  const size = (0, import_ahooks.useSize)(ref);
   const { groupInfoPosition: formSettingGroupInfoPosition } = (0, import_useFormSetting.default)();
   const { platform } = (0, import_usePisellConfig.default)();
   const groupInfoPosition = (0, import_react.useMemo)(() => {
     const isMobile = platform === "h5";
-    return isMobile ? "top" : formSettingGroupInfoPosition;
-  }, [platform, formSettingGroupInfoPosition]);
+    if (isMobile || ((size == null ? void 0 : size.width) || 0) < 500) {
+      return "top";
+    }
+    return formSettingGroupInfoPosition;
+  }, [platform, formSettingGroupInfoPosition, size == null ? void 0 : size.width]);
   const backgroundColor = showBackgroundColor ? propsBackgroundColor : void 0;
   const wrapperStyle = (0, import_react.useMemo)(() => {
     return {
@@ -72,7 +78,8 @@ var FormGroup = (props) => {
       className: (0, import_classnames.default)("pisell-lowcode-data-source-form-group", {
         "pisell-lowcode-data-source-form-group-top": groupInfoPosition === "top",
         "pisell-lowcode-data-source-form-group-side": groupInfoPosition === "side"
-      })
+      }),
+      ref
     },
     /* @__PURE__ */ import_react.default.createElement(import_antd.Row, { style: { flex: 1 }, gutter: 16 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: groupInfoPosition === "top" ? 24 : 6 }, (propsShowTitle && title || propsShowDescription && description) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-info" }, propsShowTitle && title && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-title" }, title), propsShowDescription && description && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-description" }, description))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: groupInfoPosition === "top" ? 24 : 18 }, /* @__PURE__ */ import_react.default.createElement(
       "div",

package/lib/components/dataSourceComponents/dataSourceForm/utils.d.ts

@@ -35,7 +35,7 @@ export declare const isValidDomain: (value: string) => boolean;
  * @Date: 2024-11-23 17:14:25
  */
 export declare const withFormItem: <P extends object>(WrappedComponent: React.ComponentType<P>, overlayProps?: {
-    otherFormItemProps?: Record<string, any> | ((props: Record<string, any>) => Record<string, any>) | undefined;
+    otherFormItemProps?: Record<string, any> | ((props: Record<string, any>, others?: Record<string, any>) => Record<string, any>) | undefined;
     innerProps?: Record<string, any> | undefined;
 } | undefined) => React.FC<P & WithFormItemProps>;
 export declare const withDataSource: <P extends unknown>(WrappedComponent: React.ComponentType<P>) => (props: P & {

package/lib/components/dataSourceComponents/dataSourceForm/utils.js

@@ -420,7 +420,9 @@ var withFormItem = (WrappedComponent, overlayProps) => {
     }, [hideLabel, propsLabelCol]);
     const otherFormItemProps = (0, import_react.useMemo)(() => {
       if ((0, import_utils.isFunction)(overlayProps == null ? void 0 : overlayProps.otherFormItemProps)) {
-        return overlayProps == null ? void 0 : overlayProps.otherFormItemProps(otherProps);
+        return overlayProps == null ? void 0 : overlayProps.otherFormItemProps(otherProps, {
+          rules
+        });
       }
       return (overlayProps == null ? void 0 : overlayProps.otherFormItemProps) || {};
     }, [overlayProps == null ? void 0 : overlayProps.otherFormItemProps, otherProps]);

package/lib/components/dataSourceComponents/fields/Upload/BaseUpload.js

@@ -69,7 +69,6 @@ var BaseUpload = (props) => {
     getHeaders: propsGetHeaders,
     ...restProps
   } = props;
-  console.log(typeMaxSizeMap, "typeMaxSizeMap");
   const isShop = (0, import_usePlatform.useIsShop)();
   const [fileList, setFileList] = (0, import_react.useState)([]);
   const [previewImage, setPreviewImage] = (0, import_react.useState)("");
@@ -342,16 +341,6 @@ var BaseUpload = (props) => {
         typeError.run((0, import_locales.getText)("pisell-upload-setting-type-error")(pointSuffix));
         return import_antd.Upload.LIST_IGNORE;
       }
-      const { success, message } = (0, import_utils2.checkFileCount)({
-        minCount: minCount || 0,
-        maxCount: maxCount || import_constants.DEFAULT_MAX_COUNT,
-        valueLength: fileList.length + currentFileCount,
-        multiple: !!multiple
-      });
-      if (!success) {
-        countError.run(message);
-        return import_antd.Upload.LIST_IGNORE;
-      }
       try {
         const metadata = await (0, import_utils2.getMediaMetadata)(file);
         if (metadata) {

package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.js

@@ -59,7 +59,7 @@ var UploadReadPretty = (props) => {
   if (!normalizedValue.length) {
     return null;
   }
-  return /* @__PURE__ */ import_react.default.createElement("div", null, normalizedValue.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, normalizedValue.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
     import_antd.Image,
     {
       key: `${String(item)}-${index}`,

package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.less

@@ -5,6 +5,7 @@
   padding: 10px;
   border-radius: 10px;
   border: 1px solid var(--Gray-300, #d0d5dd);
+  object-fit: contain;
 }
 .pisell-upload-read-pretty-mask {
   border-radius: 10px;

package/lib/components/dataSourceComponents/fields/Upload/index.js

@@ -34,5 +34,29 @@ __export(Upload_exports, {
 module.exports = __toCommonJS(Upload_exports);
 var import_utils = require("../../dataSourceForm/utils");
 var import_WithMode = __toESM(require("./WithMode"));
-var Upload = (0, import_utils.withFormItem)(import_WithMode.default);
+var import_utils2 = require("./utils");
+var import_constants = require("./constants");
+var Upload = (0, import_utils.withFormItem)(import_WithMode.default, {
+  otherFormItemProps: (props, others) => {
+    let rule = {};
+    if (props.multiple) {
+      rule = {
+        validator(_, value) {
+          const { success, message } = (0, import_utils2.checkFileCount)({
+            minCount: props.minCount || 0,
+            maxCount: props.maxCount || import_constants.DEFAULT_MAX_COUNT,
+            valueLength: value.length,
+            multiple: !!props.multiple
+          });
+          if (!success) {
+            return Promise.reject(new Error(message));
+          } else {
+            return Promise.resolve();
+          }
+        }
+      };
+    }
+    return { rules: [...(others == null ? void 0 : others.rules) || [], rule] };
+  }
+});
 var Upload_default = Upload;

package/lib/components/dataSourceComponents/fields/Upload/type.d.ts

@@ -10,6 +10,7 @@ export interface UploadFile extends AntdUploadFile {
 }
 export interface UploadProps {
     renderMode?: string;
+    fieldKey: string;
     maxSize?: number;
     minCount?: number;
     maxCount?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.650",
+  "version": "1.0.652",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -72,8 +72,8 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.10",
     "styled-components": "^6.0.0-rc.3",
-    "@pisell/icon": "0.0.10",
     "@pisell/date-picker": "1.0.115",
+    "@pisell/icon": "0.0.10",
     "@pisell/utils": "1.0.43"
   },
   "peerDependencies": {