@longline/aqua-ui 1.0.344 → 1.0.345
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.
|
@@ -4,6 +4,27 @@ interface IListViewProps {
|
|
|
4
4
|
* Array of data to show in the table
|
|
5
5
|
*/
|
|
6
6
|
data: any[] | null | undefined;
|
|
7
|
+
/**
|
|
8
|
+
* Controlled sort key. When `onSortClick` is provided the `ListView` is in
|
|
9
|
+
* **controlled-sort** mode: it does NOT sort `data` itself (the data is assumed
|
|
10
|
+
* already sorted — e.g. server-side/paged), and this key + `reverse` only drive
|
|
11
|
+
* the header's active-sort indicator. Ignored in the default (in-memory sort)
|
|
12
|
+
* mode, where sorting is internal state.
|
|
13
|
+
*/
|
|
14
|
+
sort?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Controlled sort direction, paired with `sort` (see it).
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
reverse?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Fired when a sortable column header is clicked. **Providing this switches the
|
|
22
|
+
* `ListView` to controlled-sort mode** (see `sort`): the `ListView` stops sorting
|
|
23
|
+
* `data` in memory and delegates the decision to you — typically you re-query a
|
|
24
|
+
* server for the newly-sorted page and feed back `sort`/`reverse` + sorted `data`.
|
|
25
|
+
* Without it, header clicks sort `data` in memory (the default).
|
|
26
|
+
*/
|
|
27
|
+
onSortClick?: (column: IColumnProps) => void;
|
|
7
28
|
/**
|
|
8
29
|
* If set, show no header.
|
|
9
30
|
* @default false
|
|
@@ -61,26 +61,38 @@ var getColumns = function (children) {
|
|
|
61
61
|
return getChildrenOfTypeDeep(children, ListView.Column).map(function (c) { return c.props; });
|
|
62
62
|
};
|
|
63
63
|
var ListViewBase = function (props) {
|
|
64
|
-
var _a, _b, _c;
|
|
64
|
+
var _a, _b, _c, _d, _e;
|
|
65
65
|
var children = props.children, otherProps = __rest(props, ["children"]);
|
|
66
|
-
var
|
|
66
|
+
var _f = React.useState(false), columnsMode = _f[0], setColumnsMode = _f[1];
|
|
67
67
|
var originalColumns = getColumns(props.children);
|
|
68
|
-
var
|
|
68
|
+
var _g = React.useState(originalColumns), columns = _g[0], setColumns = _g[1];
|
|
69
69
|
// Find default sort column:
|
|
70
70
|
var sortColumn = (_a = columns.find(function (c) { return c.defaultSort; })) !== null && _a !== void 0 ? _a : columns[0];
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
var
|
|
71
|
+
// Controlled-sort mode: when the consumer supplies onSortClick, it owns the sort
|
|
72
|
+
// (typically sorting server-side and feeding back pre-sorted data + sort/reverse).
|
|
73
|
+
var controlled = !!props.onSortClick;
|
|
74
|
+
// Internal sort state, used only in the default (uncontrolled) in-memory mode.
|
|
75
|
+
var _h = React.useState((_b = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sort) !== null && _b !== void 0 ? _b : ''), sortState = _h[0], setSortState = _h[1];
|
|
76
|
+
var _j = React.useState((_c = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.reverse) !== null && _c !== void 0 ? _c : false), reverseState = _j[0], setReverseState = _j[1];
|
|
77
|
+
var _k = React.useState(null), data = _k[0], setData = _k[1];
|
|
78
|
+
// The active sort key/direction: from props when controlled, else internal state.
|
|
79
|
+
var sort = controlled ? ((_d = props.sort) !== null && _d !== void 0 ? _d : '') : sortState;
|
|
80
|
+
var reverse = controlled ? ((_e = props.reverse) !== null && _e !== void 0 ? _e : false) : reverseState;
|
|
74
81
|
React.useEffect(function () {
|
|
75
82
|
// Don't sort if no data is available yet:
|
|
76
83
|
if (!Array.isArray(props.data))
|
|
77
84
|
return;
|
|
85
|
+
// Controlled: the data is assumed already sorted (e.g. server-side) — show as-is.
|
|
86
|
+
if (controlled) {
|
|
87
|
+
setData(props.data);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
78
90
|
// Find the column corresponding to the current sort key. If none matches
|
|
79
91
|
// (e.g. no sortable column and no defaultSort), show the data unsorted
|
|
80
92
|
// rather than rendering nothing.
|
|
81
|
-
var
|
|
82
|
-
setData(
|
|
83
|
-
}, [props.data, sort, reverse, columns]);
|
|
93
|
+
var sc = columns.find(function (c) { return c.sort === sort; });
|
|
94
|
+
setData(sc ? sortItems(props.data, sort, reverse, sc.sortValue) : props.data);
|
|
95
|
+
}, [props.data, sort, reverse, columns, controlled]);
|
|
84
96
|
// If children change, then update columns state.
|
|
85
97
|
React.useEffect(function () {
|
|
86
98
|
setColumns(getColumns(props.children));
|
|
@@ -88,12 +100,17 @@ var ListViewBase = function (props) {
|
|
|
88
100
|
// Change sort:
|
|
89
101
|
var handleSort = function (column) {
|
|
90
102
|
var _a, _b;
|
|
91
|
-
|
|
92
|
-
|
|
103
|
+
// Controlled: delegate to the consumer (who re-queries and re-feeds data).
|
|
104
|
+
if (props.onSortClick) {
|
|
105
|
+
props.onSortClick(column);
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
if (sortState === column.sort) {
|
|
109
|
+
setReverseState(!reverseState);
|
|
93
110
|
}
|
|
94
111
|
else {
|
|
95
|
-
|
|
96
|
-
|
|
112
|
+
setSortState((_a = column.sort) !== null && _a !== void 0 ? _a : '');
|
|
113
|
+
setReverseState((_b = column.reverse) !== null && _b !== void 0 ? _b : false);
|
|
97
114
|
}
|
|
98
115
|
};
|
|
99
116
|
var handleCheck = function (data, item) {
|