one-design-next 0.0.49 → 0.0.51
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/clarify-dock/index.js +56 -8
- package/dist/clarify-dock/types.d.ts +0 -3
- package/dist/table/index.d.ts +12 -1
- package/dist/table/index.js +19 -4
- package/dist/table/style/index.css +26 -0
- package/package.json +1 -1
|
@@ -18,6 +18,7 @@ import * as React from 'react';
|
|
|
18
18
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
19
19
|
import Button from "../button";
|
|
20
20
|
import DatePicker from "../date-picker";
|
|
21
|
+
import DateRangePicker from "../date-range-picker";
|
|
21
22
|
import HoverFill from "../hover-fill";
|
|
22
23
|
import Icon from "../icon";
|
|
23
24
|
import Input from "../input";
|
|
@@ -176,11 +177,15 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
176
177
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
177
178
|
dateDraft = _useState12[0],
|
|
178
179
|
setDateDraft = _useState12[1];
|
|
180
|
+
var _useState13 = useState(null),
|
|
181
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
182
|
+
dateRangeDraft = _useState14[0],
|
|
183
|
+
setDateRangeDraft = _useState14[1];
|
|
179
184
|
var question = spec.questions[page];
|
|
180
185
|
var answer = answers[page];
|
|
181
186
|
var input = question.input;
|
|
182
187
|
|
|
183
|
-
/* 切页:回显 other / date 草稿 */
|
|
188
|
+
/* 切页:回显 other / date / date-range 草稿 */
|
|
184
189
|
useEffect(function () {
|
|
185
190
|
if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' || (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi') {
|
|
186
191
|
var _answer$otherText;
|
|
@@ -193,6 +198,11 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
193
198
|
} else {
|
|
194
199
|
setDateDraft(null);
|
|
195
200
|
}
|
|
201
|
+
if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'date-range') {
|
|
202
|
+
setDateRangeDraft(answer.start && answer.end ? [new Date("".concat(answer.start, "T00:00:00")), new Date("".concat(answer.end, "T00:00:00"))] : null);
|
|
203
|
+
} else {
|
|
204
|
+
setDateRangeDraft(null);
|
|
205
|
+
}
|
|
196
206
|
}, [page, answer]);
|
|
197
207
|
var setAnswerForPage = function setAnswerForPage(next) {
|
|
198
208
|
setAnswers(function (prev) {
|
|
@@ -217,8 +227,9 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
217
227
|
return hasRegular || hasOther;
|
|
218
228
|
}
|
|
219
229
|
case 'date':
|
|
220
|
-
case 'text':
|
|
221
230
|
return answer.value.trim().length > 0;
|
|
231
|
+
case 'date-range':
|
|
232
|
+
return answer.start.trim().length > 0 && answer.end.trim().length > 0;
|
|
222
233
|
default:
|
|
223
234
|
return false;
|
|
224
235
|
}
|
|
@@ -258,8 +269,9 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
258
269
|
return labels.join('、');
|
|
259
270
|
}
|
|
260
271
|
case 'date':
|
|
261
|
-
case 'text':
|
|
262
272
|
return ans.value;
|
|
273
|
+
case 'date-range':
|
|
274
|
+
return "".concat(ans.start, " \u81F3 ").concat(ans.end);
|
|
263
275
|
default:
|
|
264
276
|
return '(未答)';
|
|
265
277
|
}
|
|
@@ -283,6 +295,13 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
283
295
|
value: toISODate(dateDraft)
|
|
284
296
|
};
|
|
285
297
|
}
|
|
298
|
+
if (a.kind === 'date-range' && dateRangeDraft) {
|
|
299
|
+
return {
|
|
300
|
+
kind: 'date-range',
|
|
301
|
+
start: toISODate(dateRangeDraft[0]),
|
|
302
|
+
end: toISODate(dateRangeDraft[1])
|
|
303
|
+
};
|
|
304
|
+
}
|
|
286
305
|
return a;
|
|
287
306
|
});
|
|
288
307
|
};
|
|
@@ -310,9 +329,11 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
310
329
|
break;
|
|
311
330
|
}
|
|
312
331
|
case 'date':
|
|
313
|
-
case 'text':
|
|
314
332
|
data[q.key] = a.value;
|
|
315
333
|
break;
|
|
334
|
+
case 'date-range':
|
|
335
|
+
data[q.key] = "".concat(a.start, "~").concat(a.end);
|
|
336
|
+
break;
|
|
316
337
|
}
|
|
317
338
|
});
|
|
318
339
|
var items = spec.questions.map(function (q, i) {
|
|
@@ -374,6 +395,7 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
374
395
|
answer: answer,
|
|
375
396
|
otherDraft: otherDraft,
|
|
376
397
|
dateDraft: dateDraft,
|
|
398
|
+
dateRangeDraft: dateRangeDraft,
|
|
377
399
|
onOtherDraftChange: function onOtherDraftChange(v) {
|
|
378
400
|
setOtherDraft(v);
|
|
379
401
|
if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' && answer.value === OTHER_VALUE) {
|
|
@@ -397,6 +419,14 @@ export function ClarifyDockPanel(_ref2) {
|
|
|
397
419
|
value: toISODate(d)
|
|
398
420
|
} : undefined);
|
|
399
421
|
},
|
|
422
|
+
onDateRangeChange: function onDateRangeChange(range) {
|
|
423
|
+
setDateRangeDraft(range);
|
|
424
|
+
setAnswerForPage(range ? {
|
|
425
|
+
kind: 'date-range',
|
|
426
|
+
start: toISODate(range[0]),
|
|
427
|
+
end: toISODate(range[1])
|
|
428
|
+
} : undefined);
|
|
429
|
+
},
|
|
400
430
|
onPickSingle: function onPickSingle(opt) {
|
|
401
431
|
if (opt.value === OTHER_VALUE) {
|
|
402
432
|
setAnswerForPage({
|
|
@@ -469,13 +499,21 @@ function withOtherOption(options, allowOther) {
|
|
|
469
499
|
}
|
|
470
500
|
return options.slice(0, CLARIFY_DOCK_MAX_OPTIONS);
|
|
471
501
|
}
|
|
502
|
+
|
|
503
|
+
/**
|
|
504
|
+
* 按 input.kind 适配录入组件:
|
|
505
|
+
* options / options-multi → 选项列表;date → DatePicker;
|
|
506
|
+
* date-range → DateRangePicker。自由文本走自然语言 + Composer,不在此渲染。
|
|
507
|
+
*/
|
|
472
508
|
function QuestionInput(_ref3) {
|
|
473
509
|
var input = _ref3.input,
|
|
474
510
|
answer = _ref3.answer,
|
|
475
511
|
otherDraft = _ref3.otherDraft,
|
|
476
512
|
dateDraft = _ref3.dateDraft,
|
|
513
|
+
dateRangeDraft = _ref3.dateRangeDraft,
|
|
477
514
|
onOtherDraftChange = _ref3.onOtherDraftChange,
|
|
478
515
|
onDateChange = _ref3.onDateChange,
|
|
516
|
+
onDateRangeChange = _ref3.onDateRangeChange,
|
|
479
517
|
onPickSingle = _ref3.onPickSingle,
|
|
480
518
|
onToggleMulti = _ref3.onToggleMulti;
|
|
481
519
|
if (input.kind === 'options' || input.kind === 'options-multi') {
|
|
@@ -500,6 +538,16 @@ function QuestionInput(_ref3) {
|
|
|
500
538
|
}
|
|
501
539
|
}));
|
|
502
540
|
}
|
|
541
|
+
if (input.kind === 'date-range') {
|
|
542
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
543
|
+
"data-odn-clarify-dock-input-row": true
|
|
544
|
+
}, /*#__PURE__*/React.createElement(DateRangePicker, {
|
|
545
|
+
value: dateRangeDraft,
|
|
546
|
+
onChange: function onChange(range) {
|
|
547
|
+
return onDateRangeChange(range);
|
|
548
|
+
}
|
|
549
|
+
}));
|
|
550
|
+
}
|
|
503
551
|
return /*#__PURE__*/React.createElement("div", {
|
|
504
552
|
"data-odn-clarify-dock-hint": true
|
|
505
553
|
}, "\u6682\u4E0D\u652F\u6301\u7684\u8F93\u5165\u7C7B\u578B\uFF1A", input.kind);
|
|
@@ -706,10 +754,10 @@ function OptionsList(_ref4) {
|
|
|
706
754
|
* - recordAnswer 后 Panel 消失,Trigger 切 Approval 式锁态卡
|
|
707
755
|
*/
|
|
708
756
|
export function useClarifyDockState(messages, sessionKey, resetVer) {
|
|
709
|
-
var
|
|
710
|
-
|
|
711
|
-
answers =
|
|
712
|
-
setAnswers =
|
|
757
|
+
var _useState15 = useState({}),
|
|
758
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
759
|
+
answers = _useState16[0],
|
|
760
|
+
setAnswers = _useState16[1];
|
|
713
761
|
|
|
714
762
|
/* 切换会话或点「重置」时清空已答标记,避免 Panel / Trigger 状态脱节 */
|
|
715
763
|
useEffect(function () {
|
package/dist/table/index.d.ts
CHANGED
|
@@ -93,6 +93,17 @@ export interface TableProps<T = Record<string, unknown>> extends Omit<RcTablePro
|
|
|
93
93
|
colIndex: number;
|
|
94
94
|
}) => ReturnType<NonNullable<RcColumnType<T>['onHeaderCell']>> | void;
|
|
95
95
|
popoverIcon?: (typeof iconNames)[number];
|
|
96
|
+
/**
|
|
97
|
+
* 是否启用虚拟滚动。启用时需要同时设置 scroll.y 为数值(表示可视区域高度)。
|
|
98
|
+
* 当数据量较大时(如超过 1000 行),推荐开启虚拟滚动以提升性能。
|
|
99
|
+
*/
|
|
100
|
+
virtual?: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* 虚拟滚动每行高度(px),用于计算可视区域内显示的行数。
|
|
103
|
+
* 仅在 virtual 为 true 时生效。
|
|
104
|
+
* @default 24
|
|
105
|
+
*/
|
|
106
|
+
listItemHeight?: number;
|
|
96
107
|
}
|
|
97
|
-
declare const Table: <T extends Record<string, unknown> = Record<string, unknown>>({ dataSource, columns, bordered, striped, loading, rowExpansion, rowSelection, sortBgVisible, getCellProps, getHeaderCellProps, popoverIcon: globalPopoverIcon, className, style, emptyText, ...props }: TableProps<T>) => React.JSX.Element;
|
|
108
|
+
declare const Table: <T extends Record<string, unknown> = Record<string, unknown>>({ dataSource, columns, bordered, striped, loading, rowExpansion, rowSelection, sortBgVisible, getCellProps, getHeaderCellProps, popoverIcon: globalPopoverIcon, className, style, emptyText, virtual, listItemHeight, ...props }: TableProps<T>) => React.JSX.Element;
|
|
98
109
|
export default Table;
|
package/dist/table/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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
|
-
var _excluded = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText"],
|
|
2
|
+
var _excluded = ["dataSource", "columns", "bordered", "striped", "loading", "rowExpansion", "rowSelection", "sortBgVisible", "getCellProps", "getHeaderCellProps", "popoverIcon", "className", "style", "emptyText", "virtual", "listItemHeight"],
|
|
3
3
|
_excluded2 = ["onSort", "title", "popover", "popoverProps", "popoverIcon"],
|
|
4
4
|
_excluded3 = ["onSort", "filters", "filteredValue", "filterMultiple", "onFilter", "onFilterChange", "title", "popover", "popoverProps", "popoverIcon", "ellipsisPopoverProps", "sortOrder", "render"];
|
|
5
5
|
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; }
|
|
@@ -16,7 +16,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
16
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
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
18
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
|
-
import RcTable from 'rc-table';
|
|
19
|
+
import RcTable, { VirtualTable as RcVirtualTable } from 'rc-table';
|
|
20
20
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
21
21
|
import Button from "../button";
|
|
22
22
|
import Checkbox from "../checkbox";
|
|
@@ -113,6 +113,7 @@ var FilterComponent = function FilterComponent(_ref) {
|
|
|
113
113
|
}, "\u786E\u5B9A")));
|
|
114
114
|
};
|
|
115
115
|
var Table = function Table(_ref2) {
|
|
116
|
+
var _props$scroll, _props$scroll2;
|
|
116
117
|
var dataSource = _ref2.dataSource,
|
|
117
118
|
columns = _ref2.columns,
|
|
118
119
|
_ref2$bordered = _ref2.bordered,
|
|
@@ -131,6 +132,8 @@ var Table = function Table(_ref2) {
|
|
|
131
132
|
className = _ref2.className,
|
|
132
133
|
style = _ref2.style,
|
|
133
134
|
emptyText = _ref2.emptyText,
|
|
135
|
+
virtual = _ref2.virtual,
|
|
136
|
+
listItemHeight = _ref2.listItemHeight,
|
|
134
137
|
props = _objectWithoutProperties(_ref2, _excluded);
|
|
135
138
|
// 渲染带 popover 的标题
|
|
136
139
|
var renderTitleWithPopover = function renderTitleWithPopover(titleContent, popover, popoverProps, popoverIcon) {
|
|
@@ -492,6 +495,12 @@ var Table = function Table(_ref2) {
|
|
|
492
495
|
// 1. 行选择
|
|
493
496
|
// 2. 行展开
|
|
494
497
|
var trClickable = (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectOnRowClick) || (rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.expandOnRowClick);
|
|
498
|
+
|
|
499
|
+
// 虚拟模式使用 RcVirtualTable,否则使用 RcTable。
|
|
500
|
+
// 由于两者 props 类型存在差异(VirtualTableProps 重新定义了 scroll),
|
|
501
|
+
// 这里统一断言为 RcTable 类型,虚拟模式的专属 props 通过末尾的 spread 覆盖传入。
|
|
502
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
503
|
+
var TableComponent = virtual ? RcVirtualTable : RcTable;
|
|
495
504
|
return /*#__PURE__*/React.createElement("div", {
|
|
496
505
|
ref: tableRef,
|
|
497
506
|
"data-odn-table": true,
|
|
@@ -501,7 +510,7 @@ var Table = function Table(_ref2) {
|
|
|
501
510
|
"data-odn-table-loading": loading,
|
|
502
511
|
className: className,
|
|
503
512
|
style: style
|
|
504
|
-
}, /*#__PURE__*/React.createElement(
|
|
513
|
+
}, /*#__PURE__*/React.createElement(TableComponent, _extends({
|
|
505
514
|
prefixCls: "odn-table",
|
|
506
515
|
data: dataSource,
|
|
507
516
|
columns: finalColumns,
|
|
@@ -857,6 +866,12 @@ var Table = function Table(_ref2) {
|
|
|
857
866
|
offset: "1",
|
|
858
867
|
stopColor: "#C4C7CC"
|
|
859
868
|
})))), "\u6570\u636E\u4E3A\u7A7A")
|
|
860
|
-
}, props
|
|
869
|
+
}, props, virtual ? {
|
|
870
|
+
scroll: {
|
|
871
|
+
x: (_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.x,
|
|
872
|
+
y: (_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.y
|
|
873
|
+
},
|
|
874
|
+
listItemHeight: listItemHeight
|
|
875
|
+
} : {})));
|
|
861
876
|
};
|
|
862
877
|
export default Table;
|
|
@@ -342,4 +342,30 @@ tr > .odn-table-cell:last-child {
|
|
|
342
342
|
height: 0;
|
|
343
343
|
overflow: hidden;
|
|
344
344
|
pointer-events: none;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.odn-table-placeholder .odn-table-expanded-row-fixed {
|
|
348
|
+
width: 100% !important;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.odn-table-tbody-virtual {
|
|
352
|
+
font-size: var(--odn-font-size);
|
|
353
|
+
line-height: var(--odn-line-height);
|
|
354
|
+
}
|
|
355
|
+
.odn-table-tbody-virtual .odn-table-row {
|
|
356
|
+
display: flex;
|
|
357
|
+
}
|
|
358
|
+
.odn-table-tbody-virtual .odn-table-row-extra {
|
|
359
|
+
position: absolute;
|
|
360
|
+
display: flex;
|
|
361
|
+
}
|
|
362
|
+
.odn-table-tbody-virtual .odn-table-cell {
|
|
363
|
+
box-sizing: border-box;
|
|
364
|
+
border-bottom: 1px solid var(--odn-table-border-color);
|
|
365
|
+
}
|
|
366
|
+
.odn-table-tbody-virtual .odn-table-row > .odn-table-cell:first-child {
|
|
367
|
+
padding-left: var(--odn-table-cell-first-padding-x-start);
|
|
368
|
+
}
|
|
369
|
+
.odn-table-tbody-virtual .odn-table-row > .odn-table-cell:last-child {
|
|
370
|
+
padding-right: var(--odn-table-cell-last-padding-x-end);
|
|
345
371
|
}
|