Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5608340

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

File tree

29 files changed

+533
-391
lines changed

29 files changed

+533
-391
lines changed

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

Lines changed: 6 additions & 1 deletion
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‎

Lines changed: 3 additions & 1 deletion
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‎

Lines changed: 6 additions & 4 deletions
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‎

Lines changed: 12 additions & 6 deletions
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‎

Lines changed: 6 additions & 4 deletions
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‎

Lines changed: 4 additions & 2 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 7 additions & 7 deletions
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‎

Lines changed: 2 additions & 2 deletions
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}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /