allow option in table to enable editing on single/double click

Author: raheeliftikhar5

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -37,6 +37,7 @@ export interface CellProps {
   candidateStatus?: { text: string; status: StatusType }[];
   textOverflow?: boolean;
   cellTooltip?: string;
+  editMode?: string;
   onTableEvent?: (eventName: any) => void;
 }
 
@@ -94,13 +95,15 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     candidateTags,
     // tagColors
     candidateStatus,
+    editMode,
     onTableEvent,
   } = props;
   const status = _.isNil(changeValue) ? "normal" : "toSave";
   const editable = editViewFn ? props.editable : false;
   const { isEditing, setIsEditing } = useContext(TableCellContext);
   const value = changeValue ?? baseValue!;
   const [tmpValue, setTmpValue] = useState<T | null>(value);
+  const singleClickEdit = editMode === 'single'; 
 
   useEffect(() => {
     setTmpValue(value);
@@ -175,8 +178,8 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
                 width: '100%',
                 height: '100%',
               }}
-              // onDoubleClick={enterEditFn}
-              onClick={enterEditFn}
+              onDoubleClick={!singleClickEdit ? enterEditFn : undefined}
+              onClick={singleClickEdit ? enterEditFn : undefined}
             >
             </div>
           </CellWrapper>

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -767,6 +767,7 @@ export function TableCompView(props: {
   const inlineAddNewRow = useMemo(() => compChildren.inlineAddNewRow.getView(), [compChildren.inlineAddNewRow]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
+  const editModeClicks = useMemo(() => compChildren.editModeClicks.getView(), [compChildren.editModeClicks]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
   const dynamicColumn = compChildren.dynamicColumn.getView();
   const dynamicColumnConfig = useMemo(
@@ -785,6 +786,7 @@ export function TableCompView(props: {
         dynamicColumn,
         dynamicColumnConfig,
         columnsAggrData,
+        editModeClicks,
         onEvent,
       ),
     [
@@ -795,6 +797,7 @@ export function TableCompView(props: {
       dynamicColumn,
       dynamicColumnConfig,
       columnsAggrData,
+      editModeClicks,
     ]
   );
 

client/packages/lowcoder/src/comps/comps/tableComp/tableDynamicColumn.test.tsx

@@ -45,6 +45,7 @@ const expectColumn = (
       comp.children.dynamicColumn.getView(),
       dynamicColumnConfig,
       comp.columnAggrData,
+      comp.children.editModeClicks.getView(),
       onEvent,
     );
     expect(columnViews.length).toBeGreaterThanOrEqual(antdColumns.length);

client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -562,6 +562,10 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
                 label: trans("table.dynamicColumnConfig"),
                 tooltip: trans("table.dynamicColumnConfigDesc"),
             })}
+            {comp.children.editModeClicks.propertyView({
+              label: trans("table.editMode"),
+              radioButton: true,
+            })}
             {comp.children.searchText.propertyView({
               label: trans("table.searchText"),
               tooltip: trans("table.searchTextTooltip"),

client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx

@@ -37,6 +37,17 @@ import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
+const editModeClickOptions = [
+  {
+    label: trans("table.singleClick"),
+    value: "single",
+  },
+  {
+    label: trans("table.doubleClick"),
+    value: "double",
+  },
+] as const;
+
 const summarRowsOptions = [
   {
     label: "1",
@@ -248,6 +259,7 @@ const tableChildrenMap = {
   expansion: ExpansionControl,
   selectedCell: stateComp<JSONObject>({}),
   inlineAddNewRow: BoolControl,
+  editModeClicks: dropdownControl(editModeClickOptions, "single"),
 };
 
 export const TableInitComp = (function () {

client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx

@@ -295,6 +295,7 @@ export function columnsToAntdFormat(
   dynamicColumn: boolean,
   dynamicColumnConfig: Array<string>,
   columnsAggrData: ColumnsAggrData,
+  editMode: string,
   onTableEvent: (eventName: any) => void,
 ): Array<CustomColumnType<RecordType>> {
   const customColumns = columns.filter(col => col.isCustom).map(col => col.dataIndex);
@@ -392,6 +393,7 @@ export function columnsToAntdFormat(
               currentRow: row,
               currentIndex: index,
             }),
+            editMode,
             onTableEvent,
           });
       },

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2002,6 +2002,9 @@ export const en = {
     "showSummary": "Show Summary Row",
     "totalSummaryRows": "Total Rows",
     "inlineAddNewRow": "Inline Add New Row",
+    "editMode": "Edit Mode",
+    "singleClick": "Single Click",
+    "doubleClick": "Double Click",
   },