Skip to content

Commit 5608340

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1536 from lowcoder-org/height-calculation-improvements
Height calculation improvements
2 parents e2b27f4 + e822d17 commit 5608340

29 files changed

+533
-391
lines changed

‎client/packages/lowcoder-design/src/components/Loading.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ type LoadingProps = {
7474
size?: number; // circle's size
7575
className?: string;
7676
style?: CSSProperties;
77+
compHeight?: number;
7778
};
7879

7980
export const Loading = (props: LoadingProps) => {
@@ -92,7 +93,11 @@ export const Loading = (props: LoadingProps) => {
9293
<Load2 {...loadingProps} />
9394
</Container>
9495
</ContainerX> */}
95-
<StyledSkeleton active style={{height: '100%', animationDuration: '2s'}} />
96+
<StyledSkeleton
97+
active
98+
paragraph={{rows: props.compHeight ? Math.floor((props.compHeight * 8) / 35) : 4}}
99+
style={{height: '100%', animationDuration: '2s'}}
100+
/>
96101
</LoadingWrapper>
97102
);
98103
};

‎client/packages/lowcoder-design/src/components/control.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,9 @@ export const ControlPropertyViewWrapper = (
159159
<ToolTipLabel
160160
title={tooltip}
161161
label={label}
162-
overlayInnerStyle={labelTooltipOverlayInnerStyle}
162+
styles={{
163+
body: labelTooltipOverlayInnerStyle,
164+
}}
163165
/>
164166
</LabelWrapper>
165167
)}

