@onepercentio/one-ui 0.19.1 → 0.19.3

package/dist/components/Transition/MasksFactory/PhysicsSquares.js

@@ -1,86 +1,103 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = __importDefault(require("./utils"));
-const matter_js_1 = __importDefault(require("matter-js"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PhysicsSquares;
+var _utils = _interopRequireDefault(require("./utils"));
+var _matterJs = _interopRequireDefault(require("matter-js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /**
  * DO NOT DARE TO USE THIS IF YOU HAVE A MINIMAL RESPECT FOR PERFORMANCE
- *
+ * 
  * 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
  */
-function PhysicsSquares(amountOfVerticalSquares = 10) {
-    return function (el) {
-        const height = el.clientHeight;
-        const width = el.clientWidth;
-        const _ballsize = height / amountOfVerticalSquares;
-        const maximumBalls = width / _ballsize;
-        const amountOfBalls = Math.floor(maximumBalls);
-        const gridData = (0, utils_1.default)(amountOfVerticalSquares, amountOfBalls, _ballsize);
-        const _time = getComputedStyle(el).getPropertyValue("--animation-speed-transition");
-        const time = _time.endsWith("ms")
-            ? Number(_time.replace("ms", ""))
-            : Number(_time.replace("s", "")) * 1000;
-        const canvas = document.createElement("canvas");
-        canvas.width = el.clientWidth / 10;
-        canvas.height = el.clientHeight / 10;
-        // module aliases
-        var Engine = matter_js_1.default.Engine, Render = matter_js_1.default.Render, Runner = matter_js_1.default.Runner, Bodies = matter_js_1.default.Bodies, Composite = matter_js_1.default.Composite;
-        // create an engine
-        var engine = Engine.create();
-        // create a renderer
-        var render = Render.create({
-            engine: engine,
-            options: {
-                wireframes: false,
-                background: "black",
-                height: el.clientHeight,
-                width: el.clientWidth,
-            },
-            canvas: canvas,
-            bounds: {
-                min: {
-                    x: 0,
-                    y: 0,
-                },
-                max: {
-                    x: el.clientWidth,
-                    y: el.clientHeight,
-                },
-            },
-        });
-        var ground = Bodies.rectangle(0, el.clientHeight, el.clientWidth * 2, 10, {
-            render: {
-                fillStyle: "black",
-            },
-            angle: 0.1,
-            isStatic: true,
-        });
-        const gridBodies = gridData.map((a) => Bodies.circle(a.x + a.ballSize / 2 + (Math.random() * a.ballSize) / 2, a.y + a.ballSize / 2 + (Math.random() * a.ballSize) / 2, a.ballSize / 4 + (Math.random() * a.ballSize) / 4, {
-            density: 0.1,
-            render: {
-                fillStyle: "black",
-            },
-        }));
-        // add all of the bodies to the world
-        Composite.add(engine.world, [...gridBodies, ground]);
-        // run the renderer
-        Render.run(render);
-        // create runner
-        var runner = Runner.create();
-        // run the engine
-        Runner.run(runner, engine);
-        const i = setInterval(() => {
-            el.firstElementChild.style.webkitMaskImage = `url('${canvas.toDataURL("base64")}')`;
-        }, 1000 / 60);
-        setTimeout(() => {
-            clearInterval(i);
-            Runner.stop(runner);
-        }, time);
-        return ``;
-    };
-}
-exports.default = PhysicsSquares;
-//# sourceMappingURL=PhysicsSquares.js.map
+function PhysicsSquares() {
+  let amountOfVerticalSquares = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+  return function (el) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const _ballsize = height / amountOfVerticalSquares;
+    const maximumBalls = width / _ballsize;
+    const amountOfBalls = Math.floor(maximumBalls);
+    const gridData = (0, _utils.default)(amountOfVerticalSquares, amountOfBalls, _ballsize);
+    const _time = getComputedStyle(el).getPropertyValue("--animation-speed-transition");
+    const time = _time.endsWith("ms") ? Number(_time.replace("ms", "")) : Number(_time.replace("s", "")) * 1000;
+    const canvas = document.createElement("canvas");
+    canvas.width = el.clientWidth / 10;
+    canvas.height = el.clientHeight / 10;
+    // module aliases
+    var Engine = _matterJs.default.Engine,
+      Render = _matterJs.default.Render,
+      Runner = _matterJs.default.Runner,
+      Bodies = _matterJs.default.Bodies,
+      Composite = _matterJs.default.Composite;
+
+    // create an engine
+    var engine = Engine.create();
+
+    // create a renderer
+    var render = Render.create({
+      engine: engine,
+      options: {
+        wireframes: false,
+        background: "black",
+        height: el.clientHeight,
+        width: el.clientWidth
+      },
+      canvas: canvas,
+      bounds: {
+        min: {
+          x: 0,
+          y: 0
+        },
+        max: {
+          x: el.clientWidth,
+          y: el.clientHeight
+        }
+      }
+    });
+    var ground = Bodies.rectangle(0, el.clientHeight, el.clientWidth * 2, 10, {
+      render: {
+        fillStyle: "black"
+      },
+      angle: 0.1,
+      isStatic: true
+    });
+    const gridBodies = gridData.map(function (a) {
+      return Bodies.circle(a.x + a.ballSize / 2 + Math.random() * a.ballSize / 2, a.y + a.ballSize / 2 + Math.random() * a.ballSize / 2, a.ballSize / 4 + Math.random() * a.ballSize / 4, {
+        density: 0.1,
+        render: {
+          fillStyle: "black"
+        }
+      });
+    });
+
+    // add all of the bodies to the world
+    Composite.add(engine.world, [].concat(_toConsumableArray(gridBodies), [ground]));
+
+    // run the renderer
+    Render.run(render);
+
+    // create runner
+    var runner = Runner.create();
+
+    // run the engine
+    Runner.run(runner, engine);
+    const i = setInterval(function () {
+      el.firstElementChild.style.webkitMaskImage = "url('".concat(canvas.toDataURL("base64"), "')");
+    }, 1000 / 60);
+    setTimeout(function () {
+      clearInterval(i);
+      Runner.stop(runner);
+    }, time);
+    return "";
+  };
+}

package/dist/components/Transition/MasksFactory/SquareToBalls.js

@@ -1,56 +1,65 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const server_1 = require("react-dom/server");
-const react_1 = __importDefault(require("react"));
-const utils_1 = __importStar(require("./utils"));
+exports.default = _default;
+var _server = require("react-dom/server");
+var _react = _interopRequireDefault(require("react"));
+var _utils = _interopRequireWildcard(require("./utils"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * 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
  */
-function default_1(amountOfVerticalSquares = 10) {
-    return function (el) {
-        const height = el.clientHeight;
-        const width = el.clientWidth;
-        const _ballsize = height / amountOfVerticalSquares;
-        const maximumBalls = width / _ballsize;
-        const amountOfBalls = Math.floor(maximumBalls);
-        const time = (0, utils_1.getTime)(el);
-        const resultSvg = (0, server_1.renderToString)(react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", id: Date.now().toString() }, (0, utils_1.default)(amountOfVerticalSquares, amountOfBalls, _ballsize).map(({ ballSize, x, y }) => {
-            return (react_1.default.createElement("rect", { fill: "white" },
-                react_1.default.createElement("animate", { attributeName: "rx", attributeType: "XML", values: `${0}px;${ballSize / 2}px;${ballSize / 2}px`, dur: `${time}ms` }),
-                react_1.default.createElement("animate", { attributeName: "x", attributeType: "XML", values: `${x}px;${x}px;${x + ballSize / 2}px`, dur: `${time}ms` }),
-                react_1.default.createElement("animate", { attributeName: "y", attributeType: "XML", values: `${y}px;${y}px;${y + ballSize / 2}px`, dur: `${time}ms` }),
-                react_1.default.createElement("animate", { attributeName: "width", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` }),
-                react_1.default.createElement("animate", { attributeName: "height", attributeType: "XML", values: `${ballSize}px;${ballSize}px;${0}px`, dur: `${time}ms` })));
-        })));
-        return `url('data:image/svg+xml;charset=utf8,${encodeURIComponent(resultSvg)}')`;
-    };
-}
-exports.default = default_1;
-//# sourceMappingURL=SquareToBalls.js.map
+function _default() {
+  let amountOfVerticalSquares = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+  return function (el) {
+    const height = el.clientHeight;
+    const width = el.clientWidth;
+    const _ballsize = height / amountOfVerticalSquares;
+    const maximumBalls = width / _ballsize;
+    const amountOfBalls = Math.floor(maximumBalls);
+    const time = (0, _utils.getTime)(el);
+    const resultSvg = (0, _server.renderToString)( /*#__PURE__*/_react.default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      id: Date.now().toString()
+    }, (0, _utils.default)(amountOfVerticalSquares, amountOfBalls, _ballsize).map(function (_ref) {
+      let ballSize = _ref.ballSize,
+        x = _ref.x,
+        y = _ref.y;
+      return /*#__PURE__*/_react.default.createElement("rect", {
+        fill: "white"
+      }, /*#__PURE__*/_react.default.createElement("animate", {
+        attributeName: "rx",
+        attributeType: "XML",
+        values: "".concat(0, "px;", ballSize / 2, "px;").concat(ballSize / 2, "px"),
+        dur: "".concat(time, "ms")
+      }), /*#__PURE__*/_react.default.createElement("animate", {
+        attributeName: "x",
+        attributeType: "XML",
+        values: "".concat(x, "px;").concat(x, "px;").concat(x + ballSize / 2, "px"),
+        dur: "".concat(time, "ms")
+      }), /*#__PURE__*/_react.default.createElement("animate", {
+        attributeName: "y",
+        attributeType: "XML",
+        values: "".concat(y, "px;").concat(y, "px;").concat(y + ballSize / 2, "px"),
+        dur: "".concat(time, "ms")
+      }), /*#__PURE__*/_react.default.createElement("animate", {
+        attributeName: "width",
+        attributeType: "XML",
+        values: "".concat(ballSize, "px;").concat(ballSize, "px;", 0, "px"),
+        dur: "".concat(time, "ms")
+      }), /*#__PURE__*/_react.default.createElement("animate", {
+        attributeName: "height",
+        attributeType: "XML",
+        values: "".concat(ballSize, "px;").concat(ballSize, "px;", 0, "px"),
+        dur: "".concat(time, "ms")
+      }));
+    })));
+    return "url('data:image/svg+xml;charset=utf8,".concat(encodeURIComponent(resultSvg), "')");
+  };
+}

package/dist/components/Transition/MasksFactory/utils.js

@@ -1,32 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTime = void 0;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = buildGrid;
+exports.getTime = getTime;
 function buildGrid(amountOfVerticalSquares, howManyHorizontalSquare, ballSize) {
-    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,
-        };
-    });
+  return new Array(howManyHorizontalSquare * amountOfVerticalSquares).fill(undefined).map(function (_, 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: x,
+      y: y,
+      ballSize: ballSize,
+      column: modY,
+      row: modX
+    };
+  });
 }
-exports.default = buildGrid;
 function getTime(el) {
-    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;
-}
-exports.getTime = getTime;
-//# sourceMappingURL=utils.js.map
+  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;
+}