indicator-ui 0.1.26 → 0.1.27

package/dist/index.js

@@ -54363,8 +54363,8 @@ function useBackdropModal() {
     setIsShow(true);
     requestAnimationFrame(function () {
       reinit();
-      appearanceAnim();
       resizeObserverService.reinit();
+      appearanceAnim();
     });
   };
   var close = function close() {
@@ -55131,15 +55131,21 @@ __webpack_require__.r(__webpack_exports__);
 var BACKDROP_BACKGROUND_COLOR = 'rgba(0, 0, 0, 0.3)';
 var Z_INDEX_MODAL_DEFAULT = 15;
 var Z_INDEX_BACKDROP_DEFAULT = 14;
+var WINDOW_SIZE_DEFAULT = 1920;
 var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
-  var appear = function appear(props, timeline, options) {
-    var _options$zIndex, _options$zIndex2;
+  var appearStart = function appearStart(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var modal = props.modal,
       backdrop = props.backdrop,
       predictPos = props.predictPos;
-    var modalZIndex = (options === null || options === void 0 || (_options$zIndex = options.zIndex) === null || _options$zIndex === void 0 ? void 0 : _options$zIndex.modal) || Z_INDEX_MODAL_DEFAULT;
-    var backdropZIndex = (options === null || options === void 0 || (_options$zIndex2 = options.zIndex) === null || _options$zIndex2 === void 0 ? void 0 : _options$zIndex2.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
-    var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
+    var _options$backdropColo = options.backdropColor,
+      backdropColor = _options$backdropColo === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo,
+      _options$zIndex = options.zIndex,
+      zIndex = _options$zIndex === void 0 ? {} : _options$zIndex;
+    var _zIndex$modal = zIndex.modal,
+      modalZIndex = _zIndex$modal === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal,
+      _zIndex$backdrop = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55152,7 +55158,13 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
       backgroundColor: backdropColor,
       opacity: 0,
       zIndex: backdropZIndex
-    }).to(modal, {
+    });
+    return timeline;
+  };
+  var appearMain = function appearMain(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
       opacity: 1,
       scale: 1,
       duration: 0.25,
@@ -55166,7 +55178,13 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
     });
     return timeline;
   };
-  var disappear = function disappear(props, timeline) {
+  var appear = function appear(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    appearStart(props, timeline, options);
+    appearMain(props, timeline);
+    return timeline;
+  };
+  var disappearMain = function disappearMain(props, timeline) {
     var modal = props.modal,
       backdrop = props.backdrop;
     timeline.to(modal, {
@@ -55178,13 +55196,24 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
-    }, '<').set(modal, {
+    }, '<');
+    return timeline;
+  };
+  var disappearEnd = function disappearEnd(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.set(modal, {
       visibility: 'hidden'
     }).set(backdrop, {
       visibility: 'hidden'
     });
     return timeline;
   };
+  var disappear = function disappear(props, timeline) {
+    disappearMain(props, timeline);
+    disappearEnd(props, timeline);
+    return timeline;
+  };
   var getInitStyle = function getInitStyle() {
     return {
       visibility: 'hidden',
@@ -55201,19 +55230,28 @@ var FADE_IN_SCALE_UP_ANIMATION = function FADE_IN_SCALE_UP_ANIMATION() {
     appear: appear,
     disappear: disappear,
     getInitStyle: getInitStyle,
-    getBackdropInitStyle: getBackdropInitStyle
+    getBackdropInitStyle: getBackdropInitStyle,
+    appearStart: appearStart,
+    appearMain: appearMain,
+    disappearEnd: disappearEnd,
+    disappearMain: disappearMain
   };
 };
 var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight) {
-  var appear = function appear(props, timeline, options) {
-    var _options$zIndex3, _options$zIndex4;
+  var appearStart = function appearStart(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var hideHeight = getHideHeight(props);
     var modal = props.modal,
       backdrop = props.backdrop,
       predictPos = props.predictPos;
-    var modalZIndex = (options === null || options === void 0 || (_options$zIndex3 = options.zIndex) === null || _options$zIndex3 === void 0 ? void 0 : _options$zIndex3.modal) || Z_INDEX_MODAL_DEFAULT;
-    var backdropZIndex = (options === null || options === void 0 || (_options$zIndex4 = options.zIndex) === null || _options$zIndex4 === void 0 ? void 0 : _options$zIndex4.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
-    var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
+    var _options$backdropColo2 = options.backdropColor,
+      backdropColor = _options$backdropColo2 === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo2,
+      _options$zIndex2 = options.zIndex,
+      zIndex = _options$zIndex2 === void 0 ? {} : _options$zIndex2;
+    var _zIndex$modal2 = zIndex.modal,
+      modalZIndex = _zIndex$modal2 === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal2,
+      _zIndex$backdrop2 = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop2 === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop2;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55225,6 +55263,15 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
       backgroundColor: backdropColor,
       opacity: 0,
       zIndex: backdropZIndex
+    });
+    return timeline;
+  };
+  var appearMain = function appearMain(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop,
+      predictPos = props.predictPos;
+    timeline.set(modal, {
+      left: predictPos[0]
     }).to(modal, {
       top: predictPos[1],
       duration: 0.3,
@@ -55242,7 +55289,13 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
     });
     return timeline;
   };
-  var disappear = function disappear(props, timeline) {
+  var appear = function appear(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    appearStart(props, timeline, options);
+    appearMain(props, timeline);
+    return timeline;
+  };
+  var disappearMain = function disappearMain(props, timeline) {
     var modal = props.modal,
       backdrop = props.backdrop;
     var hideHeight = getHideHeight(props);
@@ -55258,13 +55311,24 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
-    }, '<').set(modal, {
+    }, '<');
+    return timeline;
+  };
+  var disappearEnd = function disappearEnd(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.set(modal, {
       visibility: 'hidden'
     }).set(backdrop, {
       visibility: 'hidden'
     });
     return timeline;
   };
+  var disappear = function disappear(props, timeline) {
+    disappearMain(props, timeline);
+    disappearEnd(props, timeline);
+    return timeline;
+  };
   var getInitStyle = function getInitStyle() {
     return {
       visibility: 'hidden',
@@ -55281,15 +55345,18 @@ var SLIDE_BASE_FADE_IN_ANIMATION = function SLIDE_BASE_FADE_IN_ANIMATION(getHide
     appear: appear,
     disappear: disappear,
     getInitStyle: getInitStyle,
-    getBackdropInitStyle: getBackdropInitStyle
+    getBackdropInitStyle: getBackdropInitStyle,
+    appearStart: appearStart,
+    appearMain: appearMain,
+    disappearEnd: disappearEnd,
+    disappearMain: disappearMain
   };
 };
 var SLIDE_UP_FADE_IN_ANIMATION = function SLIDE_UP_FADE_IN_ANIMATION() {
   var getHideHeight = function getHideHeight(props) {
-    var predictPos = props.predictPos;
-    var WINDOW_SIZE_DEFAULT = 1920;
+    var modalSize = props.modalSize;
     var windowHeight = typeof window !== 'undefined' ? window.innerHeight : WINDOW_SIZE_DEFAULT;
-    return windowHeight - predictPos[1];
+    return windowHeight + modalSize[1];
   };
   return SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight);
 };
@@ -55302,14 +55369,19 @@ var SLIDE_DOWN_FADE_IN_ANIMATION = function SLIDE_DOWN_FADE_IN_ANIMATION() {
   return SLIDE_BASE_FADE_IN_ANIMATION(getHideHeight);
 };
 var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
-  var appear = function appear(props, timeline, options) {
-    var _options$zIndex5, _options$zIndex6;
+  var appearStart = function appearStart(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var modal = props.modal,
       backdrop = props.backdrop,
       predictPos = props.predictPos;
-    var modalZIndex = (options === null || options === void 0 || (_options$zIndex5 = options.zIndex) === null || _options$zIndex5 === void 0 ? void 0 : _options$zIndex5.modal) || Z_INDEX_MODAL_DEFAULT;
-    var backdropZIndex = (options === null || options === void 0 || (_options$zIndex6 = options.zIndex) === null || _options$zIndex6 === void 0 ? void 0 : _options$zIndex6.backdrop) || Z_INDEX_BACKDROP_DEFAULT;
-    var backdropColor = (options === null || options === void 0 ? void 0 : options.backdropColor) || BACKDROP_BACKGROUND_COLOR;
+    var _options$zIndex3 = options.zIndex,
+      zIndex = _options$zIndex3 === void 0 ? {} : _options$zIndex3,
+      _options$backdropColo3 = options.backdropColor,
+      backdropColor = _options$backdropColo3 === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo3;
+    var _zIndex$modal3 = zIndex.modal,
+      modalZIndex = _zIndex$modal3 === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal3,
+      _zIndex$backdrop3 = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop3 === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop3;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55321,7 +55393,13 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
       backgroundColor: backdropColor,
       opacity: 0,
       zIndex: backdropZIndex
-    }).to(modal, {
+    });
+    return timeline;
+  };
+  var appearMain = function appearMain(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
       opacity: 1,
       duration: 0.25,
       ease: 'power2.out'
@@ -55334,7 +55412,12 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
     });
     return timeline;
   };
