Skip to content

Commit 840fa77

Browse files
author
Konstantine Kalbazov
committed
Fix types
1 parent 558da2b commit 840fa77

File tree

3 files changed

+217
-5
lines changed

3 files changed

+217
-5
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "root",
3-
"version": "5.0.0-beta",
3+
"version": "5.0.1",
44
"description": "React container that will auto scroll to bottom",
55
"private": true,
66
"workspaces": ["packages/*"],

‎packages/component/index.d.ts

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import { Context, PropsWithChildren } from "react";
2+
3+
export default function ScrollToBottom(
4+
props: PropsWithChildren<{
5+
/**
6+
* Recurring interval of stickiness check, in milliseconds (minimum is 17 ms)
7+
*/
8+
checkInterval?: number;
9+
/**
10+
* Set the class name for the root element
11+
*/
12+
className?: string;
13+
/**
14+
* Set the debounce for tracking the `onScroll` event
15+
*/
16+
debounce?: number;
17+
/**
18+
* Show debug information in console
19+
*/
20+
debug?: boolean;
21+
/**
22+
* Set the class name for the follow button
23+
*/
24+
followButtonClassName?: string;
25+
/**
26+
* Set the initial scroll behavior, either `"auto"` (discrete scrolling) or `"smooth"`
27+
*/
28+
initialScrollBehavior?: "auto" | "smooth";
29+
/**
30+
* Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top
31+
*/
32+
mode?: "bottom" | "top";
33+
/**
34+
* A function to determine how far should scroll when scroll is needed
35+
*/
36+
scroller?: (values: {
37+
/**
38+
* Maximum distance (in pixel) to scroll
39+
*/
40+
maxValue: number;
41+
/**
42+
* Minimum distance (in pixel) to scroll
43+
*/
44+
minValue: number;
45+
/**
46+
* View height of the scrollable container
47+
*/
48+
offsetHeight: number;
49+
/**
50+
* Total height of the content in the container, must be equal or greater than offsetHeight
51+
*/
52+
scrollHeight: number;
53+
/**
54+
* Current scroll position (in pixel)
55+
*/
56+
scrollTop: number;
57+
}) => number;
58+
/**
59+
* Set the class name for the container element that house all `props.children`
60+
*/
61+
scrollViewClassName?: string;
62+
}>,
63+
): null;
64+
65+
/**
66+
* Scroll panel to specified position
67+
*/
68+
export function useScrollTo(): (scrollTop: number | "100%") => void;
69+
70+
/**
71+
* Scroll panel to bottom
72+
*/
73+
export function useScrollToBottom(): (option?: ScrollOption) => void;
74+
75+
/**
76+
* Scroll panel to end (depends on `mode`)
77+
*/
78+
export function useScrollToEnd(): (option?: ScrollOption) => void;
79+
80+
/**
81+
* Scroll panel to start (depends on `mode`)
82+
*/
83+
export function useScrollToStart(): (option?: ScrollOption) => void;
84+
85+
/**
86+
* Scroll panel to top
87+
*/
88+
export function useScrollToTop(): (option?: ScrollOption) => void;
89+
90+
/**
91+
* Observe scroll position change by passing a callback function
92+
*/
93+
export function useObserveScrollPosition(observer: (({ scrollTop }: { scrollTop: number }) => void) | false): void;
94+
95+
/**
96+
* `true` if the panel is animating scroll effect
97+
*/
98+
export function useAnimating(): [boolean];
99+
100+
/**
101+
* `true` if the panel is animating scroll effect and towards the end (depends on `mode`)
102+
*/
103+
export function useAnimatingToEnd(): [boolean];
104+
105+
/**
106+
* `true` if the panel is currently near bottom
107+
*/
108+
export function useAtBottom(): [boolean];
109+
110+
/**
111+
* `true` if the panel is currently near the end (depends on `mode`)
112+
*/
113+
export function useAtEnd(): [boolean];
114+
115+
/**
116+
* `true` if the panel is currently near the start (depends on `mode`)
117+
*/
118+
export function useAtStart(): [boolean];
119+
120+
/**
121+
* `true` if the panel is currently near top
122+
*/
123+
export function useAtTop(): [boolean];
124+
125+
/**
126+
* `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top
127+
*/
128+
export function useMode(): ["bottom" | "top"];
129+
130+
/**
131+
* `true` if the panel is sticking to the end
132+
*/
133+
export function useSticky(): [boolean];
134+
135+
/**
136+
* This context contains functions used to manipulate the container. And will not update throughout the lifetime of the composer.
137+
*/
138+
139+
export const FunctionContext: Context<{
140+
/**
141+
* Scroll panel to specified position
142+
*/
143+
scrollTo: (scrollTop: number | "100%") => void;
144+
/**
145+
* Scroll panel to bottom
146+
*/
147+
scrollToBottom: (option?: ScrollOption) => void;
148+
/**
149+
* Scroll panel to end (depends on mode)
150+
*/
151+
scrollToEnd: (option?: ScrollOption) => void;
152+
/**
153+
* Scroll panel to start (depends on mode)
154+
*/
155+
scrollToStart: (option?: ScrollOption) => void;
156+
/**
157+
* Scroll panel to top
158+
*/
159+
scrollToTop: (option?: ScrollOption) => void;
160+
}>;
161+
162+
/**
163+
* This context contains state of the container.
164+
*/
165+
export const StateContext: Context<{
166+
/**
167+
* `true` if the panel is animating scroll effect
168+
*/
169+
animating: boolean;
170+
/**
171+
* `true` if the panel is animating scroll effect and towards the end (depends on `mode`)
172+
*/
173+
animatingToEnd: boolean;
174+
/**
175+
* `true` if the panel is currently near bottom
176+
*/
177+
atBottom: boolean;
178+
/**
179+
* `true` if the panel is currently near the end (depends on `mode`)
180+
*/
181+
atEnd: boolean;
182+
/**
183+
* `true` if the panel is currently near the start (depends on `mode`)
184+
*/
185+
atStart: boolean;
186+
/**
187+
* `true` if the panel is currently near top
188+
*/
189+
atTop: boolean;
190+
/**
191+
* `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top
192+
*/
193+
mode: "bottom" | "top";
194+
/**
195+
* `true` if the panel is sticking to the end
196+
*/
197+
sticky: boolean;
198+
}>;
199+
200+
/**
201+
* scrollToBottom/scrollToEnd/scrollToStart/scrollToTop accept an option in v3.0.0
202+
* reference: https://github.com/compulim/react-scroll-to-bottom#300---2020-06-21
203+
*/
204+
export interface ScrollOption {
205+
/**
206+
* In future versions, the default behavior will be changed from smooth scrolling to discrete scrolling to align with HTML Standard
207+
* Note: if not set behavior to smooth, `react-scroll-to-bottom` will warn
208+
* reference: https://github.com/compulim/react-scroll-to-bottom/blob/main/packages/component/src/ScrollToBottom/Composer.js#L188
209+
*/
210+
behavior?: "smooth" | "auto";
211+
}

‎packages/component/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,13 @@
2828
"./style.css": "./build/style.css"
2929
},
3030
"files": [
31-
"build/**/*"
31+
"build/**/*",
32+
"index.d.ts"
3233
],
3334
"scripts": {
34-
"build": "vite build",
35-
"build:watch": "vite build --watch",
36-
"build:full": "vite build && bun run build:test-harness",
35+
"build": "vite build && cp index.d.ts build/",
36+
"build:watch": "vite build --watch && cp index.d.ts build/",
37+
"build:full": "vite build && cp index.d.ts build/ && bun run build:test-harness",
3738
"build:test-harness": "cp ../test-harness/dist/* dist/ || true",
3839
"start:test-harness": "nodemon --exec \"bun run build:test-harness\" --watch ../test-harness/dist",
3940
"eslint": "eslint src/**/*.js --ignore-pattern *.spec.js --ignore-pattern *.test.js",

0 commit comments

Comments
 (0)