@nokecy/qc-ui 1.1.73 → 1.1.75
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/adapters/pagedApiAdapter.d.ts +2 -0
- package/dist/cjs/ag-grid-plus/ag-gridPlus.js +5 -3
- package/dist/cjs/ag-grid-plus/interface.d.ts +6 -0
- package/dist/cjs/ag-grid-plus/utils/aggregation.js +8 -14
- package/dist/cjs/ag-grid-plus/utils/columnProcessors.d.ts +2 -1
- package/dist/cjs/ag-grid-plus/utils/columnProcessors.js +5 -2
- package/dist/cjs/ag-grid-plus/utils/valueEnumColor.d.ts +17 -0
- package/dist/cjs/ag-grid-plus/utils/valueEnumColor.js +99 -0
- package/dist/cjs/dialogSelect/index.d.ts +31 -2
- package/dist/cjs/dialogSelect/index.js +209 -105
- package/dist/cjs/dialogSelect/index.less +39 -0
- package/dist/cjs/draggableModal/index.js +12 -8
- package/dist/cjs/entitySelect/index.d.ts +57 -0
- package/dist/cjs/entitySelect/index.js +172 -0
- package/dist/cjs/index.d.ts +8 -0
- package/dist/cjs/index.js +143 -1
- package/dist/cjs/readPretty/arrayTable.d.ts +6 -0
- package/dist/cjs/readPretty/arrayTable.js +156 -0
- package/dist/cjs/readPretty/controls.d.ts +11 -0
- package/dist/cjs/readPretty/controls.js +68 -0
- package/dist/cjs/readPretty/decimal.d.ts +4 -0
- package/dist/cjs/readPretty/decimal.js +28 -0
- package/dist/cjs/readPretty/formily.d.ts +2 -0
- package/dist/cjs/readPretty/formily.js +71 -0
- package/dist/cjs/readPretty/hoistStatics.d.ts +1 -0
- package/dist/cjs/readPretty/hoistStatics.js +37 -0
- package/dist/cjs/readPretty/index.d.ts +11 -0
- package/dist/cjs/readPretty/index.js +70 -0
- package/dist/cjs/readPretty/selectValue.d.ts +7 -0
- package/dist/cjs/readPretty/selectValue.js +60 -0
- package/dist/cjs/readPretty/values.d.ts +4 -0
- package/dist/cjs/readPretty/values.js +49 -0
- package/dist/cjs/toolBar/index.d.ts +1 -0
- package/dist/cjs/toolBar/index.js +44 -10
- package/dist/cjs/toolBar/index.less +25 -7
- package/dist/cjs/utils/businessDecimal.d.ts +11 -0
- package/dist/cjs/utils/businessDecimal.js +53 -0
- package/dist/cjs/utils/contrast.d.ts +40 -0
- package/dist/cjs/utils/contrast.js +153 -0
- package/dist/esm/adapters/pagedApiAdapter.d.ts +2 -0
- package/dist/esm/ag-grid-plus/ag-gridPlus.js +5 -3
- package/dist/esm/ag-grid-plus/interface.d.ts +6 -0
- package/dist/esm/ag-grid-plus/utils/aggregation.js +1 -5
- package/dist/esm/ag-grid-plus/utils/columnProcessors.d.ts +2 -1
- package/dist/esm/ag-grid-plus/utils/columnProcessors.js +5 -2
- package/dist/esm/ag-grid-plus/utils/valueEnumColor.d.ts +17 -0
- package/dist/esm/ag-grid-plus/utils/valueEnumColor.js +95 -0
- package/dist/esm/dialogSelect/index.d.ts +31 -2
- package/dist/esm/dialogSelect/index.js +211 -106
- package/dist/esm/dialogSelect/index.less +39 -0
- package/dist/esm/draggableModal/index.js +12 -8
- package/dist/esm/entitySelect/index.d.ts +57 -0
- package/dist/esm/entitySelect/index.js +164 -0
- package/dist/esm/index.d.ts +8 -0
- package/dist/esm/index.js +5 -0
- package/dist/esm/readPretty/arrayTable.d.ts +6 -0
- package/dist/esm/readPretty/arrayTable.js +147 -0
- package/dist/esm/readPretty/controls.d.ts +11 -0
- package/dist/esm/readPretty/controls.js +62 -0
- package/dist/esm/readPretty/decimal.d.ts +4 -0
- package/dist/esm/readPretty/decimal.js +22 -0
- package/dist/esm/readPretty/formily.d.ts +2 -0
- package/dist/esm/readPretty/formily.js +63 -0
- package/dist/esm/readPretty/hoistStatics.d.ts +1 -0
- package/dist/esm/readPretty/hoistStatics.js +31 -0
- package/dist/esm/readPretty/index.d.ts +11 -0
- package/dist/esm/readPretty/index.js +12 -0
- package/dist/esm/readPretty/selectValue.d.ts +7 -0
- package/dist/esm/readPretty/selectValue.js +53 -0
- package/dist/esm/readPretty/values.d.ts +4 -0
- package/dist/esm/readPretty/values.js +43 -0
- package/dist/esm/toolBar/index.d.ts +1 -0
- package/dist/esm/toolBar/index.js +43 -10
- package/dist/esm/toolBar/index.less +25 -7
- package/dist/esm/utils/businessDecimal.d.ts +11 -0
- package/dist/esm/utils/businessDecimal.js +47 -0
- package/dist/esm/utils/contrast.d.ts +40 -0
- package/dist/esm/utils/contrast.js +141 -0
- package/dist/umd/qc-ui.min.css +1 -1
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.contrastRatio = contrastRatio;
|
|
7
|
+
exports.darkenUntilContrast = darkenUntilContrast;
|
|
8
|
+
exports.fromHsl = fromHsl;
|
|
9
|
+
exports.lightenUntilContrast = lightenUntilContrast;
|
|
10
|
+
exports.relativeLuminance = relativeLuminance;
|
|
11
|
+
exports.toHsl = toHsl;
|
|
12
|
+
exports.toRgb = toRgb;
|
|
13
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
|
+
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."); }
|
|
15
|
+
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); }
|
|
16
|
+
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; }
|
|
17
|
+
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; } }
|
|
18
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
|
+
/**
|
|
20
|
+
* 对比度计算与「够读的主色」派生。
|
|
21
|
+
*
|
|
22
|
+
* 背景:品牌绿 #00b96b 落在白底上只有 2.58:1,而正文文字要 4.5:1、非文本要 3:1(WCAG 2.1)。
|
|
23
|
+
* antd 从它派生的最深一档 colorPrimaryActive 也只有 3.90:1——够非文本,够不到文字。
|
|
24
|
+
* 所以菜单选中态、行内操作按钮这些「用主色写字」的地方,靠 antd 自带档位解决不了。
|
|
25
|
+
*
|
|
26
|
+
* 这里按色相不变、只压明度的方式派生出刚好达标的一档:绿还是那个绿,但读得清。
|
|
27
|
+
* 写成纯函数而不是写死一个色值,是因为四个客户各有各的主色,写死就只对信诚成立。
|
|
28
|
+
*
|
|
29
|
+
* 验收方法沿用登录页复核那套:实测计算,不看源码想当然。
|
|
30
|
+
*
|
|
31
|
+
* @author nokecy
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
var WHITE = '#ffffff';
|
|
35
|
+
var expand = function expand(hex) {
|
|
36
|
+
var raw = hex.replace('#', '');
|
|
37
|
+
return raw.length === 3 ? raw.split('').map(function (c) {
|
|
38
|
+
return c + c;
|
|
39
|
+
}).join('') : raw;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
/** hex -> [r, g, b],每项 0~255。 */
|
|
43
|
+
function toRgb(hex) {
|
|
44
|
+
var value = parseInt(expand(hex), 16);
|
|
45
|
+
return [value >> 16 & 255, value >> 8 & 255, value & 255];
|
|
46
|
+
}
|
|
47
|
+
var channelLuminance = function channelLuminance(channel) {
|
|
48
|
+
var v = channel / 255;
|
|
49
|
+
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/** WCAG 相对亮度。 */
|
|
53
|
+
function relativeLuminance(hex) {
|
|
54
|
+
var _toRgb = toRgb(hex),
|
|
55
|
+
_toRgb2 = _slicedToArray(_toRgb, 3),
|
|
56
|
+
r = _toRgb2[0],
|
|
57
|
+
g = _toRgb2[1],
|
|
58
|
+
b = _toRgb2[2];
|
|
59
|
+
return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/** WCAG 对比度,1 ~ 21。 */
|
|
63
|
+
function contrastRatio(a, b) {
|
|
64
|
+
var _sort = [relativeLuminance(a), relativeLuminance(b)].sort(function (x, y) {
|
|
65
|
+
return y - x;
|
|
66
|
+
}),
|
|
67
|
+
_sort2 = _slicedToArray(_sort, 2),
|
|
68
|
+
lighter = _sort2[0],
|
|
69
|
+
darker = _sort2[1];
|
|
70
|
+
return (lighter + 0.05) / (darker + 0.05);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/** hex -> [h(0~360), s(0~1), l(0~1)]。 */
|
|
74
|
+
function toHsl(hex) {
|
|
75
|
+
var _ref = toRgb(hex).map(function (v) {
|
|
76
|
+
return v / 255;
|
|
77
|
+
}),
|
|
78
|
+
_ref2 = _slicedToArray(_ref, 3),
|
|
79
|
+
r = _ref2[0],
|
|
80
|
+
g = _ref2[1],
|
|
81
|
+
b = _ref2[2];
|
|
82
|
+
var max = Math.max(r, g, b);
|
|
83
|
+
var min = Math.min(r, g, b);
|
|
84
|
+
var l = (max + min) / 2;
|
|
85
|
+
var d = max - min;
|
|
86
|
+
if (d === 0) return [0, 0, l];
|
|
87
|
+
var s = d / (1 - Math.abs(2 * l - 1));
|
|
88
|
+
var h;
|
|
89
|
+
if (max === r) h = 60 * ((g - b) / d % 6);else if (max === g) h = 60 * ((b - r) / d + 2);else h = 60 * ((r - g) / d + 4);
|
|
90
|
+
return [(h + 360) % 360, s, l];
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/** [h, s, l] -> hex。 */
|
|
94
|
+
function fromHsl(h, s, l) {
|
|
95
|
+
var c = (1 - Math.abs(2 * l - 1)) * s;
|
|
96
|
+
var x = c * (1 - Math.abs(h / 60 % 2 - 1));
|
|
97
|
+
var m = l - c / 2;
|
|
98
|
+
var table = [[c, x, 0], [x, c, 0], [0, c, x], [0, x, c], [x, 0, c], [c, 0, x]];
|
|
99
|
+
var _table$Math$min = _slicedToArray(table[Math.min(5, Math.floor((h % 360 + 360) % 360 / 60))], 3),
|
|
100
|
+
r = _table$Math$min[0],
|
|
101
|
+
g = _table$Math$min[1],
|
|
102
|
+
b = _table$Math$min[2];
|
|
103
|
+
var toHex = function toHex(v) {
|
|
104
|
+
return Math.round((v + m) * 255).toString(16).padStart(2, '0');
|
|
105
|
+
};
|
|
106
|
+
return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* 压暗到刚好满足对比度要求的一档,色相与饱和度保持不变。
|
|
111
|
+
*
|
|
112
|
+
* @param hex 起始色(通常是品牌主色)
|
|
113
|
+
* @param against 要压在什么底色上,默认白底
|
|
114
|
+
* @param min 目标对比度,正文 4.5、非文本 3
|
|
115
|
+
*/
|
|
116
|
+
function darkenUntilContrast(hex) {
|
|
117
|
+
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
118
|
+
_ref3$against = _ref3.against,
|
|
119
|
+
against = _ref3$against === void 0 ? WHITE : _ref3$against,
|
|
120
|
+
_ref3$min = _ref3.min,
|
|
121
|
+
min = _ref3$min === void 0 ? 4.5 : _ref3$min;
|
|
122
|
+
var _toHsl = toHsl(hex),
|
|
123
|
+
_toHsl2 = _slicedToArray(_toHsl, 3),
|
|
124
|
+
h = _toHsl2[0],
|
|
125
|
+
s = _toHsl2[1],
|
|
126
|
+
l = _toHsl2[2];
|
|
127
|
+
if (contrastRatio(hex, against) >= min) return hex;
|
|
128
|
+
for (var step = 1; step <= 100; step++) {
|
|
129
|
+
var candidate = fromHsl(h, s, Math.max(0, l - step / 100));
|
|
130
|
+
if (contrastRatio(candidate, against) >= min) return candidate;
|
|
131
|
+
}
|
|
132
|
+
return '#000000';
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/** 深色表面上的文字保持色相,提亮至正文对比度。@author nokecy */
|
|
136
|
+
function lightenUntilContrast(hex) {
|
|
137
|
+
var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
138
|
+
_ref4$against = _ref4.against,
|
|
139
|
+
against = _ref4$against === void 0 ? '#141414' : _ref4$against,
|
|
140
|
+
_ref4$min = _ref4.min,
|
|
141
|
+
min = _ref4$min === void 0 ? 4.5 : _ref4$min;
|
|
142
|
+
var _toHsl3 = toHsl(hex),
|
|
143
|
+
_toHsl4 = _slicedToArray(_toHsl3, 3),
|
|
144
|
+
h = _toHsl4[0],
|
|
145
|
+
s = _toHsl4[1],
|
|
146
|
+
l = _toHsl4[2];
|
|
147
|
+
if (contrastRatio(hex, against) >= min) return hex;
|
|
148
|
+
for (var step = 1; step <= 100; step++) {
|
|
149
|
+
var candidate = fromHsl(h, s, Math.min(1, l + step / 100));
|
|
150
|
+
if (contrastRatio(candidate, against) >= min) return candidate;
|
|
151
|
+
}
|
|
152
|
+
return '#ffffff';
|
|
153
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["style", "loading", "params", "request", "dataSource", "treeKeyName", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "children", "defaultSearchExpand", "overlayNoRowsTemplateText", "queryDefaultRows", "onSelectedRowsChange", "emptyState", "accessible", "enableClickSelection", "rowSelection", "useNativeTreeFilter", "entityType"];
|
|
1
|
+
var _excluded = ["style", "loading", "params", "request", "dataSource", "treeKeyName", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "children", "defaultSearchExpand", "overlayNoRowsTemplateText", "queryDefaultRows", "onSelectedRowsChange", "emptyState", "accessible", "enableClickSelection", "rowSelection", "useNativeTreeFilter", "entityType", "valueEnumContrast"];
|
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
3
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
@@ -109,6 +109,8 @@ function AgGridPlus(props) {
|
|
|
109
109
|
_props$useNativeTreeF = props.useNativeTreeFilter,
|
|
110
110
|
useNativeTreeFilter = _props$useNativeTreeF === void 0 ? false : _props$useNativeTreeF,
|
|
111
111
|
entityType = props.entityType,
|
|
112
|
+
_props$valueEnumContr = props.valueEnumContrast,
|
|
113
|
+
valueEnumContrast = _props$valueEnumContr === void 0 ? false : _props$valueEnumContr,
|
|
112
114
|
rest = _objectWithoutProperties(props, _excluded);
|
|
113
115
|
var _useGridPlusColumnSta = useGridPlusColumnState(),
|
|
114
116
|
onSaveColumnState = _useGridPlusColumnSta.onSaveColumnState,
|
|
@@ -462,7 +464,7 @@ function AgGridPlus(props) {
|
|
|
462
464
|
if (col.valueEnum && Array.isArray(col.valueEnum)) {
|
|
463
465
|
// 枚举列渲染只走一处实现,见 columnProcessors.processEnumColumn
|
|
464
466
|
// (命中上色、未命中交给 col.enumFallbackRenderer,都没配则回原始码)
|
|
465
|
-
return processEnumColumn(col, dataType);
|
|
467
|
+
return processEnumColumn(col, dataType, valueEnumContrast ? token.colorBgContainer : undefined);
|
|
466
468
|
}
|
|
467
469
|
if (col.type || typeof col.cellRenderer == "string") {
|
|
468
470
|
return mergeInferredColumnType(col, dataType);
|
|
@@ -568,7 +570,7 @@ function AgGridPlus(props) {
|
|
|
568
570
|
});
|
|
569
571
|
}
|
|
570
572
|
return cols;
|
|
571
|
-
}, [React.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions, typeInferenceRow]);
|
|
573
|
+
}, [React.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions, typeInferenceRow, valueEnumContrast ? token.colorBgContainer : undefined]);
|
|
572
574
|
|
|
573
575
|
// 稳定化 gridParams 和 sortColumn 的引用(深比较,内容不变即复用旧引用)
|
|
574
576
|
var stableGridParams = useDeepCompareStable(gridParams);
|
|
@@ -7,6 +7,12 @@ interface GridRef {
|
|
|
7
7
|
onRefresh: () => void;
|
|
8
8
|
}
|
|
9
9
|
interface GridProps extends AgGridReactProps {
|
|
10
|
+
/**
|
|
11
|
+
* 为 true 时,`valueEnum[].color` 按当前主题底色自动收成够读(WCAG 正文 4.5:1)的 CSS 色:
|
|
12
|
+
* 语义档名(success/warning…)与预设名(cyan/pink…)换成真实色值,过浅的 hex 压暗(深色主题则提亮),
|
|
13
|
+
* 缺省色写成 `inherit`。默认 false:color 按 CSS 原样输出,保持既有行为。@author nokecy
|
|
14
|
+
*/
|
|
15
|
+
valueEnumContrast?: boolean;
|
|
10
16
|
hideTool?: boolean;
|
|
11
17
|
style?: CSSProperties;
|
|
12
18
|
params?: any;
|
|
@@ -5,11 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
5
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
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import { uniqueId } from 'lodash';
|
|
8
|
-
import
|
|
9
|
-
var Exact = Decimal.clone({
|
|
10
|
-
precision: 64,
|
|
11
|
-
rounding: Decimal.ROUND_HALF_UP
|
|
12
|
-
});
|
|
8
|
+
import { BusinessDecimal as Exact } from "../../utils/businessDecimal";
|
|
13
9
|
|
|
14
10
|
/**
|
|
15
11
|
* AG-Grid 底部汇总聚合纯函数(从 ag-gridPlus.tsx 抽出,行为原样)。
|
|
@@ -83,10 +83,11 @@ export declare function mergeInferredColumnType<T extends object>(column: T, dat
|
|
|
83
83
|
*
|
|
84
84
|
* @param col 原始列定义
|
|
85
85
|
* @param dataType 数据类型(决定是否右对齐,见 {@link toColumnType})
|
|
86
|
+
* @param background 单元格底色(hex)。传入则把枚举颜色压/提到够读的对比度;不传则 color 原样输出
|
|
86
87
|
* @returns 处理后的列定义
|
|
87
88
|
* @author nokecy
|
|
88
89
|
*/
|
|
89
|
-
export declare function processEnumColumn(col: any, dataType?: DataTypeInference): ColDef;
|
|
90
|
+
export declare function processEnumColumn(col: any, dataType?: DataTypeInference, background?: string): ColDef;
|
|
90
91
|
/**
|
|
91
92
|
* 处理省略列定义
|
|
92
93
|
*
|
|
@@ -9,6 +9,7 @@ import { Typography } from 'antd';
|
|
|
9
9
|
import { Select } from '@formily/antd-v5';
|
|
10
10
|
import { isArray } from 'lodash';
|
|
11
11
|
import { DEFAULT_SEARCH_SORT_ORDER } from "./constants";
|
|
12
|
+
import { toGridTextColor } from "./valueEnumColor";
|
|
12
13
|
var Text = Typography.Text;
|
|
13
14
|
|
|
14
15
|
/**
|
|
@@ -129,10 +130,11 @@ export function mergeInferredColumnType(column, dataType) {
|
|
|
129
130
|
*
|
|
130
131
|
* @param col 原始列定义
|
|
131
132
|
* @param dataType 数据类型(决定是否右对齐,见 {@link toColumnType})
|
|
133
|
+
* @param background 单元格底色(hex)。传入则把枚举颜色压/提到够读的对比度;不传则 color 原样输出
|
|
132
134
|
* @returns 处理后的列定义
|
|
133
135
|
* @author nokecy
|
|
134
136
|
*/
|
|
135
|
-
export function processEnumColumn(col, dataType) {
|
|
137
|
+
export function processEnumColumn(col, dataType, background) {
|
|
136
138
|
var _defaultItems$0$value, _defaultItems$;
|
|
137
139
|
var valueEnum = col === null || col === void 0 ? void 0 : col.valueEnum;
|
|
138
140
|
if (!valueEnum || !Array.isArray(valueEnum)) {
|
|
@@ -165,7 +167,8 @@ export function processEnumColumn(col, dataType) {
|
|
|
165
167
|
// 没配颜色的枚举项曾经默认成 '#ffffff'——白底白字,那一列直接看不见。
|
|
166
168
|
// 消费端为此在 global.less 里加了一整套 [style*="color: white"] → 紫色 的覆盖来擦屁股,
|
|
167
169
|
// 顺带把别的颜色也一起改了。这里改成 inherit,跟着单元格的正文色走。@author nokecy
|
|
168
|
-
|
|
170
|
+
// 传了 background 才启用对比度适配(AgGridPlus 的 valueEnumContrast);否则 color 按 CSS 原样输出。@author nokecy
|
|
171
|
+
var color = background ? toGridTextColor(match.color, background) : match.color || 'inherit';
|
|
169
172
|
return /*#__PURE__*/React.createElement("span", {
|
|
170
173
|
style: {
|
|
171
174
|
color: color,
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/** antd Tag 语义档名。 */
|
|
2
|
+
export type SemanticPreset = 'default' | 'processing' | 'success' | 'warning' | 'error';
|
|
3
|
+
/** 语义档名 → 表格文字色(白底实测 ≥4.5:1)。 */
|
|
4
|
+
export declare const semanticTextColors: Record<SemanticPreset, string>;
|
|
5
|
+
/**
|
|
6
|
+
* 把任意 valueEnum.color 收成表格可用的 CSS 色。
|
|
7
|
+
*
|
|
8
|
+
* @param color 枚举项上的 color(语义档、预设名、hex 或缺省)
|
|
9
|
+
* @param background 单元格底色(hex);不传按白底。深色底提亮、浅色底压暗
|
|
10
|
+
*/
|
|
11
|
+
export declare const toGridTextColor: (color?: string, background?: string) => string;
|
|
12
|
+
/** 把枚举转成 `valueEnum` 可用的副本(color 一定是当前底色可读的 CSS 色值),不修改源数组。 */
|
|
13
|
+
export declare const gridValueEnum: <T extends {
|
|
14
|
+
color?: string | undefined;
|
|
15
|
+
}>(items: readonly T[], background?: string) => (T & {
|
|
16
|
+
color: string;
|
|
17
|
+
})[];
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
/**
|
|
8
|
+
* `valueEnum.color` 的表格文字色适配。
|
|
9
|
+
*
|
|
10
|
+
* 同一份状态/类别枚举有两个消费方,对 `color` 的要求不同:
|
|
11
|
+
* - antd `<Tag color>` 接受语义档名(`'success'` / `'warning'` …)和预设色名(`'cyan'`);
|
|
12
|
+
* - AgGridPlus 的 `valueEnum` 把 `color` 直接当 **CSS color** 渲染表格文字。
|
|
13
|
+
*
|
|
14
|
+
* 直接透传会让这几类取值在表格里「字看不见」:语义档名与预设名不是合法 CSS
|
|
15
|
+
* (`'cyan'` 是 `#00ffff`,`'default'` 根本不合法);hex 太浅(`#d9d9d9` 白底 1.3:1、`#52c41a` 2.3:1)。
|
|
16
|
+
* 这里把任意 color 收成当前底色上够读(WCAG 正文 4.5:1)的 CSS 色,缺省/无法解析写成 `inherit`,
|
|
17
|
+
* 跟随单元格正文色。已经够读的 hex 原样返回,所以重复调用是幂等的。
|
|
18
|
+
*
|
|
19
|
+
* 语义档色值经 `contrastRatio` 实测:白底均 ≥4.5:1(green-7/orange-7 只有 3.4~3.6:1,不能想当然)。
|
|
20
|
+
*
|
|
21
|
+
* @author nokecy
|
|
22
|
+
*/
|
|
23
|
+
import { contrastRatio, darkenUntilContrast, lightenUntilContrast, relativeLuminance } from "../../utils/contrast";
|
|
24
|
+
|
|
25
|
+
/** antd Tag 语义档名。 */
|
|
26
|
+
|
|
27
|
+
var WHITE = '#ffffff';
|
|
28
|
+
|
|
29
|
+
/** 语义档名 → 表格文字色(白底实测 ≥4.5:1)。 */
|
|
30
|
+
export var semanticTextColors = {
|
|
31
|
+
default: '#595959',
|
|
32
|
+
processing: '#0958d9',
|
|
33
|
+
success: '#237804',
|
|
34
|
+
warning: '#ad4e00',
|
|
35
|
+
error: '#cf1322'
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/** antd Tag 预设名 / 常见 CSS 色名 → 起始 hex,再交给对比度压色。 */
|
|
39
|
+
var namedColorHex = {
|
|
40
|
+
cyan: '#00ffff',
|
|
41
|
+
aqua: '#00ffff',
|
|
42
|
+
geekblue: '#2f54eb',
|
|
43
|
+
blue: '#0000ff',
|
|
44
|
+
orange: '#ffa500',
|
|
45
|
+
gold: '#ffd700',
|
|
46
|
+
lime: '#00ff00',
|
|
47
|
+
volcano: '#fa541c',
|
|
48
|
+
magenta: '#ff00ff',
|
|
49
|
+
fuchsia: '#ff00ff',
|
|
50
|
+
purple: '#800080',
|
|
51
|
+
red: '#ff0000',
|
|
52
|
+
green: '#008000',
|
|
53
|
+
pink: '#ffc0cb',
|
|
54
|
+
yellow: '#ffff00',
|
|
55
|
+
white: '#ffffff',
|
|
56
|
+
silver: '#c0c0c0'
|
|
57
|
+
};
|
|
58
|
+
var parseHex = function parseHex(color) {
|
|
59
|
+
var raw = color.trim();
|
|
60
|
+
if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(raw)) return undefined;
|
|
61
|
+
return raw.length === 4 ? "#".concat(raw[1]).concat(raw[1]).concat(raw[2]).concat(raw[2]).concat(raw[3]).concat(raw[3]).toLowerCase() : raw.toLowerCase();
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
/** 底色是否为深色表面。 */
|
|
65
|
+
var isDarkSurface = function isDarkSurface(background) {
|
|
66
|
+
return relativeLuminance(background) < 0.18;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* 把任意 valueEnum.color 收成表格可用的 CSS 色。
|
|
71
|
+
*
|
|
72
|
+
* @param color 枚举项上的 color(语义档、预设名、hex 或缺省)
|
|
73
|
+
* @param background 单元格底色(hex);不传按白底。深色底提亮、浅色底压暗
|
|
74
|
+
*/
|
|
75
|
+
export var toGridTextColor = function toGridTextColor(color, background) {
|
|
76
|
+
if (!color) return 'inherit';
|
|
77
|
+
var hex = semanticTextColors[color] || namedColorHex[color.toLowerCase()] || parseHex(color);
|
|
78
|
+
if (!hex) return 'inherit';
|
|
79
|
+
var surface = background && parseHex(background) ? background : WHITE;
|
|
80
|
+
if (isDarkSurface(surface)) return lightenUntilContrast(hex, {
|
|
81
|
+
against: surface
|
|
82
|
+
});
|
|
83
|
+
return contrastRatio(hex, surface) >= 4.5 ? hex : darkenUntilContrast(hex, {
|
|
84
|
+
against: surface
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
/** 把枚举转成 `valueEnum` 可用的副本(color 一定是当前底色可读的 CSS 色值),不修改源数组。 */
|
|
89
|
+
export var gridValueEnum = function gridValueEnum(items, background) {
|
|
90
|
+
return items.map(function (item) {
|
|
91
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
92
|
+
color: toGridTextColor(item.color, background)
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
};
|
|
@@ -2,7 +2,11 @@ import { SelectProps } from 'antd/lib/select';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ColDef, ColGroupDef } from 'ag-grid-community';
|
|
4
4
|
import type { PagedApiAdapter } from '../adapters';
|
|
5
|
+
import './index.less';
|
|
6
|
+
/** 选择窗口的行选择模式。 */
|
|
7
|
+
type DialogSelectionMode = 'single' | 'multiple';
|
|
5
8
|
interface IDialogSelectProps extends SelectProps<any> {
|
|
9
|
+
/** 隐藏选择窗口入口(输入框内的后缀图标),只保留输入与下拉。 */
|
|
6
10
|
hideBtn?: boolean;
|
|
7
11
|
request?: any;
|
|
8
12
|
columnDefs?: (ColDef | ColGroupDef)[] | null;
|
|
@@ -13,7 +17,32 @@ interface IDialogSelectProps extends SelectProps<any> {
|
|
|
13
17
|
useAutoComplete?: boolean;
|
|
14
18
|
/** 分页 API 适配器(默认 ABP)。@author nokecy */
|
|
15
19
|
pagedApiAdapter?: PagedApiAdapter;
|
|
20
|
+
/** 选择窗口宽度,默认 960。 */
|
|
21
|
+
modalWidth?: number | string;
|
|
22
|
+
/** 选择窗口层级,默认 9999(高于抽屉、其他弹窗)。 */
|
|
23
|
+
dialogZIndex?: number;
|
|
24
|
+
/** 选择窗口中的行选择模式;缺省按 `mode` 推断,外层 Select 仍可保持单值。 */
|
|
25
|
+
dialogMode?: DialogSelectionMode;
|
|
26
|
+
/** 选择窗口表格的初始分页大小;不影响外层 Select。 */
|
|
27
|
+
dialogPageSize?: number;
|
|
28
|
+
/** 选择窗口表格可选分页大小。 */
|
|
29
|
+
dialogPageSizeOptions?: number[];
|
|
30
|
+
/** 选择窗口表格的列方案标识。 */
|
|
31
|
+
dialogGridKey?: string;
|
|
32
|
+
/** 已由业务限定范围的本地候选;传入后不再请求接口,表格直接筛选完整候选集且不分页。 */
|
|
33
|
+
dialogDataSource?: any[];
|
|
34
|
+
/** 业务限制下不可带入的行;单击、确认和双击共用该条件。 */
|
|
35
|
+
dialogIsRowSelectable?: (row: any) => boolean;
|
|
36
|
+
/** 自定义选择窗口内容;确认时回传所选行。传入后不再渲染内置的表格窗口。 */
|
|
37
|
+
dialogRenderer?: (context: {
|
|
38
|
+
open: boolean;
|
|
39
|
+
mode: DialogSelectionMode;
|
|
40
|
+
onCancel: () => void;
|
|
41
|
+
onConfirm: (rows: any[]) => void;
|
|
42
|
+
}) => React.ReactNode;
|
|
43
|
+
/** 选择窗口里使用的表格组件,默认 `AgGridPlus`;宿主可注入自己封装过的表格基座。 */
|
|
44
|
+
gridComponent?: React.ComponentType<any>;
|
|
16
45
|
}
|
|
17
|
-
declare const DialogSelect: (props: IDialogSelectProps) => React.JSX.Element;
|
|
18
46
|
export { IDialogSelectProps };
|
|
19
|
-
|
|
47
|
+
declare const _default: (props: IDialogSelectProps) => React.ReactElement;
|
|
48
|
+
export default _default;
|