[useScrollTo, useScrollToTop] - useScrollTo: animate 효과 제어 기능 추가
- useScrollToTop: scrollToTop 기능 추가 및 hook 분리
This commit is contained in:
@@ -3,15 +3,15 @@ import React, { useCallback, useEffect, useRef } from "react";
|
|||||||
export default function useScrollTo() {
|
export default function useScrollTo() {
|
||||||
const scrollTo = useRef();
|
const scrollTo = useRef();
|
||||||
|
|
||||||
const scrollTop = useCallback(() => {
|
const scrollTop = useCallback(({ animate = true } = {}) => {
|
||||||
if (scrollTo && scrollTo.current) {
|
if (scrollTo && scrollTo.current) {
|
||||||
scrollTo.current({ position: { y: 0 }, animate: true });
|
scrollTo.current({ position: { y: 0 }, animate: animate });
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const scrollLeft = useCallback(() => {
|
const scrollLeft = useCallback(({ animate = false } = {}) => {
|
||||||
if (scrollTo && scrollTo.current) {
|
if (scrollTo && scrollTo.current) {
|
||||||
scrollTo.current({ position: { x: 0 }, animate: false });
|
scrollTo.current({ position: { x: 0 }, animate: animate });
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
29
com.twin.app.shoptime/src/hooks/useScrollToTop.js
Normal file
29
com.twin.app.shoptime/src/hooks/useScrollToTop.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import { useCallback, useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
import { Job } from "@enact/core/util";
|
||||||
|
|
||||||
|
export default function useScrollToTop(scrollTo) {
|
||||||
|
const jobRef = useRef(
|
||||||
|
new Job((func) => {
|
||||||
|
func();
|
||||||
|
}, 0)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleScrollTop = useCallback(() => {
|
||||||
|
if (scrollTo) {
|
||||||
|
jobRef.current.start(() => scrollTo());
|
||||||
|
}
|
||||||
|
}, [scrollTo]);
|
||||||
|
|
||||||
|
const handleStopScrolling = useCallback(() => {
|
||||||
|
jobRef.current.stop();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
jobRef.current.stop();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return { handleScrollTop, handleStopScrolling };
|
||||||
|
}
|
||||||
@@ -6,7 +6,7 @@ export const TESTPANEL_KEY = "5325";
|
|||||||
export const SFT_TEST = "5555";
|
export const SFT_TEST = "5555";
|
||||||
export const SFT_TEST2 = "6666";
|
export const SFT_TEST2 = "6666";
|
||||||
export const DEFAULT_SERVERTYPE = "qt2"; //system, qt2, qt, prd
|
export const DEFAULT_SERVERTYPE = "qt2"; //system, qt2, qt, prd
|
||||||
export const DEFAULT_RIC_CODE = 'aic'; //system, aic, eic, ruc
|
export const DEFAULT_RIC_CODE = "aic"; //system, aic, eic, ruc
|
||||||
export const panel_names = {
|
export const panel_names = {
|
||||||
INTRO_PANEL: "intropanel",
|
INTRO_PANEL: "intropanel",
|
||||||
HOME_PANEL: "homepanel",
|
HOME_PANEL: "homepanel",
|
||||||
|
|||||||
Reference in New Issue
Block a user