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)
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