@nokecy/qc-ui 1.1.45 → 1.1.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ag-grid-plus/ag-gridPlus.js +9 -14
- package/dist/cjs/ag-grid-plus/hooks/useTypeInferenceRow.d.ts +18 -0
- package/dist/cjs/ag-grid-plus/hooks/useTypeInferenceRow.js +43 -0
- package/dist/cjs/ag-grid-plus/utils/emptyState.js +3 -1
- package/dist/esm/ag-grid-plus/ag-gridPlus.js +9 -14
- package/dist/esm/ag-grid-plus/hooks/useTypeInferenceRow.d.ts +18 -0
- package/dist/esm/ag-grid-plus/hooks/useTypeInferenceRow.js +37 -0
- package/dist/esm/ag-grid-plus/utils/emptyState.js +3 -1
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ var _antd = require("antd");
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _agGridEnterprise = require("ag-grid-enterprise");
|
|
12
12
|
var _theme = require("./theme");
|
|
13
|
+
var _useTypeInferenceRow = require("./hooks/useTypeInferenceRow");
|
|
13
14
|
require("./index.less");
|
|
14
15
|
var _queryForm = _interopRequireDefault(require("./queryForm"));
|
|
15
16
|
var _toolBar = _interopRequireDefault(require("./toolBar"));
|
|
@@ -315,16 +316,8 @@ function AgGridPlus(props) {
|
|
|
315
316
|
};
|
|
316
317
|
}, []);
|
|
317
318
|
|
|
318
|
-
//
|
|
319
|
-
|
|
320
|
-
// 类型推断应该只在初始化时进行一次,后续数据更新不应改变列定义
|
|
321
|
-
var firstRowDataRef = (0, _react.useRef)(null);
|
|
322
|
-
(0, _react.useEffect)(function () {
|
|
323
|
-
// 只在首次有数据时保存
|
|
324
|
-
if (!firstRowDataRef.current && rowData.length > 0) {
|
|
325
|
-
firstRowDataRef.current = rowData[0];
|
|
326
|
-
}
|
|
327
|
-
}, [rowData]);
|
|
319
|
+
// 用于列类型推断的首行数据。为什么必须是 state 而不是 ref,见该 hook 的注释。@author nokecy
|
|
320
|
+
var typeInferenceRow = (0, _useTypeInferenceRow.useTypeInferenceRow)(rowData);
|
|
328
321
|
|
|
329
322
|
/**
|
|
330
323
|
* 【P0 + P1 优化】使用派生状态应用方案(单向数据流)
|
|
@@ -625,7 +618,7 @@ function AgGridPlus(props) {
|
|
|
625
618
|
// 计算所有列定义(包括隐藏的列)
|
|
626
619
|
// 【修复】移除 rowData 依赖,使用缓存的首行数据进行类型推断
|
|
627
620
|
var allColDefs = (0, _react.useMemo)(function () {
|
|
628
|
-
var dataForTypeInference =
|
|
621
|
+
var dataForTypeInference = typeInferenceRow || (rowData.length > 0 ? rowData[0] : {});
|
|
629
622
|
var cols = getTableColumns([dataForTypeInference]);
|
|
630
623
|
allColDefsRef.current = cols; // 同步更新 ref
|
|
631
624
|
|
|
@@ -645,7 +638,7 @@ function AgGridPlus(props) {
|
|
|
645
638
|
});
|
|
646
639
|
}
|
|
647
640
|
return cols;
|
|
648
|
-
}, [_react.default.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions]);
|
|
641
|
+
}, [_react.default.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions, typeInferenceRow]);
|
|
649
642
|
|
|
650
643
|
// 稳定化 gridParams 和 sortColumn 的引用(深比较,内容不变即复用旧引用)
|
|
651
644
|
var stableGridParams = useDeepCompareStable(gridParams);
|
|
@@ -1052,7 +1045,7 @@ function AgGridPlus(props) {
|
|
|
1052
1045
|
// 【默认逻辑】没有方案配置时,使用原有的列定义生成逻辑
|
|
1053
1046
|
// 使用缓存的首行数据进行类型推断,而不是当前的 rowData
|
|
1054
1047
|
// 这样 rowData 更新时不会触发 colDefs 重新计算
|
|
1055
|
-
var dataForTypeInference =
|
|
1048
|
+
var dataForTypeInference = typeInferenceRow || (rowData.length > 0 ? rowData[0] : {});
|
|
1056
1049
|
var columnDefs = getTableColumns([dataForTypeInference]);
|
|
1057
1050
|
|
|
1058
1051
|
// 递归应用 columnCellClass 配置
|
|
@@ -1090,7 +1083,9 @@ function AgGridPlus(props) {
|
|
|
1090
1083
|
// 【关键】优先依赖派生状态
|
|
1091
1084
|
derivedColumnDefs, _react.default.Children.count(children), props.columnDefs, extensibleColumns, columnCellClass,
|
|
1092
1085
|
// ref.current 变更不触发重渲染,作依赖无效;改依赖真正的数据源 allColDefs(memo 值) @author nokecy
|
|
1093
|
-
allColDefs
|
|
1086
|
+
allColDefs,
|
|
1087
|
+
// 首批数据到达时重算一次,否则数值列的右对齐永远推断不出来 @author nokecy
|
|
1088
|
+
typeInferenceRow]);
|
|
1094
1089
|
|
|
1095
1090
|
// 构建查询表单项(带 order 属性)
|
|
1096
1091
|
var queryFormItems = (0, _react.useMemo)(function () {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 挑出用于列类型推断的那一行数据。
|
|
3
|
+
*
|
|
4
|
+
* 列的数据类型(数值列自动求和并右对齐)是靠首行数据的字段类型推断出来的,
|
|
5
|
+
* 而这个推断**只该做一次**:之后的数据更新不应该改变列定义,否则翻页、筛选都会重排列。
|
|
6
|
+
*
|
|
7
|
+
* 必须返回 state 而不是 ref。这里踩过一次:
|
|
8
|
+
* 原本用 `useRef` 缓存首行,而消费它的 `useMemo` 依赖数组里又没有 rowData,
|
|
9
|
+
* 于是异步加载的表格首次渲染时 rowData 为空 → 推断不出类型 → 数据到达后写进 ref
|
|
10
|
+
* 却不触发重渲染 → 列定义永久停留在「无类型」。表现是数值列该右对齐却一直左对齐,
|
|
11
|
+
* 不报错、不崩溃,只能靠盯着某一列发现。
|
|
12
|
+
*
|
|
13
|
+
* 用 state 就同时满足两件事:首批数据到达时触发一次重算,之后不再变。
|
|
14
|
+
*
|
|
15
|
+
* @author nokecy
|
|
16
|
+
*/
|
|
17
|
+
export declare function useTypeInferenceRow(rowData: any[] | undefined | null): any;
|
|
18
|
+
export default useTypeInferenceRow;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
exports.useTypeInferenceRow = useTypeInferenceRow;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
11
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
12
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
14
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
|
+
/**
|
|
16
|
+
* 挑出用于列类型推断的那一行数据。
|
|
17
|
+
*
|
|
18
|
+
* 列的数据类型(数值列自动求和并右对齐)是靠首行数据的字段类型推断出来的,
|
|
19
|
+
* 而这个推断**只该做一次**:之后的数据更新不应该改变列定义,否则翻页、筛选都会重排列。
|
|
20
|
+
*
|
|
21
|
+
* 必须返回 state 而不是 ref。这里踩过一次:
|
|
22
|
+
* 原本用 `useRef` 缓存首行,而消费它的 `useMemo` 依赖数组里又没有 rowData,
|
|
23
|
+
* 于是异步加载的表格首次渲染时 rowData 为空 → 推断不出类型 → 数据到达后写进 ref
|
|
24
|
+
* 却不触发重渲染 → 列定义永久停留在「无类型」。表现是数值列该右对齐却一直左对齐,
|
|
25
|
+
* 不报错、不崩溃,只能靠盯着某一列发现。
|
|
26
|
+
*
|
|
27
|
+
* 用 state 就同时满足两件事:首批数据到达时触发一次重算,之后不再变。
|
|
28
|
+
*
|
|
29
|
+
* @author nokecy
|
|
30
|
+
*/
|
|
31
|
+
function useTypeInferenceRow(rowData) {
|
|
32
|
+
var _useState = (0, _react.useState)(null),
|
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
+
row = _useState2[0],
|
|
35
|
+
setRow = _useState2[1];
|
|
36
|
+
(0, _react.useEffect)(function () {
|
|
37
|
+
if (!row && rowData && rowData.length > 0) {
|
|
38
|
+
setRow(rowData[0]);
|
|
39
|
+
}
|
|
40
|
+
}, [rowData, row]);
|
|
41
|
+
return row;
|
|
42
|
+
}
|
|
43
|
+
var _default = exports.default = useTypeInferenceRow;
|
|
@@ -24,7 +24,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
24
24
|
/** 四支文案,按支覆盖。不传的支走默认。 */
|
|
25
25
|
|
|
26
26
|
var DEFAULT_EMPTY_TEXTS = exports.DEFAULT_EMPTY_TEXTS = {
|
|
27
|
-
|
|
27
|
+
// 不写方位:重试按钮就渲染在这句话正下方(见 shared/NoRowsOverlay)。
|
|
28
|
+
// 原文写的是「请点上方「重试」」,方位指错了。@author nokecy
|
|
29
|
+
error: '数据加载失败,可点下方按钮重试',
|
|
28
30
|
noPermission: '没有查看该数据的权限,请联系系统管理员',
|
|
29
31
|
noResult: '没有符合当前筛选条件的数据,试试放宽或清空筛选条件',
|
|
30
32
|
noData: '暂无数据'
|
|
@@ -29,6 +29,7 @@ ModuleRegistry.registerModules([AllEnterpriseModule]);
|
|
|
29
29
|
|
|
30
30
|
// 导入 AG-Grid v33 主题
|
|
31
31
|
import { agGridTheme } from "./theme";
|
|
32
|
+
import { useTypeInferenceRow } from "./hooks/useTypeInferenceRow";
|
|
32
33
|
import "./index.less";
|
|
33
34
|
import FormRender from "./queryForm";
|
|
34
35
|
import ToolBar from "./toolBar";
|
|
@@ -307,16 +308,8 @@ function AgGridPlus(props) {
|
|
|
307
308
|
};
|
|
308
309
|
}, []);
|
|
309
310
|
|
|
310
|
-
//
|
|
311
|
-
|
|
312
|
-
// 类型推断应该只在初始化时进行一次,后续数据更新不应改变列定义
|
|
313
|
-
var firstRowDataRef = useRef(null);
|
|
314
|
-
useEffect(function () {
|
|
315
|
-
// 只在首次有数据时保存
|
|
316
|
-
if (!firstRowDataRef.current && rowData.length > 0) {
|
|
317
|
-
firstRowDataRef.current = rowData[0];
|
|
318
|
-
}
|
|
319
|
-
}, [rowData]);
|
|
311
|
+
// 用于列类型推断的首行数据。为什么必须是 state 而不是 ref,见该 hook 的注释。@author nokecy
|
|
312
|
+
var typeInferenceRow = useTypeInferenceRow(rowData);
|
|
320
313
|
|
|
321
314
|
/**
|
|
322
315
|
* 【P0 + P1 优化】使用派生状态应用方案(单向数据流)
|
|
@@ -617,7 +610,7 @@ function AgGridPlus(props) {
|
|
|
617
610
|
// 计算所有列定义(包括隐藏的列)
|
|
618
611
|
// 【修复】移除 rowData 依赖,使用缓存的首行数据进行类型推断
|
|
619
612
|
var allColDefs = useMemo(function () {
|
|
620
|
-
var dataForTypeInference =
|
|
613
|
+
var dataForTypeInference = typeInferenceRow || (rowData.length > 0 ? rowData[0] : {});
|
|
621
614
|
var cols = getTableColumns([dataForTypeInference]);
|
|
622
615
|
allColDefsRef.current = cols; // 同步更新 ref
|
|
623
616
|
|
|
@@ -637,7 +630,7 @@ function AgGridPlus(props) {
|
|
|
637
630
|
});
|
|
638
631
|
}
|
|
639
632
|
return cols;
|
|
640
|
-
}, [React.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions]);
|
|
633
|
+
}, [React.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions, typeInferenceRow]);
|
|
641
634
|
|
|
642
635
|
// 稳定化 gridParams 和 sortColumn 的引用(深比较,内容不变即复用旧引用)
|
|
643
636
|
var stableGridParams = useDeepCompareStable(gridParams);
|
|
@@ -1044,7 +1037,7 @@ function AgGridPlus(props) {
|
|
|
1044
1037
|
// 【默认逻辑】没有方案配置时,使用原有的列定义生成逻辑
|
|
1045
1038
|
// 使用缓存的首行数据进行类型推断,而不是当前的 rowData
|
|
1046
1039
|
// 这样 rowData 更新时不会触发 colDefs 重新计算
|
|
1047
|
-
var dataForTypeInference =
|
|
1040
|
+
var dataForTypeInference = typeInferenceRow || (rowData.length > 0 ? rowData[0] : {});
|
|
1048
1041
|
var columnDefs = getTableColumns([dataForTypeInference]);
|
|
1049
1042
|
|
|
1050
1043
|
// 递归应用 columnCellClass 配置
|
|
@@ -1082,7 +1075,9 @@ function AgGridPlus(props) {
|
|
|
1082
1075
|
// 【关键】优先依赖派生状态
|
|
1083
1076
|
derivedColumnDefs, React.Children.count(children), props.columnDefs, extensibleColumns, columnCellClass,
|
|
1084
1077
|
// ref.current 变更不触发重渲染,作依赖无效;改依赖真正的数据源 allColDefs(memo 值) @author nokecy
|
|
1085
|
-
allColDefs
|
|
1078
|
+
allColDefs,
|
|
1079
|
+
// 首批数据到达时重算一次,否则数值列的右对齐永远推断不出来 @author nokecy
|
|
1080
|
+
typeInferenceRow]);
|
|
1086
1081
|
|
|
1087
1082
|
// 构建查询表单项(带 order 属性)
|
|
1088
1083
|
var queryFormItems = useMemo(function () {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 挑出用于列类型推断的那一行数据。
|
|
3
|
+
*
|
|
4
|
+
* 列的数据类型(数值列自动求和并右对齐)是靠首行数据的字段类型推断出来的,
|
|
5
|
+
* 而这个推断**只该做一次**:之后的数据更新不应该改变列定义,否则翻页、筛选都会重排列。
|
|
6
|
+
*
|
|
7
|
+
* 必须返回 state 而不是 ref。这里踩过一次:
|
|
8
|
+
* 原本用 `useRef` 缓存首行,而消费它的 `useMemo` 依赖数组里又没有 rowData,
|
|
9
|
+
* 于是异步加载的表格首次渲染时 rowData 为空 → 推断不出类型 → 数据到达后写进 ref
|
|
10
|
+
* 却不触发重渲染 → 列定义永久停留在「无类型」。表现是数值列该右对齐却一直左对齐,
|
|
11
|
+
* 不报错、不崩溃,只能靠盯着某一列发现。
|
|
12
|
+
*
|
|
13
|
+
* 用 state 就同时满足两件事:首批数据到达时触发一次重算,之后不再变。
|
|
14
|
+
*
|
|
15
|
+
* @author nokecy
|
|
16
|
+
*/
|
|
17
|
+
export declare function useTypeInferenceRow(rowData: any[] | undefined | null): any;
|
|
18
|
+
export default useTypeInferenceRow;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { useEffect, useState } from 'react';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* 挑出用于列类型推断的那一行数据。
|
|
11
|
+
*
|
|
12
|
+
* 列的数据类型(数值列自动求和并右对齐)是靠首行数据的字段类型推断出来的,
|
|
13
|
+
* 而这个推断**只该做一次**:之后的数据更新不应该改变列定义,否则翻页、筛选都会重排列。
|
|
14
|
+
*
|
|
15
|
+
* 必须返回 state 而不是 ref。这里踩过一次:
|
|
16
|
+
* 原本用 `useRef` 缓存首行,而消费它的 `useMemo` 依赖数组里又没有 rowData,
|
|
17
|
+
* 于是异步加载的表格首次渲染时 rowData 为空 → 推断不出类型 → 数据到达后写进 ref
|
|
18
|
+
* 却不触发重渲染 → 列定义永久停留在「无类型」。表现是数值列该右对齐却一直左对齐,
|
|
19
|
+
* 不报错、不崩溃,只能靠盯着某一列发现。
|
|
20
|
+
*
|
|
21
|
+
* 用 state 就同时满足两件事:首批数据到达时触发一次重算,之后不再变。
|
|
22
|
+
*
|
|
23
|
+
* @author nokecy
|
|
24
|
+
*/
|
|
25
|
+
export function useTypeInferenceRow(rowData) {
|
|
26
|
+
var _useState = useState(null),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
row = _useState2[0],
|
|
29
|
+
setRow = _useState2[1];
|
|
30
|
+
useEffect(function () {
|
|
31
|
+
if (!row && rowData && rowData.length > 0) {
|
|
32
|
+
setRow(rowData[0]);
|
|
33
|
+
}
|
|
34
|
+
}, [rowData, row]);
|
|
35
|
+
return row;
|
|
36
|
+
}
|
|
37
|
+
export default useTypeInferenceRow;
|
|
@@ -15,7 +15,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
15
15
|
/** 四支文案,按支覆盖。不传的支走默认。 */
|
|
16
16
|
|
|
17
17
|
export var DEFAULT_EMPTY_TEXTS = {
|
|
18
|
-
|
|
18
|
+
// 不写方位:重试按钮就渲染在这句话正下方(见 shared/NoRowsOverlay)。
|
|
19
|
+
// 原文写的是「请点上方「重试」」,方位指错了。@author nokecy
|
|
20
|
+
error: '数据加载失败,可点下方按钮重试',
|
|
19
21
|
noPermission: '没有查看该数据的权限,请联系系统管理员',
|
|
20
22
|
noResult: '没有符合当前筛选条件的数据,试试放宽或清空筛选条件',
|
|
21
23
|
noData: '暂无数据'
|