Skip to content

Commit 1ddda89

Browse files
chorer(NcBreadcrumbs): make breadcrumbsRefs an array
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
1 parent 825607a commit 1ddda89

File tree

1 file changed

+8
-12
lines changed

1 file changed

+8
-12
lines changed

src/components/NcBreadcrumbs/NcBreadcrumbs.vue

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ export default {
202202
// Is the menu open or not
203203
open: false,
204204
},
205-
breadcrumbsRefs: {},
205+
breadcrumbsRefs: [],
206206
}
207207
},
208208
created() {
@@ -262,13 +262,11 @@ export default {
262262
if (!this.$refs.container) {
263263
return
264264
}
265-
// All breadcrumb components passed into the default slot
266-
const breadcrumbs = Object.values(this.breadcrumbsRefs)
267265
268-
const nrCrumbs = breadcrumbs.length
266+
const nrCrumbs = this.breadcrumbsRefs.length
269267
const hiddenIndices = []
270268
const availableWidth = this.$refs.container.offsetWidth
271-
let totalWidth = this.getTotalWidth(breadcrumbs)
269+
let totalWidth = this.getTotalWidth()
272270
// If we have breadcrumbs actions, we have to take their width into account too.
273271
if (this.$refs.breadcrumb__actions) {
274272
totalWidth += this.$refs.breadcrumb__actions.offsetWidth
@@ -284,7 +282,7 @@ export default {
284282
// We hide elements alternating to the left and right
285283
const currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 * Math.pow(-1, i + (nrCrumbs % 2))
286284
// Calculate the remaining overflow width after hiding this breadcrumb
287-
overflow -= this.getWidth(breadcrumbs[currentIndex]?.$el)
285+
overflow -= this.getWidth(this.breadcrumbsRefs[currentIndex]?.$el)
288286
hiddenIndices.push(currentIndex)
289287
i++
290288
}
@@ -317,11 +315,10 @@ export default {
317315
/**
318316
* Calculates the total width of all breadcrumbs
319317
*
320-
* @param {Array} breadcrumbs All breadcrumbs
321318
* @return {number} The total width
322319
*/
323-
getTotalWidth(breadcrumbs) {
324-
return breadcrumbs.reduce((width, crumb) => width + this.getWidth(crumb.$el), 0)
320+
getTotalWidth() {
321+
return this.breadcrumbsRefs.reduce((width, crumb) => width + this.getWidth(crumb.$el), 0)
325322
},
326323
/**
327324
* Calculates the width of the provided element
@@ -457,8 +454,7 @@ export default {
457454
* add it to the array of all crumbs.
458455
*/
459456
hideCrumbs() {
460-
const crumbs = Object.values(this.breadcrumbsRefs)
461-
crumbs.forEach((crumb, i) => {
457+
this.breadcrumbsRefs.forEach((crumb, i) => {
462458
if (crumb?.$el?.classList) {
463459
if (this.hiddenIndices.includes(i)) {
464460
crumb.$el.classList.add(`${crumbClass}--hidden`)
@@ -513,7 +509,7 @@ export default {
513509
* and don't write to this.breadcrumbsRefs directly
514510
* to not trigger a myriad of re-renders.
515511
*/
516-
const breadcrumbsRefs = {}
512+
const breadcrumbsRefs = []
517513
// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.
518514
breadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, {
519515
ref: (crumb) => {

0 commit comments

Comments
 (0)