@react-fabric/data 1.0.0-beta.3 → 1.0.0-beta.31
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/checklist/CheckList.js +143 -0
- package/dist/cjs/histogram/Histogram.js +16 -5
- package/dist/cjs/hooks/usePagination.js +7 -4
- package/dist/cjs/hooks/useSelectableList.js +54 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/json/JsonViewer.js +30 -23
- package/dist/cjs/table/BodyCell.js +38 -5
- package/dist/cjs/table/BodyRow.js +107 -0
- package/dist/cjs/table/CheckboxCell.js +1 -1
- package/dist/cjs/table/HeaderCell.js +29 -36
- package/dist/cjs/table/Table.js +104 -66
- package/dist/cjs/table/useResizer.js +4 -4
- package/dist/cjs/table/useVirtualTable.js +118 -17
- package/dist/cjs/tree/TreeNode.js +44 -24
- package/dist/cjs/tree/TreePanel.js +28 -10
- package/dist/cjs/tree/useTree.js +96 -14
- package/dist/cjs/tree/utils.js +20 -5
- package/dist/cjs/virtual/Gallery.js +43 -29
- package/dist/cjs/virtual/List.js +43 -31
- package/dist/esm/checklist/CheckList.js +143 -0
- package/dist/esm/histogram/Histogram.js +16 -5
- package/dist/esm/hooks/usePagination.js +7 -4
- package/dist/esm/hooks/useSelectableList.js +54 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/json/JsonViewer.js +31 -24
- package/dist/esm/table/BodyCell.js +38 -5
- package/dist/esm/table/BodyRow.js +107 -0
- package/dist/esm/table/CheckboxCell.js +1 -1
- package/dist/esm/table/HeaderCell.js +30 -37
- package/dist/esm/table/Table.js +106 -68
- package/dist/esm/table/useResizer.js +4 -4
- package/dist/esm/table/useVirtualTable.js +120 -19
- package/dist/esm/tree/TreeNode.js +46 -26
- package/dist/esm/tree/TreePanel.js +28 -10
- package/dist/esm/tree/useTree.js +98 -16
- package/dist/esm/tree/utils.js +20 -5
- package/dist/esm/virtual/Gallery.js +43 -29
- package/dist/esm/virtual/List.js +43 -31
- package/dist/types/checklist/CheckList.d.ts +30 -0
- package/dist/types/histogram/Histogram.d.ts +3 -3
- package/dist/types/hooks/useSelectableList.d.ts +28 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/table/AddColumn.d.ts +2 -2
- package/dist/types/table/BodyCell.d.ts +4 -3
- package/dist/types/table/BodyRow.d.ts +20 -0
- package/dist/types/table/EmptyCell.d.ts +2 -2
- package/dist/types/table/HeaderCell.d.ts +2 -2
- package/dist/types/table/Table.d.ts +1 -1
- package/dist/types/table/types.d.ts +19 -8
- package/dist/types/table/useTableColumns.d.ts +6 -6
- package/dist/types/table/useVirtualTable.d.ts +20 -5
- package/dist/types/tree/TreeNode.d.ts +1 -1
- package/dist/types/tree/TreePanel.d.ts +1 -1
- package/dist/types/tree/types.d.ts +25 -5
- package/dist/types/tree/useTree.d.ts +2 -9
- package/dist/types/tree/utils.d.ts +4 -1
- package/dist/types/virtual/Gallery.d.ts +11 -3
- package/dist/types/virtual/List.d.ts +7 -3
- package/package.json +8 -7
- package/src/checklist/CheckList.tsx +222 -0
- package/src/histogram/Histogram.tsx +9 -2
- package/src/hooks/usePagination.tsx +13 -7
- package/src/hooks/useSelectableList.ts +94 -0
- package/src/index.ts +2 -1
- package/src/json/JsonViewer.tsx +31 -31
- package/src/table/AddColumn.tsx +2 -2
- package/src/table/BodyCell.tsx +34 -5
- package/src/table/BodyRow.tsx +143 -0
- package/src/table/CheckboxCell.tsx +1 -1
- package/src/table/EmptyCell.tsx +2 -2
- package/src/table/HeaderCell.tsx +27 -13
- package/src/table/Table.tsx +141 -73
- package/src/table/types.ts +22 -7
- package/src/table/useResizer.ts +5 -3
- package/src/table/useTableColumns.ts +7 -7
- package/src/table/useVirtualTable.ts +142 -27
- package/src/tree/TreeNode.tsx +90 -56
- package/src/tree/TreePanel.tsx +23 -3
- package/src/tree/types.ts +32 -4
- package/src/tree/useTree.ts +102 -23
- package/src/tree/utils.ts +23 -8
- package/src/virtual/Gallery.tsx +45 -34
- package/src/virtual/List.tsx +40 -27
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
4
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
6
|
import { useEffectDebugger, useDebounce, Skeleton } from '@react-fabric/core';
|
|
5
7
|
import { debounce } from '@react-fabric/utilities';
|
|
6
8
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
@@ -10,6 +12,9 @@ import { useDeferredValue, useMemo, useRef, useState, useEffect, useCallback, us
|
|
|
10
12
|
import { Scroller } from './Scroller.js';
|
|
11
13
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
14
|
|
|
15
|
+
var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "total", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
13
18
|
var createItemList = memoizeOne(function (items) {
|
|
14
19
|
return items;
|
|
15
20
|
});
|
|
@@ -18,6 +23,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
18
23
|
var items = _ref.items,
|
|
19
24
|
children = _ref.children,
|
|
20
25
|
columns = _ref.columns,
|
|
26
|
+
fullWidth = _ref.fullWidth,
|
|
27
|
+
maxWidth = _ref.maxWidth,
|
|
28
|
+
minWidth = _ref.minWidth,
|
|
29
|
+
_ref$total = _ref.total,
|
|
30
|
+
total = _ref$total === void 0 ? 0 : _ref$total,
|
|
21
31
|
_ref$padding = _ref.padding,
|
|
22
32
|
padding = _ref$padding === void 0 ? "md" : _ref$padding,
|
|
23
33
|
_ref$defaultHeight = _ref.defaultHeight,
|
|
@@ -29,16 +39,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
29
39
|
loading = _ref.loading,
|
|
30
40
|
onLoadMore = _ref.onLoadMore,
|
|
31
41
|
onScroll = _ref.onScroll,
|
|
32
|
-
galleryRef = _ref.galleryRef
|
|
42
|
+
galleryRef = _ref.galleryRef,
|
|
43
|
+
aria = _objectWithoutProperties(_ref, _excluded);
|
|
33
44
|
var count = useDeferredValue(items.length);
|
|
34
45
|
var extraSize = useMemo(function () {
|
|
35
|
-
return onLoadMore ?
|
|
46
|
+
return onLoadMore ? 8 : 0;
|
|
36
47
|
}, [onLoadMore]);
|
|
37
|
-
var itemList = createItemList(items.map(function (item,
|
|
48
|
+
var itemList = createItemList(items.map(function (item, index) {
|
|
38
49
|
return {
|
|
39
|
-
index:
|
|
40
|
-
|
|
41
|
-
isLast:
|
|
50
|
+
index: index,
|
|
51
|
+
item: item,
|
|
52
|
+
isLast: index + 1 === items.length
|
|
42
53
|
};
|
|
43
54
|
}));
|
|
44
55
|
var scrollerRef = useRef(null);
|
|
@@ -112,26 +123,24 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
112
123
|
setScrollActive(calculateActiveScroll());
|
|
113
124
|
}, [count, calculateActiveScroll]);
|
|
114
125
|
useEffect(function () {
|
|
115
|
-
|
|
116
|
-
var
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
};
|
|
123
|
-
}, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
|
|
124
|
-
useEffect(function () {
|
|
125
|
-
var _virtualItems$2;
|
|
126
|
-
var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
|
|
127
|
-
if (onLoadMore && firstItem !== undefined && items[firstItem * columnCount] === null) {
|
|
126
|
+
if (onLoadMore) {
|
|
127
|
+
var _virtualItems$2, _virtualItems$slice$p;
|
|
128
|
+
var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
|
|
129
|
+
var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
|
|
130
|
+
var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
|
|
131
|
+
var canLoadPrevPage = firstItem !== undefined && items[firstItem * columnCount] === null;
|
|
132
|
+
var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
|
|
128
133
|
var db = debounce(onLoadMore);
|
|
129
|
-
|
|
134
|
+
if (canLoadPrevPage) {
|
|
135
|
+
db(firstItem);
|
|
136
|
+
} else if (!loading && canLoadNextPage) {
|
|
137
|
+
db(lastItem + 1);
|
|
138
|
+
}
|
|
130
139
|
return function () {
|
|
131
140
|
return db.cancel();
|
|
132
141
|
};
|
|
133
142
|
}
|
|
134
|
-
}, [onLoadMore,
|
|
143
|
+
}, [onLoadMore, virtualItems]);
|
|
135
144
|
useLayoutEffect(function () {
|
|
136
145
|
setTimeout(function () {
|
|
137
146
|
initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
|
|
@@ -143,14 +152,14 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
143
152
|
return {
|
|
144
153
|
scrollToItem: function scrollToItem(index) {
|
|
145
154
|
virtualizer.scrollToIndex(Math.floor(index / columnCount), {
|
|
146
|
-
align: "
|
|
155
|
+
align: "auto"
|
|
147
156
|
});
|
|
148
157
|
},
|
|
149
158
|
hilight: function hilight(index) {
|
|
150
159
|
var _scrollerRef$current2;
|
|
151
160
|
(_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
|
|
152
161
|
virtualizer.scrollToIndex(Math.floor(index / columnCount), {
|
|
153
|
-
align: "
|
|
162
|
+
align: "auto"
|
|
154
163
|
});
|
|
155
164
|
setTimeout(function () {
|
|
156
165
|
var _scrollerRef$current3;
|
|
@@ -163,17 +172,22 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
163
172
|
}
|
|
164
173
|
};
|
|
165
174
|
}, [virtualizer, columnCount]);
|
|
166
|
-
return /*#__PURE__*/jsx("div", {
|
|
175
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
|
|
167
176
|
ref: scrollerRef,
|
|
168
177
|
onScroll: handleScroll,
|
|
169
|
-
className: classNames("area-content bg-base overflow-auto contain-strict")
|
|
178
|
+
className: classNames("area-content bg-base overflow-auto contain-strict")
|
|
179
|
+
}, aria), {}, {
|
|
170
180
|
children: /*#__PURE__*/jsxs("div", {
|
|
171
181
|
className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
|
|
172
182
|
children: [/*#__PURE__*/jsx("div", {
|
|
173
|
-
className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
|
|
183
|
+
className: classNames("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
|
|
184
|
+
style: {
|
|
185
|
+
minWidth: minWidth,
|
|
186
|
+
maxWidth: maxWidth
|
|
187
|
+
},
|
|
174
188
|
children: /*#__PURE__*/jsxs("div", {
|
|
175
189
|
style: {
|
|
176
|
-
height: virtualizer.getTotalSize()
|
|
190
|
+
height: virtualizer.getTotalSize() + extraSize
|
|
177
191
|
},
|
|
178
192
|
children: [/*#__PURE__*/jsx("div", {
|
|
179
193
|
style: {
|
|
@@ -184,7 +198,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
184
198
|
index = _ref3.index,
|
|
185
199
|
measureElement = _ref3.measureElement;
|
|
186
200
|
return /*#__PURE__*/jsx("div", {
|
|
187
|
-
className: "flex",
|
|
201
|
+
className: "flex justify-start",
|
|
188
202
|
"data-index": index,
|
|
189
203
|
ref: measureElement,
|
|
190
204
|
children: columnMap.map(function (col) {
|
|
@@ -220,7 +234,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
|
|
|
220
234
|
})
|
|
221
235
|
})]
|
|
222
236
|
})
|
|
223
|
-
});
|
|
237
|
+
}));
|
|
224
238
|
};
|
|
225
239
|
_VirtualGallery.displayName = "VirtualGallery";
|
|
226
240
|
var GenericMemo = memo;
|
package/dist/esm/virtual/List.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
4
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
4
6
|
import { useDebounce, Skeleton } from '@react-fabric/core';
|
|
5
7
|
import { debounce } from '@react-fabric/utilities';
|
|
6
8
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
@@ -10,14 +12,21 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
|
|
|
10
12
|
import { Scroller } from './Scroller.js';
|
|
11
13
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
14
|
|
|
15
|
+
var _excluded = ["items", "total", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
13
18
|
var createItemList = memoizeOne(function (items) {
|
|
14
19
|
return items;
|
|
15
20
|
});
|
|
16
21
|
var _VirtualList = function _VirtualList(_ref) {
|
|
17
22
|
var _virtualItems$3, _virtualItems$4;
|
|
18
23
|
var items = _ref.items,
|
|
24
|
+
_ref$total = _ref.total,
|
|
25
|
+
total = _ref$total === void 0 ? 0 : _ref$total,
|
|
19
26
|
children = _ref.children,
|
|
20
27
|
fullWidth = _ref.fullWidth,
|
|
28
|
+
maxWidth = _ref.maxWidth,
|
|
29
|
+
minWidth = _ref.minWidth,
|
|
21
30
|
_ref$padding = _ref.padding,
|
|
22
31
|
padding = _ref$padding === void 0 ? "md" : _ref$padding,
|
|
23
32
|
_ref$orientation = _ref.orientation,
|
|
@@ -31,16 +40,17 @@ var _VirtualList = function _VirtualList(_ref) {
|
|
|
31
40
|
loading = _ref.loading,
|
|
32
41
|
onLoadMore = _ref.onLoadMore,
|
|
33
42
|
onScroll = _ref.onScroll,
|
|
34
|
-
listRef = _ref.listRef
|
|
43
|
+
listRef = _ref.listRef,
|
|
44
|
+
aria = _objectWithoutProperties(_ref, _excluded);
|
|
35
45
|
var count = useDeferredValue(items.length);
|
|
36
46
|
var extraSize = useMemo(function () {
|
|
37
|
-
return onLoadMore ?
|
|
47
|
+
return onLoadMore ? 8 : 0;
|
|
38
48
|
}, [onLoadMore]);
|
|
39
|
-
var itemList = createItemList(items.map(function (item,
|
|
49
|
+
var itemList = createItemList(items.map(function (item, index) {
|
|
40
50
|
return {
|
|
41
|
-
index:
|
|
42
|
-
|
|
43
|
-
isLast:
|
|
51
|
+
index: index,
|
|
52
|
+
item: item,
|
|
53
|
+
isLast: index + 1 === items.length
|
|
44
54
|
};
|
|
45
55
|
}));
|
|
46
56
|
var scrollerRef = useRef(null);
|
|
@@ -103,26 +113,23 @@ var _VirtualList = function _VirtualList(_ref) {
|
|
|
103
113
|
setScrollActive(calculateActiveScroll());
|
|
104
114
|
}, [itemList, calculateActiveScroll]);
|
|
105
115
|
useEffect(function () {
|
|
106
|
-
|
|
107
|
-
var
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
return db.cancel();
|
|
113
|
-
};
|
|
114
|
-
}, [onLoadMore, loading, itemList, virtualItems, count]);
|
|
115
|
-
useEffect(function () {
|
|
116
|
-
var _virtualItems$2;
|
|
117
|
-
var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
|
|
118
|
-
if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
|
|
116
|
+
if (onLoadMore) {
|
|
117
|
+
var _virtualItems$2, _virtualItems$slice$p;
|
|
118
|
+
var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
|
|
119
|
+
var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
|
|
120
|
+
var canLoadPrevPage = firstItem !== undefined && items[firstItem] === null;
|
|
121
|
+
var canLoadNextPage = lastItem !== undefined && lastItem === count - 1 && count < total;
|
|
119
122
|
var db = debounce(onLoadMore);
|
|
120
|
-
|
|
123
|
+
if (canLoadPrevPage) {
|
|
124
|
+
db(firstItem);
|
|
125
|
+
} else if (!loading && canLoadNextPage) {
|
|
126
|
+
db(lastItem + 1);
|
|
127
|
+
}
|
|
121
128
|
return function () {
|
|
122
129
|
return db.cancel();
|
|
123
130
|
};
|
|
124
131
|
}
|
|
125
|
-
}, [onLoadMore,
|
|
132
|
+
}, [onLoadMore, virtualItems]);
|
|
126
133
|
useLayoutEffect(function () {
|
|
127
134
|
setTimeout(function () {
|
|
128
135
|
initialScroll && virtualizer.scrollToIndex(initialScroll, {
|
|
@@ -134,14 +141,14 @@ var _VirtualList = function _VirtualList(_ref) {
|
|
|
134
141
|
return {
|
|
135
142
|
scrollToItem: function scrollToItem(index) {
|
|
136
143
|
virtualizer.scrollToIndex(index, {
|
|
137
|
-
align: "
|
|
144
|
+
align: "auto"
|
|
138
145
|
});
|
|
139
146
|
},
|
|
140
147
|
hilight: function hilight(index) {
|
|
141
148
|
var _scrollerRef$current2;
|
|
142
149
|
(_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
|
|
143
150
|
virtualizer.scrollToIndex(Math.floor(index), {
|
|
144
|
-
align: "
|
|
151
|
+
align: "auto"
|
|
145
152
|
});
|
|
146
153
|
setTimeout(function () {
|
|
147
154
|
var _scrollerRef$current3;
|
|
@@ -154,19 +161,24 @@ var _VirtualList = function _VirtualList(_ref) {
|
|
|
154
161
|
}
|
|
155
162
|
};
|
|
156
163
|
}, [virtualizer]);
|
|
157
|
-
return /*#__PURE__*/jsx("div", {
|
|
164
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
|
|
158
165
|
ref: scrollerRef,
|
|
159
166
|
onScroll: handleScroll,
|
|
160
|
-
className: classNames("area-content bg-base overflow-auto contain-strict")
|
|
167
|
+
className: classNames("area-content bg-base overflow-auto contain-strict")
|
|
168
|
+
}, aria), {}, {
|
|
161
169
|
children: /*#__PURE__*/jsxs("div", {
|
|
162
170
|
className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
|
|
163
171
|
children: [/*#__PURE__*/jsxs("div", {
|
|
164
172
|
className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
|
|
173
|
+
style: {
|
|
174
|
+
minWidth: minWidth,
|
|
175
|
+
maxWidth: maxWidth
|
|
176
|
+
},
|
|
165
177
|
children: [/*#__PURE__*/jsxs("div", {
|
|
166
178
|
style: orientation === "vertical" ? {
|
|
167
|
-
height: virtualizer.getTotalSize()
|
|
179
|
+
height: virtualizer.getTotalSize() + extraSize
|
|
168
180
|
} : {
|
|
169
|
-
width: virtualizer.getTotalSize()
|
|
181
|
+
width: virtualizer.getTotalSize() + extraSize
|
|
170
182
|
},
|
|
171
183
|
children: [/*#__PURE__*/jsx("div", {
|
|
172
184
|
style: orientation === "vertical" ? {
|
|
@@ -185,9 +197,9 @@ var _VirtualList = function _VirtualList(_ref) {
|
|
|
185
197
|
children: children(itemList[index])
|
|
186
198
|
}, key);
|
|
187
199
|
})]
|
|
188
|
-
}),
|
|
189
|
-
className: orientation === "horizontal" ? "min-w-16" : "
|
|
190
|
-
children:
|
|
200
|
+
}), loading && /*#__PURE__*/jsx("div", {
|
|
201
|
+
className: orientation === "horizontal" ? "min-w-16" : "",
|
|
202
|
+
children: /*#__PURE__*/jsx(Skeleton, {})
|
|
191
203
|
})]
|
|
192
204
|
}), !hideScroller && /*#__PURE__*/jsx("div", {
|
|
193
205
|
className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
|
|
@@ -209,7 +221,7 @@ var _VirtualList = function _VirtualList(_ref) {
|
|
|
209
221
|
})
|
|
210
222
|
})]
|
|
211
223
|
})
|
|
212
|
-
});
|
|
224
|
+
}));
|
|
213
225
|
};
|
|
214
226
|
_VirtualList.displayName = "VirtualList";
|
|
215
227
|
var GenericMemo = memo;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { type BadgeType, type TestProps } from "@react-fabric/core/dist/types/types";
|
|
2
|
+
import { type FC } from "react";
|
|
3
|
+
import { type SelectableProps } from "../hooks/useSelectableList";
|
|
4
|
+
export interface CheckListItem extends KeyValue {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
icon?: string;
|
|
8
|
+
badge?: BadgeType;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface CheckListProps extends SelectableProps, TestProps {
|
|
12
|
+
/**
|
|
13
|
+
* list items
|
|
14
|
+
*/
|
|
15
|
+
items: CheckListItem[];
|
|
16
|
+
/**
|
|
17
|
+
* allow negative selections
|
|
18
|
+
*/
|
|
19
|
+
allowNegative?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* max list items
|
|
22
|
+
*/
|
|
23
|
+
maxCount?: number;
|
|
24
|
+
/**
|
|
25
|
+
* message for empty list
|
|
26
|
+
*/
|
|
27
|
+
emptyMessage?: string;
|
|
28
|
+
sortItems?: boolean;
|
|
29
|
+
}
|
|
30
|
+
export declare const CheckList: FC<CheckListProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { type ColorType, type PaletteType } from "@react-fabric/core/dist/types/types";
|
|
2
|
+
import { type ColorType, type PaletteType, type TestProps } from "@react-fabric/core/dist/types/types";
|
|
3
3
|
interface HistogramItem {
|
|
4
4
|
id: string;
|
|
5
5
|
label: string;
|
|
@@ -7,7 +7,7 @@ interface HistogramItem {
|
|
|
7
7
|
total?: number;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
}
|
|
10
|
-
export interface HistogramProps {
|
|
10
|
+
export interface HistogramProps extends TestProps {
|
|
11
11
|
/**
|
|
12
12
|
* histogram items list
|
|
13
13
|
*/
|
|
@@ -37,5 +37,5 @@ export interface HistogramProps {
|
|
|
37
37
|
*/
|
|
38
38
|
onClick?: (id: string, negative?: true) => void;
|
|
39
39
|
}
|
|
40
|
-
export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, ...aria }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
41
|
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface SelectableProps {
|
|
2
|
+
/**
|
|
3
|
+
* list items
|
|
4
|
+
*/
|
|
5
|
+
items: Array<{
|
|
6
|
+
label: string;
|
|
7
|
+
} & KeyValue>;
|
|
8
|
+
/**
|
|
9
|
+
* selected item ids
|
|
10
|
+
*/
|
|
11
|
+
selected?: string[];
|
|
12
|
+
/**
|
|
13
|
+
* selected negative item ids
|
|
14
|
+
*/
|
|
15
|
+
nonselected?: string[];
|
|
16
|
+
/**
|
|
17
|
+
* change callback
|
|
18
|
+
*/
|
|
19
|
+
onChange?: (ids: string[], nonIds?: string[]) => void;
|
|
20
|
+
/**
|
|
21
|
+
* item click callback
|
|
22
|
+
*/
|
|
23
|
+
onClick?: (id: string, isNegative: boolean) => void;
|
|
24
|
+
}
|
|
25
|
+
export declare const useSelectableList: ({ items, selected, nonselected, onChange, onClick, }: SelectableProps) => {
|
|
26
|
+
selection: KeyValue<number>;
|
|
27
|
+
toggleSelection: (id: string, isNegative?: boolean) => void;
|
|
28
|
+
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import "./i18n";
|
|
2
|
+
export { CheckList } from "./checklist/CheckList";
|
|
2
3
|
export { Histogram } from "./histogram/Histogram";
|
|
3
4
|
export { JsonViewer } from "./json/JsonViewer";
|
|
4
5
|
export { Pagination } from "./pagination/Pagination";
|
|
5
6
|
export { Table } from "./table/Table";
|
|
6
|
-
export { type TableRef } from "./table/types";
|
|
7
|
+
export { type TableColumn, type TableRef } from "./table/types";
|
|
7
8
|
export { TreePanel } from "./tree/TreePanel";
|
|
8
9
|
export { type TreeNodeType as TreeNode } from "./tree/types";
|
|
9
10
|
export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type TableColumn } from "./types";
|
|
2
2
|
export declare const AddColumn: ({ columns, onClick, }: {
|
|
3
|
-
columns:
|
|
3
|
+
columns: TableColumn[];
|
|
4
4
|
onClick: (id: string) => void;
|
|
5
5
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
export declare const BodyCell: ({ column, item, }: {
|
|
3
|
-
column:
|
|
1
|
+
import { type TableColumn } from "./types";
|
|
2
|
+
export declare const BodyCell: ({ column, item, index, }: {
|
|
3
|
+
column: TableColumn;
|
|
4
4
|
item: KeyValue;
|
|
5
|
+
index: number;
|
|
5
6
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type TableColumn } from "./types";
|
|
2
|
+
export declare const BodyRow: ({ rowKey, index, data, keyProperty, measureElement, state, hideableColumns, wrapperStart, wrapperEnd, onRowClick, checkableRows, checked, toggleChecked, canExpand, expanded, toggleExpand, expandRow, }: {
|
|
3
|
+
rowKey: Key;
|
|
4
|
+
index: number;
|
|
5
|
+
data: KeyValue;
|
|
6
|
+
keyProperty?: Key;
|
|
7
|
+
measureElement: AnyObject;
|
|
8
|
+
state: KeyValue<TableColumn[]>;
|
|
9
|
+
hideableColumns?: boolean;
|
|
10
|
+
wrapperStart: string;
|
|
11
|
+
wrapperEnd: string;
|
|
12
|
+
checkableRows?: boolean;
|
|
13
|
+
checked: 0 | 1;
|
|
14
|
+
onRowClick?: AnyObject;
|
|
15
|
+
canExpand?: AnyObject;
|
|
16
|
+
expandRow?: AnyObject;
|
|
17
|
+
expanded: boolean;
|
|
18
|
+
toggleExpand: (key: Key) => void;
|
|
19
|
+
toggleChecked: (key: Key) => void;
|
|
20
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }:
|
|
1
|
+
import { type TableColumn } from "./types";
|
|
2
|
+
export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: TableColumn) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
export declare const HeaderCell: ({ id, label, icon, iconBg, iconColor, rtlFlip, actions, locked, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, }:
|
|
1
|
+
import { type TableColumn, type TableProps } from "./types";
|
|
2
|
+
export declare const HeaderCell: ({ id, label, icon, iconBg, iconColor, rtlFlip, actions, locked, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, }: TableColumn & Pick<TableProps, "sort" | "onSort">) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type TableProps } from "./types";
|
|
2
|
-
export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, hideableColumns, sort, loading, onSort, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import { type CssProp, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
|
|
1
|
+
import { type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
|
|
2
2
|
import { type ReactElement } from "react";
|
|
3
3
|
export declare const COL_MIN_WIDTH = "3rem";
|
|
4
4
|
export declare const COL_MAX_WIDTH = "64rem";
|
|
5
5
|
export declare const COL_DEFAULT_WIDTH = "12rem";
|
|
6
|
-
export interface
|
|
7
|
-
id: keyof T;
|
|
6
|
+
export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps {
|
|
7
|
+
id: keyof T | string;
|
|
8
8
|
label?: string;
|
|
9
|
-
|
|
9
|
+
tooltip?: string;
|
|
10
|
+
actions?: ReactElement[];
|
|
10
11
|
align?: "start" | "center" | "end";
|
|
11
12
|
locked?: "start" | "end";
|
|
12
13
|
hidden?: boolean;
|
|
14
|
+
truncate?: boolean;
|
|
13
15
|
hideable?: boolean;
|
|
14
16
|
resizable?: boolean;
|
|
15
17
|
sortable?: boolean;
|
|
@@ -20,7 +22,8 @@ export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps
|
|
|
20
22
|
maxWidth?: string | number;
|
|
21
23
|
dataType?: "string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown";
|
|
22
24
|
format?: string;
|
|
23
|
-
|
|
25
|
+
valueMap?: KeyValue;
|
|
26
|
+
renderer?: (value: AnyObject, data: T, index: number) => Elements<AnyObject>;
|
|
24
27
|
}
|
|
25
28
|
export interface TableRef {
|
|
26
29
|
hilight: (row: number) => void;
|
|
@@ -28,14 +31,18 @@ export interface TableRef {
|
|
|
28
31
|
scrollTo: (row: number) => void;
|
|
29
32
|
}
|
|
30
33
|
export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
|
|
31
|
-
columns: Array<
|
|
34
|
+
columns: Array<TableColumn<T>>;
|
|
32
35
|
data: T[];
|
|
33
|
-
keyProperty
|
|
36
|
+
keyProperty?: keyof T;
|
|
37
|
+
groupProperty?: keyof T;
|
|
38
|
+
groupRenderer?: (key: AnyObject) => ReactElement;
|
|
39
|
+
emptyDisplay?: ReactElement;
|
|
34
40
|
/**
|
|
35
41
|
* checkable rows
|
|
36
42
|
*/
|
|
43
|
+
checked?: AnyObject[];
|
|
37
44
|
checkableRows?: boolean;
|
|
38
|
-
onCheckedChanged?: (rows:
|
|
45
|
+
onCheckedChanged?: (rows: AnyObject[]) => void;
|
|
39
46
|
/**
|
|
40
47
|
* sorting
|
|
41
48
|
*/
|
|
@@ -50,4 +57,8 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
|
|
|
50
57
|
loading?: boolean;
|
|
51
58
|
hideableColumns?: boolean;
|
|
52
59
|
onRowClick?: (data: T) => void;
|
|
60
|
+
initialScroll?: number;
|
|
61
|
+
onScroll?: (firstItem: number) => void;
|
|
62
|
+
canExpand?: (record: T) => boolean;
|
|
63
|
+
children?: (record: T) => Elements<AnyObject>;
|
|
53
64
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
export declare const useTableColumns: (columns:
|
|
1
|
+
import { type TableColumn } from "./types";
|
|
2
|
+
export declare const useTableColumns: (columns: TableColumn[]) => {
|
|
3
3
|
state: {
|
|
4
|
-
start:
|
|
5
|
-
end:
|
|
6
|
-
cols:
|
|
7
|
-
columns:
|
|
4
|
+
start: TableColumn<KeyValue<any>>[];
|
|
5
|
+
end: TableColumn<KeyValue<any>>[];
|
|
6
|
+
cols: TableColumn<KeyValue<any>>[];
|
|
7
|
+
columns: TableColumn[];
|
|
8
8
|
};
|
|
9
9
|
onHide: (id: string) => void;
|
|
10
10
|
};
|
|
@@ -1,15 +1,30 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
interface DataState {
|
|
3
|
-
|
|
2
|
+
interface DataState<T = KeyValue> {
|
|
3
|
+
items: T[];
|
|
4
|
+
grouped: KeyValue<T[]>;
|
|
5
|
+
groups: AnyObject[];
|
|
6
|
+
expanded: AnyObject[];
|
|
7
|
+
checked: AnyObject[];
|
|
4
8
|
allChecked: 0 | 1 | 2;
|
|
5
9
|
}
|
|
6
|
-
export declare const useVirtualTable:
|
|
10
|
+
export declare const useVirtualTable: <T extends KeyValue<any> = KeyValue<any>>(data: T[], options: {
|
|
11
|
+
checked?: AnyObject[];
|
|
12
|
+
keyProperty: keyof T;
|
|
13
|
+
groupProperty?: keyof T;
|
|
14
|
+
onCheckChanged?: (checked: AnyObject[]) => void;
|
|
15
|
+
}) => {
|
|
7
16
|
scrollerRef: import("react").RefObject<HTMLDivElement>;
|
|
8
17
|
items: import("@tanstack/virtual-core").VirtualItem<Element>[];
|
|
9
|
-
checkState: DataState
|
|
10
|
-
getData: (index: number) =>
|
|
18
|
+
checkState: DataState<T>;
|
|
19
|
+
getData: (index: number) => T;
|
|
20
|
+
virtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
|
|
21
|
+
hasActiveSticky: boolean;
|
|
22
|
+
isActiveSticky: (index: number) => boolean;
|
|
23
|
+
top: number | undefined;
|
|
11
24
|
totalSize: () => number;
|
|
12
25
|
measureElement: (node: Element | null | undefined) => void;
|
|
26
|
+
toggleGroupExpand: (key: Key) => void;
|
|
27
|
+
toggleExpand: (key: Key) => void;
|
|
13
28
|
toggleChecked: (key: Key) => void;
|
|
14
29
|
toggleAllChecked: () => void;
|
|
15
30
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type TreeNodeProps } from "./types";
|
|
2
|
-
export declare const TreeNode: ({ node, noLines, expanders, checkable, selectable, defaultLeafIcon, defaultNodeIcon, onToggle, onSelect, onChecked, children, }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const TreeNode: ({ node, noLines, expanders, checkable, selectable, defaultLeafIcon, defaultNodeIcon, onToggle, onClick, onSelect, onChecked, children, leafClassName, nodeClassName, }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type TreePanelProps } from "./types";
|
|
2
|
-
export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onQuery, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
|