mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
fixed rerendering issues on flow
This commit is contained in:
parent
27763be864
commit
a497912049
3 changed files with 16 additions and 13 deletions
|
@ -1,6 +1,5 @@
|
||||||
import React, { FC, useCallback, useMemo, useState } from 'react';
|
import React, { FC, useCallback, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
|
import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
|
||||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
|
@ -22,6 +21,18 @@ interface Props {
|
||||||
heroes: IFlowNode[];
|
heroes: IFlowNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const autoplay = {
|
||||||
|
delay: 3000,
|
||||||
|
pauseOnMouseEnter: false,
|
||||||
|
stopOnLastSlide: false,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const lazy = {
|
||||||
|
loadPrevNextAmount: 5,
|
||||||
|
checkInView: false,
|
||||||
|
};
|
||||||
|
|
||||||
export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
|
export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
|
||||||
const { innerWidth } = useWindowSize();
|
const { innerWidth } = useWindowSize();
|
||||||
const { push } = useNavigation();
|
const { push } = useNavigation();
|
||||||
|
@ -104,18 +115,10 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
|
||||||
effect="fade"
|
effect="fade"
|
||||||
speed={3000}
|
speed={3000}
|
||||||
className={styles.swiper}
|
className={styles.swiper}
|
||||||
lazy={{
|
lazy={lazy}
|
||||||
loadPrevNextAmount: 5,
|
|
||||||
checkInView: false,
|
|
||||||
}}
|
|
||||||
loop
|
loop
|
||||||
slidesPerView={1}
|
slidesPerView={1}
|
||||||
autoplay={{
|
autoplay={autoplay}
|
||||||
delay: 3000,
|
|
||||||
pauseOnMouseEnter: false,
|
|
||||||
stopOnLastSlide: false,
|
|
||||||
disableOnInteraction: false,
|
|
||||||
}}
|
|
||||||
runCallbacksOnInit
|
runCallbacksOnInit
|
||||||
onSwiper={setControlledSwiper}
|
onSwiper={setControlledSwiper}
|
||||||
onSlidesLengthChange={onIndexChange}
|
onSlidesLengthChange={onIndexChange}
|
||||||
|
|
|
@ -14,7 +14,7 @@ export const useWindowSize = () => {
|
||||||
window.addEventListener('resize', onResize);
|
window.addEventListener('resize', onResize);
|
||||||
|
|
||||||
return () => window.removeEventListener('resize', onResize);
|
return () => window.removeEventListener('resize', onResize);
|
||||||
});
|
}, []);
|
||||||
|
|
||||||
return size;
|
return size;
|
||||||
};
|
};
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { FlowLayout } from '~/layouts/FlowLayout';
|
||||||
import { FlowProvider } from '~/utils/providers/FlowProvider';
|
import { FlowProvider } from '~/utils/providers/FlowProvider';
|
||||||
import { getPageTitle } from '~/utils/ssr/getPageTitle';
|
import { getPageTitle } from '~/utils/ssr/getPageTitle';
|
||||||
|
|
||||||
export const getStaticProps = async () => {
|
export const getStaticProps = async ctx => {
|
||||||
const fallbackData = await getNodeDiff({
|
const fallbackData = await getNodeDiff({
|
||||||
start: new Date().toISOString(),
|
start: new Date().toISOString(),
|
||||||
end: new Date().toISOString(),
|
end: new Date().toISOString(),
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue