@jiaozhiye/qm-design-react 1.10.19 → 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/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>;

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

@@ -350,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;

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-11-28 20:00:14
- */
-@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.19",
+  "version": "1.11.0",
   "description": "A Component Library for React",
   "keywords": [
     "React",