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

Commit5396230

Browse files
Merge pull request#1754 from kamalqureshi/doubleClick_event_component
Added double click to almost all components
2 parents6923e1b +b454a7f commit5396230

21 files changed

+207
-77
lines changed

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { IconControl } from "comps/controls/iconControl";
2525
import{
2626
clickEvent,
2727
eventHandlerControl,
28+
doubleClickEvent,
2829
}from"../controls/eventHandlerControl";
2930
import{Avatar,AvatarProps,Badge,Dropdown,Menu}from"antd";
3031
import{LeftRightControl,dropdownControl}from"../controls/dropdownControl";
@@ -34,6 +35,8 @@ import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
3435
import{DropdownOptionControl}from"../controls/optionsControl";
3536
import{ReactElement,useContext,useEffect}from"react";
3637
import{CompNameContext,EditorContext}from"../editorState";
38+
import{useCompClickEventHandler}from"@lowcoder-ee/comps/utils/useCompClickEventHandler";
39+
3740

3841
constAvatarWrapper=styled(Avatar)<AvatarProps&{$cursorPointer?:boolean,$style:AvatarStyleType}>`
3942
background:${(props)=>props.$style.background};
@@ -106,7 +109,7 @@ padding: ${props=>props.$style.padding};
106109
background:${props=>props.$style.background};
107110
text-decoration:${props=>props.$style.textDecoration};
108111
`
109-
constEventOptions=[clickEvent]asconst;
112+
constEventOptions=[clickEvent,doubleClickEvent]asconst;
110113
constsharpOptions=[
111114
{label:trans("avatarComp.square"),value:"square"},
112115
{label:trans("avatarComp.circle"),value:"circle"},
@@ -140,6 +143,8 @@ const childrenMap = {
140143
constAvatarView=(props:RecordConstructorToView<typeofchildrenMap>)=>{
141144
const{ shape, title, src, iconSize}=props;
142145
constcomp=useContext(EditorContext).getUICompByName(useContext(CompNameContext));
146+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
147+
143148
// const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
144149
consthasIcon=props.options.findIndex((option)=>(option.prefixIconasReactElement)?.props.value)>-1;
145150
constitems=props.options
@@ -181,8 +186,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
181186
shape={shape}
182187
$style={props.avatarStyle}
183188
src={src.value}
184-
// $cursorPointer={eventsCount > 0}
185-
onClick={()=>props.onEvent("click")}
189+
onClick={handleClickEvent}
186190
>
187191
{title.value}
188192
</AvatarWrapper>

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
88
import{trans}from"i18n";
99
import{NumberControl,StringControl}from"comps/controls/codeControl";
1010
import{Avatar,Tooltip}from"antd";
11-
import{clickEvent,eventHandlerControl,refreshEvent}from"../controls/eventHandlerControl";
11+
import{clickEvent,doubleClickEvent,eventHandlerControl,refreshEvent}from"../controls/eventHandlerControl";
1212
importstyledfrom"styled-components";
1313
import{useContext,ReactElement,useEffect}from"react";
1414
import{MultiCompBuilder,stateComp,withDefault}from"../generators";
@@ -19,6 +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{useCompClickEventHandler}from"../utils/useCompClickEventHandler";
2223

2324
constMacaroneList=[
2425
'#fde68a',
@@ -77,7 +78,7 @@ const DropdownOption = new MultiCompBuilder(
7778
))
7879
.build();
7980

80-
constEventOptions=[clickEvent,refreshEvent]asconst;
81+
constEventOptions=[clickEvent,refreshEvent,doubleClickEvent]asconst;
8182

8283
exportconstalignOptions=[
8384
{label:<AlignLeft/>,value:"flex-start"},
@@ -105,6 +106,8 @@ const childrenMap = {
105106
};
106107

107108
constAvatarGroupView=(props:RecordConstructorToView<typeofchildrenMap>&{dispatch:(action:CompAction)=>void;})=>{
109+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
110+
108111
return(
109112
<Container
110113
$style={props.style}
@@ -125,7 +128,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
125128
}}
126129
size={props.avatarSize}
127130
onClick={()=>{
128-
props.onEvent("click")
131+
handleClickEvent();
129132
props.dispatch(changeChildAction("currentAvatar",itemasJSONObject,false));
130133
}}
131134
>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +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/useCompClickEventHandler";
3233

3334
constFormLabel=styled(CommonBlueLabel)`
3435
font-size: 13px;
@@ -181,6 +182,7 @@ const ButtonPropertyView = React.memo((props: {
181182
constButtonView=React.memo((props:ToViewReturn<ChildrenType>)=>{
182183
consteditorState=useContext(EditorContext);
183184
constmountedRef=useRef<boolean>(true);
185+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent});
184186

185187
useEffect(()=>{
186188
return()=>{
@@ -193,7 +195,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
193195

194196
try{
195197
if(isDefault(props.type)){
196-
props.onEvent("click");
198+
handleClickEvent();
197199
}else{
198200
submitForm(editorState,props.form);
199201
}

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

Lines changed: 42 additions & 11 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,7 +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{useCompClickEventHandler}from"@lowcoder-ee/comps/utils/useCompClickEventHandler";
2021

2122
constStyledFloatButton=styled(FloatButton)<{
2223
$animationStyle:AnimationStyleType;
@@ -98,21 +99,51 @@ const childrenMap = {
9899
dot:BoolControl,
99100
};
100101

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+
101134
constFloatButtonView=(props:RecordConstructorToView<typeofchildrenMap>)=>{
102135
constrenderButton=(button:any,onlyOne?:boolean)=>{
103136
return!button?.hidden ?(
104-
<StyledFloatButton
105-
$animationStyle={props.animationStyle}
137+
<FloatButtonItem
106138
key={button?.id}
107-
icon={button?.icon}
108-
onClick={()=>button.onEvent("click")}
109-
tooltip={button?.label}
110-
description={button?.description}
111-
badge={{count:button?.badge,color:props.badgeStyle.badgeColor,dot:props?.dot}}
112-
type={onlyOne ?props.buttonTheme :'default'}
139+
button={button}
140+
animationStyle={props.animationStyle}
141+
badgeStyle={props.badgeStyle}
142+
buttonTheme={onlyOne ?props.buttonTheme :'default'}
113143
shape={props.shape}
114-
/>)
115-
:''
144+
dot={props.dot}
145+
/>
146+
) :'';
116147
}
117148
return(
118149
<Wrapper$badgeStyle={props.badgeStyle}$style={props.style}>

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@ import {
2525
eventHandlerControl,
2626
deleteEvent,
2727
mentionEvent,
28-
}from"comps/controls/eventHandlerControl";
29-
28+
doubleClickEvent,
29+
}from"comps/controls/eventHandlerControl";
3030
import{EditorContext}from"comps/editorState";
3131

32+
3233
// Introducing styles
3334
import{
3435
AnimationStyle,
@@ -66,6 +67,7 @@ import dayjs from "dayjs";
6667
// import "dayjs/locale/zh-cn";
6768
import{getInitialsAndColorCode}from"util/stringUtils";
6869
import{defaultasCloseOutlined}from"@ant-design/icons/CloseOutlined";
70+
import{useCompClickEventHandler}from"@lowcoder-ee/comps/utils/useCompClickEventHandler";
6971

7072
dayjs.extend(relativeTime);
7173
// dayjs.locale("zh-cn");
@@ -80,6 +82,7 @@ dayjs.extend(relativeTime);
8082

8183
constEventOptions=[
8284
clickEvent,
85+
doubleClickEvent,
8386
submitEvent,
8487
deleteEvent,
8588
mentionEvent,
@@ -133,6 +136,8 @@ const CommentCompBase = (
133136
const[commentListData,setCommentListData]=useState<commentDataTYPE[]>([]);
134137
const[prefix,setPrefix]=useState<PrefixType>("@");
135138
const[context,setContext]=useState<string>("");
139+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
140+
136141
// Integrate the comment list with the names in the original mention list
137142
constmergeAllMentionList=(mentionList:any)=>{
138143
setMentionList(
@@ -174,7 +179,7 @@ const CommentCompBase = (
174179
constgenerateCommentAvatar=(item:commentDataTYPE)=>{
175180
return(
176181
<Avatar
177-
onClick={()=>props.onEvent("click")}
182+
onClick={handleClickEvent}
178183
// If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode
179184
style={{
180185
backgroundColor:item?.user?.avatar
@@ -290,7 +295,9 @@ const CommentCompBase = (
290295
<List.Item.Meta
291296
avatar={generateCommentAvatar(item)}
292297
title={
293-
<divonClick={()=>props.onEvent("click")}>
298+
<div
299+
onClick={handleClickEvent}
300+
>
294301
<a>{item?.user?.name}</a>
295302
<Tooltip
296303
title={

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +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{useCompClickEventHandler}from"@lowcoder-ee/comps/utils/useCompClickEventHandler";
2425

2526
const{ Meta}=Card;
2627

@@ -196,7 +197,6 @@ export const ContainerBaseComp = (function () {
196197

197198
returnnewContainerCompBuilder(childrenMap,(props)=>{
198199
props.container.showHeader=false;
199-
// 注入容器参数
200200
props.container.style=Object.assign(props.container.style,{
201201
CONTAINER_BODY_PADDING:props.style.containerBodyPadding,
202202
border:'#00000000',
@@ -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={()=>props.onEvent('click')}
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={()=>item.onEvent('click')}
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: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ import { AutoHeightControl } from "../controls/autoHeightControl";
2727
import{
2828
clickEvent,
2929
eventHandlerControl,
30+
doubleClickEvent,
3031
}from"../controls/eventHandlerControl";
3132
import{useContext}from"react";
3233
import{EditorContext}from"comps/editorState";
3334
import{AssetType,IconscoutControl}from"@lowcoder-ee/comps/controls/iconscoutControl";
3435
import{dropdownControl}from"../controls/dropdownControl";
36+
import{useCompClickEventHandler}from"../utils/useCompClickEventHandler";
3537

3638
constContainer=styled.div<{
3739
$sourceMode:string;
@@ -72,7 +74,7 @@ const Container = styled.div<{
7274
`}
7375
`;
7476

75-
constEventOptions=[clickEvent]asconst;
77+
constEventOptions=[clickEvent,doubleClickEvent]asconst;
7678

7779
constModeOptions=[
7880
{label:"Standard",value:"standard"},
@@ -94,6 +96,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
9496
constconRef=useRef<HTMLDivElement>(null);
9597
const[width,setWidth]=useState(0);
9698
const[height,setHeight]=useState(0);
99+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
97100

98101
useEffect(()=>{
99102
if(height&&width){
@@ -134,7 +137,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
134137
$sourceMode={props.sourceMode}
135138
$animationStyle={props.animationStyle}
136139
style={style}
137-
onClick={()=>props.onEvent("click")}
140+
onClick={handleClickEvent}
138141
>
139142
{props.sourceMode==='standard'
140143
?(props.icon||'')

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Section, sectionNames } from "lowcoder-design";
33
import{
44
clickEvent,
55
eventHandlerControl,
6+
doubleClickEvent,
67
}from"../controls/eventHandlerControl";
78
import{StringStateControl}from"../controls/codeStateControl";
89
import{UICompBuilder,withDefault}from"../generators";
@@ -37,6 +38,7 @@ import { StringControl } from "../controls/codeControl";
3738
import{PositionControl}from"comps/controls/dropdownControl";
3839
import{dropdownControl}from"../controls/dropdownControl";
3940
import{AssetType,IconscoutControl}from"../controls/iconscoutControl";
41+
import{useCompClickEventHandler}from"../utils/useCompClickEventHandler";
4042

4143
constContainer=styled.div<{
4244
$style:ImageStyleType|undefined,
@@ -112,7 +114,7 @@ const getStyle = (style: ImageStyleType) => {
112114
`;
113115
};
114116

115-
constEventOptions=[clickEvent]asconst;
117+
constEventOptions=[clickEvent,doubleClickEvent]asconst;
116118
constModeOptions=[
117119
{label:"URL",value:"standard"},
118120
{label:"Asset Library",value:"asset-library"},
@@ -123,6 +125,8 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
123125
constconRef=useRef<HTMLDivElement>(null);
124126
const[width,setWidth]=useState(0);
125127
const[height,setHeight]=useState(0);
128+
consthandleClickEvent=useCompClickEventHandler({onEvent:props.onEvent})
129+
126130

127131
constimgOnload=(img:HTMLImageElement)=>{
128132
img.onload=function(){
@@ -211,7 +215,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
211215
draggable={false}
212216
preview={props.supportPreview ?{src:props.previewSrc||props.src.value} :false}
213217
fallback={DEFAULT_IMG_URL}
214-
onClick={()=>props.onEvent("click")}
218+
onClick={handleClickEvent}
215219
/>
216220
</div>
217221
</Container>

0 commit comments

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