remove edit functionality

Author: iamfaran

client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnComp.tsx

@@ -31,7 +31,6 @@ import { default as Divider } from "antd/es/divider";
 import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
 import { list } from "@lowcoder-ee/comps/generators/list";
-import { EMPTY_ROW_KEY } from "../tableCompView";
 import React, { useCallback, useMemo } from "react";
 
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
@@ -441,11 +440,10 @@ export class ColumnComp extends ColumnInitComp {
 
   dispatchClearInsertSet() {
     const renderMap = this.children.render.getMap();
-    const insertMapKeys = Object.keys(renderMap).filter(key => key.startsWith(EMPTY_ROW_KEY));
-    insertMapKeys.forEach(key => {
+    Object.keys(renderMap).forEach(key => {
       const render = renderMap[key];
       render.getComp().children.comp.children.changeValue.dispatchChangeValueAction(null);
-    });
+    }); 
   }
 
   static setSelectionAction(key: string) {

client/packages/lowcoder/src/comps/comps/tableLiteComp/column/tableColumnListComp.tsx

@@ -17,7 +17,6 @@ import {
 import { shallowEqual } from "react-redux";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { lastValueIfEqual } from "util/objectUtils";
-import { EMPTY_ROW_KEY } from "../tableCompView";
 
 /**
  * column list
@@ -79,10 +78,7 @@ export class ColumnListComp extends ColumnListTmpComp {
       const columnChangeSet = column.getChangeSet();
       Object.keys(columnChangeSet).forEach((dataIndex) => {
         Object.keys(columnChangeSet[dataIndex]).forEach((key) => {
-          const includeChange = filterNewRowsChange
-            ? key.startsWith(EMPTY_ROW_KEY)
-            : !key.startsWith(EMPTY_ROW_KEY);
-          if (!_.isNil(columnChangeSet[dataIndex][key]) && includeChange) {
+          if (!_.isNil(columnChangeSet[dataIndex][key])) {
             if (!changeSet[key]) changeSet[key] = {};
             changeSet[key][dataIndex] = columnChangeSet[dataIndex][key];
           }

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

@@ -1,6 +1,6 @@
 import { tableDataRowExample } from "./column/tableColumnListComp";
 import { getPageSize } from "./paginationControl";
-import { EMPTY_ROW_KEY, TableCompView } from "./tableCompView";
+import { TableCompView } from "./tableCompView";
 import { TableFilter } from "./tableToolbarComp";
 import {
   columnHide,
@@ -396,8 +396,7 @@ export class TableImplComp extends TableInitComp {
       _.forEach(dataIndexRenderDict, (render, dataIndex) => {
         _.forEach(render[MAP_KEY], (value, key) => {
           const changeValue = (value.comp as any).comp.changeValue;
-          const includeRecord = (filterNewRows && key.startsWith(EMPTY_ROW_KEY)) || (!filterNewRows && !key.startsWith(EMPTY_ROW_KEY));
-          if (!_.isNil(changeValue) && includeRecord) {
+          if (!_.isNil(changeValue)) {
             if (!record[key]) record[key] = {};
             record[key][dataIndex] = changeValue;
           }

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

@@ -1,5 +1,5 @@
 import { default as Table, TableProps, ColumnType } from "antd/es/table";
-import { TableCellContext, TableRowContext } from "./tableContext";
+import {  TableRowContext } from "./tableContext";
 import { TableToolbar } from "./tableToolbarComp";
 import { RowColorViewType, RowHeightViewType, TableEventOptionValues } from "./tableTypes";
 import {
@@ -50,8 +50,6 @@ import { SkeletonButtonProps } from "antd/es/skeleton/Button";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { useUpdateEffect } from "react-use";
 
-export const EMPTY_ROW_KEY = 'empty_row';
-
 function genLinerGradient(color: string) {
   return isValidColor(color) ? `linear-gradient(${color}, ${color})` : color;
 }
@@ -378,15 +376,14 @@ interface TableTdProps {
   $style: TableColumnStyleType & { rowHeight?: string };
   $defaultThemeDetail: ThemeDetail;
   $linkStyle?: TableColumnLinkStyleType;
-  $isEditing: boolean;
   $tableSize?: string;
   $autoHeight?: boolean;
   $customAlign?: 'left' | 'center' | 'right';
 }
 const TableTd = styled.td<TableTdProps>`
   .ant-table-row-expand-icon,
   .ant-table-row-indent {
-    display: ${(props) => (props.$isEditing ? "none" : "initial")};
+    display: initial;
   }
   &.ant-table-row-expand-icon-cell {
     background: ${(props) => props.$background};
@@ -398,11 +395,8 @@ const TableTd = styled.td<TableTdProps>`
   padding: 0 !important;
   text-align: ${(props) => props.$customAlign || 'left'} !important;
 
-  > div:not(.editing-border, .editing-wrapper),
-  .editing-wrapper .ant-input,
-  .editing-wrapper .ant-input-number,
-  .editing-wrapper .ant-picker {
-    margin: ${(props) => props.$isEditing ? '0px' : props.$style.margin};
+  > div {
+    margin: ${(props) => props.$style.margin};
     color: ${(props) => props.$style.text};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
@@ -601,7 +595,6 @@ const TableCellView = React.memo((props: {
     ...restProps
   } = props;
 
-  const [editing, setEditing] = useState(false);
   const rowContext = useContext(TableRowContext);
 
   // Memoize style calculations
@@ -655,7 +648,6 @@ const TableCellView = React.memo((props: {
         $style={style!}
         $defaultThemeDetail={defaultTheme}
         $linkStyle={linkStyle}
-        $isEditing={editing}
         $tableSize={tableSize}
         $autoHeight={autoHeight}
         $customAlign={customAlign}
@@ -668,11 +660,7 @@ const TableCellView = React.memo((props: {
     );
   }
 
-  return (
-    <TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
-      {tdView}
-    </TableCellContext.Provider>
-  );
+  return tdView;
 });
 
 const TableRowView = React.memo((props: any) => {
@@ -809,26 +797,13 @@ ResizeableTableComp.whyDidYouRender = true;
 const ResizeableTable = React.memo(ResizeableTableComp) as typeof ResizeableTableComp;
 
 
-const createNewEmptyRow = (
-  rowIndex: number,
-  columnsAggrData: ColumnsAggrData,
-) => {
-  const emptyRowData: RecordType = {
-    [OB_ROW_ORI_INDEX]: `${EMPTY_ROW_KEY}_${rowIndex}`,
-  };
-  Object.keys(columnsAggrData).forEach(columnKey => {
-    emptyRowData[columnKey] = '';
-  });
-  return emptyRowData;
-}
+
 
 export const TableCompView = React.memo((props: {
   comp: InstanceType<typeof TableImplComp>;
   onRefresh: (allQueryNames: Array<string>, setLoading: (loading: boolean) => void) => void;
   onDownload: (fileName: string) => void;
 }) => {
-  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
-  const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
   const editorState = useContext(EditorContext);
   const currentTheme = useContext(ThemeContext)?.theme;
   const showDataLoadingIndicators = currentTheme?.showDataLoadingIndicators;
@@ -865,10 +840,8 @@ export const TableCompView = React.memo((props: {
   const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
   const showSummary = useMemo(() => compChildren.showSummary.getView(), [compChildren.showSummary]);
   const summaryRows = useMemo(() => compChildren.summaryRows.getView(), [compChildren.summaryRows]);
-  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(
@@ -886,7 +859,6 @@ export const TableCompView = React.memo((props: {
         dynamicColumn,
         dynamicColumnConfig,
         columnsAggrData,
-        editModeClicks,
         onEvent,
       ),
     [
@@ -897,7 +869,6 @@ export const TableCompView = React.memo((props: {
       dynamicColumn,
       dynamicColumnConfig,
       columnsAggrData,
-      editModeClicks,
     ]
   );
 
@@ -906,69 +877,6 @@ export const TableCompView = React.memo((props: {
     [compChildren.data]
   );
 
-  const updateEmptyRows = useCallback(() => {
-    if (!inlineAddNewRow) {
-      setEmptyRowsMap({})
-      setTimeout(() => compChildren.columns.dispatchClearInsertSet());
-      return;
-    }
-
-    let emptyRows: Record<string, RecordType> = {...emptyRowsMap};
-    const existingRowsKeys = Object.keys(emptyRows);
-    const existingRowsCount = existingRowsKeys.length;
-    const updatedRowsKeys = Object.keys(insertSet).filter(
-      key => key.startsWith(EMPTY_ROW_KEY)
-    );
-    const updatedRowsCount = updatedRowsKeys.length;
-    const removedRowsKeys = existingRowsKeys.filter(
-      x => !updatedRowsKeys.includes(x)
-    );
-
-    if (removedRowsKeys.length === existingRowsCount) {
-      const newRowIndex = 0;
-      const newRowKey = `${EMPTY_ROW_KEY}_${newRowIndex}`;
-      setEmptyRowsMap({
-        [newRowKey]: createNewEmptyRow(newRowIndex, columnsAggrData)
-      });
-      const ele = document.querySelector<HTMLElement>(`[data-row-key=${newRowKey}]`);
-      if (ele) {
-        ele.style.display = '';
-      }
-      return;
-    }
-
-    removedRowsKeys.forEach(rowKey => {
-      if (
-        rowKey === existingRowsKeys[existingRowsCount - 1]
-        || rowKey === existingRowsKeys[existingRowsCount - 2]
-      ) {
-        delete emptyRows[rowKey];
-      } else {
-        const ele = document.querySelector<HTMLElement>(`[data-row-key=${rowKey}]`);
-        if (ele) {
-          ele.style.display = 'none';
-        }
-      }
-    })
-    const lastRowKey = updatedRowsCount ? updatedRowsKeys[updatedRowsCount - 1] : '';
-    const lastRowIndex = lastRowKey ? parseInt(lastRowKey.replace(`${EMPTY_ROW_KEY}_`, '')) : -1;
-
-    const newRowIndex = lastRowIndex + 1;
-    const newRowKey = `${EMPTY_ROW_KEY}_${newRowIndex}`;
-    emptyRows[newRowKey] = createNewEmptyRow(newRowIndex, columnsAggrData);
-    setEmptyRowsMap(emptyRows);
-  }, [
-    inlineAddNewRow,
-    JSON.stringify(insertSet),
-    setEmptyRowsMap,
-    createNewEmptyRow,
-  ]);
-
-  useEffect(() => {
-    updateEmptyRows();
-  }, [updateEmptyRows]);
-
-
 
   const pageDataInfo = useMemo(() => {
     // Data pagination
@@ -1001,10 +909,6 @@ export const TableCompView = React.memo((props: {
 
   const handleChangeEvent = useCallback(
     (eventName: TableEventOptionValues) => {
-      if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {
-        !viewMode && messageInstance.warning(trans("table.saveChangesNotBind"));
-        return;
-      }
       compChildren.onEvent.getView()(eventName);
       setTimeout(() => compChildren.columns.dispatchClearChangeSet());
     },
@@ -1031,14 +935,6 @@ export const TableCompView = React.memo((props: {
         handleChangeEvent("download");
         onDownload(`${compName}-data`)
       }}
-      hasChange={hasChange}
-      onSaveChanges={() => handleChangeEvent("saveChanges")}
-      onCancelChanges={() => {
-        handleChangeEvent("cancelChanges");
-        if (inlineAddNewRow) {
-          setEmptyRowsMap({});
-        }
-      }}
       onEvent={onEvent}
     />
   );
@@ -1118,7 +1014,7 @@ export const TableCompView = React.memo((props: {
               columnsStyle={columnsStyle}
               viewModeResizable={compChildren.viewModeResizable.getView()}
               visibleResizables={compChildren.visibleResizables.getView()}
-              dataSource={pageDataInfo.data.concat(Object.values(emptyRowsMap))}
+              dataSource={pageDataInfo.data}
               size={compChildren.size.getView()}
               rowAutoHeight={rowAutoHeight}
               tableLayout="fixed"

client/packages/lowcoder/src/comps/comps/tableLiteComp/tableContext.tsx

@@ -5,8 +5,3 @@ export const TableRowContext = React.createContext<{
   hover: boolean;
   selected: boolean;
 }>({ hover: false, selected: false });
-
-export const TableCellContext = React.createContext<{
-  isEditing: boolean;
-  setIsEditing: (e: boolean) => void;
-}>({ isEditing: false, setIsEditing: _.noop });

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

@@ -32,7 +32,7 @@ import { TableChildrenType } from "./tableTypes";
 import React, { useMemo, useState, useCallback } from "react";
 import { GreyTextColor } from "constants/style";
 import { alignOptions } from "comps/controls/dropdownControl";
-import { ColumnTypeCompMap } from "comps/comps/tableComp/column/columnTypeComp";
+import { ColumnTypeCompMap } from "./column/columnTypeComp";
 import Segmented from "antd/es/segmented";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
 
@@ -144,10 +144,6 @@ const columnBatchOptions = [
     label: trans("prop.hide"),
     value: "hide",
   },
-  {
-    label: trans("table.editable"),
-    value: "editable",
-  },
   {
     label: trans("table.autoWidth"),
     value: "autoWidth",
@@ -202,15 +198,9 @@ function ColumnBatchCheckBox<T extends keyof ColumnCompType["children"]>({
 
   const isBatch = Array.isArray(column);
   const columns = isBatch ? column : [column];
-  
+    
   const disabledStatus = useMemo(() => columns.map((c) => {
-    if (childrenKey !== "editable") {
-      return false;
-    }
-    const columnType = c.children.render
-      .getOriginalComp()
-      .children.comp.children.compType.getView();
-    return !ColumnTypeCompMap[columnType].canBeEditable();
+    return false;
   }), [columns, childrenKey]);
 
   const { allChecked, allNotChecked } = useMemo(() => {
@@ -265,7 +255,6 @@ const ColumnBatchView: Record<
   (column: ColumnCompType | Array<ColumnCompType>) => JSX.Element
 > = {
   hide: (column) => <ColumnBatchCheckBox childrenKey="hide" column={column} />,
-  editable: (column) => <ColumnBatchCheckBox childrenKey="editable" column={column} />,
   sortable: (column) => <ColumnBatchCheckBox childrenKey="sortable" column={column} />,
   autoWidth: (column) => (
     <ColumnBatchCheckBox
@@ -528,10 +517,6 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
             {hiddenPropertyView(comp.children)}
             {loadingPropertyView(comp.children)}
             {comp.children.selection.getPropertyView()}
-            {comp.children.editModeClicks.propertyView({
-              label: trans("table.editMode"),
-              radioButton: true,
-            })}
             {comp.children.searchText.propertyView({
               label: trans("table.searchText"),
               tooltip: trans("table.searchTextTooltip"),
@@ -550,11 +535,6 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
             })}
           </Section>
 
-          <Section name={"Insert Rows"}>
-            {comp.children.inlineAddNewRow.propertyView({
-              label: trans("table.inlineAddNewRow")
-            })}
-          </Section>
 
           <Section name={trans("prop.toolbar")}>
             {comp.children.toolbar.getPropertyView()}