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 4fa9599

Browse files
memoize timer comp's view and propertyView
1 parent 9d3f8b9 commit 4fa9599

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)

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