dcp-design-react 1.10.18 → 1.10.19

package/lib/locale/lang/en.d.ts

@@ -320,6 +320,10 @@ declare const _default: {
                 queryNext: string;
             };
         };
+        pivotGrid: {
+            text: string;
+            settingTitle: string;
+        };
     };
 };
 export default _default;

package/lib/locale/lang/en.js

@@ -1,8 +1,8 @@
-/*
- * @Author: 焦质晔
- * @Date: 2021-06-19 08:46:00
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-07-26 10:21:48
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-06-19 08:46:00
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-28 20:28:15
  */
 export default {
   name: 'en',
@@ -325,6 +325,10 @@ export default {
         queryPrev: 'Find previous',
         queryNext: 'Find next'
       }
+    },
+    pivotGrid: {
+      text: 'Pivot Grid',
+      settingTitle: 'Pivot Grid Dashboard'
     }
   }
 };

package/lib/locale/lang/zh-cn.d.ts

@@ -320,6 +320,10 @@ declare const _default: {
                 queryNext: string;
             };
         };
+        pivotGrid: {
+            text: string;
+            settingTitle: string;
+        };
     };
 };
 export default _default;

package/lib/locale/lang/zh-cn.js

@@ -1,8 +1,8 @@
-/*
- * @Author: 焦质晔
- * @Date: 2021-06-19 08:45:54
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-07-26 09:00:17
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-06-19 08:45:54
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-28 20:28:06
  */
 export default {
   name: 'zh-cn',
@@ -325,6 +325,10 @@ export default {
         queryPrev: '查找上一个',
         queryNext: '查找下一个'
       }
+    },
+    pivotGrid: {
+      text: '透视表',
+      settingTitle: '透视表看板'
     }
   }
 };

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

@@ -0,0 +1,3 @@
+import PivotGrid from './src/main';
+export type { PivotGridRef, PivotGridProps } from './src/main/types';
+export default PivotGrid;

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    selectionColumnDefine: {
+        title: string;
+        dataIndex: string;
+        width: number;
+    };
+    indentWidth: number;
+};
+export default _default;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Body: React.FC;
+export default Body;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { IRowKey } from '../../../table/src/table/types';
+import type { ScrollbarRef } from '../../../scrollbar';
+export type IGridLayoutContext = {
+    scrollbarRef: React.RefObject<ScrollbarRef>;
+    indentDepth: number;
+    selectionKeys: IRowKey[];
+    countMethod: Record<string, any>;
+};
+type IProps = {
+    scrollbar: React.RefObject<ScrollbarRef>;
+    children?: React.ReactNode;
+};
+export declare const GridLayoutProvider: React.FC<IProps>;
+export declare const useGridLayoutContext: () => (IGridLayoutContext & {
+    setContext: (data: Partial<IGridLayoutContext>) => void;
+    setSelectionKeys: (rowKeys: IRowKey[]) => void;
+    setCountMethod: (value: IGridLayoutContext[`countMethod`]) => void;
+}) | undefined;
+export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IColumn } from '../../../table/src/table/types';
+type IProps = {
+    column: IColumn;
+};
+declare const CountPanel: React.FC<IProps>;
+export default CountPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Footer: React.FC;
+export default Footer;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type IProps = {
+    labelKey: string;
+    depth: number;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+declare const GroupCard: React.FC<IProps>;
+export default GroupCard;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Header: React.FC;
+export default Header;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IRecord } from '../../../table/src/table/types';
+type IProps = {
+    records: IRecord[];
+};
+declare const List: React.FC<IProps>;
+export default List;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IColumn } from '../../../table/src/table/types';
+type IProps = {
+    column: IColumn;
+};
+declare const ResizeBar: React.FC<IProps>;
+export default ResizeBar;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Grid: React.FC;
+export default Grid;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { IColumn, IOrderBy, IRecord, ISuperFilter } from '../../../table/src/table/types';
+import type { ComponentSize } from '../../../_utils/types';
+export type IPivotMode = 'table' | 'gantt' | 'card' | 'chart';
+export type GroupItem = {
+    fieldName: string;
+    order: IOrderBy;
+};
+export type SorterItem = {
+    fieldName: string;
+    order: IOrderBy;
+};
+export type IPivotGridContext = {
+    prefixCls: string;
+    viewMode: IPivotMode;
+    size: ComponentSize;
+    columns: IColumn[];
+    tableData: IRecord[];
+    groupList: GroupItem[];
+    filterList: ISuperFilter[];
+    sorterList: SorterItem[];
+    expandedKeys: string[];
+};
+type IProps = {
+    prefixCls: string;
+    flatColumns: IColumn[];
+    children?: React.ReactNode;
+};
+export declare const PivotGridProvider: React.FC<IProps>;
+export declare const usePivotGridContext: () => (IPivotGridContext & {
+    setContext: (data: Partial<IPivotGridContext>) => void;
+    setColumns: (items: IColumn[]) => void;
+    setTableData: (records: IRecord[]) => void;
+    setGroupList: (items: GroupItem[]) => void;
+    setFilterList: (items: ISuperFilter[]) => void;
+    setSorterList: (items: SorterItem[]) => void;
+    setExpandedKeys: (keys: string[]) => void;
+}) | undefined;
+export {};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PivotGrid: React.FC;
+export default PivotGrid;

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