-  var disappear = function disappear(props, timeline) {
+  var appear = function appear(props, timeline, options) {
+    appearStart(props, timeline, options);
+    appearMain(props, timeline);
+    return timeline;
+  };
+  var disappearMain = function disappearMain(props, timeline) {
     var modal = props.modal,
       backdrop = props.backdrop;
     timeline.to(modal, {
@@ -55345,13 +55428,24 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
       opacity: 0,
       duration: 0.2,
       ease: 'power2.in'
-    }, '<').set(modal, {
+    }, '<');
+    return timeline;
+  };
+  var disappearEnd = function disappearEnd(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.set(modal, {
       visibility: 'hidden'
     }).set(backdrop, {
       visibility: 'hidden'
     });
     return timeline;
   };
+  var disappear = function disappear(props, timeline) {
+    disappearMain(props, timeline);
+    disappearEnd(props, timeline);
+    return timeline;
+  };
   var getInitStyle = function getInitStyle() {
     return {
       visibility: 'hidden',
@@ -55368,7 +55462,11 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
     appear: appear,
     disappear: disappear,
     getInitStyle: getInitStyle,
-    getBackdropInitStyle: getBackdropInitStyle
+    getBackdropInitStyle: getBackdropInitStyle,
+    appearStart: appearStart,
+    appearMain: appearMain,
+    disappearEnd: disappearEnd,
+    disappearMain: disappearMain
   };
 };
 var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
@@ -55673,6 +55771,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   MOVING_ANIMATIONS: () => (/* binding */ MOVING_ANIMATIONS)
 /* harmony export */ });
+var MOVING_DURATION = 0.05;
 var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -55680,13 +55779,15 @@ var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   var element = args[0],
     timeline = args[1],
     options = args[2];
-  var place = options.place;
+  var place = options.place,
+    _options$duration = options.duration,
+    duration = _options$duration === void 0 ? MOVING_DURATION : _options$duration;
   var left = place.left,
     top = place.top;
-  timeline.clear().to(element, {
+  timeline.to(element, {
     top: top,
     left: left,
-    duration: 0.1,
+    duration: duration,
     ease: "power1.out"
   });
   return timeline;
@@ -56007,11 +56108,27 @@ function useBackgroundModalAnim() {
     var _getObjData2 = getObjData(),
       predictPlace = _getObjData2.predictPlace;
     var timeline = getTimeline();
-    var additionTimeline = initAdditionTimeline();
+    var additionTimeline = getAdditionTimeline(0);
+    var secondaryAdditionTimeline = getAdditionTimeline(1);
     var newPlace = predictPlace;
     var obj = ref.current;
     if (obj) {
-      if (timeline.progress() === 1) {
+      if (timeline.isActive()) {
+        additionTimeline.clear();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
+          place: {
+            left: newPlace[0]
+          }
+        }).play();
+        secondaryAdditionTimeline.clear();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, secondaryAdditionTimeline, {
+          place: {
+            top: newPlace[1]
+          }
+        });
+        timeline.add(secondaryAdditionTimeline.play());
+      } else {
+        additionTimeline.clear();
         (0,_assets__WEBPACK_IMPORTED_MODULE_1__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
           place: {
             left: newPlace[0],
@@ -56044,10 +56161,7 @@ function useBackgroundModalAnim() {
       var props = getAnimationProps();
       if (props) {
         timeline.clear();
-        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].disappear(props, timeline, {
-          zIndex: zIndex,
-          backdropColor: backdropColor
-        }).play();
+        (0,_assets__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS)()[animeType].disappear(props, timeline).play();
       }
     }
   }
@@ -56277,11 +56391,9 @@ function useModalAnim() {
     var newPlace = smartPlacementServices.calc();
     var obj = ref.current;
     if (obj) {
-      if (timeline.progress() === 1) {
-        (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
-          place: newPlace
-        }).play();
-      }
+      (0,_assets__WEBPACK_IMPORTED_MODULE_2__.MOVING_ANIMATIONS)()["default"](obj, additionTimeline, {
+        place: newPlace
+      }).play();
     }
   }
   function appearanceAnim() {