Skip to content

Commit 0ee2935

Browse files
raheeliftikhar5raheeliftikhar5
committed
memoize timer comp's view and propertyView
1 parent fb9eb33 commit 0ee2935

File tree

1 file changed

+55
-46
lines changed

1 file changed

+55
-46
lines changed

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

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
1+
import { CompAction, RecordConstructorToComp, RecordConstructorToView, changeChildAction } from "lowcoder-core";
22
import { styleControl } from "comps/controls/styleControl";
33
import { AnimationStyle, AnimationStyleType, startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants";
4-
import { UICompBuilder } from "comps/generators/uiCompBuilder";
4+
import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder";
55
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
66
import { Section, sectionNames } from "lowcoder-design";
77
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
@@ -15,6 +15,7 @@ import { EditorContext } from "comps/editorState";
1515
import { dropdownControl } from "../controls/dropdownControl";
1616
import { stringExposingStateControl } from "comps/controls/codeStateControl";
1717
import { BoolControl } from "comps/controls/boolControl";
18+
import React from "react";
1819

1920
const Container = styled.div<{
2021
$style: timerStyleType | undefined;
@@ -113,7 +114,9 @@ const childrenMap = {
113114
hideButton: BoolControl,
114115
};
115116

116-
const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
117+
type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
118+
119+
const TimerCompView = React.memo((props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
117120
const [startTime, setStartTime] = useState(0)
118121
const [timerState, setTimerState] = useState('stoped')
119122
const [elapsedTime, setElapsedTime] = useState(0)
@@ -219,51 +222,57 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
219222
</ButtonWarrper>
220223
</Container>
221224
);
222-
};
225+
});
223226

224-
let AvatarGroupBasicComp = (function () {
225-
return new UICompBuilder(childrenMap, (props, dispatch) => <AvatarGroupView {...props} dispatch={dispatch} />)
226-
.setPropertyViewFn((children) => (
227-
<>
228-
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
229-
<>
230-
<Section name={sectionNames.basic}>
231-
{children.timerType.propertyView({
232-
label: trans('timer.timerType')
233-
})}
234-
{children.defaultValue.propertyView({
235-
label: trans('timer.defaultValue')
236-
})}
237-
{children.hideButton.propertyView({
238-
label: trans('timer.hideButton')
239-
})}
240-
</Section>
241-
<Section name={sectionNames.interaction}>
242-
{children.onEvent.propertyView()}
243-
{hiddenPropertyView(children)}
244-
{showDataLoadingIndicatorsPropertyView(children)}
245-
</Section>
246-
</>
247-
)}
248-
249-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
250-
<>
251-
<Section name={sectionNames.style}>
252-
{children.style.getPropertyView()}
253-
</Section>
254-
<Section name={sectionNames.animationStyle} hasTooltip={true}>
255-
{children.animationStyle.getPropertyView()}
256-
</Section>
257-
<Section name={sectionNames.startButtonStyle}>
258-
{children.startButtonStyle.getPropertyView()}
227+
const TimerCompPropertyView = React.memo((props: {
228+
children: ChildrenType
229+
}) => {
230+
return (
231+
<>
232+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
233+
<>
234+
<Section name={sectionNames.basic}>
235+
{props.children.timerType.propertyView({
236+
label: trans('timer.timerType')
237+
})}
238+
{props.children.defaultValue.propertyView({
239+
label: trans('timer.defaultValue')
240+
})}
241+
{props.children.hideButton.propertyView({
242+
label: trans('timer.hideButton')
243+
})}
259244
</Section>
260-
<Section name={sectionNames.resetButtonStyle}>
261-
{children.resetButtonStyle.getPropertyView()}
245+
<Section name={sectionNames.interaction}>
246+
{props.children.onEvent.propertyView()}
247+
{hiddenPropertyView(props.children)}
248+
{showDataLoadingIndicatorsPropertyView(props.children)}
262249
</Section>
263-
</>
264-
)}
265-
</>
266-
))
250+
</>
251+
)}
252+
253+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
254+
<>
255+
<Section name={sectionNames.style}>
256+
{props.children.style.getPropertyView()}
257+
</Section>
258+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
259+
{props.children.animationStyle.getPropertyView()}
260+
</Section>
261+
<Section name={sectionNames.startButtonStyle}>
262+
{props.children.startButtonStyle.getPropertyView()}
263+
</Section>
264+
<Section name={sectionNames.resetButtonStyle}>
265+
{props.children.resetButtonStyle.getPropertyView()}
266+
</Section>
267+
</>
268+
)}
269+
</>
270+
)
271+
});
272+
273+
let TimerCompBasic = (function () {
274+
return new UICompBuilder(childrenMap, (props, dispatch) => <TimerCompView {...props} dispatch={dispatch} />)
275+
.setPropertyViewFn((children) => <TimerCompPropertyView children={children} />)
267276
.setExposeMethodConfigs([
268277
{
269278
method: {
@@ -294,7 +303,7 @@ let AvatarGroupBasicComp = (function () {
294303
.build();
295304
})();
296305

297-
export const TimerComp = withExposingConfigs(AvatarGroupBasicComp, [
306+
export const TimerComp = withExposingConfigs(TimerCompBasic, [
298307
new NameConfig("defaultValue", trans("timer.defaultValue")),
299308
new NameConfig("elapsedTime", trans("timer.elapsedTime")),
300309
new NameConfig("timerState", trans("timer.timerState")),

0 commit comments

Comments
 (0)