feat(infinite-scroll): add custom trigger #285
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
erase2004
reviewed
Jun 23, 2024
There was a problem hiding this comment.
customTrigger應該調整命名為hasCustomTrigger，使其有更明確的 boolean 值意涵- loaderElement 可以是
customTriggerRef.current或loaderRef.current，簡化 useEffect 的處理，同時讓在hasCustomTrigger為true的情況下，也可以支援手動載入
| > | ||
| {Object.entries(ExampleType).map(([key, type]) => { | ||
| return ( | ||
| <button |
| | loader | `ReactNode` | `false` | The loader element to be displayed during data loading | | ||
|
|
||
| | customTrigger | `boolean` | `false` | Wether the custom trigger ref will provided throught children callback to set up trigger point | |
| @@ -44,6 +44,13 @@ You should ensurce T in `initialList`, `fetchListInPage` and `children` that rep | |||
| 1. no more data | |||
| 2. amount of items reached `Math.min(amountOfElements, pageAmount * pageSize)` | |||
|
|
|||
| ### Trigger loadmore | |||
| - Default (customTrigger: false) | |||
| - This component will insert a loading `<div/>` to trigger intersection which means it only starts to load more at the end of the showing list | |||
There was a problem hiding this comment.
This component appends an element which triggers load-more effect at the end of the element list by default
| - Default (customTrigger: false) | ||
| - This component will insert a loading `<div/>` to trigger intersection which means it only starts to load more at the end of the showing list | ||
| - Custom Trigger (customTrigger: true) | ||
| - Set the prop `customTrigger` to `true` and use the `customTriggerRef` as the second param from the `children` callback to set to the desired elemnt as trigger point. (check [custom-trigger-example](./dev/components/custom-trigger-example.tsx)) |
There was a problem hiding this comment.
the second parameter -> the second augument
| - Default (customTrigger: false) | ||
| - This component will insert a loading `<div/>` to trigger intersection which means it only starts to load more at the end of the showing list | ||
| - Custom Trigger (customTrigger: true) | ||
| - Set the prop `customTrigger` to `true` and use the `customTriggerRef` as the second param from the `children` callback to set to the desired elemnt as trigger point. (check [custom-trigger-example](./dev/components/custom-trigger-example.tsx)) |
There was a problem hiding this comment.
to set to the desired elemnt as trigger point -> to designate element as trigger point
erase2004
reviewed
Jun 24, 2024
erase2004
reviewed
Jun 24, 2024
| @@ -18,5 +18,5 @@ | |||
| "outDir": "dist", | |||
| "declarationMap": true | |||
| }, | |||
| "include": ["src/**/*"] | |||
| "include": ["src/**/*", "dev/**/*"] | |||
There was a problem hiding this comment.
這邊要改的話，記得調整 package.json 的內容，因為輸出 type 的結構有變
There was a problem hiding this comment.
感謝提醒，先拿掉好了，修改在 b49ee49
erase2004
reviewed
Jun 24, 2024
| /** Wether the custom trigger ref will provided throught children callback to set up trigger point */ | ||
| hasCustomTrigger?: boolean | ||
| } | ||
| } & XOR<CustomTrigger, AutoFetch> |
There was a problem hiding this comment.
我會弄成以下樣子
XOR<{
hasCustomTrigger: true
isAuthFetch?: true
}, {
hasCustomTrigger?: false
isAuthFetch?: boolean
}>
package.json
Outdated
| @@ -52,6 +52,8 @@ | |||
| "lint-staged": "^12.4.2", | |||
| "prettier": "^2", | |||
| "regenerator-runtime": "^0.13.9", | |||
| "styled-components": "^6.1.11", | |||
| "ts-xor": "^1.3.0", | |||
There was a problem hiding this comment.
ts-xor 應該放到 package 的 dev dependecy，而非 root，這樣使用端在安裝後，才能夠正確解析 prop type
package.json
Outdated
| @@ -52,6 +52,8 @@ | |||
| "lint-staged": "^12.4.2", | |||
| "prettier": "^2", | |||
| "regenerator-runtime": "^0.13.9", | |||
| "styled-components": "^6.1.11", | |||
There was a problem hiding this comment.
可以先固定在 5.3.5 的版本，畢竟其他套件也是用這個版本
- fix styled-components version to 5.3.5 - move ts-xor package into infinite-scroll-list package
erase2004
approved these changes
Jun 24, 2024
|
喔對了，package 自己的 package.json 也要更新一下版號 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Notable Change
Follow-up
After PR approved, new npm package will be pushed with new version.