Skip to content

Commit e9ec6de

Browse files
kamal-qureshikamal-qureshi
committed
Added double click to almost all components
1 parent 3637da2 commit e9ec6de

File tree

14 files changed

+83
-26
lines changed

14 files changed

+83
-26
lines changed

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

Lines changed: 3 additions & 1 deletion
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";
@@ -106,7 +107,7 @@ padding: ${props=>props.$style.padding};
106107
background: ${props=>props.$style.background};
107108
text-decoration: ${props => props.$style.textDecoration};
108109
`
109-
const EventOptions = [clickEvent] as const;
110+
const EventOptions = [clickEvent, doubleClickEvent] as const;
110111
const sharpOptions = [
111112
{ label: trans("avatarComp.square"), value: "square" },
112113
{ label: trans("avatarComp.circle"), value: "circle" },
@@ -183,6 +184,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
183184
src={src.value}
184185
// $cursorPointer={eventsCount > 0}
185186
onClick={() => props.onEvent("click")}
187+
onDoubleClick={() => props.onEvent("doubleClick")}
186188
>
187189
{title.value}
188190
</AvatarWrapper>

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

Lines changed: 5 additions & 2 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";
@@ -77,7 +77,7 @@ const DropdownOption = new MultiCompBuilder(
7777
))
7878
.build();
7979

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

8282
export const alignOptions = [
8383
{ label: <AlignLeft />, value: "flex-start" },
@@ -128,6 +128,9 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
128128
props.onEvent("click")
129129
props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
130130
}}
131+
onDoubleClick={() => {
132+
props.onEvent("doubleClick")
133+
}}
131134
>
132135
{item.label}
133136
</Avatar>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
eventHandlerControl,
2626
deleteEvent,
2727
mentionEvent,
28+
doubleClickEvent,
2829
} from "comps/controls/eventHandlerControl";
2930

3031
import { EditorContext } from "comps/editorState";
@@ -80,6 +81,7 @@ dayjs.extend(relativeTime);
8081

8182
const EventOptions = [
8283
clickEvent,
84+
doubleClickEvent,
8385
submitEvent,
8486
deleteEvent,
8587
mentionEvent,
@@ -290,7 +292,10 @@ const CommentCompBase = (
290292
<List.Item.Meta
291293
avatar={generateCommentAvatar(item)}
292294
title={
293-
<div onClick={() => props.onEvent("click")}>
295+
<div
296+
onClick={() => props.onEvent("click")}
297+
onDoubleClick={() => props.onEvent("doubleClick")}
298+
>
294299
<a>{item?.user?.name}</a>
295300
<Tooltip
296301
title={

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ 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";
@@ -72,7 +73,7 @@ const Container = styled.div<{
7273
`}
7374
`;
7475

75-
const EventOptions = [clickEvent] as const;
76+
const EventOptions = [clickEvent, doubleClickEvent] as const;
7677

7778
const ModeOptions = [
7879
{ label: "Standard", value: "standard" },
@@ -135,6 +136,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
135136
$animationStyle={props.animationStyle}
136137
style={style}
137138
onClick={() => props.onEvent("click")}
139+
onDoubleClick={() => props.onEvent("doubleClick")}
138140
>
139141
{ props.sourceMode === 'standard'
140142
? (props.icon || '')

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

Lines changed: 3 additions & 1 deletion
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";
@@ -112,7 +113,7 @@ const getStyle = (style: ImageStyleType) => {
112113
`;
113114
};
114115

115-
const EventOptions = [clickEvent] as const;
116+
const EventOptions = [clickEvent, doubleClickEvent] as const;
116117
const ModeOptions = [
117118
{ label: "URL", value: "standard" },
118119
{ label: "Asset Library", value: "asset-library" },
@@ -212,6 +213,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
212213
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
213214
fallback={DEFAULT_IMG_URL}
214215
onClick={() => props.onEvent("click")}
216+
onDoubleClick={() => props.onEvent("doubleClick")}
215217
/>
216218
</div>
217219
</Container>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleCont
99
import { AlignCenter, AlignLeft, AlignRight } from "lowcoder-design";
1010
import { NumberControl } from "comps/controls/codeControl";
1111
import { Avatar, Tooltip } from "antd";
12-
import { clickEvent, eventHandlerControl, refreshEvent } from "comps/controls/eventHandlerControl";
12+
import { clickEvent, eventHandlerControl, refreshEvent, doubleClickEvent } from "comps/controls/eventHandlerControl";
1313
import React, { ReactElement, useCallback, useEffect, useRef } from "react";
1414
import { IconControl } from "comps/controls/iconControl";
1515
import { ColorControl } from "comps/controls/colorControl";
@@ -68,7 +68,7 @@ const DropdownOption = new MultiCompBuilder(
6868
})
6969
.build();
7070

