Skip to content

fix: use entire viewport when target is document #2119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 20, 2023
Merged

fix: use entire viewport when target is document #2119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f7ffbaf
fix: use entire viewport when target is document
hchlq Mar 14, 2023
526256f
Merge branch 'master' into hotfix/useInfiniteScroll-document-target
hchlq Mar 14, 2023
00cbe13
Merge branch 'master' into hotfix/useInfiniteScroll-document-target
hchlq Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions packages/hooks/src/useInfiniteScroll/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ const {

### Options

| Property | Description | Type | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------- |
| target | specifies the parent element. If it exists, it will trigger the `loadMore` when scrolling to the bottom. Needs to work with `isNoMore` to know when there is no more data to load | `() => Element` \| `Element` \| `MutableRefObject<Element>` | - |
| isNoMore | determines if there is no more data, the input parameter is the latest merged `data` | `(data?: TData) => boolean` | - |
| threshold | The pixel threshold to the bottom for the scrolling to load | `number` | `100` |
| reloadDeps | When the content of the array changes, `reload` will be triggered | `any[]` | - |
| manual | <ul><li> The default is `false`. That is, the service is automatically executed during initialization. </li><li>If set to `true`, you need to manually call `run` or `runAsync` to trigger execution </li></ul> | `boolean` | `false` |
| onBefore | Triggered before service execution | `() => void` | - |
| onSuccess | Triggered when service resolve | `(data: TData) => void` | - |
| onError | Triggered when service reject | `(e: Error) => void` | - |
| onFinally | Triggered when service execution is complete | `(data?: TData, e?: Error) => void` | - |
| Property | Description | Type | Default |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------- |
| target | specifies the parent element. If it exists, it will trigger the `loadMore` when scrolling to the bottom. Needs to work with `isNoMore` to know when there is no more data to load. **when target is document, it is defined as the entire viewport** | `() => Element` \| `Element` \| `MutableRefObject<Element>` | - |
| isNoMore | determines if there is no more data, the input parameter is the latest merged `data` | `(data?: TData) => boolean` | - |
| threshold | The pixel threshold to the bottom for the scrolling to load | `number` | `100` |
| reloadDeps | When the content of the array changes, `reload` will be triggered | `any[]` | - |
| manual | <ul><li> The default is `false`. That is, the service is automatically executed during initialization. </li><li>If set to `true`, you need to manually call `run` or `runAsync` to trigger execution </li></ul> | `boolean` | `false` |
| onBefore | Triggered before service execution | `() => void` | - |
| onSuccess | Triggered when service resolve | `(data: TData) => void` | - |
| onError | Triggered when service reject | `(e: Error) => void` | - |
| onFinally | Triggered when service execution is complete | `(data?: TData, e?: Error) => void` | - |
4 changes: 3 additions & 1 deletion packages/hooks/src/useInfiniteScroll/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,13 @@ const useInfiniteScroll = <TData extends Data>(
};

const scrollMethod = () => {
const el = getTargetElement(target);
let el = getTargetElement(target);
if (!el) {
return;
}

el = el === document ? document.documentElement : el;

const scrollTop = getScrollTop(el);
const scrollHeight = getScrollHeight(el);
const clientHeight = getClientHeight(el);
Expand Down
22 changes: 11 additions & 11 deletions packages/hooks/src/useInfiniteScroll/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ const {

### Options

| 参数 | 说明 | 类型 | 默认值 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- | ------- |
| target | 父级容器，如果存在，则在滚动到底部时，自动触发 `loadMore`。需要配合 `isNoMore` 使用，以便知道什么时候到最后一页了。 | `() => Element` \| `Element` \| `MutableRefObject<Element>` | - |
| isNoMore | 是否有最后一页的判断逻辑，入参为当前聚合后的 `data` | `(data?: TData) => boolean` | - |
| threshold | 下拉自动加载，距离底部距离阈值 | `number` | `100` |
| reloadDeps | 变化后，会自动触发 `reload` | `any[]` | - |
| manual | <ul><li> 默认 `false`。 即在初始化时自动执行 service。</li><li>如果设置为 `true`，则需要手动调用 `reload` 或 `reloadAsync` 触发执行。 </li></ul> | `boolean` | `false` |
| onBefore | service 执行前触发 | `() => void` | - |
| onSuccess | service resolve 时触发 | `(data: TData) => void` | - |
| onError | service reject 时触发 | `(e: Error) => void` | - |
| onFinally | service 执行完成时触发 | `(data?: TData, e?: Error) => void` | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------- |
| target | 父级容器，如果存在，则在滚动到底部时，自动触发 `loadMore`。需要配合 `isNoMore` 使用，以便知道什么时候到最后一页了。 **当 target 为 document 时，定义为整个视口** | `() => Element` \| `Element` \| `MutableRefObject<Element>` | - |
| isNoMore | 是否有最后一页的判断逻辑，入参为当前聚合后的 `data` | `(data?: TData) => boolean` | - |
| threshold | 下拉自动加载，距离底部距离阈值 | `number` | `100` |
| reloadDeps | 变化后，会自动触发 `reload` | `any[]` | - |
| manual | <ul><li> 默认 `false`。 即在初始化时自动执行 service。</li><li>如果设置为 `true`，则需要手动调用 `reload` 或 `reloadAsync` 触发执行。 </li></ul> | `boolean` | `false` |
| onBefore | service 执行前触发 | `() => void` | - |
| onSuccess | service resolve 时触发 | `(data: TData) => void` | - |
| onError | service reject 时触发 | `(e: Error) => void` | - |
| onFinally | service 执行完成时触发 | `(data?: TData, e?: Error) => void` | - |