@jiaozhiye/qm-design-react 1.10.18 → 1.11.0

package/lib/table/src/body/DraggableTr.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { DropOption } from './useDragSort';
+import type { IRecord, IRowKey } from '../table/types';
+export type IProps = {
+    rowKey: IRowKey;
+    row: IRecord;
+    className: string;
+    style?: React.CSSProperties;
+    indent: number;
+    filter?: string;
+    dropOption: DropOption;
+    onNodeDragStart: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragEnter: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragOver: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragLeave: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragEnd: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDrop: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    children?: React.ReactNode;
+};
+export type NodeType = {
+    eventKey: IRowKey;
+    data: IRecord;
+    props: IProps;
+};
+declare const DraggableTr: React.FC<IProps>;
+export default DraggableTr;

package/lib/table/src/body/dragUtils.d.ts

@@ -0,0 +1,43 @@
+import type { Nullable } from '../../../_utils/types';
+import type { IRecord, IRowKey } from '../table/types';
+import type { NodeType } from './DraggableTr';
+export type KeyEntity = {
+    index: number;
+    key: IRowKey;
+    level: number;
+    node: IRecord;
+    nodes: IRecord[];
+    parent: Nullable<KeyEntity>;
+    pos: string;
+    children?: KeyEntity[];
+};
+export declare const calcDropPosition: (event: React.MouseEvent, dragNode: NodeType, targetNode: NodeType, indent: number, startMousePosition: {
+    x: number;
+    y: number;
+}, allowDrop: (option: any) => boolean, flattenedKeys: IRowKey[], keyEntities: Record<string, KeyEntity>, expandKeys: IRowKey[], forbidTree: boolean) => {
+    dropPosition: -1 | 0 | 1;
+    dropLevelOffset: number;
+    dropTargetKey: IRowKey;
+    dropTargetPos: string;
+    dropContainerKey: Nullable<IRowKey>;
+    dragOverNodeKey: IRowKey;
+    dropAllowed: boolean;
+};
+export declare const getEntity: (keyEntities: Record<string, KeyEntity>, key: IRowKey) => KeyEntity;
+export declare const arrDel: (list: IRowKey[], value: IRowKey) => (string | number)[];
+export declare const arrAdd: (list: IRowKey[], value: IRowKey) => (string | number)[];
+export declare const posToArr: (pos: string) => string[];
+export declare const isLastChild: (treeNodeEntity: KeyEntity) => boolean;
+export declare const isFirstChild: (treeNodeEntity: KeyEntity) => boolean;
+export declare const getDragChildrenKeys: (dragNodeKey: IRowKey, keyEntities: Record<string, KeyEntity>) => (string | number)[];
+export declare const getTreeNodeProps: (key: IRowKey, { dragOverNodeKey, dropPosition, keyEntities }: {
+    dragOverNodeKey: any;
+    dropPosition: any;
+    keyEntities: any;
+}) => {
+    eventKey: string | number;
+    pos: string;
+    dragOver: boolean;
+    dragOverGapTop: boolean;
+    dragOverGapBottom: boolean;
+};

package/lib/table/src/body/useDragSort.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Nullable } from '../../../_utils/types';
+import type { IRowKey } from '../table/types';
+import type { NodeType } from './DraggableTr';
+export type DropOption = {
+    dropPosition: -1 | 0 | 1 | null;
+    dropLevelOffset: number | null;
+    dropContainerKey: IRowKey | null;
+    dropTargetKey: IRowKey | null;
+    dropTargetPos: string | null;
+    dropAllowed: boolean;
+    dragOverNodeKey: IRowKey | null;
+};
+declare const useDragSort: () => {
+    onNodeDragStart: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragEnter: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragOver: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragLeave: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType) => void;
+    onNodeDragEnd: (ev: React.DragEvent<HTMLTableRowElement>, node: Nullable<NodeType>, outsideTree?: boolean) => void;
+    onNodeDrop: (ev: React.DragEvent<HTMLTableRowElement>, node: NodeType, outsideTree?: boolean) => void;
+    indent: number;
+    dropOptions: DropOption;
+};
+export default useDragSort;

package/lib/table/src/context/index.d.ts

@@ -7,6 +7,7 @@ export type ITableContext = {
     getRowKey: (row: IRecord, index: number) => IRowKey;
     tableRef: React.MutableRefObject<ITableRef>;
     tableBodyRef: React.RefObject<TableBodyRef>;
+    prefixCls: string;
     $size: ComponentSize;
     flattenColumns: IColumn[];
     editableColumns: IColumn[];

package/lib/table/src/hooks/useTableMemo.d.ts

@@ -39,6 +39,7 @@ declare const useTableMemo: <T extends ITableProps>(props: T, extra: IExtra) =>
     isTableClipboard: boolean;
     isSuperSearch: boolean;
     isFastSearch: boolean;
+    isPivotGrid: boolean;
     isGroupSummary: boolean;
     isGroupSubtotal: boolean;
     isTreeTable: boolean;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ToolMethodRef } from '../table/types';
