@wayke-se/components-react 2.16.0 → 3.0.0-beta.2

package/src/components/ThreeSixty/Rotation.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useEffect, useRef, cloneElement, Children } from 'react';
+
+const calculateCurrentFrame = (startFrame: number, delta: number, length: number): number => {
+  const frame = (startFrame + delta) % length;
+  if (frame < 0) {
+    return frame + length;
+  }
+
+  return frame;
+};
+
+type PropsType = {
+  children: React.ReactNode;
+};
+
+type RotationEvent = any;
+
+const Rotation = ({ children }: PropsType) => {
+  const startFrame = useRef(0);
+  const pointerPosition = useRef<number>();
+  const max = useRef(0);
+
+  const [state, setState] = useState({
+    current: 0,
+    outsideMouseMove: false,
+  });
+
+  useEffect(() => {
+    document.addEventListener('mouseup', touchEnd);
+
+    return () => {
+      window.document.removeEventListener('mouseup', touchEnd);
+      window.document.body.removeEventListener('mousemove', mouseMove);
+      window.document.body.removeEventListener('mouseup', mouseUp);
+    };
+  }, []);
+
+  const touchMove = (event: RotationEvent) => {
+    const notTouched = typeof pointerPosition.current !== 'number';
+    event.preventDefault();
+    if (notTouched) {
+      return;
+    }
+
+    const childCount = Children.count(children);
+
+    const { offsetWidth } = event.currentTarget;
+    const pointer = calculatePointerPosition(event);
+    const max = offsetWidth;
+    const offset = pointer - (pointerPosition.current || 0);
+    const delta = Math.floor((offset / max) * childCount);
+    setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
+  };
+
+  const mouseMove = (event: RotationEvent) => {
+    const notTouched = typeof pointerPosition.current !== 'number';
+    event.preventDefault();
+    if (notTouched || !state.outsideMouseMove) return;
+
+    const childCount = Children.count(children);
+
+    const pointer = calculatePointerPosition(event);
+    const offset = pointer - (pointerPosition.current || 0);
+    const delta = Math.floor((offset / max.current) * childCount);
+    setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
+  };
+
+  const mouseUp = () => {
+    window.document.body.removeEventListener('mousemove', mouseMove);
+    window.document.body.removeEventListener('mouseup', mouseUp);
+
+    pointerPosition.current = undefined;
+    startFrame.current = 0;
+  };
+
+  const touchStart = (event: RotationEvent) => {
+    event.preventDefault();
+    pointerPosition.current = calculatePointerPosition(event);
+    startFrame.current = state.current;
+
+    const { offsetWidth } = event.currentTarget;
+    max.current = offsetWidth;
+
+    window.document.body.addEventListener('mousemove', mouseMove);
+    window.document.body.addEventListener('mouseup', mouseUp);
+  };
+
+  const touchEnd = (event: RotationEvent) => {
+    event.preventDefault();
+    pointerPosition.current = undefined;
+    startFrame.current = 0;
+  };
+
+  const onMouseEnter = () => {
+    if (state.outsideMouseMove) setState({ ...state, outsideMouseMove: false });
+  };
+
+  const onMouseLeave = () => {
+    if (!state.outsideMouseMove) setState({ ...state, outsideMouseMove: true });
+  };
+
+  const setCurrentFrame = (current: number) => {
+    if (current !== state.current) {
+      setState({ ...state, current });
+    }
+  };
+
+  const calculatePointerPosition = (event: RotationEvent): number => {
+    const { clientX } = event.type.indexOf('touch') === 0 ? event.changedTouches[0] : event;
+    const { offsetLeft } = event.currentTarget;
+    return clientX - offsetLeft;
+  };
+
+  return (
+    <div
+      onTouchStart={touchStart}
+      onTouchMove={touchMove}
+      onTouchEnd={touchEnd}
+      onMouseDown={touchStart}
+      onMouseMove={touchMove}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {Children.map(children, (child, i) =>
+        cloneElement(child as React.ReactElement, {
+          style: {
+            width: '100%',
+            display: state.current === i ? 'block' : 'none',
+          },
+        })
+      )}
+    </div>
+  );
+};
+
+export default Rotation;

package/src/components/ThreeSixty/ThreeSixtLightbox.tsx

@@ -0,0 +1,34 @@
+import React, { useState, useCallback } from 'react';
+
+import { Item, Img } from '../Lightbox/wrapper';
+import MediaButton from '../Gallery/MediaButton';
+import Rotation from './Rotation';
+
+type PropsType = {
+  urls: string[];
+};
+
+const ThreeSixtyLightbox = ({ urls }: PropsType) => {
+  const [started, setStarted] = useState(false);
+
+  const onStart = useCallback(() => setStarted(true), []);
+
+  if (!started) {
+    return (
+      <Item>
+        <Img src={urls[0]} alt="alt" />
+        <MediaButton text="Starta 360° exteriört" onClick={onStart} />
+      </Item>
+    );
+  }
+
+  return (
+    <Rotation>
+      {urls.map((image, i) => (
+        <Img key={image} src={image} alt={`Bild ${i + 1}`} />
+      ))}
+    </Rotation>
+  );
+};
+
+export default ThreeSixtyLightbox;

