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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy