oddsgate-ds 1.0.125 → 1.0.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.125",
+  "version": "1.0.126",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -65,7 +65,7 @@ export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
 
 export const StyledProductsSliderContent = styled.div<IProductsSlider>`
   position: absolute;
-  bottom: 0%;
+  top: 65%;
   left: 50%;
   max-width: 50rem;
   background: ${colors.third10};

package/src/components/organisms/ProductsSlider//306/222.js

@@ -0,0 +1,164 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  StyledProductsSlider,
+  StyledProductsSliderContent,
+  StyledProductsSliderSlide,
+  StyledProductsSliderSlides,
+  StyledProductsSliderWrapper
+} from './ProductsSlider.theme'
+
+import Heading from '@/components/atoms/Heading/Heading.component';
+import { IProductsSlider } from './ProductsSlider.interface'
+import ProductCard from '@/components/molecules/ProductCard/ProductCard.component';
+import { debounce } from '@/helpers/events';
+import useMediaMatch from '@/helpers/useMediaMatch';
+
+const ProductsSlider = ({
+  content,
+  style,
+  className,
+}: IProductsSlider) => {
+
+  const [activeElement, setActiveElement] = useState(content && content[0]);
+  const slider = useRef<HTMLDivElement>();
+  const wrapper = useRef<HTMLDivElement>();
+  const slidesHolder = useRef<HTMLDivElement>();
+  const contentHolder = useRef<HTMLDivElement>();
+  const isMobile = useMediaMatch();
+
+
+  //force 26 items
+  const newContent = useMemo(() => {
+    if (isMobile) {
+      return content;
+    } else if (content && content.length < 26) {
+      let counter = 0;
+      for (let i = content.length; i <= 26; i++) {
+        content[i] = content[counter];
+        counter++;
+      }
+      return content;
+    }
+  }, [isMobile, content])
+
+  useEffect(() => {
+    const _options = {
+      type: "equal", // compact, equal
+      size: 1, // 0, 1
+      reflection: 0.6, // 0, 1
+      rotateY: 0, // 0, 360
+      reverse: false,
+      shiftX: 0,
+      shiftY: 0,
+    }
+
+    const render = () => {
+      if (!slidesHolder.current) return //bail out;
+
+      const targetBound = slidesHolder?.current.getBoundingClientRect();
+      const childItems = Array.prototype.slice.call(slidesHolder?.current?.children);
+
+      let coordinates = equalCoordinates(childItems.length, targetBound.width / 2, targetBound.height, targetBound.width / 2, targetBound.height)
+
+      childItems.forEach((child, index) => {
+        if (coordinates[index]) {
+          const left = coordinates[index][0] - (child.clientWidth / 2) + _options.shiftX;
+          const top = coordinates[index][1] - (child.clientHeight / 2) + _options.shiftY;
+          child.style.left = left + "px";
+          child.style.top = top + "px";
+        }
+      })
+    }
+
+    const _computeDpt = (r1, r2, theta, rotateY = 0) => {
+      const dpt_sin = Math.pow(r1 * Math.sin(theta + rotateY), 2)
+      const dpt_cos = Math.pow(r2 * Math.cos(theta + rotateY), 2)
+      return Math.sqrt(dpt_sin + dpt_cos)
+    }
+
+    const equalCoordinates = (n, r1, r2, centerX, centerY) => {
+      // type options
+      let reflection = -(_options.reflection);
+
+      let deltaTheta = 0.001
+
+      let coordinates: number[][] = [];
+      let theta = 0;
+
+      const twoPi = (Math.PI * 2 * _options.size);
+      const numIntegrals = Math.round(twoPi / deltaTheta);
+
+      let circ = 0;
+      let dpt = 0;
+
+      /* integrate over the ellipse to get the circumference */
+      for (let i = 1; i < numIntegrals; i++) {
+        theta += i * deltaTheta;
+        dpt = _computeDpt(r1, r2, theta);
+        circ += dpt;
+      }
+
+      let nextPoint = 0;
+      let run = 0;
+      theta = 0;
+
+      const rotateY = (Math.PI / 2 * (_options.rotateY * 4 / 360));
+      for (let i = 0; i < numIntegrals; i++) {
+        theta += deltaTheta;
+        let subIntegral = n * run / circ;
+        if (subIntegral >= nextPoint) {
+          let x: number = Math.floor((centerX - r1 * Math.cos(theta + rotateY)) * 100) / 100;
+          let y: number = Math.floor((centerY + r2 * Math.sin(theta + rotateY) * reflection) * 100) / 100;
+          coordinates.push([x, y]);
+
+          nextPoint++;
+        }
+
+        run += _computeDpt(r1, r2, theta, rotateY);
+      }
+
+      return coordinates;
+    }
+
+    render();
+    window.addEventListener("resize", render);
+
+    return () => {
+      window.removeEventListener('resize', render)
+    }
+  }, [isMobile])
+
+  if (!content) return <></>
+
+  return (
+    <StyledProductsSlider ref={slider as any} className={className} style={style}>
+      <StyledProductsSliderWrapper ref={wrapper as any}>
+        <StyledProductsSliderSlides ref={slidesHolder as any}>
+          {newContent?.map((item, index) => {
+            return (
+              <StyledProductsSliderSlide key={`ProductCard-${index}`}>
+                <ProductCard
+                  imageElement={item.imageElement}
+                  title={item.title}
+                  description={isMobile ? item?.description : ""}
+                />
+              </StyledProductsSliderSlide>
+            )
+          })}
+        </StyledProductsSliderSlides>
+      </StyledProductsSliderWrapper>
+      {!isMobile && (
+        <StyledProductsSliderContent ref={contentHolder as any}>
+          <Heading tag="h5" size="h5">
+            <strong>{activeElement?.title}</strong>
+            <br />
+            {activeElement?.description}
+          </Heading>
+        </StyledProductsSliderContent>
+      )}
+    </StyledProductsSlider>
+
+  )
+}
+
+export default ProductsSlider