dcp-design-react 1.11.7 → 1.11.8

package/lib/pivot-grid/src/config/index.d.ts

@@ -2,5 +2,7 @@ import type { IColumn } from '../../../table/src/table/types';
 declare const _default: {
     selectionColumnDefine: IColumn;
     indentWidth: number;
+    groupMargin: number;
+    separator: string;
 };
 export default _default;

package/lib/pivot-grid/src/grid-layout/Context.d.ts

@@ -9,6 +9,8 @@ export type IGridLayoutContext = {
     treeExpandKeys: IRowKey[];
     countMethod: Record<string, string>;
     summationData: Summary;
+    checkedColumnKey: string;
+    hoverRowKey: IRowKey;
 };
 type IProps = {
     scrollbar: React.RefObject<ScrollbarRef>;
@@ -21,5 +23,7 @@ export declare const useGridLayoutContext: () => (IGridLayoutContext & {
     setTreeExpandKeys: (rowKeys: IRowKey[]) => void;
     setCountMethod: (value: Record<string, string | undefined>) => void;
     setSummationData: (value: Summary) => void;
+    setCheckColumnKey: (value: string) => void;
+    setHoverRowKey: (value: IRowKey) => void;
 }) | undefined;
 export {};

package/lib/pivot-grid/src/grid-layout/FixedLine.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type IProps = {
+    left: number;
+};
+declare const FixedLine: React.FC<IProps>;
+export default FixedLine;

package/lib/pivot-grid/src/grid-layout/LeftPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { GroupLayout } from '../utils';
+import type { VirtualItem } from '../../../virtual-list/src/useVirtual';
+import type { IColumn, IRecord } from '../../../table/src/table/types';
+type IProps = {
+    tbodyColumns: IColumn[];
+    layout: GroupLayout[];
+    displayList: IRecord[];
+    virtualRows: VirtualItem[];
+};
+declare const LeftPanel: React.FC<IProps>;
+export default LeftPanel;

package/lib/pivot-grid/src/grid-layout/MainPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { GroupLayout } from '../utils';
+import type { VirtualItem } from '../../../virtual-list/src/useVirtual';
+import type { IColumn, IRecord } from '../../../table/src/table/types';
+type IProps = {
+    tbodyColumns: IColumn[];
+    layout: GroupLayout[];
+    displayList: IRecord[];
+    virtualRows: VirtualItem[];
+};
+declare const MainPanel: React.FC<IProps>;
+export default MainPanel;

package/lib/pivot-grid/src/hooks/use-context-menu.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 type UseContextMenuProps = {
     ref: React.RefObject<HTMLElement>;
     popup: (ev: MouseEvent) => React.ReactNode;
+    prevent?: (node: HTMLElement) => boolean;
     enabled?: boolean;
 };
-declare const useContextMenu: ({ ref, popup, enabled }: UseContextMenuProps) => {
+declare const useContextMenu: ({ ref, popup, prevent, enabled }: UseContextMenuProps) => {
     contextMenu: React.JSX.Element;
     closeMenu: () => void;
 };

package/lib/pivot-grid/src/hooks/use-row-cell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IColumn, IRecord, IRowKey } from '../../../table/src/table/types';
+declare const useRowCell: (isLeftPanel?: boolean) => {
+    renderGroupRow: (columns: IColumn[], row: IRecord, rowKey: IRowKey) => React.JSX.Element;
+    renderRow: (columns: IColumn[], row: IRecord, rowIndex: number, rowKey: IRowKey) => React.JSX.Element;
+};
+export default useRowCell;

package/lib/pivot-grid/src/hooks/use-virtual-list.d.ts

@@ -0,0 +1,10 @@
+import type { GroupLayout } from '../utils';
+type IProps = {
+    layout: GroupLayout[];
+    isGroup: boolean;
+};
+declare const useVirtualList: (props: IProps) => {
+    rowVirtualizer: import("../../../virtual-list/src/core").Virtualizer<HTMLElement, Element>;
+    virtualRows: import("../../../virtual-list/src/core").VirtualItem[];
+};
+export default useVirtualList;

package/lib/pivot-grid/src/utils/index.d.ts

@@ -1,9 +1,11 @@
-import type { IRecord, IOrderBy, IColumn } from '../../../table/src/table/types';
+import type { IRecord, IOrderBy, IColumn, IRowKey } from '../../../table/src/table/types';
 export declare const createGridColumns: (columns: IColumn[]) => IColumn[];
 export declare const filterGridColumns: (columns: IColumn[]) => IColumn[];
+export declare const isGroupRecord: (row: IRecord) => boolean;
+export declare const getValByPath: (obj: any, path: string) => any;
 export declare const getStickyLeft: (flattenColumns: IColumn[], fieldName: string) => number;
-export declare const groupMultiData: (records: IRecord[], groupKeys: Record<string, IOrderBy>[] | undefined, isTree: boolean, fn: (row: IRecord, key: string) => string | number) => Record<string, any> | Record<string, any>[];
-export declare const getAllKeys: (data: Record<string, any> | Record<string, any>[], parentKey?: string) => string[];
+export declare const groupMultiData: (records: IRecord[], groupKeys: Record<string, IOrderBy>[] | undefined, fn: (row: IRecord, key: string) => string | number) => Record<string, any> | Record<string, any>[];
+export declare const getAllExpandKeys: (data: Record<string, any> | Record<string, any>[], parentKey?: string) => string[];
 export type Subtotal = {
     [key: string]: number;
 };
@@ -21,13 +23,25 @@ export type FieldCalculations = Record<string, (dataList: number[]) => number>;
  */
 export declare const calculateSummary: (groupData: Record<string, any> | Record<string, any>[], fieldCalculations: Record<string, (data: number[]) => number>) => Summary;
 export declare const calculations: {
-    sum: (arr: number[]) => number;
+    sum: (arr: number[]) => string;
     avg: (arr: number[]) => string | 0;
     max: (arr: number[]) => number | undefined;
     min: (arr: number[]) => number | undefined;
-    count: (arr: number[]) => number;
+    count: (arr: number[]) => string;
     unique: (arr: number[]) => number;
     empty: (arr: number[]) => number;
     notEmpty: (arr: number[]) => number;
 };
 export declare const flattenGroupedData: (groupData: Record<string, any> | Record<string, any>[]) => IRecord[];
+export type GroupLayout = {
+    key: IRowKey;
+    top: number;
+    left: number;
+    right: number;
+    height: number;
+};
+export type LayoutOpions = {
+    getRowKey: (row: IRecord, index: number) => IRowKey;
+    rowHeight: number;
+};
+export declare const calculateLayout: (groupData: Record<string, any> | Record<string, any>[], { getRowKey, rowHeight }: LayoutOpions) => GroupLayout[];

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

@@ -2,7 +2,7 @@
  * @Author: 焦质晔
  * @Date: 2022-03-16 19:05:30
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-11 17:28:36
+ * @Last Modified time: 2024-12-21 19:46:45
  */
 @import '../../style/common';
 
@@ -13,22 +13,20 @@
   height: 100%;
   .header,
   .footer {
-    border: 1px solid @--border-color-secondary;
-    .table {
-      table-layout: fixed;
-      display: contents;
-      thead th,
-      tfoot td {
-        text-align: left;
-        font-weight: normal;
-        border-right: 1px solid @--border-color-secondary;
-        position: relative;
-        &.selection-column {
-          text-align: center;
-          justify-content: center;
-          border-right-color: transparent;
-        }
-      }
+    display: flex;
+    flex-direction: row;
+    .fixed-left {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      display: flex;
+      border-left: 1px solid @--border-color-secondary;
+      border-bottom: 1px solid @--border-color-secondary;
+    }
+    .no-fixed {
+      flex: 1 0;
+      display: flex;
+      border-bottom: 1px solid @--border-color-secondary;
     }
   }
   .header {
@@ -36,7 +34,9 @@
     top: 0;
     z-index: 2;
     .table-cell {
+      position: relative;
       background-color: #d6f2ff !important;
+      cursor: pointer;
     }
     .resize-bar {
       position: absolute;
@@ -49,105 +49,9 @@
     }
   }
   .body {
+    display: flex;
+    flex-direction: row;
     min-height: fit-content;
-    .group-card {
-      margin: 15px 0;
-      background-color: #fff;
-      border: 1px solid @--border-color-secondary;
-      &.inner {
-        margin: 0 12px 12px;
-      }
-      &:has(.inner) > .label-row > .label-cell {
-        border-bottom: 0;
-      }
-      .label-row {
-        display: flex;
-        align-items: center;
-        .label-cell {
-          align-self: stretch;
-          display: inline-flex;
-          align-items: center;
-          background-color: #fff;
-          border-bottom: 1px solid @--border-color-secondary;
-          &.expandable-column {
-            justify-content: center;
-            .button-icon {
-              & > .anticon {
-                transition: transform 0.3s ease;
-              }
-              &.expand > .anticon {
-                transform: rotate(90deg);
-              }
-            }
-          }
-          &.col--fix-left {
-            position: sticky;
-            z-index: 1;
-          }
-          .title {
-            flex-shrink: 0;
-            margin-right: 20px;
-            font-weight: 700;
-          }
-        }
-      }
-      .grid-list {
-        margin: 0;
-        border: 0;
-        background: transparent;
-      }
-    }
-    .grid-list {
-      margin: 15px 0;
-      border: 1px solid @--border-color-secondary;
-      .table-row {
-        display: flex;
-        align-items: center;
-        &:hover {
-          .table-cell {
-            background-color: @--background-color-light;
-            .order {
-              display: none;
-            }
-            .checkbox {
-              display: inline-flex;
-            }
-          }
-        }
-        &.row--selection {
-          background-color: @--primary-1;
-          .table-cell {
-            .order {
-              display: none;
-            }
-            .checkbox {
-              display: inline-flex;
-            }
-          }
-        }
-        .table-cell {
-          align-self: stretch; // 子元素高度和父元素一致
-          display: inline-flex;
-          align-items: center;
-          border-bottom: 1px solid @--border-color-secondary;
-          &.active {
-            box-shadow: inset 0 0 0 2px @--primary-color;
-            background-color: rgba(255, 235, 140, 1);
-          }
-        }
-        .cell--expand {
-          display: inline-flex;
-          padding: 4px;
-          font-size: 13px;
-          color: @--text-color-placeholder;
-          cursor: pointer;
-          transition: transform 0.3s ease;
-          &.fold {
-            transform: rotate(-90deg);
-          }
-        }
-      }
-    }
   }
   .footer {
     position: sticky;
@@ -158,11 +62,12 @@
   .body,
   .footer {
     .table-cell {
-      background-color: #fff;
+      align-self: stretch; // 子元素高度和父元素一致
+      display: inline-flex;
+      align-items: center;
+      border-top: 1px solid @--border-color-secondary;
       border-right: 1px solid @--border-color-secondary;
-      &:last-child {
-        border-right: 0;
-      }
+      background-color: #fff;
       &.selection-column {
         justify-content: center;
         border-right-color: transparent;
@@ -174,20 +79,30 @@
         display: none;
       }
       &.col--center {
-        text-align: center !important;
+        text-align: center;
         justify-content: center;
       }
       &.col--right {
-        text-align: right !important;
+        text-align: right;
         justify-content: flex-end;
       }
       &.col--fix-left {
         position: sticky;
         z-index: 1;
       }
+      &.col--checked {
+        background-color: @--primary-1;
+      }
+      &.active {
+        box-shadow: inset 0 0 0 2px @--primary-color;
+        background-color: rgba(255, 235, 140, 1);
+      }
       .cell {
         .text-overflow-cut();
         padding: 0 @--padding-sm;
+        &.indent {
+          padding-left: 16px;
+        }
       }
     }
     .label-cell,
@@ -232,28 +147,125 @@
     cursor: col-resize;
     z-index: 2;
   }
+  .fixed-line {
+    position: absolute;
+    left: -1px;
+    top: 0;
+    width: 0;
+    height: 100%;
+    border-left: 1px solid @--primary-3;
+    z-index: 2;
+    pointer-events: none;
+  }
+  // 左侧面板
+  .left-panel {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    .group-label {
+      border-right: 0 !important;
+    }
+  }
+  .main-panel {
+    flex: 1 0;
+    z-index: 0;
+    .group-label,
+    .row-item {
+      border-left: 0 !important;
+    }
+  }
+  .container {
+    position: relative;
+    left: 0;
+    top: 0;
+    .group-label {
+      position: absolute;
+      border: 1px solid @--border-color-secondary;
+      background-color: #fff;
+      .label-row {
+        display: flex;
+        align-items: center;
+      }
+      .label-cell {
+        align-self: stretch;
+        display: inline-flex;
+        align-items: center;
+        &.expandable-column {
+          justify-content: center;
+          .button-icon {
+            & > .anticon {
+              transition: transform 0.3s ease;
+            }
+            &.expand > .anticon {
+              transform: rotate(90deg);
+            }
+          }
+        }
+        &.col--fix-left {
+          position: sticky;
+          z-index: 1;
+        }
+        .title {
+          flex-shrink: 0;
+          margin-right: 20px;
+          font-weight: 700;
+        }
+      }
+    }
+    .row-item {
+      position: absolute;
+      border-left: 1px solid @--border-color-secondary;
+      &.last {
+        .table-cell {
+          border-bottom: 1px solid @--border-color-secondary;
+        }
+      }
+      .table-row {
+        display: flex;
+        align-items: center;
+        height: inherit;
+        &.row--hover,
+        &.row--selection {
+          .table-cell {
+            background-color: @--background-color-light;
+            .order {
+              display: none;
+            }
+            .checkbox {
+              display: inline-flex;
+            }
+          }
+        }
+        .cell--expand {
+          display: inline-flex;
+          padding: 4px;
+          font-size: 13px;
+          color: @--text-color-placeholder;
+          cursor: pointer;
+          transition: transform 0.3s ease;
+          &.fold {
+            transform: rotate(-90deg);
+          }
+        }
+      }
+    }
+  }
   // size
   &.small {
-    .header .table th,
-    .footer .table td,
-    .body .grid-list > li,
-    .body .group-card > li {
+    .label-row,
+    .table-cell {
       height: 26px;
     }
   }
   &.middle {
-    .header .table th,
-    .footer .table td,
-    .body .grid-list > li,
-    .body .group-card > li {
+    .label-row,
+    .table-cell {
       height: 34px;
     }
   }
   &.large {
-    .header .table th,
-    .footer .table td,
-    .body .grid-list > li,
-    .body .group-card > li {
+    .label-row,
+    .table-cell {
       height: 42px;
     }
   }