Movatterモバイル変換

[0]ホーム
URL:

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

Commitdf38a03

Browse files
committed
Optimizations - Added hook for click event handlers
1 parentfe1deda commitdf38a03

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
constAvatarWrapper=styled(Avatar)<AvatarProps&{$cursorPointer?:boolean,$style:AvatarStyleType}>`
@@ -143,6 +143,8 @@ const childrenMap = {
143143
constAvatarView=(props:RecordConstructorToView<typeofchildrenMap>)=>{
144144
const{ shape, title, src, iconSize}=props;
145145
constcomp=useContext(EditorContext).getUICompByName(useContext(CompNameContext));
146+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
147+
146148
// const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
147149
consthasIcon=props.options.findIndex((option)=>(option.prefixIconasReactElement)?.props.value)>-1;
148150
constitems=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
constMacaroneList=[
2525
'#fde68a',
@@ -106,6 +106,8 @@ const childrenMap = {
106106
};
107107

108108
constAvatarGroupView=(props:RecordConstructorToView<typeofchildrenMap>&{dispatch:(action:CompAction)=>void;})=>{
109+
consthandleClickEvent=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",itemasJSONObject,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
constFormLabel=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+
importReactfrom"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
importstyledfrom"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
constStyledFloatButton=styled(FloatButton)<{
2323
$animationStyle:AnimationStyleType;
@@ -99,21 +99,51 @@ const childrenMap = {
9999
dot:BoolControl,
100100
};
101101

102+
constFloatButtonItem=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+
consthandleClickEvent=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
constFloatButtonView=(props:RecordConstructorToView<typeofchildrenMap>)=>{
103135
constrenderButton=(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{defaultasCloseOutlined}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+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
140+
139141
// Integrate the comment list with the names in the original mention list
140142
constmergeAllMentionList=(mentionList:any)=>{
141143
setMentionList(
@@ -177,7 +179,7 @@ const CommentCompBase = (
177179
constgenerateCommentAvatar=(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
constconRef=useRef<HTMLDivElement>(null);
206206
const[width,setWidth]=useState(0);
207207
const[height,setHeight]=useState(0);
208+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
209+
constactionHandlers=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&&<imgsrc={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
constContainer=styled.div<{
3939
$sourceMode:string;
@@ -96,6 +96,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
9696
constconRef=useRef<HTMLDivElement>(null);
9797
const[width,setWidth]=useState(0);
9898
const[height,setHeight]=useState(0);
99+
consthandleClickEvent=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
constContainer=styled.div<{
4444
$style:ImageStyleType|undefined,
@@ -125,6 +125,8 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
125125
constconRef=useRef<HTMLDivElement>(null);
126126
const[width,setWidth]=useState(0);
127127
const[height,setHeight]=useState(0);
128+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
129+
128130

129131
constimgOnload=(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
constContainer=styled.div<{$style:any}>`
4747
height: 100%;
@@ -213,6 +213,9 @@ let ButtonTmpComp = (function () {
213213

214214
constimgRef=useRef<HTMLDivElement>(null);
215215
constconRef=useRef<HTMLDivElement>(null);
216+
217+
consthandleClickEvent=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
constInputNumberWrapper=styled.div`
1616
.ant-input-number {
@@ -71,6 +71,8 @@ type NumberEditProps = {
7171
};
7272

7373
constColumnNumberView=React.memo((props:NumberViewProps)=>{
74+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent??(()=>{})})
75+
7476
constformattedValue=useMemo(()=>{
7577
letresult=!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
consthandleClick=useCallback(()=>{
83-
props.onEvent&&ComponentClickHandler({onEvent:props.onEvent})()
85+
handleClickEvent()
8486
},[props.onEvent]);
8587

8688
return(

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp