refactor(files): Adjust some Typescript code in virtual files list#45585
Merged
refactor(files): Adjust some Typescript code in virtual files list#45585
Conversation
susnux
commented
May 30, 2024
Contributor
Author
susnux
left a comment
There was a problem hiding this comment.
Added some hints about the problems I try to solve
| }, | ||
|
|
||
| props: { | ||
| currentView: { |
|
|
||
| // Otherwise let's compute it | ||
| return formatFileSize(this.nodes.reduce((total, node) => total + node.size || 0, 0), true) | ||
| return formatFileSize(this.nodes.reduce((total, node) => total + (node.size ?? 0), 0), true) |
| return this.filesStore.getRoot(this.currentView.id) | ||
| } | ||
| const fileId = this.pathsStore.getPath(this.currentView.id, this.dir) | ||
| const fileId = this.pathsStore.getPath(this.currentView.id, this.dir)! |
Contributor
Author
There was a problem hiding this comment.
We can safe cast here, if the dir is not found we will get the empty content message instead of the table.
So we can always assume that fileid is not undefined.
So resolving
|
|
||
| const tableTop = this.$refs.table.$el.getBoundingClientRect().top | ||
| const tableBottom = tableTop + this.$refs.table.$el.getBoundingClientRect().height | ||
| const tableElement = (this.$refs.table as ComponentPublicInstance<typeof VirtualList>).$el |
| }, | ||
| nodes: { | ||
| type: Array, | ||
| type: Array as PropType<Node[]>, |
| import { getFileListHeaders, Folder, View, getFileActions, FileType } from '@nextcloud/files' | ||
| import { showError } from '@nextcloud/dialogs' | ||
| import { loadState } from '@nextcloud/initial-state' | ||
| import { translate as t, translatePlural as n } from '@nextcloud/l10n' |
| data() { | ||
| return { | ||
| filesListWidth: null as number | null, | ||
| filesListWidth: 0, |
9629adf to
ed71a9d
Compare
susnux
commented
May 30, 2024
| this.filesListWidth = fileListEl?.clientWidth ?? null | ||
| this.filesListWidth = fileListEl?.clientWidth ?? 0 | ||
|
|
||
| // @ts-expect-error The resize observer is just now attached to the object |
Contributor
Author
There was a problem hiding this comment.
We can not use setup in mixins, so we can not attach it properly with type information.
Using data also feels wrong, it should not be made reactive.
Contributor
There was a problem hiding this comment.
This mixin is quite small and only defines one property. Maybe we can rewrite it to a composable then?
Contributor
Author
There was a problem hiding this comment.
Yes I also was thinking about that.
Also a composable for dir and fileid makes sense as we use it in many places and just duplicate logic there.
ShGKme
approved these changes
May 31, 2024
Contributor
|
Thanks for detailed description about all the changes! |
skjnldsv
approved these changes
May 31, 2024
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Use `defineComponent` to properly inherit typings. Expect TS errors for the `$resizeOberserver` as we attach it directly on the component instance. `filesListWidth` is now a number which defaults to 0, making compares like `this.fileListWidth < 768` valid in Typescript. Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
- Add correct type for `nodes` prop. - Use `defineComponent` to properly infer Typescript information - Correct usage of nullish coalescing operator Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
We already have this as a required prop in `FilesListVirtual`, so passing it to the footer is straight forward and removed need of computed value. Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
ed71a9d to
8e296a5
Compare
Merged
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Summary
filesListWidthmixinUse
defineComponentto properly inherit typings, also add the$resizeOberserverthrough the setup to the component instance.filesListWidthis now a number which defaults to 0, making compares likethis.fileListWidth < 768valid in Typescript (there are a lot of Type error in other places because of this).FilesListTableFooternodesprop.defineComponentto properly infer Typescript informationcurrentViewa prop ofFilesListTableFooterWe already have this as a required prop in
FilesListVirtual, so passing it to the footer is straight forward and removed need of computed value.Checklist