Skip to content

Commit 4dbce10

Browse files
kamal-qureshikamal-qureshi
committed
Updated Double Click event on all components
1 parent a538642 commit 4dbce10

File tree

20 files changed

+85
-87
lines changed

20 files changed

+85
-87
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ 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";
39+
3840

3941
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
4042
background: ${(props) => props.$style.background};
@@ -182,9 +184,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
182184
shape={shape}
183185
$style={props.avatarStyle}
184186
src={src.value}
185-
// $cursorPointer={eventsCount > 0}
186-
onClick={() => props.onEvent("click")}
187-
onDoubleClick={() => props.onEvent("doubleClick")}
187+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
188188
>
189189
{title.value}
190190
</AvatarWrapper>

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -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 { ComponentClickHandler } from "../utils/componentClickHandler";
2223

2324
const MacaroneList = [
2425
'#fde68a',
@@ -125,12 +126,9 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
125126
}}
126127
size={props.avatarSize}
127128
onClick={() => {
128-
props.onEvent("click")
129+
ComponentClickHandler({onEvent: props.onEvent})();
129130
props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
130131
}}
131-
onDoubleClick={() => {
132-
props.onEvent("doubleClick")
133-
}}
134132
>
135133
{item.label}
136134
</Avatar>

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

Lines changed: 2 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 { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
3233

3334
const FormLabel = styled(CommonBlueLabel)`
3435
font-size: 13px;
@@ -193,7 +194,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
193194

194195
try {
195196
if (isDefault(props.type)) {
196-
props.onEvent("click");
197+
ComponentClickHandler({onEvent: props.onEvent})()
197198
} else {
198199
submitForm(editorState, props.form);
199200
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import styled from "styled-components";
1717
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
1818
import { manualOptionsControl } from "comps/controls/optionsControl";
1919
import { useContext, useEffect } from "react";
20+
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
2021

2122
const StyledFloatButton = styled(FloatButton)<{
2223
$animationStyle: AnimationStyleType;
@@ -105,7 +106,7 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
105106
$animationStyle={props.animationStyle}
106107
key={button?.id}
107108
icon={button?.icon}
108-
onClick={() => button.onEvent("click")}
109+
onClick={ComponentClickHandler({onEvent: button.onEvent})}
109110
tooltip={button?.label}
110111
description={button?.description}
111112
badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ import {
2626
deleteEvent,
2727
mentionEvent,
2828
doubleClickEvent,
29-
} from "comps/controls/eventHandlerControl";
30-
29+
} from "comps/controls/eventHandlerControl";
3130
import { EditorContext } from "comps/editorState";
3231

32+
3333
// Introducing styles
3434
import {
3535
AnimationStyle,
@@ -67,6 +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";
7071

7172
dayjs.extend(relativeTime);
7273
// dayjs.locale("zh-cn");
@@ -176,7 +177,7 @@ const CommentCompBase = (
176177
const generateCommentAvatar = (item: commentDataTYPE) => {
177178
return (
178179
<Avatar
179-
onClick={() => props.onEvent("click")}
180+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
180181
// If there is an avatar, no background colour is set, and if displayName is not null, displayName is called using getInitialsAndColorCode
181182
style={{
182183
backgroundColor: item?.user?.avatar
@@ -293,8 +294,7 @@ const CommentCompBase = (
293294
avatar={generateCommentAvatar(item)}
294295
title={
295296
<div
296-
onClick={() => props.onEvent("click")}
297-
onDoubleClick={() => props.onEvent("doubleClick")}
297+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
298298
>
299299
<a>{item?.user?.name}</a>
300300
<Tooltip

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

Lines changed: 3 additions & 3 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 { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
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',
@@ -233,7 +233,7 @@ export const ContainerBaseComp = (function () {
233233
$cardType={props.cardType}
234234
onMouseEnter={() => props.onEvent('focus')}
235235
onMouseLeave={() => props.onEvent('blur')}
236-
onClick={() => props.onEvent('click')}
236+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
237237
>
238238
<Card
239239
style={{ width: width, height: '100%' }}
@@ -249,7 +249,7 @@ export const ContainerBaseComp = (function () {
249249
props.actionOptions.filter(item => !item.hidden).map(item => {
250250
return (
251251
<IconWrapper
252-
onClick={() => item.onEvent('click')}
252+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
253253
disabled={item.disabled}
254254
$style={props.style}
255255
>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +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";
3637

3738
const Container = styled.div<{
3839
$sourceMode: string;
@@ -135,8 +136,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
135136
$sourceMode={props.sourceMode}
136137
$animationStyle={props.animationStyle}
137138
style={style}
138-
onClick={() => props.onEvent("click")}
139-
onDoubleClick={() => props.onEvent("doubleClick")}
139+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
140140
>
141141
{ props.sourceMode === 'standard'
142142
? (props.icon || '')

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +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";
4142

4243
const Container = styled.div<{
4344
$style: ImageStyleType | undefined,
@@ -212,8 +213,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
212213
draggable={false}
213214
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
214215
fallback={DEFAULT_IMG_URL}
215-
onClick={() => props.onEvent("click")}
216-
onDoubleClick={() => props.onEvent("doubleClick")}
216+
onClick={ComponentClickHandler({onEvent: props.onEvent})}
217217
/>
218218
</div>
219219
</Container>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +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";
4445

4546
const Container = styled.div<{ $style: any }>`
4647
height: 100%;
@@ -285,7 +286,7 @@ let ButtonTmpComp = (function () {
285286
}
286287
onClick={() =>
287288
isDefault(props.type)
288-
? props.onEvent("click")
289+
? ComponentClickHandler({onEvent: props.onEvent})()
289290
: submitForm(editorState, props.form)
290291
}
291292
>

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { withDefault } from "comps/generators";
99
import styled from "styled-components";
1010
import { IconControl } from "comps/controls/iconControl";
1111
import { hasIcon } from "comps/utils";
12-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
12+
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
13+
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
1314

1415
const InputNumberWrapper = styled.div`
1516
.ant-input-number {
@@ -33,7 +34,7 @@ const NumberViewWrapper = styled.div`
3334
gap: 4px;
3435
`;
3536

36-
const NumberEventOptions = [clickEvent] as const;
37+
const NumberEventOptions = [clickEvent, doubleClickEvent] as const;
3738

3839
const childrenMap = {
3940
text: NumberControl,
@@ -79,9 +80,7 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
7980
}, [props.value, props.float, props.precision]);
8081

8182
const handleClick = useCallback(() => {
82-
if (props.onEvent) {
83-
props.onEvent("click");
84-
}
83+
props.onEvent && ComponentClickHandler({onEvent: props.onEvent})()
8584
}, [props.onEvent]);
8685

8786
return (

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +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";
2021

2122
const MacaroneList = [
2223
'#fde68a',
@@ -116,14 +117,9 @@ const MemoizedAvatar = React.memo(({
116117
}
117118

118119
// Then trigger main component event
119-
onEvent("click");
120+
ComponentClickHandler({onEvent})()
120121
}, [onEvent, onItemEvent]);
121122

122-
const handleDoubleClick = useCallback(() => {
123-
if (!mountedRef.current) return;
124-
onEvent("doubleClick");
125-
}, [onEvent]);
126-
127123
return (
128124
<Tooltip title={item.Tooltip} key={index}>
129125
<Avatar
@@ -136,7 +132,6 @@ const MemoizedAvatar = React.memo(({
136132
}}
137133
size={avatarSize}
138134
onClick={handleClick}
139-
onDoubleClick={handleDoubleClick}
140135
>
141136
{item.label}
142137
</Avatar>

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
1616
import styled from "styled-components";
1717
import { ButtonType } from "antd/es/button";
1818
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
19+
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
1920

2021
const StyledButton = styled(Button100)`
2122
display: flex;
@@ -59,24 +60,18 @@ const DropdownMenu = React.memo(({ items, options, onEvent }: { items: any[]; op
5960
const itemIndex = options.findIndex(option => option.label === item?.label);
6061
item && options[itemIndex]?.onEvent("click");
6162
// Also trigger the dropdown's main event handler
62-
onEvent?.("click");
63+
onEvent && ComponentClickHandler({onEvent})();
6364
}, [items, options, onEvent]);
6465

6566
const handleMouseDown = useCallback((e: React.MouseEvent) => {
6667
e.stopPropagation();
6768
e.preventDefault();
6869
}, []);
6970

70-
const handleDoubleClick = useCallback((e: React.MouseEvent) => {
71-
if (!mountedRef.current) return;
72-
onEvent?.("doubleClick");
73-
}, [onEvent]);
74-
7571
return (
7672
<Menu
7773
items={items}
7874
onClick={handleClick}
79-
onDoubleClick={handleDoubleClick}
8075
onMouseDown={handleMouseDown}
8176
/>
8277
);

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import styled, { css } from "styled-components";
1212
import { styleControl } from "comps/controls/styleControl";
1313
import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
1414
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
15+
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
1516

1617
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1718

@@ -40,21 +41,14 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
4041
export const ColumnLink = React.memo(({ disabled, label, onEvent }: { disabled: boolean; label: string; onEvent?: (eventName: string) => void }) => {
4142
const handleClick = useCallback(() => {
4243
if (!disabled && onEvent) {
43-
onEvent("click");
44-
}
45-
}, [disabled, onEvent]);
46-
47-
const handleDoubleClick = useCallback(() => {
48-
if (!disabled && onEvent) {
49-
onEvent("doubleClick");
44+
ComponentClickHandler({onEvent})();
5045
}
5146
}, [disabled, onEvent]);
5247

5348
return (
5449
<StyledLink
5550
$disabled={disabled}
5651
onClick={handleClick}
57-
onDoubleClick={handleDoubleClick}
5852
>
5953
{label}
6054
</StyledLink>

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

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import styled from "styled-components";
1111
import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
1212
import { LightActiveTextColor, PrimaryColor } from "constants/style";
1313
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
14+
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
1415

1516
const MenuLinkWrapper = styled.div`
1617
> a {
@@ -73,22 +74,14 @@ const OptionItem = new MultiCompBuilder(
7374
const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
7475
const handleClick = useCallback(() => {
7576
if (!option.disabled) {
76-
if (option.onClick) {
77-
option.onClick();
78-
}
79-
if (option.onDoubleClick) {
80-
option.onDoubleClick();
81-
}
82-
if (option.onEvent) {
83-
option.onEvent("click");
84-
}
85-
86-
// Trigger the main component's event handler
87-
if (onMainEvent) {
88-
onMainEvent("click");
89-
}
77+
// Handle both option's event and main event through ComponentClickHandler
78+
const combinedHandler = (event: "click" | "doubleClick") => {
79+
option.onEvent?.(event);
80+
onMainEvent?.(event);
81+
};
82+
ComponentClickHandler({onEvent: combinedHandler})();
9083
}
91-
}, [option.disabled, option.onClick, option.onEvent, onMainEvent, option.onDoubleClick]);
84+
}, [option.disabled, option.onEvent, onMainEvent]);
9285

9386
return (
9487
<MenuLinkWrapper>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import { IconControl } from "comps/controls/iconControl";
77
import { hasIcon } from "comps/utils";
88
import React, { useCallback, useMemo } from "react";
99
import { RecordConstructorToComp } from "lowcoder-core";
10-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
10+
import { clickEvent, doubleClickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
1111
import styled from "styled-components";
12+
import { ComponentClickHandler } from "@lowcoder-ee/comps/utils/componentClickHandler";
1213

13-
const TextEventOptions = [clickEvent] as const;
14+
const TextEventOptions = [clickEvent, doubleClickEvent] as const;
1415

1516
const TextWrapper = styled.div`
1617
cursor: pointer;
@@ -50,9 +51,8 @@ interface SimpleTextEditViewProps {
5051

5152
const SimpleTextContent = React.memo(({ value, prefixIcon, suffixIcon, onEvent }: SimpleTextContentProps) => {
5253
const handleClick = useCallback(() => {
53-
if (onEvent) {
54-
onEvent("click");
55-
}
54+
console.log("This comp");
55+
onEvent && ComponentClickHandler({onEvent})()
5656
}, [onEvent]);
5757

5858
return (

0 commit comments

Comments
 (0)