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