Skip to content

Commit 1bc331a

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge branch 'dev' into doubleClick_event_component
2 parents e9ec6de + dc8ccc5 commit 1bc331a

File tree

9 files changed

+163
-28
lines changed

9 files changed

+163
-28
lines changed

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

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

1314
const InputNumberWrapper = styled.div`
1415
.ant-input-number {
@@ -25,6 +26,15 @@ const InputNumberWrapper = styled.div`
2526
}
2627
`;
2728

29+
const NumberViewWrapper = styled.div`
30+
cursor: pointer;
31+
display: flex;
32+
align-items: center;
33+
gap: 4px;
34+
`;
35+
36+
const NumberEventOptions = [clickEvent] as const;
37+
2838
const childrenMap = {
2939
text: NumberControl,
3040
step: withDefault(NumberControl, 1),
@@ -34,6 +44,7 @@ const childrenMap = {
3444
prefixIcon: IconControl,
3545
suffixIcon: IconControl,
3646
suffix: StringControl,
47+
onEvent: eventHandlerControl(NumberEventOptions),
3748
};
3849

3950
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (props) => props.text;
@@ -46,6 +57,7 @@ type NumberViewProps = {
4657
suffixIcon: ReactNode;
4758
float: boolean;
4859
precision: number;
60+
onEvent?: (eventName: string) => void;
4961
};
5062

5163
type NumberEditProps = {
@@ -66,16 +78,22 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
6678
return result;
6779
}, [props.value, props.float, props.precision]);
6880

81+
const handleClick = useCallback(() => {
82+
if (props.onEvent) {
83+
props.onEvent("click");
84+
}
85+
}, [props.onEvent]);
86+
6987
return (
70-
<>
88+
<NumberViewWrapper onClick={handleClick}>
7189
{hasIcon(props.prefixIcon) && (
7290
<span>{props.prefixIcon}</span>
7391
)}
7492
<span>{props.prefix + formattedValue + props.suffix}</span>
7593
{hasIcon(props.suffixIcon) && (
7694
<span>{props.suffixIcon}</span>
7795
)}
78-
</>
96+
</NumberViewWrapper>
7997
);
8098
});
8199

@@ -197,6 +215,7 @@ export const ColumnNumberComp = (function () {
197215
children.step.dispatchChangeValueAction(String(newValue));
198216
}
199217
})}
218+
{children.onEvent.propertyView()}
200219
</>
201220
);
202221
})

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignme
3838
cursor: pointer;
3939
`;
4040