+type IFastSearchProps = {
+    open?: boolean;
+};
+declare const PivotGrid: React.ForwardRefExoticComponent<IFastSearchProps & React.RefAttributes<ToolMethodRef>>;
+export default PivotGrid;

package/lib/table/src/table/props.d.ts

@@ -137,7 +137,8 @@ export declare const propTypes: {
     loading: PropTypes.Requireable<boolean>;
     resizable: PropTypes.Requireable<boolean>;
     uniqueKey: PropTypes.Requireable<string>;
-    customClass: PropTypes.Requireable<string>;
+    className: PropTypes.Requireable<string>;
+    style: PropTypes.Requireable<object>;
     showHeader: PropTypes.Requireable<boolean>;
     ellipsis: PropTypes.Requireable<boolean>;
     dynamicThead: PropTypes.Requireable<boolean>;
@@ -270,6 +271,7 @@ export declare const propTypes: {
     showToolBox: PropTypes.Requireable<boolean>;
     showColumnDefine: PropTypes.Requireable<boolean>;
     showTableInfo: PropTypes.Requireable<boolean>;
+    showPivotGrid: PropTypes.Requireable<boolean>;
     onlyShowIcon: PropTypes.Requireable<boolean>;
     onChange: PropTypes.Requireable<(...args: any[]) => any>;
     onDataChange: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/table/src/table/types.d.ts

@@ -9,6 +9,7 @@ export type InsertMode = 'before' | 'after';
 export type IFilterType = 'text' | 'textarea' | 'checkbox' | 'radio' | 'number' | 'date' | 'tree';
 export type ICheckStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
 export type IEditerType = 'text' | 'textarea' | 'number' | 'select' | 'select-multiple' | 'checkbox' | 'switch' | 'search-helper' | 'search-helper-multiple' | 'tree-helper' | 'tree-helper-multiple' | 'date' | 'datetime' | 'time' | 'month' | 'year' | 'custom';
+export type IOrderBy = 'ascend' | 'descend';
 export type ISelectionType = 'checkbox' | 'radio';
 export type IRecord<T = any> = {
     [key: string]: T;
@@ -86,7 +87,7 @@ export type ISuperFilter = {
     bracketLeft: string;
     fieldName: string;
     expression: string;
-    value: unknown;
+    value: any;
     bracketRight: string;
     logic: string;
 };
@@ -349,7 +350,10 @@ export type ITableProps = {
     loading?: boolean;
     resizable?: boolean;
     uniqueKey?: string;
+    /** @deprecated use `className` instead, and it will be deprecated in the next major version */
     customClass?: string;
+    className?: string;
+    style?: CSSProperties;
     showHeader?: boolean;
     ellipsis?: boolean;
     dynamicThead?: boolean;
@@ -402,6 +406,7 @@ export type ITableProps = {
     showToolBox?: boolean;
     showColumnDefine?: boolean;
     showTableInfo?: boolean;
+    showPivotGrid?: boolean;
     children?: React.ReactNode;
     onlyShowIcon?: boolean;
     onChange?: (pagination: IPagination, filters: IFilter, sorter: ISorter, superFilters: ISuperFilter[], extra: {

package/lib/table/src/toolbox/index.d.ts

@@ -11,6 +11,7 @@ type IToolBoxProps = {
     showCollection?: boolean;
     showFastSearch?: boolean;
     showSuperSearch?: boolean;
+    showPivotGrid?: boolean;
     showGroupSummary?: boolean;
     showToolBox?: boolean;
 };

package/lib/table/style/body.less

@@ -1,77 +1,103 @@
-/*
- * @Author: 焦质晔
- * @Date: 2020-02-28 22:13:54
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2023-10-15 12:47:18
- */
-.body--column {
-  .cell--edit {
-    margin: 0 -1 * (@v-module-distance - 1px);
-    // placeholder
-    input::placeholder {
-      text-align: left;
-    }
-    // search
-    .ant-input-search {
-      width: calc(100% + 1px);
-      & > .ant-input-group > .ant-input-group-addon {
-        line-height: 1;
-      }
-    }
-    // search-helper-multiple
-    .search-helper-multiple {
-      .ant-input-group > .ant-select:first-child {
-        z-index: 1;
-        .ant-select-selector {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-      .ant-select-multiple {
-        .ant-select-selection-overflow-item-rest {
-          pointer-events: none;
-        }
-      }
-    }
-    // textArea
-    textarea[class='ant-input'] {
-      resize: none;
-    }
-    &.is-error {
-      position: relative;
-      .ant-input,
-      .ant-input-affix-wrapper {
-        border-color: @v-danger-color;
-        box-shadow: none;
-        z-index: 1;
-      }
-      .ant-input-search {
-        & + .cell-error {
-          right: 38px;
-        }
-      }
-      .cell-error {
-        position: absolute;
-        top: calc(50% - 9px);
-        font-size: @v-font-size-small;
-        color: @v-danger-color;
-        right: 8px;
-        pointer-events: none;
-        z-index: 1;
-      }
-    }
-  }
-  &.col--center {
-    .cell--edit .ant-input {
-      text-align: center;
-    }
-  }
-  &.col--right {
-    .cell--edit .ant-input {
-      text-align: right;
-    }
-  }
-  &.selected {
-    background-color: @v-table-row-selected-background-color !important;
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 22:13:54
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-12-01 18:48:00
+ */
+.body--row {
+  &-draggable {
+    position: relative;
+    .drop-indicator {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 5;
+      height: 2px;
+      background-color: @v-primary-color;
+      border-radius: 1px;
+      pointer-events: none;
+      &::after {
+        position: absolute;
+        top: -3px;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border: 2px solid @v-primary-color;
+        border-radius: 50%;
+        content: '';
+      }
+    }
+  }
+}
+.body--column {
+  .cell--edit {
+    margin: 0 -1 * (@v-module-distance - 1px);
+    // placeholder
+    input::placeholder {
+      text-align: left;
+    }
+    // search
+    .ant-input-search {
+      width: calc(100% + 1px);
+      & > .ant-input-group > .ant-input-group-addon {
+        line-height: 1;
+      }
+    }
+    // search-helper-multiple
+    .search-helper-multiple {
+      .ant-input-group > .ant-select:first-child {
+        z-index: 1;
+        .ant-select-selector {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+      .ant-select-multiple {
+        .ant-select-selection-overflow-item-rest {
+          pointer-events: none;
+        }
+      }
+    }
+    // textArea
+    textarea[class='ant-input'] {
+      resize: none;
+    }
+    &.is-error {
+      position: relative;
+      .ant-input,
+      .ant-input-affix-wrapper {
+        border-color: @v-danger-color;
+        box-shadow: none;
+        z-index: 1;
+      }
+      .ant-input-search {
+        & + .cell-error {
+          right: 38px;
+        }
+      }
+      .cell-error {
+        position: absolute;
+        top: calc(50% - 9px);
+        font-size: @v-font-size-small;
+        color: @v-danger-color;
+        right: 8px;
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+  }
+  &.col--center {
+    .cell--edit .ant-input {
+      text-align: center;
+    }
+  }
+  &.col--right {
+    .cell--edit .ant-input {
+      text-align: right;
+    }
+  }
+  &.selected {
+    background-color: @v-table-row-selected-background-color !important;
+  }
+}

package/lib/table/style/index.less

@@ -1,30 +1,31 @@
-/*
- * @Author: 焦质晔
- * @Date: 2021-07-23 19:05:57
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-07-23 09:28:50
- */
-@import './variable.less';
-@import './toper.less';
-@import './alert.less';
-@import './full-screen.less';
-@import './reload.less';
-@import './print.less';
-@import './import.less';
-@import './export.less';
-@import './clipboard.less';
-@import './tollbox.less';
-@import './select-collection.less';
-@import './group-summary.less';
-@import './super-search.less';
-@import './fast-search.less';
-@import './column-filter.less';
-@import './table.less';
-@import './header.less';
-@import './body.less';
-@import './footer.less';
-@import './area-select.less';
-@import './pager.less';
-@import './empty.less';
-@import './expandable.less';
-@import './size.less';
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-12-01 14:16:57
+ */
+@import './variable.less';
+@import './toper.less';
+@import './alert.less';
+@import './full-screen.less';
+@import './reload.less';
+@import './print.less';
+@import './import.less';
+@import './export.less';
+@import './clipboard.less';
+@import './tollbox.less';
+@import './select-collection.less';
+@import './group-summary.less';
+@import './super-search.less';
+@import './fast-search.less';
+@import './pivot-grid.less';
+@import './column-filter.less';
+@import './table.less';
+@import './header.less';
+@import './body.less';
+@import './footer.less';
+@import './area-select.less';
+@import './pager.less';
+@import './empty.less';
+@import './expandable.less';
+@import './size.less';

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

@@ -0,0 +1,19 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2024-12-01 14:16:05
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-12-01 14:16:28
+ */
+.@{prefix-table}-pivot-grid {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaozhiye/qm-design-react",
-  "version": "1.10.18",
+  "version": "1.11.0",
   "description": "A Component Library for React",
   "keywords": [
     "React",