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