‎client/packages/lowcoder-design/src/components/iconSelect/index.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -363,10 +363,12 @@ export const IconSelectBase = (props: {
363363
onOpenChange={setVisible}
364364
getPopupContainer={parent ? () => parent : undefined}
365365
// hide the original background when dragging the popover is allowed
366-
overlayInnerStyle={{
367-
border: "none",
368-
boxShadow: "none",
369-
background: "transparent",
366+
styles={{
367+
body: {
368+
border: "none",
369+
boxShadow: "none",
370+
background: "transparent",
371+
}
370372
}}
371373
// when dragging is allowed, always re-location to avoid the popover exceeds the screen
372374
destroyTooltipOnHide

‎client/packages/lowcoder-design/src/components/popover.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ const SimplePopover = (props: {
6464
);
6565
return (
6666
<Popover
67-
overlayInnerStyle={{padding: 0}}
6867
align={{
6968
offset: [-12, 0, 0, 0],
7069
}}
@@ -74,7 +73,10 @@ const SimplePopover = (props: {
7473
open={visible}
7574
onOpenChange={setVisible}
7675
placement="left"
77-
overlayStyle={{ width: "310px" }}
76+
styles={{
77+
root: { width: "310px" },
78+
body: { padding: 0 }
79+
}}
7880
>
7981
{props.children}
8082
</Popover>
@@ -101,16 +103,18 @@ const CustomPopover = (props: {
101103
);
102104
return (
103105
<Popover
104-
overlayInnerStyle={{padding: 0}}
105106
content={contentWithBox}
106107
trigger="click"
107108
open={visible}
108109
onOpenChange={setVisible}
109110
placement={props.type === "query" ? "top" : "left"}
110-
overlayStyle={{ width: "310px" }}
111111
align={{
112112
offset: [-12, 0, 0, 0],
113113
}}
114+
styles={{
115+
root: { width: "310px" },
116+
body: { padding: 0 }
117+
}}
114118
>
115119
{props.children}
116120
</Popover>
@@ -167,8 +171,10 @@ const EditPopover = (props: EditPopoverProps) => {
167171
return (
168172
<Popover
169173
arrow={false}
170-
overlayStyle={{paddingTop: '15px'}}
171-
overlayInnerStyle={{padding: 0}}
174+
styles={{
175+
root: { paddingTop: '15px' },
176+
body: { padding: 0 }
177+
}}
172178
content={() => (
173179
<>
174180
<Wedge />

‎client/packages/lowcoder-design/src/components/shapeSelect/index.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -444,10 +444,12 @@ export const ShapeSelectBase = (props: {
444444
onOpenChange={setVisible}
445445
getPopupContainer={parent ? () => parent : undefined}
446446
// hide the original background when dragging the popover is allowed
447-
overlayInnerStyle={{
448-
border: "none",
449-
boxShadow: "none",
450-
background: "transparent",
447+
styles={{
448+
body: {
449+
border: "none",
450+
boxShadow: "none",
451+
background: "transparent",
452+
}
451453
}}
452454
// when dragging is allowed, always re-location to avoid the popover exceeds the screen
453455
destroyTooltipOnHide

‎client/packages/lowcoder-design/src/components/toolTip.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const UnderlineCss = css`
155155
`;
156156

157157
function Tooltip(props: TooltipProps) {
158-
return <AntdTooltip color="#2c2c2c2" overlayInnerStyle={overlayInnerCss} {...props} />;
158+
return <AntdTooltip color="#2c2c2c2" styles={{ body: overlayInnerCss }} {...props} />;
159159
}
160160

161161
const Label = styled.div<{ $border?: boolean }>`
@@ -181,7 +181,9 @@ function ToolTipLabel(
181181
<AntdTooltip
182182
color="#2c2c2c"
183183
title={title && <TooltipTitleWrapper><>{title}</></TooltipTitleWrapper>}
184-
overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
184+
styles={{
185+
body: { maxWidth: "232px", whiteSpace: "break-spaces" }
186+
}}
185187
arrow={{
186188
pointAtCenter: true
187189
}}

‎client/packages/lowcoder/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
flex-direction: column;
3131
top: 0;
3232
z-index: 10000;
33+
transition: opacity 0.25s linear;
3334
}
3435
#loading svg {
3536
animation: breath 1s linear infinite;

‎client/packages/lowcoder/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
"eslint-config-react-app": "^7.0.1",
128128
"eslint-plugin-only-ascii": "^0.0.0",
129129
"http-proxy-middleware": "^2.0.6",
130+
"rollup-plugin-terser": "^7.0.2",
130131
"rollup-plugin-visualizer": "^5.9.2",
131132
"typescript": "^4.8.4",
132133
"vite": "^4.5.5",

‎client/packages/lowcoder/src/comps/comps/avatar.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@ const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean,
4141
cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
4242
`;
4343

44-
const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
44+
const Wrapper = styled.div <{ $iconSize: number, $labelPosition: string,$style: AvatarContainerStyleType}>`
4545
display: flex;
4646
width: 100%;
4747
height: 100%;
4848
align-items: center;
49-
flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
49+
flex-direction: ${(props) => props.$labelPosition === 'left' ? 'row' : 'row-reverse'};
5050
${(props) => {
5151
return (
5252
props.$style && {
@@ -57,14 +57,14 @@ ${(props) => {
5757
}}
5858
`
5959

60-
const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
61-
width: calc(100% - ${(props) => props.iconSize}px);
60+
const LabelWrapper = styled.div<{ $iconSize: number, $alignmentPosition: string }>`
61+
width: calc(100% - ${(props) => props.$iconSize}px);
6262
display: flex;
6363
padding-left: 5px;
6464
padding-right: 5px;
6565
flex-direction: column;
6666
justify-content: flex-end;
67-
align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
67+
align-items: ${(props) => props.$alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
6868
`
6969
const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
7070
max-width: 100%;
@@ -166,7 +166,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
166166
disabled={!props.enableDropdownMenu}
167167
dropdownRender={() => menu}
168168
>
169-
<Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
169+
<Wrapper $iconSize={props.iconSize} $labelPosition={props.labelPosition} $style={props.style}>
170170
<Badge
171171
count={props.badgeCount.value}
172172
dot={props.badgeType === 'dot'}
@@ -187,7 +187,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
187187
{title.value}
188188
</AvatarWrapper>
189189
</Badge>
190-
<LabelWrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
190+
<LabelWrapper $iconSize={props.iconSize} $alignmentPosition={props.alignmentPosition}>
191191
<LabelSpan $style={props.labelStyle}>{props.avatarLabel.value}</LabelSpan>
192192
<CaptionSpan $style={props.captionStyle}>{props.avatarCatption.value}</CaptionSpan>
193193
</LabelWrapper>

‎client/packages/lowcoder/src/comps/comps/avatarGroup.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -111,11 +111,11 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
111111
alignment={props.alignment}
112112
>
113113
{
114-
<Avatar.Group maxCount={props.maxCount} size={props.avatarSize}>
114+
<Avatar.Group max={{ count: props.maxCount }} size={props.avatarSize}>
115115
{
116116
props.avatars.map((item, index) => {
117117
return (
118-
<Tooltip title={item.Tooltip}>
118+
<Tooltip title={item.Tooltip} key={index}>
119119
<Avatar
120120
src={item.src ?? undefined}
121121
icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -439,9 +439,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
439439
isRowCountLocked,
440440
onPositionParamsChange,
441441
onRowCountChange,
442-
positionParams,
442+
JSON.stringify(positionParams),
443+
JSON.stringify(props.containerPadding),
443444
props.dispatch,
444-
props.containerPadding,
445445
]
446446
);
447447
const setSelectedNames = useCallback(
@@ -454,6 +454,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
454454
const { width, ref } = useResizeDetector({
455455
onResize,
456456
handleHeight: isRowCountLocked,
457+
refreshMode: 'debounce',
458+
refreshRate: 100,
457459
});
458460

459461
const itemViewRef = useRef<GirdItemViewRecord>({});

‎client/packages/lowcoder/src/comps/comps/gridItemComp.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const TmpComp = withTypeAndChildren<
5555
undefined,
5656
undefined,
5757
manifest.withoutLoading,
58+
manifest.layoutInfo?.h,
5859
)
5960
}
6061
const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);

‎client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ interface LazyCompViewProps {
4949
loadComp: () => Promise<void>;
5050
loadingElement?: () => React.ReactNode;
5151
errorElement?: (error: any) => React.ReactNode;
52+
height?: number,
5253
}
5354

5455
const LazyCompView = React.memo((props: React.PropsWithChildren<LazyCompViewProps>) => {
@@ -82,7 +83,7 @@ const LazyCompView = React.memo((props: React.PropsWithChildren<LazyCompViewProp
8283
}
8384

8485
return (
85-
<WhiteLoading />
86+
<WhiteLoading compHeight={props.height} />
8687
);
8788
});
8889

@@ -94,6 +95,7 @@ export function lazyLoadComp(
9495
loader?: LazyloadCompLoader,
9596
loadingElement?: () => React.ReactNode,
9697
withoutLoading?: boolean,
98+
height?: number,
9799
) {
98100
class LazyLoadComp extends simpleMultiComp({}) {
99101
compValue: any;
@@ -145,7 +147,12 @@ export function lazyLoadComp(
145147
// const key = `${remoteInfo?.packageName}-${remoteInfo?.packageVersion}-${remoteInfo?.compName}`;
146148
const key = `${compName}`;
147149
return (
148-
<LazyCompView key={key} loadComp={() => this.load()} loadingElement={loadingElement} />
150+
<LazyCompView
151+
key={key}
152+
loadComp={() => this.load()}
153+
loadingElement={loadingElement}
154+
height={height}
155+
/>
149156
);
150157
}
151158

‎client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ type ColumnContainerProps = Omit<ContainerBaseProps, 'style'> & {
136136
style: ResponsiveLayoutColStyleType,
137137
}
138138

139-
const ColumnContainer = (props: ColumnContainerProps) => {
139+
const ColumnContainer = React.memo((props: ColumnContainerProps) => {
140140
return (
141141
<InnerGrid
142142
{...props}
@@ -145,7 +145,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
145145
style={props.style}
146146
/>
147147
);
148-
};
148+
});
149149

150150
const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
151151
const screenInfo = useScreenInfo();

‎client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -686,8 +686,10 @@ function ToolbarPopover(props: {
686686
return (
687687
<Popover
688688
open={visible}
689-
overlayStyle={{ pointerEvents: "auto" }}
690-
overlayInnerStyle={{ padding: '0' }}
689+
styles={{
690+
root: { pointerEvents: "auto" },
691+
body: {padding: '0'}
692+
}}
691693
content={
692694
<div
693695
ref={popOverRef}

0 commit comments

Comments
 (0)