Movatterモバイル変換

[0]ホーム
URL:

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

Height calculation improvements#1536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
FalkWolsky merged 14 commits intodevfromheight-calculation-improvements
Feb 19, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
14 commits
Select commitHold shift + click to select a range
34c252c
match lazy comp's loading skeleton height as per comp's default height
raheeliftikhar5Feb 13, 2025
9d3f8b9
fixed tooltip warnings after antd upgrade
raheeliftikhar5Feb 13, 2025
4fa9599
memoize timer comp's view and propertyView
raheeliftikhar5Feb 13, 2025
2311310
memoize transfer comp's view and propertyView
raheeliftikhar5Feb 13, 2025
ad3733a
reduce re-rendering by adding memoziation
raheeliftikhar5Feb 13, 2025
2ee3c48
reduced actions for global variables
raheeliftikhar5Feb 19, 2025
cf5f7a9
fixed console errors from avatar comp
raheeliftikhar5Feb 19, 2025
c5734f8
reduce delay in height calculation
raheeliftikhar5Feb 19, 2025
71b4054
remove lazy loading from comps
raheeliftikhar5Feb 19, 2025
2d2ce6a
optimise bundle size for lowcoder
raheeliftikhar5Feb 19, 2025
75a84b0
remove console logs
raheeliftikhar5Feb 19, 2025
1fb1131
Merge branch 'dev' into height-calculation-improvements
FalkWolskyFeb 19, 2025
76c447d
fix build
raheeliftikhar5Feb 19, 2025
e822d17
fix build
raheeliftikhar5Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -74,6 +74,7 @@ type LoadingProps = {
size?: number; // circle's size
className?: string;
style?: CSSProperties;
compHeight?: number;
};

