Skip to content

Commit df38a03

Browse files
kamal-qureshikamal-qureshi
committed
Optimizations - Added hook for click event handlers
1 parent fe1deda commit df38a03

File tree

19 files changed

+120
-75
lines changed

19 files changed

+120
-75
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
3535
import { DropdownOptionControl } from "../controls/optionsControl";
3636
import { ReactElement, useContext, useEffect } from "react";
3737
import { CompNameContext, EditorContext } from "../editorState";
38-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
38+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
3939

4040

4141
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
@@ -143,6 +143,8 @@ const childrenMap = {
143143
const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
144144
const { shape, title, src, iconSize } = props;
145145
const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
146+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
147+
146148
// const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
147149
const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
148150
const items = props.options
@@ -184,7 +186,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
184186
shape={shape}
185187
$style={props.avatarStyle}
186188
src={src.value}
187-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
189+
onClick={() => handleClickEvent()}
188190
>
189191
{title.value}
190192
</AvatarWrapper>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { optionsControl } from "../controls/optionsControl";
1919
import { BoolControl } from "../controls/boolControl";
2020
import { dropdownControl } from "../controls/dropdownControl";
2121
import { JSONObject } from "util/jsonTypes";
22-
import { ComponentClickHandler } from "../utils/componentClickHandler";
22+
import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";
2323

2424
const MacaroneList = [
2525
'#fde68a',
@@ -106,6 +106,8 @@ const childrenMap = {
106106
};
107107

108108
const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
109+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
110+
109111
return (
110112
<Container
111113
$style={props.style}
@@ -126,7 +128,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
126128
}}
127129
size={props.avatarSize}
128130
onClick={() => {
129-
ComponentClickHandler({onEvent: props.onEvent})();
131+
handleClickEvent();
130132
props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
131133
}}
132134
>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstant
2929
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
3030
import { RecordConstructorToComp } from "lowcoder-core";
3131
import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
32-
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
32+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
3333

3434
const FormLabel = styled(CommonBlueLabel)`
3535
font-size: 13px;
@@ -195,7 +195,6 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
195195

196196
try {
197197
if (isDefault(props.type)) {
198-
// ComponentClickHandler({onEvent: props.onEvent})()
199198
handleClickEvent();
200199
} else {
201200
submitForm(editorState, props.form);

‎client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from "react";
12
import { RecordConstructorToView } from "lowcoder-core";
23
import { BoolControl } from "comps/controls/boolControl";
34
import { stringExposingStateControl } from "comps/controls/codeStateControl";
@@ -16,8 +17,7 @@ import { IconControl } from "comps/controls/iconControl";
1617
import styled from "styled-components";
1718
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
1819
import { manualOptionsControl } from "comps/controls/optionsControl";
19-
import { useContext, useEffect } from "react";
20-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
20+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
2121

2222
const StyledFloatButton = styled(FloatButton)<{
2323
$animationStyle: AnimationStyleType;
@@ -99,21 +99,51 @@ const childrenMap = {
9999
dot: BoolControl,
100100
};
101101

102+
const FloatButtonItem = React.memo(({
103+
button,
104+
animationStyle,
105+
badgeStyle,
106+
buttonTheme,
107+
shape,
108+
dot
109+
}: {
110+
button: any;
111+
animationStyle: AnimationStyleType;
112+
badgeStyle: BadgeStyleType;
113+
buttonTheme: 'primary' | 'default';
114+
shape: 'circle' | 'square';
115+
dot: boolean;
116+
}) => {
117+
const handleClickEvent = useCompClickEventHandler({ onEvent: button.onEvent });
118+
119+
return (
120+
<StyledFloatButton
121+
$animationStyle={animationStyle}
122+
key={button?.id}
123+
icon={button?.icon}
124+
onClick={handleClickEvent}
125+
tooltip={button?.label}
126+
description={button?.description}
127+
badge={{ count: button?.badge, color: badgeStyle.badgeColor, dot: dot }}
128+
type={buttonTheme}
129+
shape={shape}
130+
/>
131+
);
132+
});
133+
102134
const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) => {
103135
const renderButton = (button: any, onlyOne?: boolean) => {
104136
return !button?.hidden ? (
105-
<StyledFloatButton
106-
$animationStyle={props.animationStyle}
137+
<FloatButtonItem
107138
key={button?.id}
108-
icon={button?.icon}
109-
onClick={ComponentClickHandler({onEvent: button.onEvent})}
110-
tooltip={button?.label}
111-
description={button?.description}
112-
badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}
113-
type={onlyOne ? props.buttonTheme : 'default'}
139+
button={button}
140+
animationStyle={props.animationStyle}
141+
badgeStyle={props.badgeStyle}
142+
buttonTheme={onlyOne ? props.buttonTheme : 'default'}
114143
shape={props.shape}
115-
/>)
116-
: ''
144+
dot={props.dot}
145+
/>
146+
) : '';
117147
}
118148
return (
119149
<Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ import dayjs from "dayjs";
6767
// import "dayjs/locale/zh-cn";
6868
import { getInitialsAndColorCode } from "util/stringUtils";
6969
import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
70-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
70+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
7171

7272
dayjs.extend(relativeTime);
7373
// dayjs.locale("zh-cn");
@@ -136,6 +136,8 @@ const CommentCompBase = (
136136
const [commentListData, setCommentListData] = useState<commentDataTYPE[]>([]);
137137
const [prefix, setPrefix] = useState<PrefixType>("@");
138138
const [context, setContext] = useState<string>("");
139+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
140+
139141
// Integrate the comment list with the names in the original mention list
140142
const mergeAllMentionList = (mentionList: any) => {
141143
setMentionList(
@@ -177,7 +179,7 @@ const CommentCompBase = (
177179
const generateCommentAvatar = (item: commentDataTYPE) => {
178180
return (
179181
<Avatar
180-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
182+
onClick={() => handleClickEvent()}
181183
// If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode
182184
style={{
183185
backgroundColor: item?.user?.avatar
@@ -294,7 +296,7 @@ const CommentCompBase = (
294296
avatar={generateCommentAvatar(item)}
295297
title={
296298
<div
297-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
299+
onClick={() => handleClickEvent()}
298300
>
299301
<a>{item?.user?.name}</a>
300302
<Tooltip

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { optionsControl } from "comps/controls/optionsControl";
2121
import { dropdownControl } from "comps/controls/dropdownControl";
2222
import { styleControl } from "comps/controls/styleControl";
2323
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
24-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
24+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
2525

2626
const { Meta } = Card;
2727

@@ -205,6 +205,12 @@ export const ContainerBaseComp = (function () {
205205
const conRef = useRef<HTMLDivElement>(null);
206206
const [width, setWidth] = useState(0);
207207
const [height, setHeight] = useState(0);
208+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
209+
const actionHandlers = props.actionOptions.map(item => ({
210+
...item,
211+
clickHandler: useCompClickEventHandler({onEvent: item.onEvent})
212+
}));
213+
208214
useEffect(() => {
209215
if (height && width) {
210216
onResize();
@@ -233,7 +239,7 @@ export const ContainerBaseComp = (function () {
233239
$cardType={props.cardType}
234240
onMouseEnter={() => props.onEvent('focus')}
235241
onMouseLeave={() => props.onEvent('blur')}
236-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
242+
onClick={() => handleClickEvent()}
237243
>
238244
<Card
239245
style={{ width: width, height: '100%' }}
@@ -246,10 +252,13 @@ export const ContainerBaseComp = (function () {
246252
// 内容
247253
cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
248254
actions={props.cardType == 'common' && props.showActionIcon ?
249-
props.actionOptions.filter(item => !item.hidden).map(item => {
255+
actionHandlers.filter(item => !item.hidden).map(item => {
250256
return (
251257
<IconWrapper
252-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
258+
onClick={(e) => {
259+
e.stopPropagation()
260+
item.clickHandler()
261+
}}
253262
disabled={item.disabled}
254263
$style={props.style}
255264
>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { useContext } from "react";
3333
import { EditorContext } from "comps/editorState";
3434
import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
3535
import { dropdownControl } from "../controls/dropdownControl";
36-
import { ComponentClickHandler } from "../utils/componentClickHandler";
36+
import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";
3737

3838
const Container = styled.div<{
3939
$sourceMode: string;
@@ -96,6 +96,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
9696
const conRef = useRef<HTMLDivElement>(null);
9797
const [width, setWidth] = useState(0);
9898
const [height, setHeight] = useState(0);
99+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
99100

100101
useEffect(() => {
101102
if (height && width) {
@@ -136,7 +137,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
136137
$sourceMode={props.sourceMode}
137138
$animationStyle={props.animationStyle}
138139
style={style}
139-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
140+
onClick={() => handleClickEvent()}
140141
>
141142
{ props.sourceMode === 'standard'
142143
? (props.icon || '')

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import { StringControl } from "../controls/codeControl";
3838
import { PositionControl } from "comps/controls/dropdownControl";
3939
import { dropdownControl } from "../controls/dropdownControl";
4040
import { AssetType, IconscoutControl } from "../controls/iconscoutControl";
41-
import { ComponentClickHandler } from "../utils/componentClickHandler";
41+
import { useCompClickEventHandler } from "../utils/useCompClickEventHandler";
4242

4343
const Container = styled.div<{
4444
$style: ImageStyleType | undefined,
@@ -125,6 +125,8 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
125125
const conRef = useRef<HTMLDivElement>(null);
126126
const [width, setWidth] = useState(0);
127127
const [height, setHeight] = useState(0);
128+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
129+
128130

129131
const imgOnload = (img: HTMLImageElement) => {
130132
img.onload = function () {
@@ -213,7 +215,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
213215
draggable={false}
214216
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
215217
fallback={DEFAULT_IMG_URL}
216-
onClick={ComponentClickHandler({onEvent: props.onEvent})}
218+
onClick={() => handleClickEvent()}
217219
/>
218220
</div>
219221
</Container>

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import { useResizeDetector } from "react-resize-detector";
4141
import { useContext } from "react";
4242
import { Tooltip } from "antd";
4343
import { AssetType, IconscoutControl } from "@lowcoder-ee/comps/controls/iconscoutControl";
44-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
44+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
4545

4646
const Container = styled.div<{ $style: any }>`
4747
height: 100%;
@@ -213,6 +213,9 @@ let ButtonTmpComp = (function () {
213213

214214
const imgRef = useRef<HTMLDivElement>(null);
215215
const conRef = useRef<HTMLDivElement>(null);
216+
217+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
218+
216219
useEffect(() => {
217220
if (height && width) {
218221
onResize();
@@ -286,7 +289,7 @@ let ButtonTmpComp = (function () {
286289
}
287290
onClick={() =>
288291
isDefault(props.type)
289-
? ComponentClickHandler({onEvent: props.onEvent})()
292+
? handleClickEvent()
290293
: submitForm(editorState, props.form)
291294
}
292295
>

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import styled from "styled-components";
1010
import { IconControl } from "comps/controls/iconControl";
1111
import { hasIcon } from "comps/utils";
1212
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
13-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
13+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
1414

1515
const InputNumberWrapper = styled.div`
1616
.ant-input-number {
@@ -71,6 +71,8 @@ type NumberEditProps = {
7171
};
7272

7373
const ColumnNumberView = React.memo((props: NumberViewProps) => {
74+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent ?? (() => {})})
75+
7476
const formattedValue = useMemo(() => {
7577
let result = !props.float ? Math.floor(props.value) : props.value;
7678
if (props.float) {
@@ -80,7 +82,7 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
8082
}, [props.value, props.float, props.precision]);
8183

8284
const handleClick = useCallback(() => {
83-
props.onEvent && ComponentClickHandler({onEvent: props.onEvent})()
85+
handleClickEvent()
8486
}, [props.onEvent]);
8587

8688
return (

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { optionsControl } from "comps/controls/optionsControl";
1717
import { BoolControl } from "comps/controls/boolControl";
1818
import { dropdownControl } from "comps/controls/dropdownControl";
1919
import { JSONObject } from "util/jsonTypes";
20-
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
20+
import { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
2121

2222
const MacaroneList = [
2323
'#fde68a',
@@ -100,6 +100,8 @@ const MemoizedAvatar = React.memo(({
100100
onItemEvent?: (event: string) => void;
101101
}) => {
102102
const mountedRef = useRef(true);
103+
const handleClickEvent = useCompClickEventHandler({onEvent})
104+
103105

104106
// Cleanup on unmount
105107
useEffect(() => {
@@ -117,7 +119,7 @@ const MemoizedAvatar = React.memo(({
117119
}
118120

119121
// Then trigger main component event
120-
ComponentClickHandler({onEvent})()
122+
handleClickEvent()
121123
}, [onEvent, onItemEvent]);
122124

123125
return (

0 commit comments

Comments
 (0)