@hzab/edit-table 0.1.3-alpha.0 → 0.1.3

package/CHANGELOG.md

@@ -1,6 +1,7 @@
 # @hzab/edit-table@0.1.3
 
 fix: 编辑数据优化
+feat:高亮选中行
 
 # @hzab/edit-table@0.1.2
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/edit-table",
-  "version": "0.1.3-alpha.0",
+  "version": "0.1.3",
   "description": "",
   "main": "src",
   "scripts": {

package/src/Template/GetBaseTemplate.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { getVal } from "@hzab/list-render/src/common/utils";
 export const GetBaseTemplate = (props) => {
-  const { pattern, cell, componentProps, Com } = props;
+  const { pattern, cell, componentProps, Com, cellRender } = props;
 
   const echoValue = useMemo(() => {
     if (!cell?.getField) {
@@ -12,6 +12,11 @@ export const GetBaseTemplate = (props) => {
       { [cell?.getField && cell?.getField().name]: cell.text },
     );
   }, [cell]);
+  if (cellRender && cellRender(props)) {
+    const Slot = cellRender;
+    return <Slot {...props}></Slot>;
+  }
+
   return (
     <div className="base-hoc">
       {pattern == "readPretty" ? (

package/src/Template/NumberCellTemplate/index.tsx

@@ -1,24 +1,16 @@
 import { Input } from "antd";
-import "./index.less"
+import { GetBaseTemplate } from "../GetBaseTemplate";
+import "./index.less";
 const NumberCellTemplate = (props: any) => {
-  const { pattern, cell, componentProps } = props;
   return (
-    <div className="number-cell-template">
-      {pattern == "readPretty" ? (
-        <div>{cell?.text}</div>
-      ) : (
-      <Input
-        className="rg-input"
-        type="number"
-        ref={(input) => {
-          if (input) {
-            input.focus();
-          }
-        }}
-        {...componentProps}
-      />
-      )}
-    </div>
+    <GetBaseTemplate
+      {...props}
+      componentProps={{
+        ...props?.componentProps,
+        type: "number",
+      }}
+      Com={Input}
+    ></GetBaseTemplate>
   );
 };
-export default NumberCellTemplate
+export default NumberCellTemplate;

package/src/Template/TextCellTemplate/index.tsx

@@ -1,22 +1,8 @@
-import "./index.less"
+import { Input } from "antd";
+import { GetBaseTemplate } from "../GetBaseTemplate";
+import "./index.less";
+
 const TextCellTemplate = (props: any) => {
-  const { pattern, cell, componentProps } = props;
-  return (
-    <div className="text-cell-template">
-      {pattern == "readPretty" ? (
-        <div>{cell?.text}</div>
-      ) : (
-      <input
-        className="rg-input"
-        ref={(input) => {
-          if (input) {
-            input.focus();
-          }
-        }}
-        {...componentProps}
-      />
-      )}
-    </div>
-  );
+  return <GetBaseTemplate {...props} Com={Input}></GetBaseTemplate>;
 };
-export default TextCellTemplate
+export default TextCellTemplate;

package/src/common/WidthWrapHoc.tsx

@@ -33,7 +33,7 @@ interface DIProps {
   isInEditMode?: boolean;
 }
 
-export const WidthWrapHoc = (WrapComponent: any) => {
+export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
   class createBaseCellTemplate implements CellTemplate<BaseCell> {
     getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell> {
       let values: any;
@@ -196,6 +196,7 @@ export const WidthWrapHoc = (WrapComponent: any) => {
           }}
         >
           <WrapComponent
+            {...props}
             onPointerDown={(e) => e.stopPropagation()}
             componentProps={{
               style: { width: "100%", display: "flex", alignItems: "center" },

package/src/index.less

@@ -4,6 +4,14 @@
   max-height: 100vh;
   padding-bottom: 16px;
 
+  .ant-input-affix-wrapper-focused,
+  .ant-input-affix-wrapper:focus {
+    box-shadow: none;
+  }
+
+  .rg-input {
+    border: none;
+  }
 
 
 
@@ -21,6 +29,10 @@
     z-index: 2;
   }
 
+  // .rg-header-cell {
+  //   z-index: 99;
+  // }
+
   .rg-partial-area {
     z-index: 3;
 
@@ -76,4 +88,17 @@
 .rg-pane-left,
 .rg-pane-right {
   z-index: 10 !important;
+}
+
+.custom-highlights-row {
+  background: #E9F8FF;
+}
+
+.rg-pane-top {
+  z-index: 9 !important;
+}
+
+.shadow-top-left-corner,
+.shadow-top-right-corner {
+  z-index: 11 !important;
 }

package/src/index.tsx

@@ -65,6 +65,8 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
   const [expandKeys, setExpandKeys] = useState<any>([]);
   const [headerCustomTemplate, setHeaderCustomTemplate] = useState<any>([]);
   const [highlights, setHighlights] = useState([]);
+  const highlightsRowIdRef = useRef();
+
   const gridRef = useRef<any>();
   const currentCell = useRef<any>();
 
@@ -88,6 +90,14 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     setNewDataSource(dataSource);
   }, [dataSource]);
 
+  /** 判断当前选中行是否还存在 */
+  useEffect(() => {
+    const validRowIds = rows.map((r) => r.rowId);
+    if (!validRowIds?.includes(highlightsRowIdRef.current)) {
+      setHighlights([]);
+    }
+  }, [rows]);
+
   /**将数组转为对象 */
   const handleArrayToObj = (item) => {
     const record = item?.cells?.[0]?.record;
@@ -203,10 +213,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
             text: String(cellItem || ""),
             value: cellItem,
             selectedValue: cellItem || "",
-            style:
-              columnsItem?.type == "rowSelection"
-                ? { display: "flex", justifyContent: "center" }
-                : { color: cellItem == 0 ? "#CACDD7" : "" },
+            style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
             ...((onRow && onRow(item, index, ind)) || {}),
             ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
             ...(columnsItem?.cellProps || {}),
@@ -291,8 +298,8 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
     const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}), ...childAntdComponent };
     const newMergeTemplate: any = {};
     for (let key in mergeTemplate) {
-      const NewCom = (props) => {
-        return <GetBaseTemplate {...props} Com={mergeTemplate[key]} />;
+      const NewCom = (newComProps) => {
+        return <GetBaseTemplate {...newComProps} {...props} Com={mergeTemplate[key]} />;
       };
       newMergeTemplate[key] = WidthWrapHoc(NewCom);
     }
@@ -397,6 +404,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
         className: "custom-highlights-row",
         borderColor: "transparent",
       }));
+    highlightsRowIdRef.current = cell?.rowId;
     setHighlights(list);
   };
 
@@ -417,15 +425,15 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
           onFocusLocationChanging={(cell: any) => {
             const datatypeId = cell?.columnId + cell?.rowId;
             (window as any).gridEditId = datatypeId;
-            if (["_$actions", "rowSelection", "ExpandListTemplate"]?.includes(cell?.columnId)) {
-              return false;
-            }
             if (typeof cell?.rowId == "string" && cell?.rowId?.indexOf("header-") > -1) {
               return false;
             }
             if (reactGridProps?.isRowHighlights && cell?.columnId) {
               onHightsRow(cell, rows);
             }
+            if (["_$actions", "rowSelection", "ExpandListTemplate"]?.includes(cell?.columnId)) {
+              return false;
+            }
             if (reactGridProps?.onFocusLocationChanging) {
               return reactGridProps?.onFocusLocationChanging(cell, rows);
             }
@@ -439,8 +447,8 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
             ...headerCustomTemplate,
             _$actions: WidthWrapHoc(ActionDom),
             rowSelection: WidthWrapHoc(CheckBoxDom),
-            Input: WidthWrapHoc(TextTemplate),
-            Number: WidthWrapHoc(NumberTemplate),
+            // Input: WidthWrapHoc(TextTemplate,props),
+            Number: WidthWrapHoc(NumberTemplate, props),
           }}
         />
         {dataSource?.length <= 0 && (