@@ -0,0 +1,8 @@
+import { IColumn, IRecord } from '../../../table/src/table/types';
+export type PivotGridRef = {};
+export type PivotGridProps = {
+    columns?: IColumn[];
+    tableColumns?: IColumn[];
+    dataSource?: IRecord[];
+    tableDataSource?: IRecord[];
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FieldsPanel: React.FC;
+export default FieldsPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FilterPanel: React.FC;
+export default FilterPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const GroupPanel: React.FC;
+export default GroupPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LineHeightPanel: React.FC;
+export default LineHeightPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SearchPanel: React.FC;
+export default SearchPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SorterPanel: React.FC;
+export default SorterPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ViewMode: React.FC;
+export default ViewMode;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TopBar: React.FC;
+export default TopBar;

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

@@ -0,0 +1,2 @@
+import type { IRecord, IOrderBy } from '../../../table/src/table/types';
+export declare const groupMultiData: (records: IRecord[], groupKeys: Record<string, IOrderBy>[] | undefined, fn: (row: IRecord, key: string) => string | number) => any;

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

@@ -0,0 +1,234 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-29 13:20:19
+ */
+@import '../../style/common';
+
+.@{prefix-pivot-grid}__layout {
+  .reset-container();
+  height: 100%;
+  .header,
+  .footer {
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid @--border-color-secondary;
+    border-radius: @pivot-border-radius;
+    .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;
+        }
+      }
+    }
+  }
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    .resize-bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: -3px;
+      width: 6px;
+      z-index: 2;
+      cursor: col-resize;
+    }
+  }
+  .body {
+    min-height: fit-content;
+    .group-card {
+      margin: 15px 0;
+      border: 1px solid @--border-color-secondary;
+      border-radius: @pivot-border-radius;
+      background-color: #fff;
+      &.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;
+          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);
+              }
+            }
+          }
+        }
+      }
+      .grid-list {
+        margin: 0;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+    }
+    .grid-list {
+      margin: 15px 0;
+      border: 1px solid @--border-color-secondary;
+      border-radius: @pivot-border-radius;
+      background-color: #fff;
+      .table-row {
+        display: flex;
+        align-items: center;
+        &:hover {
+          background-color: @--background-color-light;
+          .table-cell {
+            .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-right: 1px solid @--border-color-secondary;
+          border-bottom: 1px solid @--border-color-secondary;
+          &:last-child {
+            border-right: 0;
+          }
+          &.selection-column {
+            justify-content: center;
+            border-right-color: transparent;
+          }
+          .order {
+            display: inline-block;
+          }
+          .checkbox {
+            display: none;
+          }
+        }
+        &:last-child {
+          .table-cell {
+            border-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+  }
+  .header,
+  .body,
+  .footer {
+    .table-cell {
+      &.col--center {
+        text-align: center !important;
+        justify-content: center;
+      }
+      &.col--right {
+        text-align: right !important;
+        justify-content: flex-end;
+      }
+      .cell {
+        .text-overflow-cut();
+        padding: 0 @--padding-sm;
+      }
+      &:hover {
+        .count-select {
+          visibility: visible;
+        }
+      }
+    }
+    .count-select {
+      .text-overflow-cut();
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+      width: 100%;
+      padding: 0 @--padding-sm;
+      color: @--text-color-placeholder;
+      cursor: pointer;
+      visibility: hidden;
+      &:hover,
+      &.ant-dropdown-open {
+        visibility: visible;
+        background-color: @--background-color-light;
+      }
+      &.show {
+        visibility: visible;
+      }
+      .icon {
+        margin-left: 4px;
+      }
+    }
+  }
+  .resize-line {
+    position: absolute;
+    left: -2px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: @--primary-color;
+    cursor: col-resize;
+    z-index: 2;
+  }
+  // size
+  &.small {
+    .header .table th,
+    .footer .table td,
+    .body .grid-list > li,
+    .body .group-card > li {
+      height: 26px;
+    }
+  }
+  &.middle {
+    .header .table th,
+    .footer .table td,
+    .body .grid-list > li,
+    .body .group-card > li {
+      height: 34px;
+    }
+  }
+  &.large {
+    .header .table th,
+    .footer .table td,
+    .body .grid-list > li,
+    .body .group-card > li {
+      height: 42px;
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2024-11-28 19:27:58
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-28 20:04:56
+ */
+@import './variable.less';
+@import './main.less';
+@import './top-bar.less';
+@import './grid-layout.less';

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

@@ -0,0 +1,43 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-29 10:33:42
+ */
+@import '../../style/common';
+
+.@{prefix-pivot-grid}__main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .top-bar {
+    padding: @--padding-sm;
+    border-bottom: 1px solid @--border-color-secondary;
+    .action-btn {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px 12px;
+      border-radius: @--border-radius-lg;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      &:hover,
+      &.active,
+      &.ant-dropdown-open {
+        background-color: @--background-color;
+      }
+      .icon {
+        margin-right: 6px;
+      }
+    }
+    .ant-divider-vertical {
+      margin: 0;
+      height: 1.25em;
+    }
+  }
+  .wrapper {
+    flex: auto;
+    height: 0;
+    padding: @--padding-md;
+    background-color: @--background-color-light;
+  }
+}

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

@@ -0,0 +1,105 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-29 10:34:35
+ */
+@import '../../style/common';
+
+.button-icon {
+  display: inline-block;
+  text-align: center;
+  text-transform: none;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  line-height: 0;
+  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;
+    & > .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;
+        }
+      }
+    }
+    & > .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/pivot-grid/style/variable.less

@@ -0,0 +1,9 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 21:58:58
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-11-28 20:04:56
+ */
+@prefix-pivot-grid: ~'@{qm-prefix}-pivot-grid';
+
+@pivot-border-radius: 6px;