dcp-design-react 1.11.14 → 1.11.15

package/lib/pivot-grid/src/main/types.d.ts

@@ -34,5 +34,6 @@ export type PivotGridProps = {
     onGroupChange?: (group: GroupItem[]) => void;
     onFilterChange?: (filter: ISuperFilter[]) => void;
     onSorterChange?: (sorter: SorterItem[]) => void;
+    onRowEdit?: (record: IRecord, index: number) => void;
     onRowClick?: (row: IRecord, column: IColumn, event: React.MouseEvent<HTMLDivElement>) => void;
 };

package/lib/pivot-grid/style/grid-layout.less

@@ -2,15 +2,20 @@
  * @Author: 焦质晔
  * @Date: 2022-03-16 19:05:30
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-25 11:07:14
+ * @Last Modified time: 2025-01-09 17:14:40
  */
 @import '../../style/common';
 
 .@{prefix-pivot-grid}__layout {
   .reset-container();
   width: 100%;
-  display: flex;
-  flex-wrap: nowrap;
+  .@{qm-prefix}-scrollbar__wrap {
+    display: flex;
+    flex-wrap: nowrap;
+    & > div {
+      height: fit-content;
+    }
+  }
   .header,
   .footer {
     display: flex;
@@ -72,11 +77,34 @@
         justify-content: center;
         border-right-color: transparent;
       }
-      .order {
-        display: inline-block;
-      }
-      .checkbox {
-        display: none;
+      .action {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        .drag-icon,
+        .expand-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          color: @--text-color-placeholder;
+          visibility: hidden;
+        }
+        .expand-icon:hover {
+          color: @--primary-color;
+        }
+        .middle {
+          text-align: center;
+          width: 16px;
+          margin: 0 2px;
+          .order {
+            display: inline-block;
+          }
+          .checkbox {
+            display: none;
+          }
+        }
       }
       &.col--center {
         text-align: center;
@@ -228,11 +256,21 @@
         &.row--selection {
           .table-cell {
             background-color: @--background-color-light;
-            .order {
-              display: none;
+            .middle {
+              .order {
+                display: none;
+              }
+              .checkbox {
+                display: inline-flex;
+              }
             }
-            .checkbox {
-              display: inline-flex;
+          }
+        }
+        &.row--hover {
+          .table-cell {
+            .drag-icon,
+            .expand-icon {
+              visibility: visible;
             }
           }
         }

package/lib/style/index.css

@@ -31180,7 +31180,7 @@ body {
  * @Author: 焦质晔
  * @Date: 2022-03-16 19:05:30
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-25 11:07:14
+ * @Last Modified time: 2025-01-09 17:14:40
  */
 .qm-pivot-grid__layout {
   box-sizing: border-box;
@@ -31192,9 +31192,15 @@ body {
   list-style: none;
   font-feature-settings: 'tnum';
   width: 100%;
+}
+.qm-pivot-grid__layout .qm-scrollbar__wrap {
   display: flex;
   flex-wrap: nowrap;
 }
+.qm-pivot-grid__layout .qm-scrollbar__wrap > div {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .qm-pivot-grid__layout .header,
 .qm-pivot-grid__layout .footer {
   display: flex;
@@ -31261,14 +31267,47 @@ body {
   justify-content: center;
   border-right-color: transparent;
 }
-.qm-pivot-grid__layout .header .table-cell .order,
-.qm-pivot-grid__layout .body .table-cell .order,
-.qm-pivot-grid__layout .footer .table-cell .order {
+.qm-pivot-grid__layout .header .table-cell .action,
+.qm-pivot-grid__layout .body .table-cell .action,
+.qm-pivot-grid__layout .footer .table-cell .action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.qm-pivot-grid__layout .header .table-cell .action .drag-icon,
+.qm-pivot-grid__layout .body .table-cell .action .drag-icon,
+.qm-pivot-grid__layout .footer .table-cell .action .drag-icon,
+.qm-pivot-grid__layout .header .table-cell .action .expand-icon,
+.qm-pivot-grid__layout .body .table-cell .action .expand-icon,
+.qm-pivot-grid__layout .footer .table-cell .action .expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: rgba(0, 0, 0, 0.45);
+  visibility: hidden;
+}
+.qm-pivot-grid__layout .header .table-cell .action .expand-icon:hover,
+.qm-pivot-grid__layout .body .table-cell .action .expand-icon:hover,
+.qm-pivot-grid__layout .footer .table-cell .action .expand-icon:hover {
+  color: #1890ff;
+}
+.qm-pivot-grid__layout .header .table-cell .action .middle,
+.qm-pivot-grid__layout .body .table-cell .action .middle,
+.qm-pivot-grid__layout .footer .table-cell .action .middle {
+  text-align: center;
+  width: 16px;
+  margin: 0 2px;
+}
+.qm-pivot-grid__layout .header .table-cell .action .middle .order,
+.qm-pivot-grid__layout .body .table-cell .action .middle .order,
+.qm-pivot-grid__layout .footer .table-cell .action .middle .order {
   display: inline-block;
 }
-.qm-pivot-grid__layout .header .table-cell .checkbox,
-.qm-pivot-grid__layout .body .table-cell .checkbox,
-.qm-pivot-grid__layout .footer .table-cell .checkbox {
+.qm-pivot-grid__layout .header .table-cell .action .middle .checkbox,
+.qm-pivot-grid__layout .body .table-cell .action .middle .checkbox,
+.qm-pivot-grid__layout .footer .table-cell .action .middle .checkbox {
   display: none;
 }
 .qm-pivot-grid__layout .header .table-cell.col--center,
@@ -31445,14 +31484,18 @@ body {
 .qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell {
   background-color: #f5f5f5;
 }
-.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .order,
-.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell .order {
+.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .middle .order,
+.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell .middle .order {
   display: none;
 }
-.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .checkbox,
-.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell .checkbox {
+.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .middle .checkbox,
+.qm-pivot-grid__layout .container .row-item .table-row.row--selection .table-cell .middle .checkbox {
   display: inline-flex;
 }
+.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .drag-icon,
+.qm-pivot-grid__layout .container .row-item .table-row.row--hover .table-cell .expand-icon {
+  visibility: visible;
+}
 .qm-pivot-grid__layout .container .row-item .table-row .cell--expand {
   display: inline-flex;
   padding: 4px;