scroller: use sequential keys for dash

old-stable24
Varun Patil 2022-10-19 12:57:34 -07:00
parent 9a52caacc3
commit cbe6629372
2 changed files with 12 additions and 2 deletions

View File

@ -19,7 +19,7 @@
<div class="icon"> <ScrollIcon :size="20" /> </div> <div class="icon"> <ScrollIcon :size="20" /> </div>
</span> </span>
<div v-for="tick of visibleTicks" :key="tick.dayId" <div v-for="tick of visibleTicks" :key="tick.key"
class="tick" class="tick"
:class="{ 'dash': !tick.text }" :class="{ 'dash': !tick.text }"
:style="{ transform: `translateY(${tick.top}px)` }"> :style="{ transform: `translateY(${tick.top}px)` }">
@ -77,7 +77,15 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
/** Get the visible ticks */ /** Get the visible ticks */
get visibleTicks() { get visibleTicks() {
return this.ticks.filter(tick => tick.s); let key = 999900;
return this.ticks.filter(tick => tick.s).map(tick => {
if (tick.text) {
tick.key = key = tick.dayId * 100;
} else {
tick.key = ++key; // days are sorted descending
}
return tick;
});
} }
/** Reset state */ /** Reset state */

View File

@ -146,6 +146,8 @@ export type ITick = {
text?: string | number; text?: string | number;
/** Whether this tick should be shown */ /** Whether this tick should be shown */
s?: boolean; s?: boolean;
/** Key for vue component */
key?: number
} }
export type TopMatter = { export type TopMatter = {