@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
83 lines • 2.34 kB
JavaScript
import { useCallback, useRef } from 'react';
export function useScrollToRef(componentRef, dispatch) {
const scrollToRef = useRef(null);
const cbRef = useCallback(node => {
if (!node) return;
const extendedNode = Object.assign(node, {
scrollTo: (offset, align) => {
if (typeof scrollToRef.current?.scrollToOffset === 'function') {
scrollToRef.current.scrollToOffset(offset, {
align
});
} else {
dispatch({
type: 'TRIGGER_PROG_SCROLL',
payload: {
direction: 'vertical',
type: 'offset',
args: [offset, {
align
}]
}
});
}
},
scrollToItem: (index, align) => {
if (typeof scrollToRef.current?.scrollToIndex === 'function') {
scrollToRef.current.scrollToIndex(index, {
align
});
} else {
dispatch({
type: 'TRIGGER_PROG_SCROLL',
payload: {
direction: 'vertical',
type: 'item',
args: [index, {
align
}]
}
});
}
},
horizontalScrollTo: (offset, align) => {
if (typeof scrollToRef.current?.horizontalScrollToOffset === 'function') {
scrollToRef.current.horizontalScrollToOffset(offset, {
align
});
} else {
dispatch({
type: 'TRIGGER_PROG_SCROLL',
payload: {
direction: 'horizontal',
type: 'offset',
args: [offset, {
align
}]
}
});
}
},
horizontalScrollToItem: (index, align) => {
if (typeof scrollToRef.current?.horizontalScrollToIndex === 'function') {
scrollToRef.current.horizontalScrollToIndex(index, {
align
});
} else {
dispatch({
type: 'TRIGGER_PROG_SCROLL',
payload: {
direction: 'horizontal',
type: 'item',
args: [index, {
align
}]
}
});
}
}
});
componentRef(extendedNode);
}, [componentRef, dispatch]);
return [cbRef, scrollToRef];
}