extended-salmon
extended-salmonβ€’2y ago

useSelect fetch on scroll

it's me again!) How to use scroll pagination with select via useSelect hook? Maybe you have any example?
29 Replies
deep-jade
deep-jadeβ€’2y ago
extended-salmon
extended-salmonβ€’2y ago
i saw it, but in your example it doesn't work( https://owaiyvrkbgithub-hbbq--3000.local.webcontainer.io/posts/create it fetches data ones and thats it, but what about scrolling?)
deep-jade
deep-jadeβ€’2y ago
oh sorry, i will debug and inform you
extended-salmon
extended-salmonβ€’2y ago
so i use this getList method in data provider
No description
extended-salmon
extended-salmonβ€’2y ago
and as i understand from docs, useSelect use em as default method
deep-jade
deep-jadeβ€’2y ago
yes, you are right i check infinite loading example, in post list page, on table's category filter works as expected. am i missing something ? code example is here: pages/posts/list.tsx
extended-salmon
extended-salmonβ€’2y ago
No description
extended-salmon
extended-salmonβ€’2y ago
this one)
deep-jade
deep-jadeβ€’2y ago
infinite scroll example only implemented on here. category section filter
No description
extended-salmon
extended-salmonβ€’2y ago
wow i try to find it in create)) or edit)
deep-jade
deep-jadeβ€’2y ago
i guess we need to write this to doc, we have 4 page and only table filter has implemented code. sorry about that.
extended-salmon
extended-salmonβ€’2y ago
yep, that would be nice for the next similar questions) from Refine users)
deep-jade
deep-jadeβ€’2y ago
this is the fetch on scroll related code. src/pages/posts/list.tsx
---

const [options, setOptions] = useState<SelectProps["options"]>([]);
const [search, setSearch] = useState<string>("");

const hasMore = useRef(true);

---

const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: "categories",
fetchSize: 20,
pagination: { current: page },

queryOptions: {
keepPreviousData: true,
onSuccess(data) {
if (!data.data?.length) {
hasMore.current = false;
}

const normalizedData = data.data?.map((item) => ({
label: item.title,
value: item.id,
}));

if (!search?.length) {
setOptions((prev) => [...(prev || []), ...normalizedData]);
} else {
setOptions(normalizedData);
}
},
},

onSearch: (value) => {
setPage(1);
hasMore.current = true;
setSearch(value);

return [
{
field: "title",
operator: "contains",
value,
},
];
},
});

---

filterDropdown={(props) => (
<FilterDropdown {...props}>
<Select
mode="multiple"
style={{ minWidth: 200 }}
{...categorySelectProps}
// need to add options with searchValue and onPopupScroll
options={options}
onPopupScroll={(event) => {
const target = event.currentTarget;
if (
target.scrollTop +
target.offsetHeight ===
target.scrollHeight
) {
if (
categorySelectProps.options &&
hasMore.current
) {
setPage((curr) => curr + 1);
}
}
}}
/>
</FilterDropdown>
)}
---

const [options, setOptions] = useState<SelectProps["options"]>([]);
const [search, setSearch] = useState<string>("");

const hasMore = useRef(true);

---

const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: "categories",
fetchSize: 20,
pagination: { current: page },

queryOptions: {
keepPreviousData: true,
onSuccess(data) {
if (!data.data?.length) {
hasMore.current = false;
}

const normalizedData = data.data?.map((item) => ({
label: item.title,
value: item.id,
}));

if (!search?.length) {
setOptions((prev) => [...(prev || []), ...normalizedData]);
} else {
setOptions(normalizedData);
}
},
},

onSearch: (value) => {
setPage(1);
hasMore.current = true;
setSearch(value);

return [
{
field: "title",
operator: "contains",
value,
},
];
},
});

---

filterDropdown={(props) => (
<FilterDropdown {...props}>
<Select
mode="multiple"
style={{ minWidth: 200 }}
{...categorySelectProps}
// need to add options with searchValue and onPopupScroll
options={options}
onPopupScroll={(event) => {
const target = event.currentTarget;
if (
target.scrollTop +
target.offsetHeight ===
target.scrollHeight
) {
if (
categorySelectProps.options &&
hasMore.current
) {
setPage((curr) => curr + 1);
}
}
}}
/>
</FilterDropdown>
)}
yes you are absolutely right, thanks for the feedback ! we will handle it as soon as possible
extended-salmon
extended-salmonβ€’2y ago
yep, found this)
deep-jade
deep-jadeβ€’2y ago
actually we have useSelectInfiniteScroll() feature in our backlog. when we ship this feature, it will be much easier to use. just like a useSelect !
extended-salmon
extended-salmonβ€’2y ago
i'll try to implement this
deep-jade
deep-jadeβ€’2y ago
please let me know if anythings go wrong
extended-salmon
extended-salmonβ€’2y ago
sounds perfect! thanks brou, you all do great job πŸ˜„ glad to use your framework)
deep-jade
deep-jadeβ€’2y ago
thanks πŸ™ we are happy to hear that
extended-salmon
extended-salmonβ€’2y ago
another case) try to find only one option, and after that -> delete this option from selected and you see that initial state will not setted back @alicanerdurmaz
deep-jade
deep-jadeβ€’2y ago
sorry @amounguluz i couldn't understand. can you give me more explanation please ?
extended-salmon
extended-salmonβ€’2y ago
i'll record you video)
deep-jade
deep-jadeβ€’2y ago
thank you
extended-salmon
extended-salmonβ€’2y ago
extended-salmon
extended-salmonβ€’2y ago
maybe you have any idea how to refetch data?) @alicanerdurmaz
deep-jade
deep-jadeβ€’2y ago
i will check as soon as possible
extended-salmon
extended-salmonβ€’2y ago
thanks)
deep-jade
deep-jadeβ€’2y ago
oh. you want to searchText should stay. did i understand correctly ?
narrow-beige
narrow-beigeβ€’2y ago
I think you can do that by passing a custom filter action in filterOption prop of Select πŸ€” I thought antd is going to have a custom prop for it but no, they left this to the user πŸ˜…