hero slider

src/components/flow/FlowGrid/index.tsx

@@ -7,6 +7,7 @@ import { INode } from '~/redux/types';
 import { canEditNode } from '~/utils/node';
 import { IUser } from '~/redux/auth/types';
 import { flowSetCellView } from '~/redux/flow/actions';
+import { FlowHero } from '../FlowHero';
 
 type IProps = Partial<IFlowState> & {
   user: Partial<IUser>;
@@ -14,10 +15,12 @@ type IProps = Partial<IFlowState> & {
   onChangeCellView: typeof flowSetCellView;
 };
 
-export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }) => (
+export const FlowGrid: FC<IProps> = ({ user, nodes, heroes, onSelect, onChangeCellView }) => (
   <div>
     <div className={styles.grid_test}>
-      <div className={styles.hero}>HERO</div>
+      <div className={styles.hero}>
+        <FlowHero heroes={heroes} />
+      </div>
       <div className={styles.stamp}>STAMP</div>
 
       {nodes.map(node => (

src/components/flow/FlowGrid/styles.scss

@@ -8,7 +8,7 @@ $cols: $content_width / $cell;
 .grid_test {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
-  grid-template-rows: 40vh $cell;
+  grid-template-rows: 50vh $cell;
   grid-auto-rows: $cell;
   grid-auto-flow: row dense;
   grid-column-gap: $grid_line;
@@ -20,7 +20,7 @@ $cols: $content_width / $cell;
 
   @media (max-width: $cell * 6) {
     grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: 40vh 20vw;
+    grid-template-rows: 50vh 20vw;
     grid-auto-rows: 20vw;
   }
 

src/components/flow/FlowHero/index.tsx

@@ -0,0 +1,109 @@
+import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
+import { IFlowState } from '~/redux/flow/reducer';
+import classNames from 'classnames';
+
+import * as styles from './styles.scss';
+import { getURL } from '~/utils/dom';
+import { withRouter, RouteComponentProps } from 'react-router';
+import { URLS } from '~/constants/urls';
+import { Icon } from '~/components/input/Icon';
+import { Filler } from '~/components/containers/Filler';
+
+type IProps = RouteComponentProps & {
+  heroes: IFlowState['heroes'];
+};
+
+const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
+  const [limit, setLimit] = useState(Math.max(heroes.length, 10));
+  const [current, setCurrent] = useState(0);
+  const [loaded, setLoaded] = useState([]);
+  const timer = useRef(null);
+
+  const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]);
+
+  const onNext = useCallback(() => {
+    clearTimeout(timer.current);
+
+    if (loaded.length <= 1) return;
+
+    const index = loaded.findIndex(el => el === current);
+
+    setCurrent(index > loaded.length - 2 ? loaded[0] : loaded[index + 1]);
+  }, [loaded, current, setCurrent, timer]);
+
+  const onPrevious = useCallback(() => {
+    clearTimeout(timer.current);
+
+    if (loaded.length <= 1) return;
+
+    const index = loaded.findIndex(el => el === current);
+
+    setCurrent(index > 0 ? loaded[index - 1] : loaded[loaded.length - 1]);
+  }, [loaded, current, setCurrent, timer]);
+
+  useEffect(() => {
+    timer.current = setTimeout(onNext, 3000);
+
+    return () => clearTimeout(timer.current);
+  }, [current]);
+
+  useEffect(() => {
+    if (current === 0 && loaded.length > 0) setCurrent(loaded[0]);
+  }, [loaded]);
+
+  useEffect(() => {
+    setLimit(Math.max(heroes.length, limit));
+  }, [heroes, limit]);
+
+  const stopSliding = useCallback(() => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(onNext, 3000);
+  }, [timer]);
+
+  const onClick = useCallback(() => {
+    if (!current) return;
+
+    history.push(URLS.NODE_URL(current));
+  }, [current]);
+
+  return (
+    <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
+      <div className={styles.info}>
+        <div className={styles.title_wrap}>
+          <div className={styles.title}>TITLE!</div>
+        </div>
+
+        <div className={styles.buttons}>
+          <div className={styles.button} onClick={onPrevious}>
+            <Icon icon="left" />
+          </div>
+          <div className={styles.button} onClick={onNext}>
+            <Icon icon="right" />
+          </div>
+        </div>
+      </div>
+
+      {heroes.slice(0, limit).map(hero => (
+        <div
+          className={classNames(styles.hero, {
+            [styles.is_visible]: loaded.includes(hero.id),
+            [styles.is_active]: current === hero.id,
+          })}
+          style={{ backgroundImage: `url("${getURL({ url: hero.thumbnail })}")` }}
+          key={hero.id}
+          onClick={onClick}
+        >
+          <img
+            src={getURL({ url: hero.thumbnail })}
+            alt={hero.thumbnail}
+            onLoad={onLoad(hero.id)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const FlowHero = withRouter(FlowHeroUnconnected);
+
+export { FlowHero };

src/components/flow/FlowHero/styles.scss

@@ -0,0 +1,106 @@
+.wrap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: $content_bg;
+  border-radius: $cell_radius;
+}
+
+.hero {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  transition: opacity 1s;
+  background: 50% 50% no-repeat;
+  background-size: cover;
+  border-radius: $cell_radius;
+  z-index: 2;
+  opacity: 0;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('~/sprites/dots.svg') rgba(0, 0, 0, 0.3);
+  }
+
+  img {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
+  }
+
+  &.is_visible {
+    display: block;
+  }
+
+  &.is_active {
+    opacity: 1;
+    z-index: 3;
+  }
+}
+
+.info {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  padding: $gap;
+  box-sizing: border-box;
+  z-index: 5;
+  flex-direction: row;
+}
+
+.title_wrap {
+  flex: 1;
+  white-space: nowrap;
+  display: flex;
+  margin-right: $gap;
+  overflow: hidden;
+}
+
+.title {
+  flex: 0;
+  height: 48px;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 $gap;
+  border-radius: $radius;
+  font: $font_hero_title;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  background: rgba(0, 0, 0, 0.7);
+  flex-direction: row;
+  width: 96px;
+  border-radius: $radius;
+
+  .button {
+    cursor: pointer;
+    flex: 0 0 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}