chore(hooks): remove unused hooks
This commit is contained in:
jialin
@@ -1,10 +0,0 @@
|
||||
export default function useActions<T>(actions: Global.ActionItem<T>[], ctx: T) {
|
||||
return actions
|
||||
.filter((action) => {
|
||||
return action.visible ? action.visible(ctx) : true;
|
||||
})
|
||||
.map((action) => ({
|
||||
...action,
|
||||
disabled: action.disabled?.(ctx)
|
||||
}));
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { message } from 'antd';
|
||||
|
||||
type MessageType = 'input' | 'select';
|
||||
|
||||
const useAppUtils = () => {
|
||||
const intl = useIntl();
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
|
||||
/**
|
||||
*
|
||||
* @param type Array<'input' | 'select'>
|
||||
* @param name
|
||||
* @param locale boolean
|
||||
* @returns
|
||||
*/
|
||||
const getRuleMessage = (
|
||||
type: MessageType | MessageType[],
|
||||
name: string,
|
||||
locale = true
|
||||
) => {
|
||||
const nameStr = locale ? intl.formatMessage({ id: name }) : name;
|
||||
// transform type to array
|
||||
const typeList = Array.isArray(type) ? type : [type];
|
||||
|
||||
if (typeList.includes('select') && typeList.includes('input')) {
|
||||
return intl.formatMessage(
|
||||
{ id: 'common.form.rule.selectInput' },
|
||||
{ name: nameStr }
|
||||
);
|
||||
}
|
||||
|
||||
if (typeList.includes('input')) {
|
||||
return intl.formatMessage(
|
||||
{ id: 'common.form.rule.input' },
|
||||
{ name: nameStr }
|
||||
);
|
||||
}
|
||||
|
||||
return intl.formatMessage(
|
||||
{ id: 'common.form.rule.select' },
|
||||
{ name: nameStr }
|
||||
);
|
||||
};
|
||||
|
||||
const showSuccess = (msg?: string) => {
|
||||
messageApi.success(
|
||||
msg || intl.formatMessage({ id: 'common.message.success' })
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
getRuleMessage,
|
||||
showSuccess
|
||||
};
|
||||
};
|
||||
|
||||
export default useAppUtils;
|
||||
@@ -1,18 +0,0 @@
|
||||
// broadcast channel hook
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export const useBroadcast = () => {
|
||||
const broadcastChannel = useRef<BroadcastChannel | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
broadcastChannel.current = new BroadcastChannel('broadcast_channel');
|
||||
|
||||
return () => {
|
||||
broadcastChannel.current?.close();
|
||||
console.log('broadcast channel closed');
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { broadcastChannel };
|
||||
};
|
||||
@@ -1,56 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import { useRef } from 'react';
|
||||
|
||||
export default function useContainerScroll(
|
||||
container: any,
|
||||
options?: { toBottom?: boolean }
|
||||
) {
|
||||
const isWheeled = useRef(false);
|
||||
const scroller = useRef(container);
|
||||
const optionsRef = useRef(options);
|
||||
const toBottomFlag = useRef(options?.toBottom);
|
||||
const timerRef = useRef<any>(null);
|
||||
|
||||
const debunceResetWheeled = _.debounce(() => {
|
||||
isWheeled.current = false;
|
||||
}, 5000);
|
||||
|
||||
const handleContentWheel = (e: any) => {
|
||||
isWheeled.current = true;
|
||||
debunceResetWheeled.cancel?.();
|
||||
debunceResetWheeled();
|
||||
};
|
||||
|
||||
const scrollerRun = () => {
|
||||
const scrollerContainer = scroller.current?.current || {};
|
||||
const { scrollHeight, clientHeight, scrollTop } = scrollerContainer;
|
||||
if (
|
||||
optionsRef.current?.toBottom &&
|
||||
toBottomFlag.current &&
|
||||
scrollHeight > clientHeight + scrollTop
|
||||
) {
|
||||
scroller.current.current.scrollTop = scrollHeight;
|
||||
// toBottomFlag.current = false;
|
||||
isWheeled.current = false;
|
||||
} else if (
|
||||
!isWheeled.current &&
|
||||
scrollHeight > clientHeight + scrollTop &&
|
||||
scroller.current?.current
|
||||
) {
|
||||
scroller.current.current.scrollTop += 10;
|
||||
window.requestAnimationFrame(scrollerRun);
|
||||
}
|
||||
};
|
||||
|
||||
const updateScrollerPosition = () => {
|
||||
if (!isWheeled.current) {
|
||||
window.requestAnimationFrame(scrollerRun);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
handleContentWheel,
|
||||
updateScrollerPosition,
|
||||
scroller
|
||||
};
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
const useCopyToClipboard = () => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copyToClipboard = useCallback(async (text: string) => {
|
||||
try {
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 3000);
|
||||
}
|
||||
} catch (error) {
|
||||
setCopied(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return { copied, copyToClipboard };
|
||||
};
|
||||
|
||||
export default useCopyToClipboard;
|
||||
@@ -1,71 +0,0 @@
|
||||
import { HandlerOptions } from '@/hooks/use-chunk-fetch';
|
||||
import { useDownloadStream } from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Progress, notification } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const renderMessage = (title: string) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: 280,
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const createFileName = (name: string) => {
|
||||
const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
|
||||
const fileName = `${name}_${timestamp}.txt`;
|
||||
return fileName;
|
||||
};
|
||||
|
||||
const useDownloadLogs = () => {
|
||||
const { downloadStream } = useDownloadStream();
|
||||
const intl = useIntl();
|
||||
const [api, contextHolder] = notification.useNotification({
|
||||
stack: { threshold: 1 }
|
||||
});
|
||||
|
||||
const downloadNotification = (
|
||||
data: HandlerOptions & {
|
||||
filename: string;
|
||||
duration?: number;
|
||||
chunkRequestRef: any;
|
||||
}
|
||||
) => {
|
||||
api.open({
|
||||
duration: data.duration,
|
||||
message: renderMessage(data.filename),
|
||||
key: data.filename,
|
||||
closeIcon: (
|
||||
<span>{intl.formatMessage({ id: 'common.button.cancel' })}</span>
|
||||
),
|
||||
description: <Progress percent={data.percent} size="small"></Progress>,
|
||||
onClose() {
|
||||
data.chunkRequestRef?.current?.abort();
|
||||
notification.destroy?.(data.filename);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownloadLog = async (params: { url: string; name: string }) => {
|
||||
downloadStream({
|
||||
url: params.url,
|
||||
filename: createFileName(params.name),
|
||||
downloadNotification
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
onDownloadLog: handleDownloadLog,
|
||||
contextHolder
|
||||
};
|
||||
};
|
||||
|
||||
export default useDownloadLogs;
|
||||
@@ -1,136 +0,0 @@
|
||||
import useSetChunkFetch, { HandlerOptions } from '@/hooks/use-chunk-fetch';
|
||||
import { message } from 'antd';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export default function useDownloadStream() {
|
||||
const chunkRequestRef = useRef<any>(null);
|
||||
const logParseWorker = useRef<any>(null);
|
||||
const clearScreen = useRef(false);
|
||||
const filename = useRef('log');
|
||||
const downloadNotificationRef = useRef<any>(null);
|
||||
|
||||
const { setChunkFetch } = useSetChunkFetch();
|
||||
|
||||
const downloadFile = (content: string) => {
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename.current;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const updateContent = (data: string, options?: HandlerOptions) => {
|
||||
const { isComplete, percent } = options || {};
|
||||
|
||||
logParseWorker.current?.postMessage({
|
||||
inputStr: data,
|
||||
reset: clearScreen.current,
|
||||
isComplete: isComplete,
|
||||
percent: percent,
|
||||
chunked: false
|
||||
});
|
||||
clearScreen.current = false;
|
||||
};
|
||||
|
||||
const handleError = (error: any) => {
|
||||
const errorMsg = error?.message || error;
|
||||
const msg =
|
||||
typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg);
|
||||
message.error(msg);
|
||||
downloadNotificationRef.current?.({
|
||||
duration: 1,
|
||||
percent: 0,
|
||||
filename: filename.current
|
||||
});
|
||||
};
|
||||
|
||||
const downloadStream = async (props: {
|
||||
data?: any;
|
||||
url: string;
|
||||
params?: any;
|
||||
signal?: AbortSignal;
|
||||
method?: string;
|
||||
headers?: any;
|
||||
filename?: string;
|
||||
downloadNotification?: (data: any) => void;
|
||||
}) => {
|
||||
try {
|
||||
clearScreen.current = true;
|
||||
filename.current = props.filename || 'log';
|
||||
downloadNotificationRef.current = props.downloadNotification;
|
||||
const { params, url } = props;
|
||||
|
||||
chunkRequestRef.current?.current?.abort?.();
|
||||
|
||||
chunkRequestRef.current = setChunkFetch({
|
||||
url,
|
||||
params,
|
||||
watch: false,
|
||||
contentType: 'text',
|
||||
errorHandler: handleError,
|
||||
handler: updateContent
|
||||
});
|
||||
downloadNotificationRef.current?.({
|
||||
filename: filename.current,
|
||||
duration: null,
|
||||
chunkRequestRef: chunkRequestRef.current
|
||||
});
|
||||
} catch (error) {
|
||||
//
|
||||
downloadNotificationRef.current?.({
|
||||
duration: 1,
|
||||
percent: 0,
|
||||
filename: filename.current
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
logParseWorker.current?.terminate?.();
|
||||
|
||||
logParseWorker.current = new Worker(
|
||||
// @ts-ignore
|
||||
new URL('@/components/logs-viewer/parse-worker.ts', import.meta.url),
|
||||
{
|
||||
type: 'module'
|
||||
}
|
||||
);
|
||||
|
||||
logParseWorker.current.onmessage = (event: any) => {
|
||||
const { result, isComplete, percent } = event.data;
|
||||
|
||||
const isAborted = chunkRequestRef.current?.current?.signal?.aborted;
|
||||
if (!isComplete && !isAborted) {
|
||||
downloadNotificationRef.current?.({
|
||||
percent: percent,
|
||||
duration: null,
|
||||
filename: filename.current,
|
||||
chunkRequestRef: chunkRequestRef.current
|
||||
});
|
||||
} else if (isComplete && !isAborted) {
|
||||
downloadNotificationRef.current?.({
|
||||
duration: 1,
|
||||
percent: 100,
|
||||
filename: filename.current
|
||||
});
|
||||
downloadFile(result);
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
if (logParseWorker.current) {
|
||||
logParseWorker.current.terminate();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
downloadStream
|
||||
};
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
import HotKeys from '@/config/hotkeys';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { createStyles } from 'antd-style';
|
||||
import { throttle } from 'lodash';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
|
||||
const useStyles = createStyles(({ css, token }) => ({
|
||||
hintOverlay: css`
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--color-esc-hint-bg);
|
||||
color: ${token.colorTextLightSolid};
|
||||
padding: 16px 24px;
|
||||
border-radius: 4px;
|
||||
z-index: 2000;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
animation: fadeInOut 2s ease-in-out;
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`
|
||||
}));
|
||||
|
||||
export function useEscHint(options?: {
|
||||
enabled?: boolean;
|
||||
message?: string;
|
||||
throttleDelay?: number;
|
||||
}) {
|
||||
const { enabled = true, message, throttleDelay = 3000 } = options || {};
|
||||
const intl = useIntl();
|
||||
const { styles } = useStyles();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const timeoutRef = useRef<any>(null);
|
||||
const isHintActiveRef = useRef(false);
|
||||
|
||||
const showHintThrottled = useMemo(
|
||||
() =>
|
||||
throttle(
|
||||
() => {
|
||||
if (isHintActiveRef.current) return;
|
||||
|
||||
isHintActiveRef.current = true;
|
||||
|
||||
setVisible(true);
|
||||
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setVisible(false);
|
||||
isHintActiveRef.current = false;
|
||||
}, 2000);
|
||||
},
|
||||
throttleDelay,
|
||||
{
|
||||
leading: true,
|
||||
trailing: false
|
||||
}
|
||||
),
|
||||
[throttleDelay]
|
||||
);
|
||||
|
||||
useHotkeys(
|
||||
HotKeys.ESC,
|
||||
() => {
|
||||
if (!enabled) return;
|
||||
showHintThrottled();
|
||||
},
|
||||
{
|
||||
enabled: enabled
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
showHintThrottled.cancel();
|
||||
};
|
||||
}, [showHintThrottled]);
|
||||
|
||||
const EscHint = visible ? (
|
||||
<div className={styles.hintOverlay}>
|
||||
{message || intl.formatMessage({ id: 'common.tips.escape.disable' })}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return { EscHint };
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import qs from 'query-string';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export const createEventSourceURL = (url: string) => {
|
||||
const { host, protocol } = window.location;
|
||||
return `${protocol}://${host}${url}`;
|
||||
};
|
||||
|
||||
/*
|
||||
0: connecting
|
||||
1: connect successfully
|
||||
2: closed
|
||||
*/
|
||||
|
||||
export default function useEventSource() {
|
||||
const eventSourceRef = useRef<any>(null);
|
||||
|
||||
const createEventSourceConnection = (query: {
|
||||
url: string;
|
||||
params: any;
|
||||
onmessage?: (data: any) => void;
|
||||
}) => {
|
||||
eventSourceRef.current?.close?.();
|
||||
|
||||
const { url, params, onmessage = () => {} } = query;
|
||||
|
||||
const sseurl = createEventSourceURL(url);
|
||||
|
||||
eventSourceRef.current = new EventSource(
|
||||
`${url}?${qs.stringify({
|
||||
...params
|
||||
})}`,
|
||||
{
|
||||
withCredentials: true
|
||||
}
|
||||
);
|
||||
|
||||
eventSourceRef.current.onmessage = (res: any) => {
|
||||
try {
|
||||
console.log('event source message: ', { res, resData: res });
|
||||
const data = JSON.parse(res.data);
|
||||
onmessage(data);
|
||||
} catch (error) {
|
||||
// error
|
||||
console.log('event source error: ', error);
|
||||
}
|
||||
};
|
||||
|
||||
eventSourceRef.current.onclose = () => {
|
||||
console.log('event source closed...');
|
||||
};
|
||||
|
||||
eventSourceRef.current.onopen = () => {
|
||||
console.log('event source connected...');
|
||||
};
|
||||
|
||||
eventSourceRef.current.onerror = (error: any) => {
|
||||
console.log('event source error: ', error);
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
eventSourceRef.current?.close?.();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
eventSourceRef: eventSourceRef,
|
||||
createEventSourceConnection
|
||||
};
|
||||
}
|
||||
@@ -1,280 +0,0 @@
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { throttle } from 'lodash';
|
||||
import {
|
||||
UseOverlayScrollbarsParams,
|
||||
useOverlayScrollbars
|
||||
} from 'overlayscrollbars-react';
|
||||
import React, { useEffect } from 'react';
|
||||
import useUserSettings from './use-user-settings';
|
||||
|
||||
type OverflowBehavior =
|
||||
| 'hidden'
|
||||
| 'scroll'
|
||||
| 'visible'
|
||||
| 'visible-hidden'
|
||||
| 'visible-scroll';
|
||||
export interface OverlayScrollerOptions {
|
||||
oppositeTheme?: boolean;
|
||||
overflow?: {
|
||||
x?: OverflowBehavior;
|
||||
y?: OverflowBehavior;
|
||||
};
|
||||
scrollbars?: {
|
||||
theme?: 'os-theme-light' | 'os-theme-dark';
|
||||
autoHide?: 'never' | 'scroll' | 'leave' | 'move';
|
||||
autoHideDelay?: number;
|
||||
clickScroll?: boolean | 'instant';
|
||||
};
|
||||
}
|
||||
|
||||
export const overlaySollerOptions: UseOverlayScrollbarsParams = {
|
||||
options: {
|
||||
update: {
|
||||
debounce: 0
|
||||
},
|
||||
overflow: {
|
||||
x: 'hidden'
|
||||
},
|
||||
scrollbars: {
|
||||
theme: 'os-theme-light',
|
||||
autoHide: 'scroll',
|
||||
autoHideDelay: 600,
|
||||
clickScroll: 'instant'
|
||||
}
|
||||
},
|
||||
defer: true
|
||||
};
|
||||
|
||||
const RESETSCROLLDELAY = 5000;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param options.theme: if set theme, it will fix the theme
|
||||
* @returns
|
||||
*/
|
||||
export default function useOverlayScroller(data?: {
|
||||
options?: OverlayScrollerOptions;
|
||||
events?: any;
|
||||
defer?: boolean;
|
||||
}) {
|
||||
const { userSettings } = useUserSettings();
|
||||
const { options, events, defer = true } = data || {};
|
||||
const { scrollbars, overflow, oppositeTheme } = options || {};
|
||||
const scrollEventElement = React.useRef<any>(null);
|
||||
const instanceRef = React.useRef<any>(null);
|
||||
const initialized = React.useRef(false);
|
||||
const scrollElementRef = React.useRef<any>(null);
|
||||
const stopUpdatePosition = React.useRef(false);
|
||||
const timerRef = React.useRef<any>(null);
|
||||
const [initialize, instance] = useOverlayScrollbars({
|
||||
options: {
|
||||
update: {
|
||||
debounce: 0
|
||||
},
|
||||
overflow: {
|
||||
x: 'hidden',
|
||||
...overflow
|
||||
},
|
||||
scrollbars: {
|
||||
autoHide: 'scroll',
|
||||
autoHideDelay: 600,
|
||||
clickScroll: 'instant',
|
||||
...scrollbars,
|
||||
theme:
|
||||
scrollbars?.theme ||
|
||||
(userSettings.theme === 'light' || !userSettings.theme
|
||||
? 'os-theme-dark'
|
||||
: 'os-theme-light')
|
||||
}
|
||||
},
|
||||
events: {
|
||||
...events
|
||||
},
|
||||
defer: defer
|
||||
});
|
||||
|
||||
instanceRef.current = instance?.();
|
||||
scrollEventElement.current =
|
||||
instanceRef.current?.elements()?.scrollEventElement;
|
||||
|
||||
const handleOnScroll = () => {
|
||||
const scrollTop = scrollEventElement.current?.scrollTop;
|
||||
const scrollHeight = scrollEventElement.current?.scrollHeight;
|
||||
const clientHeight = scrollEventElement.current?.clientHeight;
|
||||
|
||||
const isBottom = scrollTop + clientHeight + 20 >= scrollHeight;
|
||||
|
||||
if (isBottom) {
|
||||
stopUpdatePosition.current = false;
|
||||
} else {
|
||||
stopUpdatePosition.current = true;
|
||||
}
|
||||
};
|
||||
|
||||
const throttledScroll = useMemoizedFn(
|
||||
throttle(() => {
|
||||
scrollEventElement.current?.scrollTo?.({
|
||||
top: scrollEventElement.current?.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
instanceRef.current?.update?.();
|
||||
}, 100)
|
||||
);
|
||||
|
||||
const scrollauto = useMemoizedFn(() => {
|
||||
scrollEventElement.current?.scrollTo?.({
|
||||
top: scrollEventElement.current.scrollHeight,
|
||||
behavior: 'auto'
|
||||
});
|
||||
instanceRef.current?.update?.();
|
||||
});
|
||||
|
||||
// scroll to bottom
|
||||
const throttledUpdateScrollerPosition = useMemoizedFn((delay?: number) => {
|
||||
if (stopUpdatePosition.current) {
|
||||
return;
|
||||
}
|
||||
if (delay === 0) {
|
||||
scrollauto();
|
||||
} else {
|
||||
throttledScroll();
|
||||
}
|
||||
});
|
||||
|
||||
// scroll to top
|
||||
const updateScrollerPositionToTop = useMemoizedFn(() => {
|
||||
scrollEventElement.current?.scrollTo?.({
|
||||
top: 0,
|
||||
behavior: 'auto'
|
||||
});
|
||||
instanceRef.current?.update?.();
|
||||
});
|
||||
|
||||
const generateInstance = () => {
|
||||
instanceRef.current = instance?.();
|
||||
scrollEventElement.current =
|
||||
instanceRef.current?.elements()?.scrollEventElement;
|
||||
};
|
||||
|
||||
const handleWheelCallback = useMemoizedFn((e: any) => {
|
||||
handleOnScroll();
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
}
|
||||
timerRef.current = setTimeout(() => {
|
||||
stopUpdatePosition.current = false;
|
||||
}, RESETSCROLLDELAY);
|
||||
});
|
||||
|
||||
// add wheel event
|
||||
const handleWheelEvent = () => {
|
||||
scrollElementRef.current?.addEventListener?.('wheel', handleWheelCallback, {
|
||||
passive: true
|
||||
});
|
||||
};
|
||||
|
||||
// remove wheel event
|
||||
const removeWheelEvent = () => {
|
||||
scrollElementRef.current?.removeEventListener?.(
|
||||
'wheel',
|
||||
handleWheelCallback,
|
||||
{ passive: true }
|
||||
);
|
||||
};
|
||||
|
||||
const createInstance = useMemoizedFn((el: any) => {
|
||||
if (instanceRef.current) {
|
||||
return instanceRef.current;
|
||||
}
|
||||
if (el) {
|
||||
initialize(el);
|
||||
scrollElementRef.current = el;
|
||||
initialized.current = true;
|
||||
instanceRef.current = instance?.();
|
||||
scrollEventElement.current =
|
||||
instanceRef.current?.elements()?.scrollEventElement;
|
||||
handleWheelEvent();
|
||||
}
|
||||
return instanceRef.current;
|
||||
});
|
||||
|
||||
const destroyInstance = () => {
|
||||
instanceRef.current?.destroy?.();
|
||||
removeWheelEvent();
|
||||
instanceRef.current = null;
|
||||
};
|
||||
|
||||
const scrollToTarget = (target: any, offset = 100) => {
|
||||
if (!target) return;
|
||||
if (!instanceRef.current || !scrollEventElement.current) {
|
||||
instanceRef.current = instance?.();
|
||||
scrollEventElement.current =
|
||||
instanceRef.current?.elements()?.scrollEventElement;
|
||||
}
|
||||
|
||||
const viewport = instanceRef.current?.elements().viewport;
|
||||
const containerRect = viewport.getBoundingClientRect();
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
|
||||
const scrollerState = instanceRef.current?.state();
|
||||
|
||||
const currentScroll = scrollerState.current?.overflowAmount?.y;
|
||||
|
||||
// const currentScroll = instanceRef.current?.scroll().position.y;
|
||||
const targetPos = targetRect.top - containerRect.top + currentScroll;
|
||||
|
||||
scrollEventElement.current.scroll({
|
||||
y: targetPos - offset,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
instanceRef.current?.update?.();
|
||||
};
|
||||
|
||||
const getScrollElementScrollableHeight = () => {
|
||||
if (!instanceRef.current || !scrollEventElement.current) {
|
||||
instanceRef.current = instance?.();
|
||||
scrollEventElement.current =
|
||||
instanceRef.current?.elements()?.scrollEventElement;
|
||||
}
|
||||
|
||||
const scrollOffsetElement = instanceRef.current?.elements().viewport;
|
||||
|
||||
return {
|
||||
scrollTop: scrollOffsetElement?.scrollTop,
|
||||
scrollHeight:
|
||||
scrollOffsetElement?.scrollHeight - scrollOffsetElement?.clientHeight
|
||||
};
|
||||
};
|
||||
|
||||
const getScrollElement = () => {
|
||||
if (!instanceRef.current || !scrollEventElement.current) {
|
||||
instanceRef.current = instance?.();
|
||||
scrollEventElement.current =
|
||||
instanceRef.current?.elements()?.scrollEventElement;
|
||||
}
|
||||
return scrollEventElement;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
instanceRef.current?.destroy?.();
|
||||
removeWheelEvent();
|
||||
};
|
||||
}, [instance]);
|
||||
|
||||
return {
|
||||
initialize: createInstance,
|
||||
instance: instanceRef,
|
||||
scrollEventElement: scrollEventElement,
|
||||
initialized: initialized.current,
|
||||
getScrollElementScrollableHeight,
|
||||
getScrollElement,
|
||||
generateInstance,
|
||||
destroyInstance: destroyInstance,
|
||||
updateScrollerPosition: throttledUpdateScrollerPosition,
|
||||
updateScrollerPositionToTop: updateScrollerPositionToTop,
|
||||
scrollToBottom: scrollauto,
|
||||
scrollToTop: updateScrollerPositionToTop,
|
||||
scrollToTarget
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user