export const Loading = (props: LoadingProps) => {
Expand All@@ -92,7 +93,11 @@ export const Loading = (props: LoadingProps) => {
<Load2 {...loadingProps} />
</Container>
</ContainerX> */}
<StyledSkeleton active style={{height: '100%', animationDuration: '2s'}} />
<StyledSkeleton
active
paragraph={{rows: props.compHeight ? Math.floor((props.compHeight * 8) / 35) : 4}}
style={{height: '100%', animationDuration: '2s'}}
/>
</LoadingWrapper>
);
};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -159,7 +159,9 @@ export const ControlPropertyViewWrapper = (
<ToolTipLabel
title={tooltip}
label={label}
overlayInnerStyle={labelTooltipOverlayInnerStyle}
styles={{
body: labelTooltipOverlayInnerStyle,
}}
/>
</LabelWrapper>
)}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -363,10 +363,12 @@ export const IconSelectBase = (props: {
onOpenChange={setVisible}
getPopupContainer={parent ? () => parent : undefined}
// hide the original background when dragging the popover is allowed
overlayInnerStyle={{
border: "none",
boxShadow: "none",
background: "transparent",
styles={{
body: {
border: "none",
boxShadow: "none",
background: "transparent",
}
}}
// when dragging is allowed, always re-location to avoid the popover exceeds the screen
destroyTooltipOnHide
Expand Down
18 changes: 12 additions & 6 deletionsclient/packages/lowcoder-design/src/components/popover.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -64,7 +64,6 @@ const SimplePopover = (props: {
);
return (
<Popover
overlayInnerStyle={{padding: 0}}
align={{
offset: [-12, 0, 0, 0],
}}
Expand All@@ -74,7 +73,10 @@ const SimplePopover = (props: {
open={visible}
onOpenChange={setVisible}
placement="left"
overlayStyle={{ width: "310px" }}
styles={{
root: { width: "310px" },
body: { padding: 0 }
}}
>
{props.children}
</Popover>
Expand All@@ -101,16 +103,18 @@ const CustomPopover = (props: {
);
return (
<Popover
overlayInnerStyle={{padding: 0}}
content={contentWithBox}
trigger="click"
open={visible}
onOpenChange={setVisible}
placement={props.type === "query" ? "top" : "left"}
overlayStyle={{ width: "310px" }}
align={{
offset: [-12, 0, 0, 0],
}}
styles={{
root: { width: "310px" },
body: { padding: 0 }
}}
>
{props.children}
</Popover>
Expand DownExpand Up@@ -167,8 +171,10 @@ const EditPopover = (props: EditPopoverProps) => {
return (
<Popover
arrow={false}
overlayStyle={{paddingTop: '15px'}}
overlayInnerStyle={{padding: 0}}
styles={{
root: { paddingTop: '15px' },
body: { padding: 0 }
}}
content={() => (
<>
<Wedge />
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -444,10 +444,12 @@ export const ShapeSelectBase = (props: {
onOpenChange={setVisible}
getPopupContainer={parent ? () => parent : undefined}
// hide the original background when dragging the popover is allowed
overlayInnerStyle={{
border: "none",
boxShadow: "none",
background: "transparent",
styles={{
body: {
border: "none",
boxShadow: "none",
background: "transparent",
}
}}
// when dragging is allowed, always re-location to avoid the popover exceeds the screen
destroyTooltipOnHide
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -155,7 +155,7 @@ export const UnderlineCss = css`
`;

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

const Label = styled.div<{ $border?: boolean }>`
Expand All@@ -181,7 +181,9 @@ function ToolTipLabel(
<AntdTooltip
color="#2c2c2c"
title={title && <TooltipTitleWrapper><>{title}</></TooltipTitleWrapper>}
overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
styles={{
body: { maxWidth: "232px", whiteSpace: "break-spaces" }
}}
arrow={{
pointAtCenter: true
}}
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,7 @@
flex-direction: column;
top: 0;
z-index: 10000;
transition: opacity 0.25s linear;
}
#loading svg {
animation: breath 1s linear infinite;
Expand Down
1 change: 1 addition & 0 deletionsclient/packages/lowcoder/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -127,6 +127,7 @@
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-only-ascii": "^0.0.0",
"http-proxy-middleware": "^2.0.6",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^5.9.2",
"typescript": "^4.8.4",
"vite": "^4.5.5",
Expand Down
14 changes: 7 additions & 7 deletionsclient/packages/lowcoder/src/comps/comps/avatar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,12 +41,12 @@ const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean,
cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
`;

const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
const Wrapper = styled.div <{$iconSize: number,$labelPosition: string,$style: AvatarContainerStyleType}>`
display: flex;
width: 100%;
height: 100%;
align-items: center;
flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
flex-direction: ${(props) => props.$labelPosition === 'left' ? 'row' : 'row-reverse'};
${(props) => {
return (
props.$style && {
Expand All@@ -57,14 +57,14 @@ ${(props) => {
}}
`

const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
width: calc(100% - ${(props) => props.iconSize}px);
const LabelWrapper = styled.div<{$iconSize: number,$alignmentPosition: string }>`
width: calc(100% - ${(props) => props.$iconSize}px);
display: flex;
padding-left: 5px;
padding-right: 5px;
flex-direction: column;
justify-content: flex-end;
align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
align-items: ${(props) => props.$alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
`
const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
max-width: 100%;
Expand DownExpand Up@@ -166,7 +166,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
disabled={!props.enableDropdownMenu}
dropdownRender={() => menu}
>
<Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
<Wrapper$iconSize={props.iconSize}$labelPosition={props.labelPosition} $style={props.style}>
<Badge
count={props.badgeCount.value}
dot={props.badgeType === 'dot'}
Expand All@@ -187,7 +187,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
{title.value}
</AvatarWrapper>
</Badge>
<LabelWrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
<LabelWrapper$iconSize={props.iconSize}$alignmentPosition={props.alignmentPosition}>
<LabelSpan $style={props.labelStyle}>{props.avatarLabel.value}</LabelSpan>
<CaptionSpan $style={props.captionStyle}>{props.avatarCatption.value}</CaptionSpan>
</LabelWrapper>
Expand Down
4 changes: 2 additions & 2 deletionsclient/packages/lowcoder/src/comps/comps/avatarGroup.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -111,11 +111,11 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
alignment={props.alignment}
>
{
<Avatar.GroupmaxCount={props.maxCount} size={props.avatarSize}>
<Avatar.Groupmax={{ count:props.maxCount }} size={props.avatarSize}>
{
props.avatars.map((item, index) => {
return (
<Tooltip title={item.Tooltip}>
<Tooltip title={item.Tooltip} key={index}>
<Avatar
src={item.src ?? undefined}
icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -439,9 +439,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
isRowCountLocked,
onPositionParamsChange,
onRowCountChange,
positionParams,
JSON.stringify(positionParams),
JSON.stringify(props.containerPadding),
props.dispatch,
props.containerPadding,
]
);
const setSelectedNames = useCallback(
Expand All@@ -454,6 +454,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
const { width, ref } = useResizeDetector({
onResize,
handleHeight: isRowCountLocked,
refreshMode: 'debounce',
refreshRate: 100,
});

const itemViewRef = useRef<GirdItemViewRecord>({});
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -55,6 +55,7 @@ const TmpComp = withTypeAndChildren<
undefined,
undefined,
manifest.withoutLoading,
manifest.layoutInfo?.h,
)
}
const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -49,6 +49,7 @@ interface LazyCompViewProps {
loadComp: () => Promise<void>;
loadingElement?: () => React.ReactNode;
errorElement?: (error: any) => React.ReactNode;
height?: number,
}

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

return (
<WhiteLoading />
<WhiteLoadingcompHeight={props.height}/>
);
});

Expand All@@ -94,6 +95,7 @@ export function lazyLoadComp(
loader?: LazyloadCompLoader,
loadingElement?: () => React.ReactNode,
withoutLoading?: boolean,
height?: number,
) {
class LazyLoadComp extends simpleMultiComp({}) {
compValue: any;
Expand DownExpand Up@@ -145,7 +147,12 @@ export function lazyLoadComp(
// const key = `${remoteInfo?.packageName}-${remoteInfo?.packageVersion}-${remoteInfo?.compName}`;
const key = `${compName}`;
return (
<LazyCompView key={key} loadComp={() => this.load()} loadingElement={loadingElement} />
<LazyCompView
key={key}
loadComp={() => this.load()}
loadingElement={loadingElement}
height={height}
/>
);
}

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -136,7 +136,7 @@ type ColumnContainerProps = Omit<ContainerBaseProps, 'style'> & {
style: ResponsiveLayoutColStyleType,
}

const ColumnContainer = (props: ColumnContainerProps) => {
const ColumnContainer =React.memo((props: ColumnContainerProps) => {
return (
<InnerGrid
{...props}
Expand All@@ -145,7 +145,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
style={props.style}
/>
);
};
});

const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
const screenInfo = useScreenInfo();
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -686,8 +686,10 @@ function ToolbarPopover(props: {
return (
<Popover
open={visible}
overlayStyle={{ pointerEvents: "auto" }}
overlayInnerStyle={{ padding: '0' }}
styles={{
root: { pointerEvents: "auto" },
body: {padding: '0'}
}}
content={
<div
ref={popOverRef}
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp