Skip to content

Commit b4b1822

Browse files
added cardClick event + expose activeCardIndex/activeCardData
1 parent ca5b322 commit b4b1822

File tree

3 files changed

+62
-2
lines changed

3 files changed

+62
-2
lines changed

lowcoder-comp-kanban/src/KabanComp.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
withPropertyViewFn,
99
withMethodExposing,
1010
CompAction,
11+
CompDepsConfig,
1112
} from 'lowcoder-sdk';
1213
import { trans } from "./i18n/comps";
1314
import { KanbanInitComp } from './kanbanTypes';
@@ -137,4 +138,26 @@ KanbanPropertyComp = withMethodExposing(KanbanPropertyComp, [
137138
export default withExposingConfigs(KanbanPropertyComp, [
138139
new NameConfig("data", trans("component.data")),
139140
NameConfigHidden,
141+
new CompDepsConfig(
142+
"activeCardIndex",
143+
(comp) => {
144+
return {
145+
activeCardIndex: comp.children.activeCardIndex.node(),
146+
};
147+
},
148+
(input) => {
149+
return input.activeCardIndex;
150+
},
151+
),
152+
new CompDepsConfig(
153+
"activeCardData",
154+
(comp) => {
155+
return {
156+
activeCardData: comp.children.activeCardData.node(),
157+
};
158+
},
159+
(input) => {
160+
return input.activeCardData;
161+
},
162+
),
140163
]);

lowcoder-comp-kanban/src/kanbanCompView.tsx

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ const CardTemplate = React.memo((props: {
9999
cardHeaderStyles: Record<string, string>;
100100
cardContentStyles: Record<string, string>;
101101
tagStyles: Record<string, string>;
102+
onClick: () => void;
102103
}) => {
103104
const template = useMemo(() => {
104105
return props.cardView.cardTemplate(
@@ -112,13 +113,33 @@ const CardTemplate = React.memo((props: {
112113
]);
113114

114115
if (props.isEditorStateAvailable && props.cardViewOption === 'custom') {
115-
return template;
116+
return (
117+
<Wrapper>
118+
<div
119+
className={'card-template'}
120+
onMouseDown={() => {
121+
props.onClick();
122+
}}
123+
style={{
124+
backgroundColor: props.cardContentStyles.backgroundColor,
125+
borderRadius: props.cardContentStyles.radius,
126+
borderWidth: props.cardContentStyles.borderWidth,
127+
border: props.cardContentStyles.border,
128+
}}
129+
>
130+
{template}
131+
</div>
132+
</Wrapper>
133+
);
116134
}
117135

118136
return (
119137
<Wrapper>
120138
<div
121139
className={'card-template'}
140+
onMouseDown={() => {
141+
props.onClick();
142+
}}
122143
style={{
123144
backgroundColor: props.cardContentStyles.backgroundColor,
124145
borderRadius: props.cardContentStyles.radius,
@@ -327,6 +348,11 @@ export const KanbanCompView = React.memo((props: Props) => {
327348
cardHeaderStyles={childrenProps.cardHeaderStyles}
328349
cardContentStyles={childrenProps.cardContentStyles}
329350
tagStyles={childrenProps.tagStyles}
351+
onClick={() => {
352+
comp.children.activeCardIndex.dispatchChangeValueAction(cardIndex);
353+
comp.children.activeCardData.dispatchChangeValueAction(childrenProps.data[cardIndex]);
354+
childrenProps.onEvent("cardClick");
355+
}}
330356
/>
331357
);
332358
}, [
@@ -358,7 +384,9 @@ export const KanbanCompView = React.memo((props: Props) => {
358384
keyField="status"
359385
dataSource={[...kanbanData]}
360386
cardDoubleClick={OnCardDoubleClick}
361-
cardClick={(args: CardClickEventArgs) => args.event?.stopPropagation()}
387+
cardClick={(args: CardClickEventArgs) => {
388+
args.event?.stopPropagation();
389+
}}
362390
swimlaneSettings={
363391
{keyField: childrenProps.separateAssigneeSections ? 'assignee' : ''}
364392
}

lowcoder-comp-kanban/src/kanbanTypes.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ import {
1111
RecordConstructorToComp,
1212
RecordConstructorToView,
1313
dropdownControl,
14+
stateComp,
1415
} from 'lowcoder-sdk';
1516
import { trans } from "./i18n/comps";
1617
import { KanbanOptionControl } from './kanbanOptionsControl';
1718
import { CardViewControl } from './cardViewControl';
1819
import * as dataSource from "./datasource.json";
20+
import { JSONObject } from 'i18n/comps/locales/types';
1921

2022
type RecordConstructorToComp<T> = typeof RecordConstructorToComp;
2123
type RecordConstructorToView<T> = typeof RecordConstructorToView;
@@ -129,13 +131,20 @@ const childrenMap = {
129131
value: "change",
130132
description: "Triggers when data changes",
131133
},
134+
{
135+
label: "onCardClick",
136+
value: "cardClick",
137+
description: "Triggers on card click",
138+
},
132139
] as const),
133140
cardContentStyles: styleControl(CompStyles),
134141
statusOptions: jsonControl(toJSONObjectArray, dataSource.statusOptions),
135142
assigneeOptions: jsonControl(toJSONObjectArray, dataSource.assigneeOptions),
136143
cardViewOption: dropdownControl(cardViewOptions, "default"),
137144
cardView: CardViewControl,
138145
separateAssigneeSections: withDefault(BoolControl, false),
146+
activeCardIndex: stateComp<number>(0),
147+
activeCardData: stateComp<JSONObject>({}),
139148
};
140149

141150
export const KanbanInitComp = (function () {

0 commit comments

Comments
 (0)