@jiaozhiye/qm-design-react 1.11.17 → 1.11.18

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

@@ -18,6 +18,7 @@ export type ITableContext = {
     sorter: ITableState['sorter'];
     filters: ITableState['filters'];
     superFilters: ITableState['superFilters'];
+    activedCell: ITableState['activedCell'];
     mergedTdCells: IMergedCell[];
     derivedMergeCells: IMergeCellItem[];
     layout: ITableState['layout'];
@@ -56,6 +57,7 @@ export type ITableContext = {
     setSelectionRows: (records: IRecord[]) => void;
     setSelectionKeysEffect: (rowKeys: IRowKey[]) => void;
     setInvalidRowKeys: (rowKeys: IRowKey[]) => void;
+    setActivedCell: (value: ITableState['activedCell']) => void;
     setMergedCells: (options: IMergedCell[]) => void;
     getSpan: (row: IRecord, column: IColumn, rowIndex: number, columnIndex: number, tableData: IRecord[]) => IRowColSpan;
     getStickyLeft: (dataIndex: string, part?: string) => number;
@@ -67,7 +69,6 @@ export type ITableContext = {
     setPingRight: (value: boolean) => void;
     setSpinning: (value: boolean) => void;
     setFullScreen: (value: boolean) => void;
-    setShouldToTop: (value: boolean) => void;
     doFieldValidate: (rules: IRule[], val: unknown, rowKey: IRowKey, columnKey: string, columnTitle: string) => void;
     createTableData: (list: IRecord[]) => void;
     createGroupData: (records: IRecord[]) => IRecord[];

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

@@ -22,7 +22,6 @@ type IExtra = {
     isFullScreen: boolean;
     setLayout: <T extends ITableState['layout']>(layout: T | ((prev: T) => T)) => void;
     setElementStore: (key: string, value: HTMLElement) => void;
-    setShouldToTop: (value: boolean) => void;
 };
 declare const useTableLayout: <T extends ITableProps>(props: T, extra: IExtra) => {
     createElementStore: () => void;

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

@@ -35,7 +35,6 @@ export type ITableRef = {
     isTreeTable: boolean;
     scrollXLoad: boolean;
     scrollYLoad: boolean;
-    shouldToTop: boolean;
     selectionRows: IRecord[];
     recordsMap: Map<IRowKey, IRecord>;
     unMounted: boolean;
@@ -60,7 +59,6 @@ declare const useTableRef: <T extends ITableProps>(props: T, { getRowKey, $size
     setSummaries: (option: ITableRef['summaries']) => void;
     setScrollXLoad: (value: boolean) => void;
     setScrollYLoad: (value: boolean) => void;
-    setShouldToTop: (value: boolean) => void;
     setSelectionRows: (selectKeys: IRecord[]) => void;
     setRecordsMap: (key: IRowKey, value: IRecord) => void;
     setUnMounted: (value: boolean) => void;
@@ -96,7 +94,6 @@ declare const useTableRef: <T extends ITableProps>(props: T, { getRowKey, $size
     isTreeTable: boolean;
     scrollXLoad: boolean;
     scrollYLoad: boolean;
-    shouldToTop: boolean;
     selectionRows: IRecord[];
     recordsMap: Map<IRowKey, IRecord>;
     unMounted: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IFilter, IMergedCell, IPagination, IRecord, IRowKey, ISorter, ISuperFilter, ITableProps } from '../table/types';
+import type { IFilter, IMergedCell, IPagination, IRecord, IRowKey, ISearchResult, ISorter, ISuperFilter, ITableProps } from '../table/types';
 export type ITableState = {
     tableFlatData: IRecord[];
     filters: IFilter;
@@ -10,6 +10,7 @@ export type ITableState = {
     rowExpandedKeys: IRowKey[];
     highlightKey: IRowKey;
     updateMark: number;
+    activedCell: Partial<ISearchResult>;
     mergedTdCells: IMergedCell[];
     layout: {
         gutterWidth: number;
@@ -51,6 +52,8 @@ declare const useTableState: <T extends ITableProps>(props: T) => {
     setHighlightKey: React.Dispatch<React.SetStateAction<string | number>>;
     updateMark: number;
     forceUpdate: React.DispatchWithoutAction;
+    activedCell: Partial<ISearchResult>;
+    setActivedCell: React.Dispatch<Partial<ISearchResult>>;
     mergedTdCells: IMergedCell[];
     setMergedCells: (updater: IMergedCell[] | ((origin: IMergedCell[]) => IMergedCell[])) => void;
     layout: {

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

@@ -82,6 +82,13 @@ export type ISorter = {
 export type ISummaries = {
     [key: string]: number;
 };
+export type ISearchResult = {
+    value: string;
+    rowKey: IRowKey;
+    dataIndex: string;
+    rowIndex: number;
+    colIndex: number;
+};
 export type ISuperFilter = {
     type: string;
     bracketLeft: string;

package/lib/table/style/fast-search.less

@@ -1,108 +1,150 @@
-/*
- * @Author: 焦质晔
- * @Date: 2022-03-16 19:05:30
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2022-11-26 21:11:04
- */
-.@{prefix-table}-fast-search {
-  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;
-  }
-}
-
-.@{prefix-table}-fast-search__setting {
-  height: 100%;
-  .main {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    .top {
-      display: flex;
-      flex: 1;
-      height: 0;
-      overflow-y: auto;
-      .container {
-        flex: 1;
-        width: 0;
-        .@{qm-prefix}-tabs {
-          margin-top: -5px;
-        }
-      }
-      .saved {
-        width: 200px;
-        .form-wrap {
-          display: flex;
-        }
-        .card-wrap {
-          margin-top: @v-module-distance;
-          border: 1px solid @v-table-border-color;
-          > h5 {
-            display: flex;
-            align-items: center;
-            font-size: inherit;
-            font-weight: normal;
-            margin-bottom: 0;
-            padding: 0 @v-module-distance;
-            border-bottom: 1px solid @v-table-border-color;
-            background-color: @v-table-header-background-color;
-          }
-          > ul {
-            margin-bottom: 0;
-            li {
-              display: flex;
-              align-items: center;
-              position: relative;
-              padding: 6px @v-module-distance;
-              border-bottom: 1px solid @v-table-border-color;
-              cursor: pointer;
-              transition: all 0.3s ease;
-              &:last-of-type {
-                border-bottom: 0;
-              }
-              &:hover {
-                background-color: @v-table-row-hover-background-color;
-                .close {
-                  visibility: visible;
-                }
-              }
-              &.selected {
-                background-color: @v-table-row-selected-background-color;
-              }
-              .title {
-                i {
-                  margin-right: 5px;
-                }
-              }
-              .close {
-                position: absolute;
-                right: @v-module-distance;
-                visibility: hidden;
-              }
-            }
-          }
-        }
-      }
-      .line {
-        border-left: 1px dashed @--border-color-base;
-        padding-left: @v-module-distance;
-        margin-left: @v-module-distance;
-      }
-    }
-    .bottom {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px 5px;
-      margin-top: 10px;
-      border-top: 1px dashed @--border-color-base;
-    }
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-11-26 21:11:04
+ */
+.@{prefix-table}-fast-search {
+  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;
+  }
+}
+
+.@{prefix-table}-fast-search__setting {
+  height: 100%;
+  .main {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    .container {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      .search-box {
+        display: flex;
+        align-items: center;
+        .label {
+          width: 100px;
+        }
+      }
+      .condition {
+        margin-top: @v-module-distance;
+        margin-bottom: @v-module-distance;
+      }
+      .all-list {
+        flex: 1 0;
+        min-height: 0;
+        overflow-y: auto;
+        .rtable {
+          width: 100%;
+          border: 1px solid @v-table-border-color;
+          thead {
+            position: sticky;
+            top: 0;
+            th {
+              background-color: @v-table-header-background-color;
+              height: 30px;
+              text-align: center;
+            }
+          }
+          tbody {
+            tr {
+              &.active {
+                td {
+                  background-color: @--primary-1;
+                  color: @v-primary-color;
+                }
+              }
+              &:hover {
+                td {
+                  text-decoration: underline;
+                }
+              }
+              td {
+                height: 30px;
+                text-align: center;
+                border-top: 1px solid @v-table-border-color;
+                cursor: pointer;
+                .text-overflow-cut();
+                max-width: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    .saved {
+      width: 240px;
+      .form-wrap {
+        display: flex;
+      }
+      .card-wrap {
+        margin-top: @v-module-distance;
+        border: 1px solid @v-table-border-color;
+        > h5 {
+          display: flex;
+          align-items: center;
+          font-size: inherit;
+          font-weight: normal;
+          margin-bottom: 0;
+          padding: 0 @v-module-distance;
+          border-bottom: 1px solid @v-table-border-color;
+          background-color: @v-table-header-background-color;
+        }
+        > ul {
+          margin-bottom: 0;
+          li {
+            display: flex;
+            align-items: center;
+            position: relative;
+            padding: 6px @v-module-distance;
+            border-bottom: 1px solid @v-table-border-color;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            &:last-of-type {
+              border-bottom: 0;
+            }
+            &:hover {
+              background-color: @v-table-row-hover-background-color;
+              .close {
+                visibility: visible;
+              }
+            }
+            &.selected {
+              background-color: @v-table-row-selected-background-color;
+            }
+            .title {
+              i {
+                margin-right: 5px;
+              }
+            }
+            .close {
+              position: absolute;
+              right: @v-module-distance;
+              visibility: hidden;
+            }
+          }
+        }
+      }
+    }
+    .line {
+      border-left: 1px dashed @--border-color-base;
+      padding-left: @v-module-distance;
+      margin-left: @v-module-distance;
+    }
+  }
+  .bottom-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

package/lib/table/style/table.less

@@ -67,7 +67,6 @@
     overflow-y: auto;
     overflow-x: auto;
     .virtual-container {
-      contain: paint;
       will-change: margin-top, margin-left;
     }
   }
@@ -147,6 +146,14 @@
     position: relative;
     text-align: left;
     // line-height: @v-table-row-line-height;
+    /* 溢出列 */
+    &.col--ellipsis {
+      .cell {
+        .text-overflow-cut();
+        word-break: break-all;
+        white-space: pre;
+      }
+    }
     &:not(.col--ellipsis) {
       padding: ceil(((@v-table-row-height - @v-table-row-line-height) / 2)) 0;
       .cell {
@@ -159,6 +166,10 @@
     &.col--right:not(.header--column) {
       text-align: right;
     }
+    &.col-active {
+      box-shadow: inset 0 0 0 2px @v-primary-color;
+      background-color: @v-table-row-active-color !important;
+    }
     .cell {
       white-space: pre-wrap;
       word-break: break-all;
@@ -357,19 +368,6 @@
     }
   }
 
-  /* 溢出列 */
-  .header--column,
-  .body--column,
-  .footer--column {
-    &.col--ellipsis {
-      .cell {
-        .text-overflow-cut();
-        word-break: break-all;
-        white-space: pre;
-      }
-    }
-  }
-
   /* 弹出层 */
   &__popper {
     padding: @v-module-distance;

package/lib/table/style/variable.less

@@ -1,50 +1,51 @@
-/*
- * @Author: 焦质晔
- * @Date: 2020-02-28 21:58:58
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2021-09-04 16:24:06
- */
-@prefix-table: ~'@{qm-prefix}-table';
-
-/* font-size */
-@v-font-size: @--font-size-base;
-@v-font-size-large: @--font-size-base;
-@v-font-size-small: @--font-size-sm;
-
-@v-font-color: @--text-color;
-@v-font-color-secondary: @--text-color-secondary;
-@v-font-color-placeholder: @--text-color-placeholder;
-@v-font-disabled-color: @--disabled-color;
-
-/* primary color */
-@v-primary-color: @--primary-color;
-@v-danger-color: @--error-color;
-
-// module distance
-@v-module-distance: @--padding-md;
-
-/* border radius */
-@v-border-radius: @--border-radius-base;
-
-/* icon */
-@v-icon-color: #bfbfbf;
-
-/* table color */
-@v-table-header-background-color: #fafafa;
-@v-table-border-color: #e8e8e8;
-@v-table-resizable-color: #d9d9d9;
-@v-table-background-color: #ffffff;
-@v-table-footer-background-color: #fafafa;
-@v-table-column-sort-hover-color: #f2f2f2;
-@v-table-column-sorted-color: #f5f5f5;
-@v-table-column-filter-hover-color: #e5e5e5;
-
-/* table row */
-@v-table-row-height: 34px;
-@v-table-row-height-large: 42px;
-@v-table-row-height-small: 26px;
-@v-table-row-line-height: 24px;
-@v-table-row-hover-background-color: #f5f5f5;
-@v-table-row-selected-background-color: @--primary-2;
-@v-table-row-current-background-color: @--primary-4;
-@v-table-row-expanded-background-color: #fafafa;
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 21:58:58
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-09-04 16:24:06
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+/* font-size */
+@v-font-size: @--font-size-base;
+@v-font-size-large: @--font-size-base;
+@v-font-size-small: @--font-size-sm;
+
+@v-font-color: @--text-color;
+@v-font-color-secondary: @--text-color-secondary;
+@v-font-color-placeholder: @--text-color-placeholder;
+@v-font-disabled-color: @--disabled-color;
+
+/* primary color */
+@v-primary-color: @--primary-color;
+@v-danger-color: @--error-color;
+
+// module distance
+@v-module-distance: @--padding-md;
+
+/* border radius */
+@v-border-radius: @--border-radius-base;
+
+/* icon */
+@v-icon-color: #bfbfbf;
+
+/* table color */
+@v-table-header-background-color: #fafafa;
+@v-table-border-color: #e8e8e8;
+@v-table-resizable-color: #d9d9d9;
+@v-table-background-color: #ffffff;
+@v-table-footer-background-color: #fafafa;
+@v-table-column-sort-hover-color: #f2f2f2;
+@v-table-column-sorted-color: #f5f5f5;
+@v-table-column-filter-hover-color: #e5e5e5;
+
+/* table row */
+@v-table-row-height: 34px;
+@v-table-row-height-large: 42px;
+@v-table-row-height-small: 26px;
+@v-table-row-line-height: 24px;
+@v-table-row-hover-background-color: #f5f5f5;
+@v-table-row-selected-background-color: @--primary-2;
+@v-table-row-current-background-color: @--primary-4;
+@v-table-row-expanded-background-color: #fafafa;
+@v-table-row-active-color: rgba(250, 173, 20, 0.3);

package/lib/virtual-list/style/index.less

@@ -13,7 +13,6 @@
   .container {
     display: block;
     ul {
-      contain: paint;
       will-change: transform;
       li.list-item {
         list-style: none;

package/package.json

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