respect reduce animation settings in list

This commit is contained in:
syuilo 2020-12-12 13:06:26 +09:00
parent 84f8c34e90
commit 4de6e1e28a
1 changed files with 52 additions and 31 deletions

View File

@ -1,20 +1,7 @@
<template>
<transition-group class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
<template v-for="(item, i) in items">
<slot :item="item"></slot>
<div class="separator" v-if="showDate(i, item)" :key="item.id + '_date'">
<p class="date">
<span><Fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
<span>{{ getDateText(items[i + 1].createdAt) }}<Fa class="icon" :icon="faAngleDown"/></span>
</p>
</div>
</template>
</transition-group>
</template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, h, TransitionGroup } from 'vue';
import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons'; import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -34,36 +21,70 @@ export default defineComponent({
} }
}, },
data() { methods: {
return { focus() {
faAngleUp, faAngleDown this.$slots.default[0].elm.focus();
}; }
}, },
methods: { render() {
getDateText(time: string) { const getDateText = (time: string) => {
const date = new Date(time).getDate(); const date = new Date(time).getDate();
const month = new Date(time).getMonth() + 1; const month = new Date(time).getMonth() + 1;
return this.$t('monthAndDay', { return this.$t('monthAndDay', {
month: month.toString(), month: month.toString(),
day: date.toString() day: date.toString()
}); });
}, }
showDate(i, item) { return h(this.$store.state.device.animation ? TransitionGroup : 'div', {
return ( class: 'sqadhkmv _list_',
name: 'list',
tag: 'div',
'data-direction': this.direction,
'data-reversed': this.reversed ? 'true' : 'false',
}, this.items.map((item, i) => {
const el = this.$slots.default({
item: item
})[0];
el.key = item.id;
if (
i != this.items.length - 1 && i != this.items.length - 1 &&
new Date(item.createdAt).getDate() != new Date(this.items[i + 1].createdAt).getDate() && new Date(item.createdAt).getDate() != new Date(this.items[i + 1].createdAt).getDate() &&
!item._prId_ && !item._prId_ &&
!this.items[i + 1]._prId_ && !this.items[i + 1]._prId_ &&
!item._featuredId_ && !item._featuredId_ &&
!this.items[i + 1]._featuredId_); !this.items[i + 1]._featuredId_
}, ) {
const separator = h('div', {
class: 'separator',
key: item.id + ':separator',
}, h('p', {
class: 'date'
}, [
h('span', [
h(FontAwesomeIcon, {
class: 'icon',
icon: faAngleUp,
}),
getDateText(item.createdAt)
]),
h('span', [
getDateText(this.items[i + 1].createdAt),
h(FontAwesomeIcon, {
class: 'icon',
icon: faAngleDown,
})
])
]));
focus() { return [el, separator];
this.$slots.default[0].elm.focus(); } else {
} return el;
} }
}));
},
}); });
</script> </script>
@ -97,7 +118,7 @@ export default defineComponent({
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss">
.sqadhkmv { .sqadhkmv {
> .separator { > .separator {
text-align: center; text-align: center;