added cardClick event + expose activeCardIndex/activeCardData

Author: raheeliftikhar5

lowcoder-comp-kanban/src/KabanComp.tsx

@@ -8,6 +8,7 @@ import {
   withPropertyViewFn,
   withMethodExposing,
   CompAction,
+  CompDepsConfig,
 } from 'lowcoder-sdk';
 import { trans } from "./i18n/comps";
 import { KanbanInitComp } from './kanbanTypes';
@@ -137,4 +138,26 @@ KanbanPropertyComp = withMethodExposing(KanbanPropertyComp, [
 export default withExposingConfigs(KanbanPropertyComp, [
   new NameConfig("data", trans("component.data")),
   NameConfigHidden,
+  new CompDepsConfig(
+    "activeCardIndex",
+    (comp) => {
+      return {
+        activeCardIndex: comp.children.activeCardIndex.node(),
+      };
+    },
+    (input) => {
+      return input.activeCardIndex;
+    },
+  ),
+  new CompDepsConfig(
+    "activeCardData",
+    (comp) => {
+      return {
+        activeCardData: comp.children.activeCardData.node(),
+      };
+    },
+    (input) => {
+      return input.activeCardData;
+    },
+  ),
 ]);

lowcoder-comp-kanban/src/kanbanCompView.tsx

@@ -99,6 +99,7 @@ const CardTemplate = React.memo((props: {
   cardHeaderStyles: Record<string, string>;
   cardContentStyles: Record<string, string>;
   tagStyles: Record<string, string>;
+  onClick: () => void;
 }) => {
   const template = useMemo(() => {
     return props.cardView.cardTemplate(
@@ -112,13 +113,33 @@ const CardTemplate = React.memo((props: {
   ]);
 
   if (props.isEditorStateAvailable && props.cardViewOption === 'custom') {
-    return template;
+    return (
+      <Wrapper>
+        <div
+          className={'card-template'}
+          onMouseDown={() => {
+            props.onClick();
+          }}
+          style={{
+            backgroundColor: props.cardContentStyles.backgroundColor,
+            borderRadius: props.cardContentStyles.radius,
+            borderWidth: props.cardContentStyles.borderWidth,
+            border: props.cardContentStyles.border,
+          }}
+        >
+          {template}   
+        </div>
+      </Wrapper>
+    );
   }
 
   return (
     <Wrapper>
       <div
         className={'card-template'}
+        onMouseDown={() => {
+          props.onClick();
+        }}
         style={{
           backgroundColor: props.cardContentStyles.backgroundColor,
           borderRadius: props.cardContentStyles.radius,
@@ -327,6 +348,11 @@ export const KanbanCompView = React.memo((props: Props) => {
         cardHeaderStyles={childrenProps.cardHeaderStyles}
         cardContentStyles={childrenProps.cardContentStyles}
         tagStyles={childrenProps.tagStyles}
+        onClick={() => {
+          comp.children.activeCardIndex.dispatchChangeValueAction(cardIndex);
+          comp.children.activeCardData.dispatchChangeValueAction(childrenProps.data[cardIndex]);
+          childrenProps.onEvent("cardClick");
+        }}
       />
     );
   }, [
@@ -358,7 +384,9 @@ export const KanbanCompView = React.memo((props: Props) => {
               keyField="status"
               dataSource={[...kanbanData]}
               cardDoubleClick={OnCardDoubleClick}
-              cardClick={(args: CardClickEventArgs) => args.event?.stopPropagation()}
+              cardClick={(args: CardClickEventArgs) => {
+                args.event?.stopPropagation();
+              }}
               swimlaneSettings={
                 {keyField: childrenProps.separateAssigneeSections ? 'assignee' : ''}
               }

lowcoder-comp-kanban/src/kanbanTypes.tsx

@@ -11,11 +11,13 @@ import {
   RecordConstructorToComp,
   RecordConstructorToView,
   dropdownControl,
+  stateComp,
 } from 'lowcoder-sdk';
 import { trans } from "./i18n/comps";
 import { KanbanOptionControl } from './kanbanOptionsControl';
 import { CardViewControl } from './cardViewControl';
 import * as dataSource from "./datasource.json";
+import { JSONObject } from 'i18n/comps/locales/types';
 
 type RecordConstructorToComp<T> = typeof RecordConstructorToComp;
 type RecordConstructorToView<T> = typeof RecordConstructorToView;
@@ -129,13 +131,20 @@ const childrenMap = {
       value: "change",
       description: "Triggers when data changes",
     },
+    {
+      label: "onCardClick",
+      value: "cardClick",
+      description: "Triggers on card click",
+    },
   ] as const),
   cardContentStyles: styleControl(CompStyles),
   statusOptions: jsonControl(toJSONObjectArray, dataSource.statusOptions),
   assigneeOptions: jsonControl(toJSONObjectArray, dataSource.assigneeOptions),
   cardViewOption: dropdownControl(cardViewOptions, "default"),
   cardView: CardViewControl,
   separateAssigneeSections: withDefault(BoolControl, false),
+  activeCardIndex: stateComp<number>(0),
+  activeCardData: stateComp<JSONObject>({}),
 };
 
 export const KanbanInitComp = (function () {