41+
const AvatarEventOptions = [clickEvent, refreshEvent] as const;
42+
4143
const DropdownOption = new MultiCompBuilder(
4244
{
4345
src: StringControl,
@@ -46,6 +48,7 @@ const DropdownOption = new MultiCompBuilder(
4648
color: ColorControl,
4749
backgroundColor: ColorControl,
4850
Tooltip: StringControl,
51+
onEvent: eventHandlerControl(AvatarEventOptions),
4952
},
5053
(props) => props
5154
)
@@ -63,6 +66,7 @@ const DropdownOption = new MultiCompBuilder(
6366
{children.color.propertyView({ label: trans("style.fill") })}
6467
{children.backgroundColor.propertyView({ label: trans("style.background") })}
6568
{children.Tooltip.propertyView({ label: trans("badge.tooltip") })}
69+
{children.onEvent.propertyView()}
6670
</>
6771
);
6872
})
@@ -83,14 +87,16 @@ const MemoizedAvatar = React.memo(({
8387
style,
8488
autoColor,
8589
avatarSize,
86-
onEvent
90+
onEvent,
91+
onItemEvent
8792
}: {
8893
item: any;
8994
index: number;
9095
style: any;
9196
autoColor: boolean;
9297
avatarSize: number;
93-
onEvent: (event: string) => void;
98+
onEvent: (event: string) => void;
99+
onItemEvent?: (event: string) => void;
94100
}) => {
95101
const mountedRef = useRef(true);
96102

@@ -103,8 +109,15 @@ const MemoizedAvatar = React.memo(({
103109

104110
const handleClick = useCallback(() => {
105111
if (!mountedRef.current) return;
112+
113+
// Trigger individual avatar event first
114+
if (onItemEvent) {
115+
onItemEvent("click");
116+
}
117+
118+
// Then trigger main component event
106119
onEvent("click");
107-
}, [onEvent]);
120+
}, [onEvent, onItemEvent]);
108121

109122
const handleDoubleClick = useCallback(() => {
110123
if (!mountedRef.current) return;
@@ -119,6 +132,7 @@ const MemoizedAvatar = React.memo(({
119132
style={{
120133
color: item.color ? item.color : (style.fill !== '#FFFFFF' ? style.fill : '#FFFFFF'),
121134
backgroundColor: item.backgroundColor ? item.backgroundColor : (autoColor ? MacaroneList[index % MacaroneList.length] : style.background),
135+
cursor: 'pointer',
122136
}}
123137
size={avatarSize}
124138
onClick={handleClick}
@@ -168,6 +182,7 @@ const MemoizedAvatarGroup = React.memo(({
168182
autoColor={autoColor}
169183
avatarSize={avatarSize}
170184
onEvent={onEvent}
185+
onItemEvent={item.onEvent}
171186
/>
172187
))}
173188
</Avatar.Group>

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,28 @@ import { withDefault } from "comps/generators";
1010
import { TacoImage } from "lowcoder-design";
1111
import styled from "styled-components";
1212
import { DEFAULT_IMG_URL } from "@lowcoder-ee/util/stringUtils";
13+
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
1314

1415
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1516

1617
const childrenMap = {
1718
src: withDefault(StringControl, "{{currentCell}}"),
1819
size: withDefault(NumberControl, "50"),
20+
onEvent: eventHandlerControl([clickEvent]),
1921
};
2022

2123
const StyledTacoImage = styled(TacoImage)`
22-
pointer-events: auto;
24+
pointer-events: auto !important;
25+
cursor: pointer !important;
26+
27+
&:hover {
28+
opacity: 0.8;
29+
transition: opacity 0.2s ease;
30+
}
2331
`;
2432

2533
// Memoized image component
26-
const ImageView = React.memo(({ src, size }: { src: string; size: number }) => {
34+
const ImageView = React.memo(({ src, size, onEvent }: { src: string; size: number; onEvent?: (eventName: string) => void }) => {
2735
const mountedRef = useRef(true);
2836

2937
// Cleanup on unmount
@@ -33,10 +41,19 @@ const ImageView = React.memo(({ src, size }: { src: string; size: number }) => {
3341
};
3442
}, []);
3543

44+
const handleClick = useCallback(() => {
45+
console.log("Image clicked!", { src, onEvent: !!onEvent }); // Debug log
46+
if (mountedRef.current && onEvent) {
47+
onEvent("click");
48+
}
49+
}, [onEvent, src]);
50+
3651
return (
3752
<StyledTacoImage
3853
src={src || DEFAULT_IMG_URL}
3954
width={size}
55+
onClick={handleClick}
56+
style={{ cursor: 'pointer' }} // Inline style as backup
4057
/>
4158
);
4259
});
@@ -96,7 +113,7 @@ export const ImageComp = (function () {
96113
childrenMap,
97114
(props, dispatch) => {
98115
const value = props.changeValue ?? getBaseValue(props, dispatch);
99-
return <ImageView src={value} size={props.size} />;
116+
return <ImageView src={value} size={props.size} onEvent={props.onEvent} />;
100117
},
101118
(nodeValue) => nodeValue.src.value,
102119
getBaseValue
@@ -118,6 +135,7 @@ export const ImageComp = (function () {
118135
{children.size.propertyView({
119136
label: trans("table.imageSize"),
120137
})}
138+
{children.onEvent.propertyView()}
121139
</>
122140
);
123141
})

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const OptionItem = new MultiCompBuilder(
7070
.build();
7171

7272
// Memoized menu item component
73-
const MenuItem = React.memo(({ option, index }: { option: any; index: number }) => {
73+
const MenuItem = React.memo(({ option, index, onMainEvent }: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
7474
const handleClick = useCallback(() => {
7575
if (!option.disabled) {
7676
if (option.onClick) {
@@ -83,8 +83,12 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
8383
option.onEvent("click");
8484
}
8585

86+
// Trigger the main component's event handler
87+
if (onMainEvent) {
88+
onMainEvent("click");
89+
}
8690
}
87-
}, [option.disabled, option.onClick, option.onEvent, option.onDoubleClick]);
91+
}, [option.disabled, option.onClick, option.onEvent, onMainEvent, option.onDoubleClick]);
8892

8993
return (
9094
<MenuLinkWrapper>
@@ -100,7 +104,7 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
100104
MenuItem.displayName = 'MenuItem';
101105

102106
// Memoized menu component
103-
const LinksMenu = React.memo(({ options }: { options: any[] }) => {
107+
const LinksMenu = React.memo(({ options, onEvent }: { options: any[]; onEvent?: (eventName: string) => void }) => {
104108
const mountedRef = useRef(true);
105109

106110
// Cleanup on unmount
@@ -115,9 +119,9 @@ const LinksMenu = React.memo(({ options }: { options: any[] }) => {
115119
.filter((o) => !o.hidden)
116120
.map((option, index) => ({
117121
key: index,
118-
label: <MenuItem option={option} index={index} />
122+
label: <MenuItem option={option} index={index} onMainEvent={onEvent} />
119123
})),
120-
[options]
124+
[options, onEvent]
121125
);
122126

123127
return (
@@ -134,11 +138,12 @@ export const ColumnLinksComp = (function () {
134138
options: manualOptionsControl(OptionItem, {
135139
initOptions: [{ label: trans("table.option1") }],
136140
}),
141+
onEvent: eventHandlerControl(LinksEventOptions),
137142
};
138143
return new ColumnTypeCompBuilder(
139144
childrenMap,
140145
(props) => {
141-
return <LinksMenu options={props.options} />;
146+
return <LinksMenu options={props.options} onEvent={props.onEvent} />;
142147
},
143148
() => ""
144149
)
@@ -148,6 +153,7 @@ export const ColumnLinksComp = (function () {
148153
newOptionLabel: trans("table.option"),
149154
title: trans("table.optionList"),
150155
})}
156+
{children.onEvent.propertyView()}
151157
</>
152158
))
153159
.build();

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import { StringControl } from "comps/controls/codeControl";
99
import { trans } from "i18n";
1010
import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
1111
import styled from "styled-components";
12+
import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
1213

1314
const Wrapper = styled.div`
1415
${markdownCompCss};
1516
max-height: 32px;
17+
cursor: pointer;
1618
1719
> .markdown-body {
1820
margin: 0;
@@ -22,16 +24,25 @@ const Wrapper = styled.div`
2224
}
2325
`;
2426

27+
const MarkdownEventOptions = [clickEvent] as const;
28+
2529
const childrenMap = {
2630
text: StringControl,
31+
onEvent: eventHandlerControl(MarkdownEventOptions),
2732
};
2833

2934
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
3035

3136
// Memoized markdown view component
32-
const MarkdownView = React.memo(({ value }: { value: string }) => {
37+
const MarkdownView = React.memo(({ value, onEvent }: { value: string; onEvent?: (eventName: string) => void }) => {
38+
const handleClick = useCallback(() => {
39+
if (onEvent) {
40+
onEvent("click");
41+
}
42+
}, [onEvent]);
43+
3344
return (
34-
<Wrapper>
45+
<Wrapper onClick={handleClick}>
3546
<TacoMarkDown>{value}</TacoMarkDown>
3647
</Wrapper>
3748
);
@@ -92,7 +103,7 @@ export const ColumnMarkdownComp = (function () {
92103
childrenMap,
93104
(props, dispatch) => {
94105
const value = props.changeValue ?? getBaseValue(props, dispatch);
95-
return <MarkdownView value={value} />;
106+
return <MarkdownView value={value} onEvent={props.onEvent} />;
96107
},
97108
(nodeValue) => nodeValue.text.value,
98109
getBaseValue
@@ -110,6 +121,7 @@ export const ColumnMarkdownComp = (function () {
110121
label: trans("table.columnValue"),
111122
tooltip: ColumnValueTooltip,
112123
})}
124+
{children.onEvent.propertyView()}
113125
</>
114126
))
115127
.build();

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const SelectOptionWithEventsControl = optionsControl(SelectOptionWithEvents, {
116116
const childrenMap = {
117117
text: StringControl,
118118
options: SelectOptionWithEventsControl,
119+
onEvent: eventHandlerControl(SelectOptionEventOptions),
119120
};
120121

121122
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
@@ -125,6 +126,7 @@ type SelectEditProps = {
125126
onChange: (value: string) => void;
126127
onChangeEnd: () => void;
127128
options: any[];
129+
onMainEvent?: (eventName: string) => void;
128130
};
129131

130132
const SelectEdit = React.memo((props: SelectEditProps) => {
@@ -153,7 +155,12 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
153155
selectedOption.onEvent("doubleClick");
154156
}
155157
}
156-
}, [props.onChange, props.options]);
158+
159+
// Also trigger the main component's event handler
160+
if (props.onMainEvent) {
161+
props.onMainEvent("click");
162+
}
163+
}, [props.onChange, props.options, props.onMainEvent]);
157164

158165
const handleEvent = useCallback(async (eventName: string) => {
159166
if (!mountedRef.current) return [] as unknown[];
@@ -206,6 +213,7 @@ export const ColumnSelectComp = (function () {
206213
options={props.otherProps?.options || []}
207214
onChange={props.onChange}
208215
onChangeEnd={props.onChangeEnd}
216+
onMainEvent={props.otherProps?.onEvent}
209217
/>
210218
</Wrapper>
211219
)
@@ -220,6 +228,7 @@ export const ColumnSelectComp = (function () {
220228
{children.options.propertyView({
221229
title: trans("optionsControl.optionList"),
222230
})}
231+
{children.onEvent.propertyView()}
223232
</>
224233
);
225234
})

0 commit comments

Comments
 (0)