@onepercentio/one-ui 0.28.8 → 0.28.9

package/src/components/PaginationIndicator/PaginationIndicator.tsx

@@ -0,0 +1,365 @@
+import React, {
+  ComponentProps,
+  ForwardedRef,
+  forwardRef,
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+const MAX_BALLS = 7;
+const eachBallWidthEm = 1.2;
+
+const CENTER_GUIDE_BALL = 1;
+
+export enum PaginationIndicatorMode {
+  /** This will make the guide ball be kept on center  */
+  CENTERED,
+
+  /** This will make the guide ball move, while the indicator balls keep in place */
+  START,
+}
+export function PaginationIndicatorView({
+  size,
+  page: currentPage,
+  pages: decimalPages,
+  className,
+  onClickPage,
+  mode = PaginationIndicatorMode.CENTERED,
+  infinite,
+}: {
+  size: number;
+  page: number;
+  pages: number;
+  className?: string;
+  onClickPage?: (page: number) => void;
+  mode?: PaginationIndicatorMode;
+  infinite?: boolean;
+}) {
+  const maxBalls = useMemo(() => (infinite ? 5 : MAX_BALLS), [infinite]);
+  const page = useMemo(() => {
+    const floor = Math.floor(decimalPages);
+    const modulus = decimalPages % floor;
+
+    if (currentPage > floor) {
+      const currentFloorModulus = currentPage % floor;
+      const equivalent = (currentFloorModulus * 100) / modulus;
+
+      return floor + equivalent / 100;
+    } else {
+      return currentPage;
+    }
+  }, [currentPage, decimalPages]);
+  const rand = useMemo(() => Math.random().toString(), []);
+  const pageIndex = page - 1;
+  const pages = useMemo(() => Math.ceil(decimalPages), [decimalPages]);
+  const numBalls = useMemo(() => {
+    const numBalls = pages >= maxBalls ? maxBalls : Math.ceil(pages);
+
+    return numBalls;
+  }, [pages]);
+
+  const indexForTheBallsCenter = useMemo(
+    () => (infinite ? numBalls - 5 : numBalls - 1) / 2,
+    [numBalls, infinite]
+  );
+  const balls = useMemo(() => {
+    const indexForLastPages = pages + 1 - indexForTheBallsCenter;
+    /**
+     * Is the page index (position of the center)
+     * after the first pages and
+     * before the last pages */
+    const isCenterPage =
+      numBalls >= maxBalls &&
+      pageIndex > indexForTheBallsCenter &&
+      pageIndex < indexForLastPages - 1;
+    let modulus =
+      pageIndex %
+      (1 + (indexForTheBallsCenter - Math.floor(indexForTheBallsCenter)));
+    const resetPageIndex = isCenterPage
+      ? indexForTheBallsCenter + modulus
+      : pages < maxBalls
+      ? pageIndex
+      : pageIndex >= indexForLastPages - 1
+      ? numBalls - (pages - pageIndex)
+      : pageIndex;
+    const left = eachBallWidthEm * resetPageIndex;
+    const { pushBallsToRightBy, pushBallsToLeftBy, pushGuideToRightBy } =
+      mode === PaginationIndicatorMode.CENTERED
+        ? {
+            pushBallsToRightBy: Math.min(pages, maxBalls) * eachBallWidthEm,
+            pushBallsToLeftBy: left,
+            pushGuideToRightBy: 0,
+          }
+        : {
+            pushBallsToRightBy: (eachBallWidthEm - 0.5) / 2,
+            pushBallsToLeftBy: 0,
+            pushGuideToRightBy: left,
+          };
+    let pushToLeft: number = 0;
+    return new Array(CENTER_GUIDE_BALL + numBalls)
+      .fill(undefined)
+      .map((_, i) => {
+        const isLastBall = i === numBalls - 1;
+        const isFirstBall = i === 0;
+
+        if (i === numBalls) {
+          const diameter = 0.45 * 2;
+          const padding = (eachBallWidthEm - diameter) / 2;
+          return (
+            <rect
+              fill="#fff"
+              width={`${diameter}em`}
+              height={`${diameter}em`}
+              x={`${
+                pushBallsToRightBy - padding + pushGuideToRightBy - pushToLeft
+              }em`}
+              y={`${padding}em`}
+              rx={`${diameter / 2}em`}
+            />
+          );
+        }
+
+        const ballSize =
+          numBalls < maxBalls
+            ? 0.5
+            : page <= indexForTheBallsCenter + 1 && isLastBall
+            ? 0
+            : pageIndex >= indexForLastPages - 1 && isFirstBall
+            ? 0
+            : isCenterPage
+            ? isFirstBall
+              ? 0.5 - modulus * 0.5
+              : isLastBall
+              ? modulus * 0.5
+              : 0.5
+            : 0.5;
+
+        if (i === 0 && mode === PaginationIndicatorMode.START)
+          pushToLeft = (0.5 - ballSize) * 2.4;
+
+        return (
+          <rect
+            key={`guide-${i}`}
+            width={`${ballSize * 1.2}em`}
+            height={`${ballSize * 1.2}em`}
+            x={`${
+              pushBallsToRightBy +
+              i * eachBallWidthEm -
+              pushBallsToLeftBy -
+              pushToLeft
+            }em`}
+            y={`${(eachBallWidthEm - ballSize * 1.2) / 2}em`}
+            rx={`${(ballSize * 1.2) / 2}em`}
+            onClick={() => {
+              if (onClickPage) {
+                const pageClicked =
+                  (!isCenterPage
+                    ? pageIndex >= indexForLastPages - 1
+                      ? Math.floor(page) - resetPageIndex - 1
+                      : 0
+                    : Math.floor(page) - (indexForTheBallsCenter + 1)) +
+                  1 +
+                  i;
+                onClickPage(Math.round(pageClicked));
+              }
+            }}
+          />
+        );
+      });
+  }, [indexForTheBallsCenter, pageIndex, pages]);
+  const [guideBall, ...pageBalls] = balls.reverse();
+  let width = eachBallWidthEm * Math.min(pages, maxBalls) * 2;
+  if (mode === PaginationIndicatorMode.START) width /= 2;
+
+  return (
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={{
+        width: `${width}em`,
+        minWidth: `${width}em`,
+        height: "1.2em",
+        fontSize: `${size}px`,
+      }}
+    >
+      <filter id={`goo-${rand}`}>
+        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5" />
+        <feColorMatrix
+          in="blur"
+          mode="matrix"
+          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
+          result="goo"
+        />
+        <feBlend in2="goo" in="SourceGraphic" result="mix" />
+      </filter>
+      <mask id={`mask-${rand}`}>
+        <g filter={`url(#${`goo-${rand}`})`} fill="#fff">
+          {[pageBalls]}
+          {guideBall}
+        </g>
+      </mask>
+      <rect
+        x="0"
+        y="0"
+        mask={`url(#${`mask-${rand}`})`}
+        width="100%"
+        height="100%"
+        style={{ fill: "var(--digital-blue)" }}
+      ></rect>
+      {onClickPage && (
+        <g opacity={0} style={{ cursor: "pointer" }}>
+          {pageBalls}
+        </g>
+      )}
+    </svg>
+  );
+}
+
+export function AnimatedPaginationIndicator(
+  props: ComponentProps<typeof PaginationIndicatorView> & {
+    duration: number;
+  }
+) {
+  const prevPage = useRef(props.page);
+  const [pageProgress, setPageProgress] = useState(props.page);
+  useEffect(() => {
+    const diff = props.page - prevPage.current;
+    const diffPerStep = diff / 60;
+
+    const interval = setInterval(() => {
+      setPageProgress((prev) => {
+        const next = prev + diffPerStep;
+        if (diff < 0) {
+          if (next <= props.page) {
+            clearInterval(interval);
+            return props.page;
+          }
+        } else {
+          if (next >= props.page) {
+            clearInterval(interval);
+            return props.page;
+          }
+        }
+        return Number(next.toFixed(2));
+      });
+    }, props.duration / 60);
+
+    return () => {
+      prevPage.current = props.page;
+      clearInterval(interval);
+    };
+  }, [props.page]);
+
+  return <PaginationIndicatorView {...props} page={pageProgress} />;
+}
+
+function _PaginationIndicator(
+  {
+    scrollableRef,
+    estimatedWidth,
+    size,
+    className = "",
+    onClickPage,
+    mode,
+    infinite,
+  }: {
+    scrollableRef: RefObject<HTMLDivElement>;
+    estimatedWidth?: number;
+    size: number;
+    className?: string;
+    onClickPage?: (page: number) => void;
+  } & Pick<ComponentProps<typeof PaginationIndicatorView>, "mode" | "infinite">,
+  ref: ForwardedRef<{
+    refreshPages: () => void;
+  }>
+) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [defs, setDefs] =
+    useState<{
+      pages: number;
+    }>();
+
+  const refreshPages = useCallback(() => {
+    if (!scrollableRef.current) return;
+    const maxWidth =
+      estimatedWidth === undefined
+        ? scrollableRef.current!.scrollWidth
+        : estimatedWidth;
+
+    const pages = maxWidth / scrollableRef.current!.clientWidth;
+    if (pages > 1)
+      setDefs({
+        pages: infinite ? pages + 2 : pages,
+      });
+  }, [estimatedWidth, infinite]);
+
+  useEffect(() => refreshPages(), [refreshPages]);
+
+  const updatePageIndicators = useCallback(
+    (target: HTMLDivElement, pages: number) => {
+      if (!scrollableRef.current) return;
+      const eachPageWidth = scrollableRef.current!.clientWidth;
+      const page = 1 + target.scrollLeft / eachPageWidth;
+      const lastPageProgress = Math.floor(pages) + 1;
+      const maximumProgress = pages + 1;
+
+      const diffToMax = maximumProgress - lastPageProgress;
+      const currentProgressOnDiff = page - lastPageProgress;
+
+      if (page > lastPageProgress) {
+        const p = lastPageProgress + currentProgressOnDiff / diffToMax;
+        setCurrentPage(p);
+      } else setCurrentPage(page);
+    },
+    []
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      refreshPages,
+    }),
+    []
+  );
+
+  useEffect(() => {
+    if (!defs) return;
+    const el = scrollableRef.current!;
+    const onScroll = (e: Event) =>
+      updatePageIndicators(e.currentTarget as HTMLDivElement, defs.pages);
+    updatePageIndicators(el, defs.pages);
+    el.addEventListener("scroll", onScroll, {
+      passive: true,
+    });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+    };
+  }, [defs]);
+
+  const pages = useMemo(() => (defs ? defs.pages : undefined), [defs]);
+
+  return !pages ? null : (
+    <PaginationIndicatorView
+      pages={pages}
+      page={currentPage}
+      size={size}
+      className={className}
+      onClickPage={onClickPage}
+      mode={mode}
+      infinite={infinite}
+    />
+  );
+}
+
+/**
+ * A cool component to indicate how many pages are
+ **/
+const PaginationIndicator = forwardRef(_PaginationIndicator);
+export default PaginationIndicator;

