dcp-design-react 1.11.4 → 1.11.6

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,5 +1,5 @@
 import React from 'react';
-import type { IColumn, IOrderBy, IRecord, ISuperFilter } from '../../../table/src/table/types';
+import type { IColumn, IOrderBy, IRecord, IRowKey, ISuperFilter } from '../../../table/src/table/types';
 import type { ComponentSize } from '../../../_utils/types';
 export type IPivotMode = 'table' | 'gantt' | 'card' | 'chart';
 export type GroupItem = {
@@ -10,18 +10,29 @@ export type SorterItem = {
     fieldName: string;
     order: IOrderBy;
 };
+export type SearchResult = {
+    value: string;
+    rowKey: IRowKey;
+    dataIndex: string;
+};
+export type PivotRef = {
+    originGridData: IRecord[];
+    flatGroupData: IRecord[];
+};
 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[];
     sorterList: SorterItem[];
     expandedKeys: string[];
+    searchResults: SearchResult[];
+    switchIndex: number;
 };
 type IProps = {
     prefixCls: string;
@@ -32,6 +43,7 @@ type IProps = {
 export declare const PivotGridProvider: React.FC<IProps>;
 export declare const usePivotGridContext: () => (IPivotGridContext & {
     setContext: (data: Partial<IPivotGridContext>) => void;
+    setPivotGridRef: (value: Partial<PivotRef>) => void;
     setColumns: (items: IColumn[]) => void;
     setGridData: (items: IRecord[]) => void;
     setGroupGridData: (data: Record<string, any> | Record<string, any>[]) => void;
@@ -39,5 +51,7 @@ export declare const usePivotGridContext: () => (IPivotGridContext & {
     setFilterList: (items: ISuperFilter[]) => void;
     setSorterList: (items: SorterItem[]) => void;
     setExpandedKeys: (keys: string[]) => void;
+    setSearchResults: (value: SearchResult[]) => void;
+    setSwitchIndex: (value: number) => void;
 }) | undefined;
 export {};

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

@@ -29,3 +29,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;
@@ -125,6 +130,10 @@
           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);
+          }
         }
       }
     }

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

@@ -1,136 +1,139 @@
-/*
- * @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-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;
+  }
+  &.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;
+        }
+      }
+    }
+  }
+}

package/lib/style/index.css

@@ -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;
 }
@@ -31137,7 +31140,7 @@ body {
  * @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 +31151,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 +31186,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;
@@ -31271,6 +31279,10 @@ body {
   align-items: center;
   border-bottom: 1px solid #e8e8e8;
 }
+.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 .footer {
   position: sticky;
   bottom: 0;