-
- ))}
-
+
+ ))}
+
- props.onEvent("click")}
- />
-
-
+ props.onEvent("click")}
+ />
+
+
);
};
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 26805d9986..73e33ae2d6 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -5,7 +5,7 @@ import _, { findIndex } from "lodash";
import { ConstructorToView, deferAction } from "lowcoder-core";
import { DragIcon, HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { ResizePayload, useResizeDetector } from "react-resize-detector";
import styled from "styled-components";
import { checkIsMobile } from "util/commonUtils";
import { useDelayState } from "util/hooks";
@@ -372,41 +372,41 @@ export function ListView(props: Props) {
children.onEvent.getView()('sortChange');
};
+ useResizeDetector({
+ targetRef: ref,
+ onResize: ({width, height}: ResizePayload) => {
+ if (height) setListHeight(height);
+ },
+ observerOptions: { box: "border-box" },
+ });
+
// log.debug("renders: ", renders);
+
return (
-
+
+ {Boolean(props.iconScoutAsset.value) && 
}
+
+ )}
+
+
+
+
- isDefault(props.type)
- ? props.onEvent("click")
- : submitForm(editorState, props.form)
+ : {
+ aspectRatio: props.aspectRatio,
+ borderRadius: props.style.radius,
}
+ }
+ disabled={
+ props.disabled ||
+ (!isDefault(props.type) &&
+ getForm(editorState, props.form)?.disableSubmit())
+ }
+ onClick={() =>
+ isDefault(props.type)
+ ? props.onEvent("click")
+ : submitForm(editorState, props.form)
+ }
+ >
+ {props.sourceMode === 'standard' && props.prefixIcon && (
+
- {props.sourceMode === 'standard' && props.prefixIcon && (
-
- {props.prefixIcon}
-
- )}
- {props.sourceMode === 'asset-library' && props.iconScoutAsset && (
-
-
-
- )}
-
-
-
- )}
- >
-
+ {props.prefixIcon}
+
+ )}
+ {props.sourceMode === 'asset-library' && props.iconScoutAsset && (
+
- {
- canvas = ref;
- }}
- penColor={props.inputFieldStyle.pen}
- clearOnResize={false}
- canvasProps={{
- className: "sigCanvas",
- width: canvasSize[0],
- height: canvasSize[1],
- }}
- onEnd={() => {
- updateValue();
- setIsBegin(false);
+
-
- item.title}
- oneWay={props.oneWay}
- onSearch={handleSearch}
- pagination={props.pagination ? {
- pageSize: props.pageSize || 10,
- } : false}
- />
-
-
+
+ item.title}
+ oneWay={props.oneWay}
+ onSearch={handleSearch}
+ pagination={props.pagination ? {
+ pageSize: props.pageSize || 10,
+ } : false}
+ />
+
);
});
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index d9eb475d4d..0274efee08 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -15,7 +15,7 @@ import React, {
useRef,
useState,
} from "react";
-import ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
+import { ResizePayload, useResizeDetector } from "react-resize-detector";
import styled, { css } from "styled-components";
import { EllipsisTextCss } from "lowcoder-design";
import { draggingUtils } from "./draggingUtils";
@@ -235,6 +235,36 @@ const HiddenIcon = styled(CloseEyeIcon)`
}
`;
+const ResizableChildren = React.memo((props: {
+ compType: string;
+ onInnerResize: (width?: number, height?: number) => void;
+ children: JSX.Element | React.ReactNode;
+}) => {
+ const { ref: innerRef } = useResizeDetector({
+ skipOnMount: (
+ props.compType === 'responsiveLayout'
+ || props.compType === 'columnLayout'
+ || props.compType === 'pageLayout'
+ || props.compType === 'splitLayout'
+ || props.compType === 'floatTextContainer'
+ || props.compType === 'tabbedContainer'
+ || props.compType === 'collapsibleContainer'
+ || props.compType === 'container'
+ ),
+ // skipOnMount: true,
+ refreshMode: "debounce",
+ refreshRate: 0,
+ onResize: ({width, height}: ResizePayload) => props.onInnerResize(width ?? undefined, height ?? undefined),
+ observerOptions: { box: "border-box" }
+ });
+
+ return (
+
-
+ {props.children}
+
)}
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 0b25763b77..2042c30974 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -5,7 +5,7 @@ import { ModulePrimaryColor, PrimaryColor } from "constants/style";
import _, { isEqual } from "lodash";
import log from "loglevel";
import React, { DragEvent, DragEventHandler, MouseEventHandler, ReactElement } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import { ResizePayload, useResizeDetector } from "react-resize-detector";
import styled from "styled-components";
import { isDirectionKey, isFilterInputTarget, modKeyPressed } from "util/keyUtils";
import {
@@ -1037,6 +1037,7 @@ class GridLayout extends React.Component
+ {
+ canvas = ref;
+ }}
+ penColor={props.inputFieldStyle.pen}
+ clearOnResize={false}
+ canvasProps={{
+ className: "sigCanvas",
+ width: canvasSize[0],
+ height: canvasSize[1],
+ }}
+ onEnd={() => {
+ updateValue();
+ setIsBegin(false);
+ props.onEvent("change");
+ }}
+ onBegin={() => setIsBegin(true)}
+ />
+
+
+ {(props.showClear || props.showUndo) && (
+
+ {props.showUndo && (
+
+ {
+ const data = canvas?.toData();
+ if (data) {
+ data?.pop();
+ canvas?.fromData(data);
+ updateValue();
+ props.onEvent("change");
+ }
+ }}
+ />
+
+ )}
+ {props.showClear && (
+ {
+ updateValue(true);
props.onEvent("change");
}}
- onBegin={() => setIsBegin(true)}
/>
-
+ )}
- {(props.showClear || props.showUndo) && (
-
- {props.showUndo && (
-
- {
- const data = canvas?.toData();
- if (data) {
- data?.pop();
- canvas?.fromData(data);
- updateValue();
- props.onEvent("change");
- }
- }}
- />
-
- )}
- {props.showClear && (
- {
- updateValue(true);
- props.onEvent("change");
- }}
- />
- )}
-
- )}
- {!(isBegin || props.value) && {props.tips}
}
-
-
+ )}
+ {!(isBegin || props.value) && {props.tips}
}
+
),
});
})
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 56a20d064b..0da018ee4f 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -11,7 +11,7 @@ import { trans } from "i18n";
import { NumberControl, StringControl } from "comps/controls/codeControl";
import { default as Transfer } from "antd/es/transfer";
import type { TransferKey } from "antd/es/transfer/interface";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl";
import styled, { css } from "styled-components";
import { useContext, useEffect, useRef, useState } from "react";
@@ -111,33 +111,36 @@ const TransferView = React.memo((props: RecordConstructorToView
+ {props.children}
+
+ )
+});
+
export const CompSelectionWrapper = React.memo((props: {
id?: string;
compType: UICompType;
@@ -335,12 +365,13 @@ export const CompSelectionWrapper = React.memo((props: {
}, [props.autoHeight, props.placeholder]);
const { ref: wrapperRef } = useResizeDetector({
- onResize: props.onWrapperResize,
+ onResize: ({width, height}: ResizePayload) => props.onWrapperResize(width ?? undefined, height ?? undefined),
handleHeight: needResizeDetector,
handleWidth: false,
refreshMode: 'debounce',
refreshRate: 100,
});
+
// log.debug("CompSelectionWrapper. name: ", props.name, " zIndex: ", zIndex);
const { nameConfig, resizeIconSize } = props;
@@ -388,25 +419,13 @@ export const CompSelectionWrapper = React.memo((props: {
)}
{!needResizeDetector && props.children}
- {needResizeDetector && (
- {props.children}
-
{showGridLines && this.gridLines()}
@@ -1072,7 +1073,7 @@ class GridLayout extends React.Component {
}
{this.hintPlaceholder()}
- {trans("support.createTicketDescriptionTitle")}