package/src/components/PaginationIndicator/index.tsx

@@ -0,0 +1 @@
+export { default } from './PaginationIndicator';

package/src/components/Parallax/Parallax.module.scss

@@ -0,0 +1,28 @@
+@import "../../assets/styles/index.scss";
+
+.parallax {
+  display: flex;
+  position: relative;
+  transition: transform $fast;
+  overflow: hidden;
+  user-select: none;
+  transform: translate3d(0, 0, 0);
+}
+
+.reflection {
+  transform: translateX(-50%) translateY(-50%);
+  width: 40%;
+  pointer-events: none;
+  &::after {
+    background: radial-gradient(#fff2, #fff2 5%, #aaa0 50%);
+    background-size: 100% 100%;
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+  }
+  position: absolute;
+  left: -50%;
+  top: -50%;
+}

package/src/components/Parallax/Parallax.tsx

@@ -0,0 +1,248 @@
+import React, {
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  MutableRefObject,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+} from "react";
+import { throttle } from "lodash";
+import Styles from "./Parallax.module.scss";
+import {
+  flattenMatrix,
+  generateMatrixFromOperations,
+  invertMatrix,
+} from "./math/helpers";
+
+const MAXIMUM_PARALLAX = {
+  x: 20,
+  y: 20,
+};
+
+export function calculateDistanceRelativeToBounds(
+  mousePosition: number,
+  elementInitialPosition: number,
+  elementSizeDimension: number
+) {
+  const normalizeInitialPosition = mousePosition - elementInitialPosition;
+  const doNotAllowGoingBeyondLowerLimit = Math.max(normalizeInitialPosition, 0);
+  const doNotAllowHoingBeyondHigherLimit = Math.min(
+    doNotAllowGoingBeyondLowerLimit,
+    elementSizeDimension
+  );
+  const threeRule =
+    (doNotAllowHoingBeyondHigherLimit * 100) / elementSizeDimension;
+  const result = Math.round(threeRule) / 100;
+  return result;
+}
+
+export function givenTheRelativePositionHowMuchToRotate(
+  relativePosition: number,
+  maxRotation: number
+) {
+  return relativePosition * maxRotation - maxRotation / 2;
+}
+
+type Props = PropsWithChildren<{
+  className?: string;
+  active: boolean;
+  onClick?: (e: any) => void;
+  reflection?: boolean;
+  maxParallax?: {
+    x: number;
+    y: number;
+  };
+}> &
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+function _Parallax(
+  {
+    children,
+    className = "",
+    active,
+    onClick,
+    reflection,
+    maxParallax = MAXIMUM_PARALLAX,
+    ...props
+  }: Props,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const parallaxableRef = useRef<HTMLDivElement>(null);
+  const reflectionRef = useRef<HTMLDivElement>(null);
+  const multiplierRef = useRef<number>(1);
+  const initialPositionRef = useRef<string>(undefined);
+  useEffect(() => {
+    if (ref)
+      (ref as MutableRefObject<HTMLDivElement>).current =
+        parallaxableRef.current!;
+    const el = parallaxableRef.current!;
+    if (active && !initialPositionRef.current) {
+      initialPositionRef.current = getComputedStyle(el).transform;
+      if (initialPositionRef.current === "none")
+        initialPositionRef.current = "";
+      el.style.transform = `${initialPositionRef.current} rotateX(0deg) rotateY(0deg) translateZ(0px)`;
+    }
+    // eslint-disable-next-line
+  }, [active]);
+
+  useEffect(() => {
+    const el = parallaxableRef.current!;
+    if (active) {
+      const updatePositions = (relativeToX: number, relativeToY: number) => {
+        const rect = el.getBoundingClientRect();
+        const {
+          width: [x0, xW],
+          height: [y0, yH],
+        } = {
+          width: [rect.left, el.clientWidth],
+          height: [rect.top, el.clientHeight],
+        };
+        const distanceOffRight = calculateDistanceRelativeToBounds(
+          relativeToX,
+          x0,
+          xW
+        );
+        const distanceOffBottom = calculateDistanceRelativeToBounds(
+          relativeToY,
+          y0,
+          yH
+        );
+        const howMuchToRotateY =
+          givenTheRelativePositionHowMuchToRotate(
+            distanceOffRight,
+            maxParallax.y
+          ) * multiplierRef.current;
+        const howMuchToRotateX =
+          givenTheRelativePositionHowMuchToRotate(
+            distanceOffBottom,
+            maxParallax.x
+          ) * multiplierRef.current;
+
+        const howMuchToOpacify = Math.abs(
+          Math.abs(distanceOffBottom - 0.5) / 0.5
+        );
+        const howMuchToOpacifyHorizontal = Math.max(
+          Math.abs(Math.abs(distanceOffRight - 0.5) / 0.5),
+          Math.abs(Math.abs(distanceOffBottom - 0.5) / 0.5)
+        );
+
+        el.style.transform = `${
+          initialPositionRef.current
+        } rotateY(${howMuchToRotateY}deg) rotateX(${-howMuchToRotateX}deg) translateZ(${
+          multiplierRef.current === 1 ? 0 : -30
+        }px)`;
+
+        if (reflectionRef.current) {
+          reflectionRef.current.style.left = `${(1 - distanceOffRight) * 100}%`;
+          reflectionRef.current.style.top = `${(1 - distanceOffBottom) * 100}%`;
+          reflectionRef.current.style.opacity = `${Math.min(
+            howMuchToOpacify,
+            howMuchToOpacifyHorizontal
+          )}`;
+        }
+      };
+      const handler = throttle(({ x, y }: MouseEvent) => {
+        updatePositions(x, y);
+      }, 1000 / 30);
+      const touchHandler = throttle(({ touches }: TouchEvent) => {
+        const { pageX, pageY } = touches[0];
+        updatePositions(pageX, pageY);
+      }, 1000 / 30);
+      const mouseDownHandler = () => {
+        multiplierRef.current = 1.5;
+      };
+      const mouseUpHandler = () => {
+        multiplierRef.current = 1;
+      };
+      window.addEventListener("mousemove", handler);
+      window.addEventListener("touchmove", touchHandler);
+      let _inverseMatrix: number[] | undefined;
+      const _limits: {
+        [k in "beta" | "gamma"]?: [number, number];
+      } = {
+        beta: undefined,
+        gamma: undefined,
+      };
+      const orientationListener: (e: DeviceOrientationEvent) => void = ({
+        beta,
+        gamma,
+      }) => {
+        beta = beta! * 0.5;
+        gamma = gamma! * 0.5;
+        if (!_inverseMatrix) {
+          window.removeEventListener("mousemove", handler);
+          window.removeEventListener("touchmove", touchHandler);
+          const offset = 12.5;
+          _limits.beta = [beta! - offset, beta! + offset];
+          _limits.gamma = [gamma! - offset, gamma! + offset];
+        }
+        const _beta = Math.min(
+          _limits.beta![1],
+          Math.max(_limits.beta![0], beta!)
+        );
+        const _gamma = Math.min(
+          _limits.gamma![1],
+          Math.max(_limits.gamma![0], gamma!)
+        );
+        if (!_inverseMatrix) {
+          _inverseMatrix = flattenMatrix(
+            invertMatrix(
+              generateMatrixFromOperations(
+                {
+                  type: "rotateY",
+                  angle: _gamma!,
+                },
+                {
+                  type: "rotateX",
+                  angle: -_beta!,
+                }
+              )
+            )
+          );
+        }
+        el.style.transform = `matrix3d(${_inverseMatrix.join(
+          ","
+        )}) rotateX(${-_beta!}deg) rotateY(${_gamma}deg)`;
+      };
+      window.addEventListener("deviceorientation", orientationListener);
+      window.addEventListener("touchend", () => {
+        _inverseMatrix = undefined;
+      });
+      el.addEventListener("touchstart", mouseDownHandler);
+      el.addEventListener("touchend", mouseUpHandler);
+      el.addEventListener("mousedown", mouseDownHandler);
+      el.addEventListener("mouseup", mouseUpHandler);
+
+      return () => {
+        window.removeEventListener("deviceorientation", orientationListener);
+        window.removeEventListener("mousemove", handler);
+        window.removeEventListener("touchmove", touchHandler);
+        el.removeEventListener("mousedown", mouseDownHandler);
+        el.removeEventListener("mouseup", mouseUpHandler);
+        el.removeEventListener("touchstart", mouseDownHandler);
+        el.removeEventListener("touchend", mouseUpHandler);
+        // el.style.transform = initialPositionRef.current!;
+        el.style.transform = `rotateX(0deg) rotateY(0deg) translateZ(0px)`;
+      };
+    }
+  }, [active]);
+  return (
+    <div
+      onClick={onClick}
+      ref={parallaxableRef}
+      className={`${Styles.parallax} ${className}`}
+      {...props}
+    >
+      {children}
+      {reflection && <div ref={reflectionRef} className={Styles.reflection} />}
+    </div>
+  );
+}
+
+/**
+ * It holds a children and animates a tilt effect relative to mouse position
+ **/
+const Parallax = forwardRef(_Parallax);
+export default Parallax;

package/src/components/Parallax/index.tsx

@@ -0,0 +1 @@
+export { default } from './Parallax';