muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed flow hero appearanec

Browse source
This commit is contained in:
Fedor Katurov 2020-04-15 17:15:25 +07:00
parent c094bd357f
commit 756c82c8aa
3 changed files with 31 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/flow/FlowHero/index.tsx
View file

@ -16,10 +16,10 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
const [limit, setLimit] = useState(Math.min(heroes.length, 6));
const [current, setCurrent] = useState(0);
const [loaded, setLoaded] = useState([]);
const [is_mobile, setIsMobile] = useState(false);
const timer = useRef(null);
const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]);
const onNext = useCallback(() => {
clearTimeout(timer.current);
@ -80,6 +80,8 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
return item.title;
}, [loaded, current, heroes]);
const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
return (
<div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
{loaded && loaded.length > 0 && (
@ -104,13 +106,13 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
[styles.is_active]: current === hero.id,
})}
style={{
backgroundImage: `url("${getURL({ url: hero.thumbnail }, PRESETS.small_hero)}")`,
backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
}}
key={hero.id}
onClick={onClick}
>
<img
src={getURL({ url: hero.thumbnail }, PRESETS.small_hero)}
src={getURL({ url: hero.thumbnail }, preset)}
alt={hero.thumbnail}
onLoad={onLoad(hero.id)}
/>