@onepercentio/one-ui 0.20.0 → 0.20.2

package/dist/hooks/useHero.d.ts

@@ -57,4 +57,9 @@ export default function useHero(id: string, options?: Partial<{
     getHerosOnScreen: () => HTMLDivElement[];
     trigger: () => void;
 };
+declare type EVENTS_INTERFACE = Parameters<typeof useHero>[2];
+declare type TRANSITION_TYPES = "ACCELERATION";
+export declare const TRANSITION_FACTORY: {
+    [n in TRANSITION_TYPES]: (events?: EVENTS_INTERFACE) => EVENTS_INTERFACE;
+};
 export {};

package/dist/hooks/useHero.js

@@ -1,12 +1,20 @@
 "use strict";
 
+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
 });
+exports.TRANSITION_FACTORY = void 0;
 exports.default = useHero;
 var _react = require("react");
 var _ownEvent = _interopRequireDefault(require("../utils/ownEvent"));
+var _useHeroModule = _interopRequireDefault(require("./useHero.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
@@ -138,7 +146,7 @@ function useHero(id) {
         /** Set the clone over the new position */
         const willMove = setCloneToCoordinatesOf(el);
         if (!willMove) cleanup();else {
-          for (let propToTransition of propsToTransition) clone.style[propToTransition] = el.style[propToTransition];
+          for (let propToTransition of propsToTransition) clone.style[propToTransition] = window.getComputedStyle(el)[propToTransition];
           const transitionEndCb = (0, _ownEvent.default)(function (_ref3) {
             let target = _ref3.target,
               currentTarget = _ref3.currentTarget;
@@ -181,4 +189,35 @@ function isElementOutsideContainer(container, coordinates) {
     const elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width || containerBounds.top - coordinates.top >= coordinates.height;
     return elementUnderflowsViewport || elementOverflowsViewport;
   }
-}
+}
+function centerPoint(rect) {
+  return [rect.left + rect.width / 2, rect.top + rect.height / 2];
+}
+const angle = function angle(pointA, pointB) {
+  return Number((Math.atan2(pointA[1] - pointB[1], pointA[0] - pointB[0]) * (179.08 / Math.PI)).toFixed(5));
+};
+const TRANSITION_FACTORY = {
+  ACCELERATION: function ACCELERATION(events) {
+    return _objectSpread(_objectSpread({}, events), {}, {
+      onHeroStart: function onHeroStart(clone, origin, target) {
+        if (events !== null && events !== void 0 && events.onHeroStart) events.onHeroStart(clone, origin, target);
+        clone.classList.add(_useHeroModule.default.acceleration);
+        const centerPointOrigin = centerPoint(origin.getBoundingClientRect());
+        const centerPointDestination = centerPoint(target.getBoundingClientRect());
+        const angleBetweenElements = angle(centerPointOrigin, centerPointDestination);
+        const vectorX = Math.sin(angleBetweenElements);
+        const vectorY = Math.cos(angleBetweenElements);
+        const rotateY = (10 * vectorY).toFixed(0);
+        const originX = (vectorY + 1) * 50;
+        const rotateX = -(10 * vectorX).toFixed(0);
+        const originY = (vectorX + 1) * 50;
+        clone.style.setProperty("--stage-1", "rotateY(".concat(rotateY, "deg) rotateX(").concat(-rotateX, "deg)"));
+        clone.style.setProperty("--stage-2", "rotateY(".concat(-rotateY * 0.3, "deg) rotateX(").concat(rotateX * 0.3, "deg)"));
+        clone.style.setProperty("--origin-1", "".concat(originX, "% ").concat(originY, "%"));
+        clone.style.setProperty("--origin-2", "".concat(100 - originX, "% ").concat(100 - originY, "%"));
+        document.body.style.perspective = "100vw";
+      }
+    });
+  }
+};
+exports.TRANSITION_FACTORY = TRANSITION_FACTORY;

package/dist/hooks/useHero.module.scss

@@ -0,0 +1,33 @@
+$timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
+// $timing: cubic-bezier(0.73, -0.49, 0.16, 1.4);
+
+.acceleration {
+  --animation--speed-fast: 1s;
+  animation-name: acceleration;
+  animation-duration: var(--animation--speed-fast);
+  animation-timing-function: $timing;
+  transition-timing-function: $timing !important;
+  transform-origin: var(--origin-1);
+}
+
+@keyframes acceleration {
+  0% {
+    transform: rotateY(0deg);
+  }
+  10% {
+    transform-origin: var(--origin-1);
+    transform: var(--stage-1);
+  }
+
+  70% {
+    transform: var(--stage-1);
+    transform-origin: var(--origin-1);
+  }
+  85% {
+    transform-origin: var(--origin-2);
+    transform: var(--stage-2);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",