oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Pull Requests Packages Releases 2 Activity

wip: refactor(client): migrate paging components to composition api

Browse Source
This commit is contained in:
syuilo 2022-01-10 01:00:50 +09:00
parent f9882a0c5c
commit 186a9e3b41
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/components/ui/pagination.vue
View File

@ -49,6 +49,8 @@ export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints>
* items 配列の中身を逆順にする(新しい方が最後) * items 配列の中身を逆順にする(新しい方が最後)
*/ */
reversed?: boolean; reversed?: boolean;
offsetMode?: boolean;
}; };
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -63,9 +65,11 @@ const emit = defineEmits<{
(e: 'queue', count: number): void; (e: 'queue', count: number): void;
}>(); }>();
type Item = { id: string; [another: string]: unknown; };
const rootEl = ref<HTMLElement>(); const rootEl = ref<HTMLElement>();
const items = ref([]); const items = ref<Item[]>([]);
const queue = ref([]); const queue = ref<Item[]>([]);
const offset = ref(0); const offset = ref(0);
const fetching = ref(true); const fetching = ref(true);
const moreFetching = ref(false); const moreFetching = ref(false);
@ -76,7 +80,7 @@ const isBackTop = ref(false);
const empty = computed(() => items.value.length === 0 && !fetching.value && inited.value); const empty = computed(() => items.value.length === 0 && !fetching.value && inited.value);
const error = computed(() => !fetching.value && !inited.value); const error = computed(() => !fetching.value && !inited.value);
const init = async () => { const init = async (): Promise<void> => {
queue.value = []; queue.value = [];
fetching.value = true; fetching.value = true;
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {}; const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
@ -109,12 +113,12 @@ const init = async () => {
}); });
}; };
const reload = () => { const reload = (): void => {
items.value = []; items.value = [];
init(); init();
}; };
const fetchMore = async () => { const fetchMore = async (): Promise<void> => {
if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return; if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
moreFetching.value = true; moreFetching.value = true;
backed.value = true; backed.value = true;
@ -152,7 +156,7 @@ const fetchMore = async () => {
}); });
}; };
const fetchMoreAhead = async () => { const fetchMoreAhead = async (): Promise<void> => {
if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return; if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
moreFetching.value = true; moreFetching.value = true;
const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {}; const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
@ -183,9 +187,13 @@ const fetchMoreAhead = async () => {
}); });
}; };
const prepend = (item) => { const prepend = (item: Item): void => {
if (rootEl.value == null) return;
if (props.pagination.reversed) { if (props.pagination.reversed) {
const container = getScrollContainer(rootEl.value); const container = getScrollContainer(rootEl.value);
if (container == null) return; // TODO?
const pos = getScrollPosition(rootEl.value); const pos = getScrollPosition(rootEl.value);
const viewHeight = container.clientHeight; const viewHeight = container.clientHeight;
const height = container.scrollHeight; const height = container.scrollHeight;
@ -231,11 +239,11 @@ const prepend = (item) => {
} }
}; };
const append = (item) => { const append = (item: Item): void => {
items.value.push(item); items.value.push(item);
}; };
const updateItem = (id, replacer: (item: any) => any): void => { const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
const i = items.value.findIndex(item => item.id === id); const i = items.value.findIndex(item => item.id === id);
items.value[i] = replacer(items.value[i]); items.value[i] = replacer(items.value[i]);
}; };