@pisell/materials 1.0.651 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.651",
+  "version": "1.0.652",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",