onekijs-ui 1.0.2 → 1.0.3
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/components/tree/components/VirtualTreeListComponent.d.ts +1 -1
- package/dist/index.js +39 -12
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +39 -12
- package/dist/index.module.js.map +1 -1
- package/package.json +3 -3
- package/src/components/list/components/ListBodyComponent.tsx +1 -0
- package/src/components/list/components/VirtualListComponent.tsx +2 -0
- package/src/components/list/hooks/useListView.tsx +0 -2
- package/src/components/table/components/FormTableComponent.tsx +1 -1
- package/src/components/tree/components/VirtualTreeListComponent.tsx +61 -24
package/dist/index.module.js
CHANGED
|
@@ -5506,17 +5506,13 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
|
|
|
5506
5506
|
return itemHeight(index) || defaultItemHeight;
|
|
5507
5507
|
}
|
|
5508
5508
|
return itemHeight;
|
|
5509
|
-
},
|
|
5510
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5511
|
-
[itemHeight]);
|
|
5509
|
+
}, [itemHeight]);
|
|
5512
5510
|
// Trick for force recalcutate position without losing measurementCache
|
|
5513
5511
|
// In the react-virtual code, the position are recalculate if the forceExtractor function change
|
|
5514
5512
|
const forceKeyExtractor = useCallback((index) => {
|
|
5515
5513
|
const fn = keyExtractor || defaultKeyExtractor;
|
|
5516
5514
|
return fn(index);
|
|
5517
|
-
},
|
|
5518
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5519
|
-
[keyExtractor, force]);
|
|
5515
|
+
}, [keyExtractor, force]);
|
|
5520
5516
|
const state = controller.state;
|
|
5521
5517
|
const { totalSize, virtualItems, scrollToIndex, scrollToOffset } = useVirtual({
|
|
5522
5518
|
size: state.total ? state.total : state.items?.length || 0,
|
|
@@ -5684,6 +5680,7 @@ const StandardListComponent = ({ items, ItemComponent = ListItemComponent, ItemL
|
|
|
5684
5680
|
}) }));
|
|
5685
5681
|
};
|
|
5686
5682
|
|
|
5683
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
5687
5684
|
const VirtualItemWrapper = ({ virtualItem, listItem, ItemComponent = ListItemComponent, ItemContentComponent = ListItemContent, ItemLoadingComponent = LoadingItem, onItemClick, onItemMouseEnter, onItemMouseLeave, }) => {
|
|
5688
5685
|
const { index, measureRef, start } = virtualItem;
|
|
5689
5686
|
const ref = useRef(null);
|
|
@@ -5722,6 +5719,7 @@ const VirtualItemWrapper = ({ virtualItem, listItem, ItemComponent = ListItemCom
|
|
|
5722
5719
|
transform: `translateY(${start}px)`,
|
|
5723
5720
|
}, children: jsxRuntimeExports.jsxs("div", { ref: ref, children: [listItem?.loadingStatus === LoadingStatus.Loading && jsxRuntimeExports.jsx(ItemLoadingComponent, {}), listItem?.loadingStatus !== LoadingStatus.Loading && listItem && listItem.data !== undefined && (jsxRuntimeExports.jsx(ItemComponent, { index: index, item: listItem, data: listItem.data, onClick: onItemClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ItemContentComponent: ItemContentComponent }, `item-${listItem.uid || index}`))] }) }));
|
|
5724
5721
|
};
|
|
5722
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
5725
5723
|
const VirtualListComponent = ({ items, ItemComponent = ListItemComponent, ItemLoadingComponent = LoadingItem, ItemContentComponent = ListItemContent, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }) => {
|
|
5726
5724
|
return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: virtualItems.map((virtualItem) => {
|
|
5727
5725
|
const listItem = items[virtualItem.index];
|
|
@@ -5743,6 +5741,7 @@ const findItemIndex = (items, uid) => {
|
|
|
5743
5741
|
return i.uid === uid;
|
|
5744
5742
|
});
|
|
5745
5743
|
};
|
|
5744
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
5746
5745
|
const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, items, ItemComponent = ListItemComponent, ItemLoadingComponent = LoadingItem, ItemContentComponent = ListItemContent, NotFoundComponent, keyboardNavigable, ListComponent = StandardListComponent, multiSelect, onItemActivate, onItemDeactivate, onItemSelect, onItemUnselect, onItemHighlight, onItemUnhighlight, parentRef, scrollToIndex, service, state, style, tail, totalSize, virtualItems, VirtualListComponent: VirtualListComponent$1 = VirtualListComponent, LoadingComponent = ListLoadingComponent, }) => {
|
|
5747
5746
|
const scrollAlignRef = useRef('center');
|
|
5748
5747
|
const lastActiveItemUid = useRef(undefined);
|
|
@@ -9120,12 +9119,15 @@ const TreeBodyComponent = ({ className, controller, NotFoundComponent, }) => {
|
|
|
9120
9119
|
TreeBodyComponent.displayName = 'TreeBody';
|
|
9121
9120
|
|
|
9122
9121
|
const timeout$1 = 500;
|
|
9122
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
9123
9123
|
const VirtualTreeListItemComponent = ({ itemClassName, ItemComponent, virtualItem, onClick, onMouseEnter, onMouseLeave, }) => {
|
|
9124
9124
|
const { index, measureRef, children, item } = virtualItem;
|
|
9125
9125
|
const className = typeof itemClassName !== 'function' ? itemClassName : item ? itemClassName(item) : undefined;
|
|
9126
9126
|
const service = useTreeService();
|
|
9127
9127
|
const { animate } = useTreeConfig();
|
|
9128
9128
|
const childrenRef = useRef(null);
|
|
9129
|
+
const ref = useRef(null);
|
|
9130
|
+
const previousHeightRef = useRef(undefined);
|
|
9129
9131
|
const expand = (item, index) => {
|
|
9130
9132
|
if (animate) {
|
|
9131
9133
|
service.expanding(item, index);
|
|
@@ -9161,11 +9163,35 @@ const VirtualTreeListItemComponent = ({ itemClassName, ItemComponent, virtualIte
|
|
|
9161
9163
|
}
|
|
9162
9164
|
};
|
|
9163
9165
|
const expanded = !!(item && isTreeItemExpanded(item, service));
|
|
9164
|
-
|
|
9165
|
-
|
|
9166
|
-
|
|
9167
|
-
|
|
9168
|
-
|
|
9166
|
+
const measure = useCallback((el) => {
|
|
9167
|
+
if (el?.offsetHeight !== previousHeightRef.current && el?.offsetHeight) {
|
|
9168
|
+
previousHeightRef.current = el.offsetHeight;
|
|
9169
|
+
measureRef(el);
|
|
9170
|
+
}
|
|
9171
|
+
}, [measureRef]);
|
|
9172
|
+
const measureThrottle = useThrottle(measure, 50);
|
|
9173
|
+
const resizeObserver = useMemo(() => {
|
|
9174
|
+
return new ResizeObserver(() => {
|
|
9175
|
+
measureThrottle(ref.current);
|
|
9176
|
+
});
|
|
9177
|
+
}, [measureThrottle]);
|
|
9178
|
+
useEffect(() => {
|
|
9179
|
+
const el = ref.current;
|
|
9180
|
+
if (el) {
|
|
9181
|
+
previousHeightRef.current = el.offsetHeight;
|
|
9182
|
+
resizeObserver.observe(el);
|
|
9183
|
+
}
|
|
9184
|
+
return () => {
|
|
9185
|
+
if (el) {
|
|
9186
|
+
resizeObserver.unobserve(el);
|
|
9187
|
+
}
|
|
9188
|
+
};
|
|
9189
|
+
}, [resizeObserver]);
|
|
9190
|
+
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "o-virtual-item", ref: measureRef, children: jsxRuntimeExports.jsxs("div", { ref: ref, children: [(!item || !item.data) && jsxRuntimeExports.jsx(LoadingItem, {}), item && item.data && (jsxRuntimeExports.jsx(DefaultTreeItemContext.Provider, { value: {
|
|
9191
|
+
onExpand: expand,
|
|
9192
|
+
onCollapse: collapse,
|
|
9193
|
+
className,
|
|
9194
|
+
}, children: jsxRuntimeExports.jsx(ItemComponent, { index: index, item: item, data: item.data, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, `item-${item?.uid || index}`) }))] }) }, `virtual-item-${item?.uid || index}`), jsxRuntimeExports.jsx(CSSTransition, { in: expanded, nodeRef: childrenRef, classNames: "o-tree-item-children", timeout: timeout$1, mountOnEnter: true, appear: false, unmountOnExit: true, onExiting: () => {
|
|
9169
9195
|
if (childrenRef.current)
|
|
9170
9196
|
onExiting(childrenRef.current);
|
|
9171
9197
|
}, onEntering: () => {
|
|
@@ -9175,6 +9201,7 @@ const VirtualTreeListItemComponent = ({ itemClassName, ItemComponent, virtualIte
|
|
|
9175
9201
|
return (jsxRuntimeExports.jsx(VirtualTreeListItemComponent, { virtualItem: child, ItemComponent: ItemComponent, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, `virtual-item-${child.item?.uid || child.index}`));
|
|
9176
9202
|
}) }) }) })] }));
|
|
9177
9203
|
};
|
|
9204
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
|
|
9178
9205
|
const VirtualTreeListComponent = ({ items, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }) => {
|
|
9179
9206
|
const logger = useLogger();
|
|
9180
9207
|
logger.debug('virtualItems', virtualItems);
|
|
@@ -11043,7 +11070,7 @@ const DefaultDeleteRowComponent = ({ rowIndex }) => {
|
|
|
11043
11070
|
};
|
|
11044
11071
|
const metadata = useFormMetadata(tableName);
|
|
11045
11072
|
let disabled = false;
|
|
11046
|
-
if (metadata.readOnly || (metadata.editable === false && form.config.reconfigure)) {
|
|
11073
|
+
if (metadata.disabled || metadata.readOnly || (metadata.editable === false && form.config.reconfigure)) {
|
|
11047
11074
|
disabled = true;
|
|
11048
11075
|
}
|
|
11049
11076
|
return (jsxRuntimeExports.jsx("div", { className: `o-form-table-remove${disabled ? ' o-form-table-remove-disabled' : ''}`, onClick: removeRow, children: jsxRuntimeExports.jsx(RemoveIcon, { width: "14px", height: "14px" }) }));
|