优化FormBuilder
parent
5d6da5c7d3
commit
cf529ee0c9
|
|
@ -1,5 +1,6 @@
|
||||||
import { Button, Col, Form, message, Row, Space, Spin } from "antd";
|
import { Button, Col, Form, message, Row, Space, Spin } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
import { throttle } from "throttle-debounce";
|
||||||
import FormItemsRenderer from "./FormItemsRenderer";
|
import FormItemsRenderer from "./FormItemsRenderer";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -26,12 +27,12 @@ const FormBuilder = (props) => {
|
||||||
|
|
||||||
const [pageWidth, setPageWidth] = useState(window.innerWidth);
|
const [pageWidth, setPageWidth] = useState(window.innerWidth);
|
||||||
|
|
||||||
const getPageWidth = () => {
|
const getPageWidth = throttle(50, () => {
|
||||||
const pageDom = document.querySelector("#page");
|
const pageDom = document.querySelector("#page-layout");
|
||||||
if (!pageDom)
|
if (!pageDom)
|
||||||
return;
|
return;
|
||||||
setPageWidth(pageDom.offsetWidth);
|
setPageWidth(pageDom.offsetWidth);
|
||||||
};
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
|
|
@ -77,7 +78,7 @@ const FormBuilder = (props) => {
|
||||||
/>
|
/>
|
||||||
</Row>
|
</Row>
|
||||||
{showActionButtons && (
|
{showActionButtons && (
|
||||||
<>
|
<div style={{ position: "relative", zIndex: "9" }}>
|
||||||
<div style={{ height: "32px" }}></div>
|
<div style={{ height: "32px" }}></div>
|
||||||
<Row
|
<Row
|
||||||
style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0 -44px" }}
|
style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0 -44px" }}
|
||||||
|
|
@ -100,7 +101,7 @@ const FormBuilder = (props) => {
|
||||||
)}
|
)}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Form>
|
</Form>
|
||||||
</Spin>
|
</Spin>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue