Skip to content

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Feb 19, 2025
Merged

Height calculation improvements #1536

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
34c252c
match lazy comp's loading skeleton height as per comp's default height
raheeliftikhar5 Feb 13, 2025
9d3f8b9
fixed tooltip warnings after antd upgrade
raheeliftikhar5 Feb 13, 2025
4fa9599
memoize timer comp's view and propertyView
raheeliftikhar5 Feb 13, 2025
2311310
memoize transfer comp's view and propertyView
raheeliftikhar5 Feb 13, 2025
ad3733a
reduce re-rendering by adding memoziation
raheeliftikhar5 Feb 13, 2025
2ee3c48
reduced actions for global variables
raheeliftikhar5 Feb 19, 2025
cf5f7a9
fixed console errors from avatar comp
raheeliftikhar5 Feb 19, 2025
c5734f8
reduce delay in height calculation
raheeliftikhar5 Feb 19, 2025
71b4054
remove lazy loading from comps
raheeliftikhar5 Feb 19, 2025
2d2ce6a
optimise bundle size for lowcoder
raheeliftikhar5 Feb 19, 2025
75a84b0
remove console logs
raheeliftikhar5 Feb 19, 2025
1fb1131
Merge branch 'dev' into height-calculation-improvements
FalkWolsky Feb 19, 2025
76c447d
fix build
raheeliftikhar5 Feb 19, 2025
e822d17
fix build
raheeliftikhar5 Feb 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
Prev Previous commit
Next Next commit
memoize transfer comp's view and propertyView
  • Loading branch information
@raheeliftikhar5
raheeliftikhar5 committed Feb 19, 2025
commit 23113105ec9d72246f91a6263f0ac24eef35a1e6
89 changes: 49 additions & 40 deletions client/packages/lowcoder/src/comps/comps/transferComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
import { CompAction, RecordConstructorToComp, RecordConstructorToView, changeChildAction } from "lowcoder-core";
import { BoolControl } from "comps/controls/boolControl";
import { arrayObjectExposingStateControl, arrayStringExposingStateControl } from "comps/controls/codeStateControl";
import { styleControl } from "comps/controls/styleControl";
import { TransferStyle, TransferStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { UICompBuilder } from "comps/generators/uiCompBuilder";
import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
import { Section, sectionNames } from "lowcoder-design";
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
Expand All @@ -17,6 +17,7 @@ import styled, { css } from "styled-components";
import { useContext, useEffect, useRef, useState } from "react";
import { valueComp, withDefault } from "../generators";
import type { TransferDirection } from 'antd/es/transfer';
import React from "react";

const Container = styled.div<{ $style: TransferStyleType }>`
height: 100%;
Expand Down Expand Up @@ -71,7 +72,9 @@ const childrenMap = {
searchInfo: valueComp<string[]>(['', '']),
};

const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;

const TransferView = React.memo((props: RecordConstructorToView<typeof childrenMap> & {
dispatch: (action: CompAction) => void;
}) => {
const conRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -136,48 +139,54 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
</Container>
</ReactResizeDetector>
);
};
});

const TransferCompPropertyView = React.memo((props: {
children: ChildrenType
}) => {
return (
<>
<Section name={sectionNames.basic}>
{props.children.items.propertyView({
label: trans("transfer.items"),
})}
{props.children.targetKeys.propertyView({
label: trans("transfer.targetKeys"),
})}
{props.children.sourceTitle.propertyView({
label: trans("transfer.sourceTitle"),
})}
{props.children.targetTitle.propertyView({
label: trans("transfer.targetTitle"),
})}
{props.children.showSearch.propertyView({
label: trans("transfer.allowSearch"),
})}
{props.children.oneWay.propertyView({
label: trans("transfer.oneWay"),
})}
{props.children.pagination.propertyView({
label: trans("transfer.pagination"),
})}
{props.children.pagination.getView() && props.children.pageSize.propertyView({
label: trans("transfer.pageSize"),
})}
</Section>
<Section name={sectionNames.interaction}>
{props.children.onEvent.propertyView()}
{hiddenPropertyView(props.children)}
{showDataLoadingIndicatorsPropertyView(props.children)}
</Section>
<Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
</>
)
});

let TransferBasicComp = (function () {
return new UICompBuilder(childrenMap, (props, dispatch) => {
return (
<TransferView {...props} dispatch={dispatch} />)})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
{children.items.propertyView({
label: trans("transfer.items"),
})}
{children.targetKeys.propertyView({
label: trans("transfer.targetKeys"),
})}
{children.sourceTitle.propertyView({
label: trans("transfer.sourceTitle"),
})}
{children.targetTitle.propertyView({
label: trans("transfer.targetTitle"),
})}
{children.showSearch.propertyView({
label: trans("transfer.allowSearch"),
})}
{children.oneWay.propertyView({
label: trans("transfer.oneWay"),
})}
{children.pagination.propertyView({
label: trans("transfer.pagination"),
})}
{children.pagination.getView() && children.pageSize.propertyView({
label: trans("transfer.pageSize"),
})}
</Section>
<Section name={sectionNames.interaction}>
{children.onEvent.propertyView()}
{hiddenPropertyView(children)}
{showDataLoadingIndicatorsPropertyView(children)}
</Section>
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
</>
))
.setPropertyViewFn((children) => <TransferCompPropertyView children={children} />)
.build();
})();

Expand Down