oddsgate-ds 1.0.17 → 1.0.19

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useRef } from 'react'
+import {
+  StyledCircularSlider,
+  StyledCircularSliderContent,
+  StyledCircularSliderSlide,
+  StyledCircularSliderSlides,
+  StyledCircularSliderWrapper
+} from './CircularSlider.theme'
+
+import { ICircularSlider } from './CircularSlider.interface'
+
+const CircularSlider = ({
+  content,
+  style,
+  className,
+}: ICircularSlider) => {
+
+  const slider = useRef<HTMLDivElement>();
+  const wrapper = useRef<HTMLDivElement>();
+  const slidesHolder = useRef<HTMLDivElement>();
+
+  const sliderSize = 80 / 100;
+  const slideSize = 15 / 100;
+
+
+  useEffect(() => {
+    if (!slidesHolder.current) return //bail out;
+
+    const animationDuration = 600;
+
+    const slides = Array.prototype.slice.call(slidesHolder?.current?.children);
+
+    let slidesSize = 0;
+
+    let currentAngle = -90;
+
+    // const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length;
+    const stepAngle = 0.52;
+
+    let currentSlide = 0;
+
+    slidesHolder.current.style.transitionDuration = animationDuration + 'ms';
+
+    const slidesRepositioning = (r) => {
+      for (let i = 0; i < slides.length; i++) {
+
+        let x = r * Math.cos(stepAngle * i - Math.PI / 2),
+          y = r * Math.sin(stepAngle * i - Math.PI / 2);
+
+        slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + ((stepAngle * 180 / Math.PI * i) + 90) + 'deg )';
+        // slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
+      };
+    }
+    const setSize = (radius: number) => {
+      if (!wrapper.current || !slidesHolder.current) return //bail out;
+
+      wrapper.current.style.width = 2 * radius + 'px';
+      wrapper.current.style.height = 2 * radius + 'px';
+
+      let r = 2 * radius * (1 - slideSize);
+      slidesHolder.current.style.width = slidesHolder.current.style.height = r + 'px';
+      slidesRepositioning(r / 2);
+
+      slidesHolder.current.style.marginTop = radius * slideSize + 'px';
+
+      slidesSize = Math.min(2 * radius * slideSize, stepAngle * radius * (1 - slideSize) - 50);
+
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].style.width = slides[i].style.height = slidesSize + 'px';
+      };
+
+    }
+    const sliderResize = () => {
+      let radius,
+        w = slider?.current?.getBoundingClientRect().width || 0,
+        h = slider?.current?.getBoundingClientRect().height || 0;
+
+      2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize;
+
+      setSize(Math.round(radius));
+    }
+
+    const addStyle = () => {
+      slides[currentSlide].classList.add('slides-holder__item_active');
+      slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 20 + 'px';
+    };
+    const removeStyle = () => {
+      slides[currentSlide].classList.remove('slides-holder__item_active');
+      slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 'px';
+    };
+
+    const rotateSlider = (e) => {
+      const newSlide = slides.indexOf(e.target);
+
+      if (currentSlide === newSlide || !slidesHolder?.current) return;
+
+      removeStyle();
+
+      const distanceUntilEnd = slides.length - newSlide;
+      const distanteFromStart = currentSlide;
+      const a = (distanteFromStart + distanceUntilEnd) > 0 ? (distanteFromStart + distanceUntilEnd) * -1 : (distanteFromStart + distanceUntilEnd);
+
+      // const multiplier = newSlide >= (slides.length / 2) ? a : newSlide - currentSlide;
+      const multiplier = newSlide - currentSlide;
+
+      const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier);
+
+      currentSlide < newSlide ? currentAngle -= newAngle : currentAngle += newAngle;
+      currentSlide = newSlide;
+
+      slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )';
+      addStyle();
+    }
+
+    sliderResize();
+    addStyle();
+
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].addEventListener('click', rotateSlider);
+    };
+
+    window.addEventListener('resize', sliderResize)
+
+    return () => {
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].removeEventListener('click', rotateSlider);
+      };
+
+      window.removeEventListener('resize', sliderResize)
+    }
+  }, [])
+
+
+  return (
+    <StyledCircularSlider ref={slider as any}>
+      <StyledCircularSliderWrapper ref={wrapper as any}>
+        {/* <div className="controls">
+          <div className="controls__left">
+            <div className="icon-wrapper">left</div>
+          </div>
+          <div className="controls__right">
+            <div className="icon-wrapper">right</div>
+          </div>
+        </div> */}
+        <StyledCircularSliderSlides ref={slidesHolder as any}>
+          {content?.map((item, index) => {
+            return (
+              <StyledCircularSliderSlide key={`slide-${index}`}>{item.img}</StyledCircularSliderSlide>
+            )
+          })}
+        </StyledCircularSliderSlides>
+        <StyledCircularSliderContent>
+
+        </StyledCircularSliderContent>
+      </StyledCircularSliderWrapper>
+    </StyledCircularSlider>
+
+  )
+}
+
+export default CircularSlider

package/src/components/organisms/CircularSlider/CircularSlider.interface.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+
+export type ICircularSlider = {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  content?: {
+    name?: string,
+    role?: string,
+    img?: React.ReactNode
+  }[]
+}

package/src/components/organisms/CircularSlider/CircularSlider.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '../../atoms/Button/Button.component'
+import CircularSlider from './CircularSlider.component'
+import Flex from '../../atoms/Flex/Flex.component'
+import { ICircularSlider } from './CircularSlider.interface'
+import React from 'react'
+import RichText from '../../atoms/RichText/RichText.component'
+import Video from '../../atoms/Video/Video.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CircularSlider',
+  component: CircularSlider,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ICircularSlider> = {
+  render: args => (
+    <CircularSlider {...args}>
+
+    </CircularSlider>
+  ),
+  args: {
+    content: [
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      },
+      {
+        name: "My name",
+        role: "My role",
+        img: image
+      }
+    ]
+  }
+}

package/src/components/organisms/CircularSlider/CircularSlider.theme.ts

@@ -0,0 +1,58 @@
+import { ICircularSlider } from './CircularSlider.interface';
+import { StyledVideo } from '../../atoms/Video/Video.theme';
+import styled from 'styled-components';
+
+export const StyledCircularSlider = styled.div<ICircularSlider>`
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+
+`;
+
+export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
+  margin: 0 auto;
+  margin-right: 0;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  padding: 20px 20px 0px 20px;
+  overflow: hidden;
+  transform: translateX(60%);
+`;
+
+export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
+  border-radius: 50%;
+  border: 2px solid #8EB8E5;
+  transform-origin: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  transform: rotate(-90deg);
+`;
+export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
+  border-radius: 50%;
+  border: 2px solid #7C99B4;
+  position: absolute;
+  transform-origin: center;
+  background-color: #222;
+  transition: .3s linear all;
+  filter: brightness(70%);
+
+  & img{
+    pointer-events:none;
+  }
+
+  &.slides-holder__item_active{
+    filter: brightness(100%);
+  }
+`;
+
+export const StyledCircularSliderContent = styled.div<ICircularSlider>`
+
+`;
+

package/src/components/organisms/CircularSlider/index.ts

@@ -0,0 +1 @@
+export { default } from './CircularSlider.component'

package/src/index.ts

@@ -43,6 +43,7 @@ export { default as ProjectCard } from './components/molecules/ProjectCard'
 // //organisms
 export { default as Slider } from './components/organisms/Slider'
 export { default as Cover } from './components/organisms/Cover'
+export { default as CircularSlider } from './components/organisms/CircularSlider'
 
 export { iconsList } from './helpers/getIcons'