@onepercentio/one-ui 0.29.2 → 0.29.5

package/src/components/Transition/MasksFactory/SquareToBalls.tsx

@@ -1,66 +0,0 @@
-import { renderToString } from "react-dom/server";
-import React from "react";
-import buildGrid, { getTime } from "./utils";
-
-/**
- * Creates an svg that transitions from a square grid to rounded corners and them shrinks the balls to reveal the content
- * @param amountOfVerticalSquares The amount of squares vertically to be shown
- */
-export default function (amountOfVerticalSquares: number = 10) {
-  return function (el: HTMLDivElement) {
-    const height = el.clientHeight;
-    const width = el.clientWidth;
-    const _ballsize = height / amountOfVerticalSquares;
-    const maximumBalls = width / _ballsize;
-    const amountOfBalls = Math.floor(maximumBalls);
-
-    const time = getTime(el);
-
-    const resultSvg = renderToString(
-      <svg xmlns="http://www.w3.org/2000/svg" id={Date.now().toString()}>
-        {buildGrid(amountOfVerticalSquares, amountOfBalls, _ballsize).map(
-          ({ ballSize, x, y }) => {
-            return (
-              <rect fill="white">
-                <animate
-                  attributeName="rx"
-                  attributeType="XML"
-                  values={`${0}px;${ballSize / 2}px;${ballSize / 2}px`}
-                  dur={`${time}ms`}
-                />
-                <animate
-                  attributeName="x"
-                  attributeType="XML"
-                  values={`${x}px;${x}px;${x + ballSize / 2}px`}
-                  dur={`${time}ms`}
-                />
-                <animate
-                  attributeName="y"
-                  attributeType="XML"
-                  values={`${y}px;${y}px;${y + ballSize / 2}px`}
-                  dur={`${time}ms`}
-                />
-                <animate
-                  attributeName="width"
-                  attributeType="XML"
-                  values={`${ballSize}px;${ballSize}px;${0}px`}
-                  dur={`${time}ms`}
-                />
-                <animate
-                  attributeName="height"
-                  attributeType="XML"
-                  values={`${ballSize}px;${ballSize}px;${0}px`}
-                  dur={`${time}ms`}
-                />
-              </rect>
-            );
-          }
-        )}
-      </svg>
-    );
-
-    return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(
-      resultSvg
-    )}')`;
-  };
-}

package/src/components/Transition/MasksFactory/utils.ts

@@ -1,35 +0,0 @@
-export default function buildGrid(
-  amountOfVerticalSquares: number,
-  howManyHorizontalSquare: number,
-  ballSize: number
-) {
-  return new Array(howManyHorizontalSquare * amountOfVerticalSquares)
-    .fill(undefined)
-    .map((_, i) => {
-      const modX = Math.floor(i / howManyHorizontalSquare);
-      const modY = i - modX * howManyHorizontalSquare;
-      const ballsize = ballSize * 1.1;
-      const padding = (ballsize - ballSize) / 2;
-      const x = modY * ballSize - padding;
-      const y = modX * ballSize - padding;
-
-      return {
-        x,
-        y,
-        ballSize,
-        column: modY,
-        row: modX,
-      };
-    });
-}
-
-export function getTime(el: HTMLDivElement) {
-  const _time =
-    getComputedStyle(el.firstElementChild!).getPropertyValue(
-      "--animation-speed-transition"
-    ) || "250ms";
-  const __time = _time.endsWith("ms")
-    ? Number(_time.replace("ms", ""))
-    : Number(_time.replace("s", "")) * 1000;
-  return __time + 50;
-}

package/src/components/Transition/Transition.module.scss

@@ -1,211 +0,0 @@
-@import "../../assets/styles/index.scss";
-
-.section {
-  * {
-    box-sizing: border-box;
-  }
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  > div {
-    display: flex;
-    flex-direction: column;
-    min-height: inherit;
-    min-width: 100%;
-    animation-duration: var(--animation-speed-transition, $fast);
-    animation-timing-function: var(--animation-timing-transition, initial);
-    animation-fill-mode: forwards;
-    transform-origin: inherit;
-  }
-}
-
-div.stub {
-  animation-name: stub;
-  position: absolute;
-  pointer-events: none;
-}
-
-div.stubEntering {
-  animation-name: stub;
-  z-index: -1;
-}
-@keyframes stub {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-div.entranceLeft {
-  animation-name: entranceLeft;
-}
-div.exitLeft {
-  animation-name: exitLeft;
-}
-
-@keyframes entranceLeft {
-  0% {
-    margin-left: -100%;
-  }
-  100% {
-    margin-left: 0%;
-  }
-}
-@keyframes exitLeft {
-  0% {
-    margin-left: 0%;
-  }
-  100% {
-    margin-left: -100%;
-  }
-}
-
-div.fadeOut {
-  animation-name: fadeOut;
-  position: absolute;
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-div.scaleIn {
-  animation-fill-mode: forwards;
-  animation-name: scaleIn;
-}
-
-@keyframes scaleIn {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-div.scaleOut {
-  animation-fill-mode: initial;
-  animation-name: scaleOut;
-}
-
-@keyframes scaleOut {
-  0% {
-    position: absolute;
-    transform: scale(1);
-  }
-  100% {
-    position: absolute;
-    transform: scale(0);
-  }
-}
-
-div.fadeIn {
-  animation-name: fadeIn;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInDelayed {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes fadeOutDelayed {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.fadeInDelayed {
-  animation-name: fadeInDelayed;
-}
-
-.fadeOutAbsolute {
-  position: absolute;
-  animation-name: fadeOutDelayed;
-}
-
-@keyframes flip {
-  0% {
-    transform: rotateX(0deg);
-  }
-
-  25% {
-    transform: rotateX(36deg);
-  }
-
-  50% {
-    transform: rotateX(90deg);
-  }
-
-  75% {
-    transform: rotateX(90deg);
-  }
-
-  100% {
-    transform: rotateX(90deg);
-  }
-}
-@keyframes flipIn {
-  0% {
-    transform: rotateX(0deg);
-    opacity: 0;
-  }
-
-  25% {
-    transform: rotateX(0deg);
-  }
-
-  50% {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-  51% {
-    opacity: 1;
-  }
-
-  75% {
-    transform: rotateX(36deg);
-  }
-
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-.flipBottomUpOut {
-  transform-origin: 50% 50% !important;
-  position: absolute !important;
-  animation-name: flip;
-  animation-timing-function: linear !important;
-}
-.flipBottomUpIn {
-  transform-origin: 50% 50% !important;
-  animation-name: flipIn;
-  animation-timing-function: linear !important;
-}