Skip to content
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.

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

refactor(files): Provide useFileListWidth composable #49305

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Nov 15, 2024

Summary

Replace the mixin with a composable, this is better typed and works in both: Options- and Composition API.
Also added component tests for it.

Checklist

@susnux susnux added 3. to review Waiting for reviews feature: files ♻️ refactor Refactor code (not a bug fix, not a feature just refactoring) labels Nov 15, 2024
@susnux susnux added this to the Nextcloud 31 milestone Nov 15, 2024
Replace the mixin with a composable, this is better typed and works in
both: Options- and Composition API.
Also added component tests for it.

Signed-off-by: Ferdinand Thiessen <[email protected]>
@susnux susnux force-pushed the refactor/files-filelist-width branch from 2c81114 to 7169dd6 Compare November 15, 2024 11:41
Comment on lines +9 to +20
/**
* Get the reactive width of the file list
*/
export function useFileListWidth(): Readonly<Ref<number>> {
const element = ref(document.querySelector<HTMLElement>('#app-content-vue') ?? document.body)
onMounted(() => { element.value = document.querySelector('#app-content-vue')! })

const { width, stop } = useElementSize(element)
onUnmounted(stop)

return width
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do it with as a shared composable for performance.

Otherwise 10 component instances using this composable means creating 10 * reactive variables + 10 resize observers.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL, thanks Grigorii !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews feature: files ♻️ refactor Refactor code (not a bug fix, not a feature just refactoring)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants