@wayke-se/components-react 3.0.0-beta.6 → 3.0.0-beta.8

package/src/components/Sphere/SphereViewer.tsx

@@ -1,45 +0,0 @@
-import React, { lazy, useState, useEffect } from 'react';
-
-import { Wrapper } from './wrapper';
-import Loader from '../Loader/index';
-
-// Skip loading pannellum with video
-const ReactPannellum = lazy(() => import('pannellum-react/es/elements/Pannellum'));
-
-type PropsType = {
-  id: string;
-  src: string;
-  preview: string;
-  autoLoad?: boolean;
-  onStart?: () => void;
-};
-
-const SphereViewer = ({ id, src, preview, autoLoad, onStart }: PropsType) => {
-  const [number] = useState(Math.floor(100000000 + Math.random() * 900000000));
-  useEffect(() => {
-    setTimeout(() => {
-      if (onStart) {
-        const startBtn = document.querySelector('.pnlm-load-button');
-        if (startBtn) startBtn.addEventListener('click', onStart);
-      }
-    }, 100);
-  }, []);
-
-  return (
-    <Wrapper>
-      <React.Suspense fallback={<Loader />}>
-        <ReactPannellum
-          id={`a-${id}-${number}`}
-          image={src}
-          hfov={120}
-          autoLoad={autoLoad}
-          compass
-          width={'100%'}
-          preview={preview}
-        />
-      </React.Suspense>
-    </Wrapper>
-  );
-};
-
-export default SphereViewer;

package/src/components/SwitchBar/index.tsx

@@ -1,55 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Wrapper, Header, Body, Info, Action, InfoContent, InfoBtn, Title } from './wrapper';
-import Modal from '../Modal/index';
-import { ButtonInline } from '../Button/index';
-import { IconInfo } from '../Icon/index';
-
-interface Props {
-  title: string;
-  body?: string;
-  actionTitle?: string;
-  children: React.ReactNode;
-  onClick?: () => void;
-}
-
-const SwitchBar = ({ title, body, actionTitle, children, onClick }: Props) => {
-  const [info, setInfo] = useState(false);
-  const onToggleInfo = useCallback(() => setInfo(!info), [info]);
-
-  return (
-    <>
-      <Wrapper>
-        <Header>
-          <Info>
-            <InfoContent>
-              <Title>{title}</Title>
-            </InfoContent>
-            {children && (
-              <InfoContent>
-                <InfoBtn onClick={onToggleInfo} title="Mer information">
-                  <IconInfo block />
-                </InfoBtn>
-              </InfoContent>
-            )}
-          </Info>
-          {actionTitle && (
-            <Action>
-              <ButtonInline onClick={onClick} title={actionTitle}>
-                {actionTitle}
-              </ButtonInline>
-            </Action>
-          )}
-        </Header>
-        {body && <Body>{body}</Body>}
-      </Wrapper>
-      {info && (
-        <Modal title={title} onClose={onToggleInfo}>
-          {children}
-        </Modal>
-      )}
-    </>
-  );
-};
-
-export default SwitchBar;

package/src/components/Tabs/index.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { Action, Item, List, Wrapper } from './wrapper';
-
-export interface ITabItem {
-  name: string;
-  displayName: string;
-}
-
-export interface ITabInterface<T> {
-  tabs: ITabItem[];
-  active: string;
-  onClick?: (name: T) => void;
-}
-
-const Tabs = <T extends {}>({ tabs, active, onClick }: ITabInterface<T>) => (
-  <Wrapper>
-    <List>
-      {tabs.map((tab) => (
-        <Item key={tab.name}>
-          <Action
-            title={tab.displayName}
-            onClick={onClick ? () => onClick(tab.name as unknown as T) : undefined}
-            active={tab.name === active ? 'true' : undefined}
-          >
-            {tab.displayName}
-          </Action>
-        </Item>
-      ))}
-    </List>
-  </Wrapper>
-);
-
-export default Tabs;

package/src/components/ThreeSixty/Rotation.tsx

@@ -1,136 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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/src/components/Utility/index.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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;