package/src/components/ThreeSixty/ThreeSixty.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Image } from '../Gallery/wrapper';
+import MediaButton from '../Gallery/MediaButton';
+import Rotation from './Rotation';
+
+const onMediaClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, func: () => void) => {
+  e.stopPropagation();
+  e.preventDefault();
+  func();
+};
+
+type PropsType = {
+  urls: string[];
+  navigationDisabled: boolean;
+  visible: boolean;
+  onDisableNavigation: () => void;
+};
+
+const ThreeSixty = ({ urls, visible, onDisableNavigation, navigationDisabled }: PropsType) => {
+  if (!visible || (!navigationDisabled && visible)) {
+    return (
+      <>
+        <Image src={urls[0]} alt="alt" />
+        <MediaButton
+          text="Starta 360° exteriört"
+          onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void =>
+            onMediaClick(e, onDisableNavigation)
+          }
+        />
+      </>
+    );
+  }
+  if (navigationDisabled && visible) {
+    return (
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Rotation>
+          {urls.map((image, i) => (
+            <Image key={image} src={image} alt={`Bild ${i + 1}`} />
+          ))}
+        </Rotation>
+      </div>
+    );
+  }
+  return null;
+};
+
+export default ThreeSixty;

package/src/components/UspList/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { List, Item, Box, ItemSection, Action } from './wrapper';
+import { IconInfo } from '../Icon/index';
+
+export interface ItemProps {
+  title: string | number | null;
+  onClick?: () => void;
+}
+
+export interface Props {
+  items?: ItemProps[];
+  small?: boolean;
+}
+
+const UspItem = ({ title, onClick }: ItemProps) => {
+  return (
+    <Item>
+      <Box>
+        <ItemSection>{title}</ItemSection>
+        {onClick && (
+          <ItemSection>
+            <Action onClick={onClick}>
+              <IconInfo block />
+            </Action>
+          </ItemSection>
+        )}
+      </Box>
+    </Item>
+  );
+};
+
+const UspList = ({ items, small }: Props) => {
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <List isSmall={small}>
+      {items.map((item, index) => (
+        <UspItem key={`${item.title}-${index}`} title={item.title} onClick={item.onClick} />
+      ))}
+    </List>
+  );
+};
+
+export default UspList;

package/{dist-src/components/UspList/wrapper.js → src/components/UspList/wrapper.tsx}

@@ -1,10 +1,13 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-export const Item = styled.li `
+
+export const Item = styled.li`
   padding: ${size(0.5)};
 `;
-export const Box = styled.div `
+
+export const Box = styled.div`
   display: flex;
   align-items: center;
   background-color: ${(props) => props.theme.color.accentDark};
@@ -14,14 +17,16 @@ export const Box = styled.div `
   overflow-wrap: break-word;
   hyphens: auto;
 `;
-export const ItemSection = styled.div `
+
+export const ItemSection = styled.div`
   & + & {
     margin-left: ${size(1)};
   }
 `;
+
 export const Action = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))`
   position: relative;
   display: block;
   transform-origin: 50% 50%;
@@ -55,7 +60,8 @@ export const Action = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
-export const List = styled.ul `
+
+export const List = styled.ul`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -63,8 +69,9 @@ export const List = styled.ul `
   padding: 0;
   margin: ${size(-0.5)};
 
-  ${({ isSmall }) => isSmall &&
-    css `
+  ${({ isSmall }: { isSmall?: boolean }) =>
+    isSmall &&
+    css`
       margin: ${size(-0.25)};
 
       ${Item} {

package/src/components/Utility/index.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const UtilityTextRight = styled.div`
+  text-align: right;
+`;
+
+export const UtilityFontSizeSmall = styled.span`
+  font-size: 0.875rem;
+`;
+
+export const UtilityTextPrimary = styled.span.attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text',
+}))``;
+
+export const UtilityTextBold = styled.span.attrs(() => ({
+  className: 'wayke__theme wayke__font--bold',
+}))``;

