Skip to content

Commit

Permalink
fix: cleanup NcBreadcrumbs code
Browse files Browse the repository at this point in the history
Signed-off-by: Raimund Schlüßler <[email protected]>
  • Loading branch information
raimund-schluessler authored and susnux committed Aug 23, 2023
1 parent 302d3f6 commit 3eee016
Showing 1 changed file with 14 additions and 33 deletions.
47 changes: 14 additions & 33 deletions src/components/NcBreadcrumbs/NcBreadcrumbs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,6 @@ export default {
emits: ['dropped'],
data() {
return {
/**
* The breadcrumbs which should be shown in a dropdown Actions menu.
*/
hiddenCrumbs: [],
/**
* Array to track the hidden breadcrumbs by their index.
* Comparing two crumbs somehow does not work, so we use the indices.
Expand Down Expand Up @@ -239,13 +235,6 @@ export default {
unsubscribe('navigation-toggled', this.delayedResize)
},
methods: {
/**
* Call the resize function after a delay
*/
async delayedResize() {
await this.$nextTick()
this.handleWindowResize()
},
/**
* Close the actions menu
*
Expand All @@ -258,6 +247,13 @@ export default {
}
this.menuBreadcrumbProps.open = false
},
/**
* Call the resize function after a delay
*/
async delayedResize() {
await this.$nextTick()
this.handleWindowResize()
},
/**
* Check the width of the breadcrumb and hide breadcrumbs
* if we overflow otherwise.
Expand All @@ -270,23 +266,6 @@ export default {
// All breadcrumb components passed into the default slot
const breadcrumbs = Object.values(this.breadcrumbsRefs)
const breadcrumbsVnodes = []
// We have to iterate over all slot elements
this.$slots.default.forEach(vnode => {
if (this.isBreadcrumb(vnode)) {
breadcrumbsVnodes.push(vnode)
return
}
// If we encounter a Fragment, we have to check its children too
if (vnode?.type === Fragment) {
vnode?.children?.forEach?.(child => {
if (this.isBreadcrumb(child)) {
breadcrumbsVnodes.push(child)
}
})
}
})
const nrCrumbs = breadcrumbs.length
const hiddenIndices = []
const availableWidth = this.$refs.container.offsetWidth
Expand All @@ -313,8 +292,6 @@ export default {
// We only update the hidden crumbs if they have changed,
// otherwise we will run into an infinite update loop.
if (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) {
// Get all breadcrumbs based on the hidden indices
this.hiddenCrumbs = hiddenIndices.map((index) => { return breadcrumbsVnodes[index] })
this.hiddenIndices = hiddenIndices
}
},
Expand Down Expand Up @@ -530,6 +507,7 @@ export default {
// Add the root icon to the first breadcrumb
// eslint-disable-next-line import/no-named-as-default-member
Vue.set(breadcrumbs[0].componentOptions.propsData, 'icon', this.rootIcon)
// eslint-disable-next-line import/no-named-as-default-member
Vue.set(breadcrumbs[0].componentOptions.propsData, 'ref', 'breadcrumbs')
/**
Expand All @@ -540,13 +518,15 @@ export default {
const breadcrumbsRefs = {}
// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.
breadcrumbs.forEach((crumb, index) => {
// eslint-disable-next-line import/no-named-as-default-member
Vue.set(crumb, 'ref', `crumb-${index}`)
breadcrumbsRefs[index] = crumb
})
// The array of all created VNodes
let crumbs = []
if (!this.hiddenCrumbs.length) {
if (!this.hiddenIndices.length) {
// We don't hide any breadcrumbs.
crumbs = breadcrumbs
} else {
Expand Down Expand Up @@ -587,7 +567,8 @@ export default {
},
},
// Add all hidden breadcrumbs as ActionRouter or ActionLink
}, this.hiddenCrumbs.map(crumb => {
}, this.hiddenIndices.map(index => {
const crumb = breadcrumbs[index]
// Get the parameters from the breadcrumb component props
const to = crumb.componentOptions.propsData.to
const href = crumb.componentOptions.propsData.href
Expand Down Expand Up @@ -653,7 +634,7 @@ export default {
this.breadcrumbsRefs = breadcrumbsRefs
return h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenCrumbs.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)
return h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)
},
}
</script>
Expand Down

0 comments on commit 3eee016

Please sign in to comment.