@jiaozhiye/qm-design-react 1.11.5 → 1.11.7

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

@@ -6,6 +6,7 @@ export type IGridLayoutContext = {
     scrollbarRef: React.RefObject<ScrollbarRef>;
     indentDepth: number;
     selectionKeys: IRowKey[];
+    treeExpandKeys: IRowKey[];
     countMethod: Record<string, string>;
     summationData: Summary;
 };
@@ -17,6 +18,7 @@ export declare const GridLayoutProvider: React.FC<IProps>;
 export declare const useGridLayoutContext: () => (IGridLayoutContext & {
     setContext: (data: Partial<IGridLayoutContext>) => void;
     setSelectionKeys: (rowKeys: IRowKey[]) => void;
+    setTreeExpandKeys: (rowKeys: IRowKey[]) => void;
     setCountMethod: (value: Record<string, string | undefined>) => void;
     setSummationData: (value: Summary) => void;
 }) | undefined;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type UseContextMenuProps = {
+    ref: React.RefObject<HTMLElement>;
+    popup: (ev: MouseEvent) => React.ReactNode;
+    enabled?: boolean;
+};
+declare const useContextMenu: ({ ref, popup, enabled }: UseContextMenuProps) => {
+    contextMenu: React.JSX.Element;
+    closeMenu: () => void;
+};
+export default useContextMenu;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { IColumn, IOrderBy, IRecord, IRowKey, ISuperFilter } from '../../../table/src/table/types';
-import type { ComponentSize } from '../../../_utils/types';
+import type { ComponentSize, ValueOf } from '../../../_utils/types';
+import type { IGridLayoutContext } from '../grid-layout/Context';
 export type IPivotMode = 'table' | 'gantt' | 'card' | 'chart';
 export type GroupItem = {
     fieldName: string;
@@ -15,13 +16,20 @@ export type SearchResult = {
     rowKey: IRowKey;
     dataIndex: string;
 };
+export type PivotRef = {
+    originGridData: IRecord[];
+    flatGroupData: IRecord[];
+    keyRecordMap: Map<IRowKey, IRecord>;
+    isTree: boolean;
+    gridLayoutContext: Partial<IGridLayoutContext>;
+};
 export type IPivotGridContext = {
+    pivotRef: React.MutableRefObject<PivotRef>;
     prefixCls: string;
     viewMode: IPivotMode;
     size: ComponentSize;
     columns: IColumn[];
     gridData: IRecord[];
-    originGridData: IRecord[];
     groupGridData: Record<string, any> | Record<string, any>[];
     groupList: GroupItem[];
     filterList: ISuperFilter[];
@@ -39,6 +47,8 @@ type IProps = {
 export declare const PivotGridProvider: React.FC<IProps>;
 export declare const usePivotGridContext: () => (IPivotGridContext & {
     setContext: (data: Partial<IPivotGridContext>) => void;
+    getRowKey: (row: IRecord, index: number) => IRowKey;
+    setPivotGridRef: (key: string, value: ValueOf<PivotRef>) => void;
     setColumns: (items: IColumn[]) => void;
     setGridData: (items: IRecord[]) => void;
     setGroupGridData: (data: Record<string, any> | Record<string, any>[]) => void;

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

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const PivotGrid: React.FC;
+import type { PivotGridProps } from './types';
+declare const PivotGrid: React.FC<PivotGridProps>;
 export default PivotGrid;

package/lib/pivot-grid/src/top-bar/exportPanel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExportPanel: () => React.JSX.Element;
+export default ExportPanel;

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

@@ -1,7 +1,8 @@
 import type { IRecord, IOrderBy, IColumn } from '../../../table/src/table/types';
 export declare const createGridColumns: (columns: IColumn[]) => IColumn[];
+export declare const filterGridColumns: (columns: IColumn[]) => IColumn[];
 export declare const getStickyLeft: (flattenColumns: IColumn[], fieldName: string) => number;
-export declare const groupMultiData: (records: IRecord[], groupKeys: Record<string, IOrderBy>[] | undefined, fn: (row: IRecord, key: string) => string | number) => any;
+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 type Subtotal = {
     [key: string]: number;
@@ -29,3 +30,4 @@ export declare const calculations: {
     empty: (arr: number[]) => number;
     notEmpty: (arr: number[]) => number;
 };
+export declare const flattenGroupedData: (groupData: Record<string, any> | Record<string, any>[]) => IRecord[];

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

@@ -2,12 +2,14 @@
  * @Author: 焦质晔
  * @Date: 2022-03-16 19:05:30
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-02 20:51:13
+ * @Last Modified time: 2024-12-11 17:28:36
  */
 @import '../../style/common';
 
 .@{prefix-pivot-grid}__layout {
   .reset-container();
+  display: flex;
+  flex-wrap: nowrap;
   height: 100%;
   .header,
   .footer {
@@ -33,6 +35,9 @@
     position: sticky;
     top: 0;
     z-index: 2;
+    .table-cell {
+      background-color: #d6f2ff !important;
+    }
     .resize-bar {
       position: absolute;
       top: 0;
@@ -127,6 +132,18 @@
           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);
           }
         }
       }

package/lib/pivot-grid/style/top-bar.less

@@ -1,136 +1,145 @@
-/*
- * @Author: 焦质晔
- * @Date: 2022-03-16 19:05:30
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-04 09:17:17
- */
-@import '../../style/common';
-
-.button-icon {
-  display: inline-flex;
-  text-align: center;
-  text-transform: none;
-  text-decoration: none;
-  background: transparent;
-  border: 0;
-  outline: 0;
-  line-height: 1;
-  padding: 5px;
-  color: @--text-color-placeholder;
-  border-radius: @--border-radius-lg;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-  &:not(.no-hover-bg):hover {
-    background-color: @--background-color;
-  }
-}
-
-.@{prefix-pivot-grid}__popper {
-  .container {
-    padding: 6px 15px;
-    &.scroll-y {
-      overflow-y: auto;
-      max-height: calc(100vh - 10px);
-    }
-    & > .label {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 4px 0;
-    }
-    & > .list {
-      li.item {
-        display: flex;
-        align-items: center;
-        margin: 6px 0;
-        .icon {
-          padding: 6px 2px;
-          color: @--text-color-placeholder;
-          cursor: pointer;
-        }
-        .close {
-          margin-left: @--margin-sm;
-          font-size: @--font-size-lg;
-          padding: @--padding-sm;
-          border-radius: @--border-radius-lg;
-          transition: all 0.3s ease;
-          &:hover {
-            background-color: @--background-color;
-          }
-        }
-      }
-      li.check-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: @--border-radius-lg;
-        &.active {
-          .icon {
-            display: block;
-          }
-        }
-        .icon {
-          color: @--primary-color;
-          display: none;
-        }
-      }
-      li.sort-item {
-        display: flex;
-        align-items: center;
-        border-radius: @--border-radius-lg;
-        transition: none;
-        .handle {
-          padding: 5px 6px 5px 2px;
-          color: @--text-color-placeholder;
-          cursor: s-resize;
-        }
-        .label {
-          flex: 1 0;
-          display: inline-flex;
-          align-items: center;
-          .title {
-            flex: 1 0;
-          }
-        }
-      }
-      li.divider {
-        padding: 6px;
-        &::after {
-          content: '';
-          display: block;
-          border-top: 1px solid @--border-color-secondary;
-        }
-      }
-    }
-    & > .add-record {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: @--margin-md 0 4px;
-      .insert {
-        color: @--primary-4;
-        cursor: pointer;
-        .icon {
-          margin-right: 4px;
-        }
-      }
-    }
-    & > .search {
-      .search-switch {
-        display: inline-flex;
-        align-items: center;
-        margin-right: -7px;
-        &.disabled {
-          .btn {
-            pointer-events: none;
-          }
-        }
-        .num {
-          margin: 0 4px;
-          color: @--text-color-placeholder;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-12-13 14:07:07
+ */
+@import '../../style/common';
+
+.button-icon {
+  display: inline-flex;
+  text-align: center;
+  text-transform: none;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  line-height: 1;
+  padding: 5px;
+  color: @--text-color-placeholder;
+  border-radius: @--border-radius-lg;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+  &:not(.no-hover-bg):hover {
+    background-color: @--background-color;
+  }
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.@{prefix-pivot-grid}__popper {
+  .container {
+    padding: 6px 15px;
+    &.scroll-y {
+      overflow-y: auto;
+      max-height: calc(100vh - 10px);
+    }
+    & > .label {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 0;
+    }
+    & > .list {
+      li.item {
+        display: flex;
+        align-items: center;
+        margin: 6px 0;
+        .icon {
+          padding: 6px 2px;
+          color: @--text-color-placeholder;
+          cursor: pointer;
+        }
+        .close {
+          margin-left: @--margin-sm;
+          font-size: @--font-size-lg;
+          padding: @--padding-sm;
+          border-radius: @--border-radius-lg;
+          transition: all 0.3s ease;
+          &:hover {
+            background-color: @--background-color;
+          }
+        }
+      }
+      li.check-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: @--border-radius-lg;
+        &.active {
+          .icon {
+            display: block;
+          }
+        }
+        .icon {
+          color: @--primary-color;
+          display: none;
+        }
+      }
+      li.sort-item {
+        display: flex;
+        align-items: center;
+        border-radius: @--border-radius-lg;
+        transition: none;
+        .handle {
+          padding: 5px 6px 5px 2px;
+          color: @--text-color-placeholder;
+          cursor: s-resize;
+        }
+        .label {
+          flex: 1 0;
+          display: inline-flex;
+          align-items: center;
+          .title {
+            flex: 1 0;
+          }
+        }
+      }
+      li.divider {
+        padding: 6px;
+        &::after {
+          content: '';
+          display: block;
+          border-top: 1px solid @--border-color-secondary;
+        }
+      }
+    }
+    & > .add-record {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: @--margin-md 0 4px;
+      .insert {
+        color: @--primary-4;
+        cursor: pointer;
+        .icon {
+          margin-right: 4px;
+        }
+      }
+    }
+    & > .search {
+      .search-switch {
+        display: inline-flex;
+        align-items: center;
+        margin-right: -7px;
+        &.disabled {
+          .btn {
+            pointer-events: none;
+          }
+        }
+        .num {
+          margin: 0 4px;
+          color: @--text-color-placeholder;
+          line-height: 1;
+        }
+      }
+    }
+  }
+  .ant-dropdown-menu-root {
+    padding: 5px;
+    .ant-dropdown-menu-item {
+      border-radius: @--border-radius-lg;
+    }
+  }
+}

package/lib/style/index.css

@@ -31014,7 +31014,7 @@ body {
  * @Author: 焦质晔
  * @Date: 2022-03-16 19:05:30
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-04 09:17:17
+ * @Last Modified time: 2024-12-13 14:07:07
  */
 .button-icon {
   display: inline-flex;
@@ -31034,6 +31034,9 @@ body {
 .button-icon:not(.no-hover-bg):hover {
   background-color: #f2f2f2;
 }
+.button-icon.disabled {
+  cursor: not-allowed;
+}
 .qm-pivot-grid__popper .container {
   padding: 6px 15px;
 }
@@ -31133,11 +31136,17 @@ body {
   color: rgba(0, 0, 0, 0.45);
   line-height: 1;
 }
+.qm-pivot-grid__popper .ant-dropdown-menu-root {
+  padding: 5px;
+}
+.qm-pivot-grid__popper .ant-dropdown-menu-root .ant-dropdown-menu-item {
+  border-radius: 4px;
+}
 /*
  * @Author: 焦质晔
  * @Date: 2022-03-16 19:05:30
  * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-02 20:51:13
+ * @Last Modified time: 2024-12-11 17:28:36
  */
 .qm-pivot-grid__layout {
   box-sizing: border-box;
@@ -31148,6 +31157,8 @@ body {
   line-height: 1.5715;
   list-style: none;
   font-feature-settings: 'tnum';
+  display: flex;
+  flex-wrap: nowrap;
   height: 100%;
 }
 .qm-pivot-grid__layout .header,
@@ -31181,6 +31192,9 @@ body {
   top: 0;
   z-index: 2;
 }
+.qm-pivot-grid__layout .header .table-cell {
+  background-color: #d6f2ff !important;
+}
 .qm-pivot-grid__layout .header .resize-bar {
   position: absolute;
   top: 0;
@@ -31273,6 +31287,18 @@ body {
 }
 .qm-pivot-grid__layout .body .grid-list .table-row .table-cell.active {
   box-shadow: inset 0 0 0 2px #1890ff;
+  background-color: #ffeb8c;
+}
+.qm-pivot-grid__layout .body .grid-list .table-row .cell--expand {
+  display: inline-flex;
+  padding: 4px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+.qm-pivot-grid__layout .body .grid-list .table-row .cell--expand.fold {
+  transform: rotate(-90deg);
 }
 .qm-pivot-grid__layout .footer {
   position: sticky;