package/src/components/Video/CustomPlayer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Wrapper } from './wrapper';
+import Video from './Video';
+
+type PropsType = {
+  url?: string;
+  modal?: boolean;
+  controls?: boolean;
+  ratio?: string;
+  isPreview?: boolean;
+};
+
+const CustomPlayer = ({ url, controls, modal, ratio = '56.25%', isPreview }: PropsType) => {
+  return (
+    <Wrapper ratio={ratio} isPreview={isPreview}>
+      <Video
+        key={url}
+        modal={modal}
+        preload="metadata"
+        controls={controls}
+        width="100%"
+        height="100%"
+        src={url}
+      />
+    </Wrapper>
+  );
+};
+export default CustomPlayer;

package/src/components/Video/EmbeddedVideoLightbox.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import YouTubePlayer from './YoutubePlayer';
+import VimeoPlayer from './VimeoPlayer';
+import CustomPlayer from '../Video/CustomPlayer';
+
+const ytNames = ['youtube.com', 'youtu.be'];
+const isYouTubeVideo = (url: string): boolean =>
+  ytNames.some((host: string): boolean => url.indexOf(host) >= 0);
+
+const vNames = ['vimeo.com'];
+const isVimeoVideo = (url: string): boolean =>
+  vNames.some((host: string): boolean => url.indexOf(host) >= 0);
+
+type PropsType = {
+  url: string;
+  autoplay?: boolean;
+  controls?: boolean;
+};
+
+const VideoPlayer = ({ url, autoplay = false, controls = true }: PropsType) => {
+  if (!url) return null;
+
+  if (isYouTubeVideo(url)) return <YouTubePlayer url={url} autoplay={autoplay} />;
+
+  if (isVimeoVideo(url)) return <VimeoPlayer url={url} autoplay={autoplay} />;
+
+  return <CustomPlayer ratio="56.25%" controls={controls} url={url} />;
+};
+
+export default VideoPlayer;

package/src/components/Video/EmbededVideo.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useCallback } from 'react';
+
+import useThumbnail from './useThumbnail';
+import { ImageFull } from '../Gallery/wrapper';
+import MediaButton from '../Gallery/MediaButton';
+import Modal from '../Modal/index';
+import VideoPlayer from './EmbeddedVideoLightbox';
+import { onImageLoad, onImageError } from './utils';
+import CustomPlayer from '../Video/CustomPlayer';
+
+interface GalleryEmbed {
+  src: string;
+  index: number;
+  controls?: boolean;
+}
+
+const GalleryEmbed = ({ src, index }: GalleryEmbed) => {
+  const [modal, setModal] = useState<string>();
+  const thumbnail = useThumbnail(src);
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    setModal(src);
+  };
+
+  const onCloseModal = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
+    setModal(undefined);
+  };
+
+  const onError = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageError(e, thumbnail),
+    [thumbnail]
+  );
+
+  const onLoad = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageLoad(e, thumbnail),
+    [thumbnail]
+  );
+
+  const customVideo = src.toLowerCase().endsWith('.mp4');
+
+  if (thumbnail?.length && !customVideo) {
+    return (
+      <>
+        <ImageFull onLoad={onLoad} src={thumbnail[0]} onError={onError} alt={`Bild ${index + 1}`} />
+        <MediaButton text="Spela video" onClick={onClick} />
+        {modal && (
+          <Modal title="Video" onClose={onCloseModal}>
+            <VideoPlayer url={modal} />
+          </Modal>
+        )}
+      </>
+    );
+  }
+
+  if (customVideo)
+    return (
+      <>
+        <CustomPlayer ratio="66.66%" isPreview controls={false} url={src} />
+        <MediaButton text="Spela video" onClick={onClick} />
+        {modal && (
+          <Modal title="Video" onClose={onCloseModal}>
+            <VideoPlayer url={modal} />
+          </Modal>
+        )}
+      </>
+    );
+  return null;
+};
+
+export default GalleryEmbed;

package/src/components/Video/QuickNavEmbeded.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+
+import useThumbnail from './useThumbnail';
+import { QuickNavImg } from '../Gallery/wrapper';
+import { onImageLoad, onImageError } from './utils';
+import CustomPlayer from '../Video/CustomPlayer';
+
+interface QuickNavEmbededProps {
+  src?: string;
+  index: number;
+}
+
+const QuickNavEmbeded = ({ src, index }: QuickNavEmbededProps) => {
+  const thumbnail = useThumbnail(src);
+  const onError = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageError(e, thumbnail),
+    [thumbnail]
+  );
+
+  const onLoad = useCallback(
+    (e: React.SyntheticEvent<HTMLImageElement, Event>) => onImageLoad(e, thumbnail),
+    [thumbnail]
+  );
+
+  const customVideo = src?.toLowerCase().endsWith('.mp4');
+
+  if (thumbnail?.length && !customVideo)
+    return (
+      <QuickNavImg onLoad={onLoad} src={thumbnail[0]} onError={onError} alt={`Bild ${index + 1}`} />
+    );
+  if (customVideo) return <CustomPlayer key={index} url={src} ratio="66.66%" />;
+  return null;
+};
+
+export default QuickNavEmbeded;