71-
const EventOptions = [clickEvent, refreshEvent] as const;
71+
const EventOptions = [clickEvent, refreshEvent, doubleClickEvent] as const;
7272

7373
export const alignOptions = [
7474
{ label: <AlignLeft />, value: "flex-start" },
@@ -106,6 +106,11 @@ const MemoizedAvatar = React.memo(({
106106
onEvent("click");
107107
}, [onEvent]);
108108

109+
const handleDoubleClick = useCallback(() => {
110+
if (!mountedRef.current) return;
111+
onEvent("doubleClick");
112+
}, [onEvent]);
113+
109114
return (
110115
<Tooltip title={item.Tooltip} key={index}>
111116
<Avatar
@@ -117,6 +122,7 @@ const MemoizedAvatar = React.memo(({
117122
}}
118123
size={avatarSize}
119124
onClick={handleClick}
125+
onDoubleClick={handleDoubleClick}
120126
>
121127
{item.label}
122128
</Avatar>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { ButtonStyle } from "comps/controls/styleControlConstants";
1515
import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
1616
import styled from "styled-components";
1717
import { ButtonType } from "antd/es/button";
18-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
18+
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1919

2020
const StyledButton = styled(Button100)`
2121
display: flex;
@@ -29,7 +29,7 @@ const StyledIconWrapper = styled(IconWrapper)`
2929
margin: 0;
3030
`;
3131

32-
const DropdownEventOptions = [clickEvent] as const;
32+
const DropdownEventOptions = [clickEvent, doubleClickEvent] as const;
3333

3434
const childrenMap = {
3535
buttonType: dropdownControl(ButtonTypeOptions, "primary"),
@@ -67,10 +67,16 @@ const DropdownMenu = React.memo(({ items, options, onEvent }: { items: any[]; op
6767
e.preventDefault();
6868
}, []);
6969

70+
const handleDoubleClick = useCallback((e: React.MouseEvent) => {
71+
if (!mountedRef.current) return;
72+
onEvent?.("doubleClick");
73+
}, [onEvent]);
74+
7075
return (
7176
<Menu
7277
items={items}
7378
onClick={handleClick}
79+
onDoubleClick={handleDoubleClick}
7480
onMouseDown={handleMouseDown}
7581
/>
7682
);

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import { disabledPropertyView } from "comps/utils/propertyUtils";
1111
import styled, { css } from "styled-components";
1212
import { styleControl } from "comps/controls/styleControl";
1313
import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
14-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
14+
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1515

1616
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1717

18-
const LinkEventOptions = [clickEvent] as const;
18+
const LinkEventOptions = [clickEvent, doubleClickEvent] as const;
1919

2020
const childrenMap = {
2121
text: StringControl,
@@ -44,10 +44,17 @@ export const ColumnLink = React.memo(({ disabled, label, onEvent }: { disabled:
4444
}
4545
}, [disabled, onEvent]);
4646

47+
const handleDoubleClick = useCallback(() => {
48+
if (!disabled && onEvent) {
49+
onEvent("doubleClick");
50+
}
51+
}, [disabled, onEvent]);
52+
4753
return (
4854
<StyledLink
4955
$disabled={disabled}
5056
onClick={handleClick}
57+
onDoubleClick={handleDoubleClick}
5158
>
5259
{label}
5360
</StyledLink>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { trans } from "i18n";
1010
import styled from "styled-components";
1111
import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
1212
import { LightActiveTextColor, PrimaryColor } from "constants/style";
13-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
13+
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1414

1515
const MenuLinkWrapper = styled.div`
1616
> a {
@@ -38,7 +38,7 @@ const MenuWrapper = styled.div`
3838
}
3939
`;
4040

41-
const LinksEventOptions = [clickEvent] as const;
41+
const LinksEventOptions = [clickEvent, doubleClickEvent] as const;
4242

4343
// Update OptionItem to include event handlers
4444
const OptionItem = new MultiCompBuilder(
@@ -76,11 +76,15 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
7676
if (option.onClick) {
7777
option.onClick();
7878
}
79+
if (option.onDoubleClick) {
80+
option.onDoubleClick();
81+
}
7982
if (option.onEvent) {
8083
option.onEvent("click");
8184
}
85+
8286
}
83-
}, [option.disabled, option.onClick, option.onEvent]);
87+
}, [option.disabled, option.onClick, option.onEvent, option.onDoubleClick]);
8488

8589
return (
8690
<MenuLinkWrapper>

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { trans } from "i18n";
1111
import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
1212
import { ColumnValueTooltip } from "../simpleColumnTypeComps";
1313
import { styled } from "styled-components";
14-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
14+
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1515

1616
const Wrapper = styled.div`
1717
display: inline-flex;
@@ -79,7 +79,7 @@ const Wrapper = styled.div`
7979
}
8080
`;
8181

82-
const SelectOptionEventOptions = [clickEvent] as const;
82+
const SelectOptionEventOptions = [clickEvent, doubleClickEvent] as const;
8383

8484
// Create a new option type with event handlers for each option
8585
const SelectOptionWithEvents = new MultiCompBuilder(
@@ -144,11 +144,14 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
144144
if (!mountedRef.current) return;
145145
props.onChange(val);
146146
setCurrentValue(val);
147-
148147
// Trigger the specific option's event handler
149148
const selectedOption = props.options.find(option => option.value === val);
150-
if (selectedOption && selectedOption.onEvent) {
151-
selectedOption.onEvent("click");
149+
if (selectedOption?.onEvent) {
150+
if (selectedOption.onEvent.isBind("click")) {
151+
selectedOption.onEvent("click");
152+
} else if (selectedOption.onEvent.isBind("doubleClick")) {
153+
selectedOption.onEvent("doubleClick");
154+
}
152155
}
153156
}, [props.onChange, props.options]);
154157

‎client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import React, { useCallback, useEffect, useMemo } from "react";
1313
import { CSSProperties } from "react";
1414
import { RecordConstructorToComp } from "lowcoder-core";
1515
import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
16-
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
16+
import { clickEvent, eventHandlerControl, doubleClickEvent } from "comps/controls/eventHandlerControl";
1717

1818
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1919

@@ -32,7 +32,7 @@ export const ButtonTypeOptions = [
3232
},
3333
] as const;
3434

35-
const ButtonEventOptions = [clickEvent] as const;
35+
const ButtonEventOptions = [clickEvent, doubleClickEvent] as const;
3636

3737
const childrenMap = {
3838
text: StringControl,
@@ -55,6 +55,10 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
5555
props.onEvent("click");
5656
}, [props.onEvent]);
5757

58+
const handleDoubleClick = useCallback((e: React.MouseEvent) => {
59+
props.onEvent("doubleClick");
60+
}, [props.onEvent]);
61+
5862
const buttonStyle = useMemo(() => ({
5963
margin: 0,
6064
width: iconOnly ? 'auto' : undefined,
@@ -71,6 +75,7 @@ const ButtonStyled = React.memo(({ props }: { props: ToViewReturn<RecordConstruc
7175
$buttonStyle={props.buttonType === "primary" ? style : undefined}
7276
style={buttonStyle}
7377
icon={hasPrefixIcon ? props.prefixIcon : undefined}
78+
onDoubleClick={handleDoubleClick}
7479
>
7580
{/* prevent the button from disappearing */}
7681
{hasText ? props.text : (iconOnly ? null : " ")}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ import { PaddingControl } from "../controls/paddingControl";
2020

2121
import React, { useContext, useEffect, useRef, useMemo } from "react";
2222
import { EditorContext } from "comps/editorState";
23-
import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
23+
import { clickEvent, doubleClickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
2424
import { NewChildren } from "../generators/uiCompBuilder";
2525
import { RecordConstructorToComp } from "lowcoder-core";
2626
import { ToViewReturn } from "../generators/multi";
2727
import { BoolControl } from "../controls/boolControl";
2828

29-
const EventOptions = [clickEvent] as const;
29+
const EventOptions = [clickEvent, doubleClickEvent] as const;
3030

3131
const getStyle = (style: TextStyleType) => {
3232
return css`
@@ -227,7 +227,9 @@ const TextView = React.memo((props: ToViewReturn<ChildrenType>) => {
227227
const handleClick = React.useCallback(() => {
228228
props.onEvent("click");
229229
}, [props.onEvent]);
230-
230+
const handleDoubleClick = React.useCallback(() => {
231+
props.onEvent("doubleClick");
232+
}, [props.onEvent]);
231233
const containerStyle = useMemo(() => ({
232234
justifyContent: props.horizontalAlignment,
233235
alignItems: props.autoHeight ? "center" : props.verticalAlignment,
@@ -247,6 +249,7 @@ const TextView = React.memo((props: ToViewReturn<ChildrenType>) => {
247249
$styleConfig={props.style}
248250
style={containerStyle}
249251
onClick={handleClick}
252+
onDoubleClick={handleDoubleClick}
250253
>
251254
<ScrollBar hideScrollbar={!props.contentScrollBar}>
252255
{content}

0 commit comments

Comments
 (0)