casraf/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/chenasraf/DefinitelyTyped.git synced 2026-05-18 01:49:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

🤖 Merge PR #65582 [react-scroll-to-bottom] fix: useScrollTo hooks lack option error by @preflower

Browse Source 
* fix: useScrollTo hooks lack option error

* test: edit test to reflect the change

* test: fix format error

* test: fix format error
This commit is contained in:
Ted
2023-06-11 23:29:58 +08:00
committed by GitHub
parent 6a9e72ea99
commit 974d21f5ad
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
types/react-scroll-to-bottom/index.d.ts vendored
View File

@@ -80,22 +80,22 @@ export function useScrollTo(): (scrollTop: number | '100%') => void;
/**
* Scroll panel to bottom
*/
export function useScrollToBottom(): () => void;
export function useScrollToBottom(): (option?: ScrollOption) => void;
/**
* Scroll panel to end (depends on `mode`)
*/
export function useScrollToEnd(): () => void;
export function useScrollToEnd(): (option?: ScrollOption) => void;
/**
* Scroll panel to start (depends on `mode`)
*/
export function useScrollToStart(): () => void;
export function useScrollToStart(): (option?: ScrollOption) => void;
/**
* Scroll panel to top
*/
export function useScrollToTop(): () => void;
export function useScrollToTop(): (option?: ScrollOption) => void;
/**
* Observe scroll position change by passing a callback function
@@ -154,19 +154,19 @@ export const FunctionContext: Context<{
/**
* Scroll panel to bottom
*/
scrollToBottom: () => void;
scrollToBottom: (option?: ScrollOption) => void;
/**
* Scroll panel to end (depends on mode)
*/
scrollToEnd: () => void;
scrollToEnd: (option?: ScrollOption) => void;
/**
* Scroll panel to start (depends on mode)
*/
scrollToStart: () => void;
scrollToStart: (option?: ScrollOption) => void;
/**
* Scroll panel to top
*/
scrollToTop: () => void;
scrollToTop: (option?: ScrollOption) => void;
}>;
/**
@@ -206,3 +206,16 @@ export const StateContext: Context<{
*/
sticky: boolean;
}>;
/**
* scrollToBottom/scrollToEnd/scrollToStart/scrollToTop accept an option in v3.0.0
* reference: https://github.com/compulim/react-scroll-to-bottom#300---2020-06-21
*/
export interface ScrollOption {
/**
* In future versions, the default behavior will be changed from smooth scrolling to discrete scrolling to align with HTML Standard
* Note: if not set behavior to smooth, `react-scroll-to-bottom` will warn
* reference: https://github.com/compulim/react-scroll-to-bottom/blob/main/packages/component/src/ScrollToBottom/Composer.js#L188
*/
behavior?: 'smooth' | 'auto';
}

16
types/react-scroll-to-bottom/react-scroll-to-bottom-tests.tsx
View File

@@ -1,16 +1,16 @@
import * as React from "react";
import ScrollToBottom, {
FunctionContext, StateContext, useAnimating, useAnimatingToEnd, useAtBottom, useAtEnd,
FunctionContext, ScrollOption, StateContext, useAnimating, useAnimatingToEnd, useAtBottom, useAtEnd,
useAtStart, useAtTop, useMode, useObserveScrollPosition, useScrollTo, useScrollToBottom,
useScrollToEnd, useScrollToStart, useScrollToTop, useSticky
} from "react-scroll-to-bottom";
const testing = () => {
const scrollTo: (scrollTop: number | '100%') => void = useScrollTo();
const scrollToBottom: () => void = useScrollToBottom();
const scrollToEnd: () => void = useScrollToEnd();
const scrollToStart: () => void = useScrollToStart();
const scrollToTop: () => void = useScrollToTop();
const scrollToBottom: (option?: ScrollOption) => void = useScrollToBottom();
const scrollToEnd: (option?: ScrollOption) => void = useScrollToEnd();
const scrollToStart: (option?: ScrollOption) => void = useScrollToStart();
const scrollToTop: (option?: ScrollOption) => void = useScrollToTop();
const callback: ({}: { scrollTop: number }) => void = () => {};
useObserveScrollPosition(callback);
useObserveScrollPosition(false);
@@ -92,7 +92,7 @@ const sampleCode2 = () => {
ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint
dolor proident commodo proident non cupidatat labore.
</p>
{!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
{!sticky && <button onClick={() => { scrollToBottom(); }}>Click me to scroll to bottom</button>}
</React.Fragment>
);
};
@@ -105,7 +105,7 @@ const sampleCode2 = () => {
};
const sampleCode3 = () => {
const Content = ({ scrollToBottom, sticky }: { scrollToBottom: () => void; sticky: boolean }) => {
const Content = ({ scrollToBottom, sticky }: { scrollToBottom: (option?: ScrollOption) => void; sticky: boolean }) => {
return (
<React.Fragment>
<p>
@@ -126,7 +126,7 @@ const sampleCode3 = () => {
ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint
dolor proident commodo proident non cupidatat labore.
</p>
{!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
{!sticky && <button onClick={() => { scrollToBottom(); }}>Click me to scroll to bottom</button>}
</React.Fragment>
);
};