package/src/components/Video/QuickNavVideo.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import CustomPlayer from './CustomPlayer';
+
+interface QuickNavVideo {
+  src?: string;
+  index: number;
+}
+
+const QuickNavVideo = ({ src, index }: QuickNavVideo) => {
+  return <CustomPlayer key={index} url={src} ratio="66.666%" />;
+};
+
+export default QuickNavVideo;

package/src/components/Video/Video.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type VideoProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLVideoElement>,
+  HTMLVideoElement
+> & {
+  modal?: boolean;
+};
+
+const Video = styled.video<VideoProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: ${({ modal }) => (modal ? 'contain' : 'cover')};
+`;
+
+export default Video;

package/src/components/Video/VimeoPlayer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getVimeoId } from './utils';
+
+import { Wrapper, Iframe } from './wrapper';
+
+type PropsType = {
+  url: string;
+  autoplay: boolean;
+};
+
+const VimeoPlayer = ({ url, autoplay }: PropsType) => (
+  <Wrapper>
+    <Iframe
+      src={`https://player.vimeo.com/video/${getVimeoId(url)}?${
+        autoplay ? '&autoplay=1' : ''
+      }&loop=0&autopause=0`}
+    />
+  </Wrapper>
+);
+
+export default VimeoPlayer;

package/src/components/Video/YoutubePlayer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getYouTubeId } from './utils';
+
+import { Wrapper, Iframe } from './wrapper';
+
+type PropsType = {
+  url: string;
+  autoplay: boolean;
+};
+
+const YouTubePlayer = ({ url, autoplay }: PropsType) => (
+  <Wrapper>
+    <Iframe
+      src={`https://www.youtube.com/embed/${getYouTubeId(url)}?&enablejsapi=1&?rel=0${
+        autoplay ? '&autoplay=1' : ''
+      }`}
+    />
+  </Wrapper>
+);
+
+export default YouTubePlayer;

package/src/components/Video/useThumbnail.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { getVimeoId, getYoutubeThumbnail } from './utils';
+import useVimeoThumbnail from '../../hooks/useVimeoThumbnail';
+
+const useThumbnail = (url?: string | null, small?: boolean) => {
+  if (url?.toLowerCase().endsWith('.mp4')) return;
+
+  const [thumbnail, setThumbnail] = useState<string[]>();
+  const vimeoId = url ? getVimeoId(url) : undefined;
+  const vimeoThumbnail = useVimeoThumbnail(vimeoId, small);
+
+  useEffect(() => {
+    if (url) {
+      const youtubeThumbnail = getYoutubeThumbnail(url);
+      if (youtubeThumbnail) {
+        if (small) {
+          setThumbnail([youtubeThumbnail.mqdefault]);
+        } else {
+          setThumbnail([youtubeThumbnail.maxresdefault, youtubeThumbnail.hqdefault]);
+        }
+      }
+    }
+  }, [url]);
+
+  return vimeoThumbnail ? [vimeoThumbnail] : thumbnail;
+};
+
+export default useThumbnail;

package/src/components/Video/utils.ts

@@ -0,0 +1,47 @@
+export const getVimeoId = (url: string): string => {
+  const regExp = /\/(\d+)/;
+  const match = url.match(regExp);
+  return match && match[1].length > 3 ? match[1] : '';
+};
+
+export const getYouTubeId = (url: string): string => {
+  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
+  const match = url.match(regExp);
+  return match && match[7].length === 11 ? match[7] : '';
+};
+
+const youtubeBase = 'https://img.youtube.com/vi/';
+export const getYoutubeThumbnail = (url: string) => {
+  const id = getYouTubeId(url);
+  if (!id) {
+    return undefined;
+  }
+  return {
+    maxresdefault: `${youtubeBase}${id}/maxresdefault.jpg`,
+    hqdefault: `${youtubeBase}${id}/hqdefault.jpg`,
+    mqdefault: `${youtubeBase}${id}/mqdefault.jpg`,
+  };
+};
+
+export const onImageLoad = (
+  e: React.SyntheticEvent<HTMLImageElement, Event>,
+  thumbnail?: string[]
+) => {
+  if (
+    thumbnail?.length === 2 &&
+    e.currentTarget.src === thumbnail[0] &&
+    e.currentTarget.naturalWidth === 120 &&
+    e.currentTarget.naturalHeight === 90
+  ) {
+    e.currentTarget.src = thumbnail[1];
+  }
+};
+
+export const onImageError = (
+  e: React.SyntheticEvent<HTMLImageElement, Event>,
+  thumbnail?: string[]
+) => {
+  if (thumbnail?.length === 2) {
+    e.currentTarget.src = thumbnail[1];
+  }
+};