Skip to content

Commit 5396230

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #1754 from kamalqureshi/doubleClick_event_component
Added double click to almost all components
2 parents 6923e1b + b454a7f commit 5396230

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
const AvatarWrapper = 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-
const EventOptions = [clickEvent] as const;
112+
const EventOptions = [clickEvent, doubleClickEvent] as const;
110113
const sharpOptions = [
111114
{ label: trans("avatarComp.square"), value: "square" },
112115
{ label: trans("avatarComp.circle"), value: "circle" },
@@ -140,6 +143,8 @@ const childrenMap = {
140143
const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
141144
const { shape, title, src, iconSize } = props;
142145
const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
146+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
147+
143148
// const eventsCount = comp ? Object.keys(comp?.children.comp.children.onEvent.children).length : 0;
144149
const hasIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
145150
const items = 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
import styled from "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
const MacaroneList = [
2425
'#fde68a',
@@ -77,7 +78,7 @@ const DropdownOption = new MultiCompBuilder(
7778
))
7879
.build();
7980

80-
const EventOptions = [clickEvent, refreshEvent] as const;
81+
const EventOptions = [clickEvent, refreshEvent, doubleClickEvent] as const;
8182

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

107108
const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
109+
const handleClickEvent = 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", item as JSONObject, 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
const FormLabel = styled(CommonBlueLabel)`
3435
font-size: 13px;
@@ -181,6 +182,7 @@ const ButtonPropertyView = React.memo((props: {
181182
const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
182183
const editorState = useContext(EditorContext);
183184
const mountedRef = useRef<boolean>(true);
185+
const handleClickEvent = 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+
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,7 +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 { useCompClickEventHandler } from "@lowcoder-ee/comps/utils/useCompClickEventHandler";
2021

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

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+
101134
const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) => {
102135
const renderButton = (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 { default as CloseOutlined } 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
const EventOptions = [
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+
const handleClickEvent = useCompClickEventHandler({onEvent: props.onEvent})
140+
136141
// Integrate the comment list with the names in the original mention list
137142
const mergeAllMentionList = (mentionList: any) => {
138143
setMentionList(
@@ -174,7 +179,7 @@ const CommentCompBase = (
174179
const generateCommentAvatar = (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-
<div onClick={() => 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
return new ContainerCompBuilder(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
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={() => 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 && <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={() => 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
const Container = styled.div<{
3739
$sourceMode: string;
@@ -72,7 +74,7 @@ const Container = styled.div<{
7274
`}
7375
`;
7476

75-
const EventOptions = [clickEvent] as const;
77+
const EventOptions = [clickEvent, doubleClickEvent] as const;
7678

7779
const ModeOptions = [
7880
{ label: "Standard", value: "standard" },
@@ -94,6 +96,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
9496
const conRef = useRef<HTMLDivElement>(null);
9597
const [width, setWidth] = useState(0);
9698
const [height, setHeight] = useState(0);
99+
const handleClickEvent = 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
const Container = styled.div<{
4244
$style: ImageStyleType | undefined,
@@ -112,7 +114,7 @@ const getStyle = (style: ImageStyleType) => {
112114
`;
113115
};
114116

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

127131
const imgOnload = (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)