indicator-ui 0.1.35 → 0.1.37

package/dist/index.js

@@ -55469,12 +55469,99 @@ var FADE_IN_ANIMATION = function FADE_IN_ANIMATION() {
     disappearMain: disappearMain
   };
 };
+var FADE_IN_FROM_TARGET_ANIMATION = function FADE_IN_FROM_TARGET_ANIMATION() {
+  var appear = function appear(props, timeline) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var modal = props.modal,
+      targetCenter = props.targetCenter,
+      backdrop = props.backdrop,
+      predictPos = props.predictPos,
+      modalSize = props.modalSize;
+    var _options$backdropColo4 = options.backdropColor,
+      backdropColor = _options$backdropColo4 === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo4,
+      _options$zIndex4 = options.zIndex,
+      zIndex = _options$zIndex4 === void 0 ? {} : _options$zIndex4;
+    var _zIndex$modal4 = zIndex.modal,
+      modalZIndex = _zIndex$modal4 === void 0 ? Z_INDEX_MODAL_DEFAULT : _zIndex$modal4,
+      _zIndex$backdrop4 = zIndex.backdrop,
+      backdropZIndex = _zIndex$backdrop4 === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop4;
+    var startPositionX = targetCenter[0] - predictPos[0] - modalSize[0] / 2;
+    var startPositionY = targetCenter[1] - predictPos[1] - modalSize[1] / 2;
+    timeline.set(modal, {
+      visibility: 'visible',
+      left: predictPos[0],
+      top: predictPos[1],
+      x: startPositionX,
+      y: startPositionY,
+      zIndex: modalZIndex,
+      opacity: 0,
+      scale: 0.1
+    }).set(backdrop, {
+      visibility: 'visible',
+      backgroundColor: backdropColor,
+      opacity: 0,
+      zIndex: backdropZIndex
+    }).to(modal, {
+      opacity: 1,
+      scale: 1,
+      duration: 0.3,
+      x: 0,
+      y: 0,
+      ease: 'power2.out'
+    }).to(backdrop, {
+      opacity: 1,
+      duration: 0.3,
+      ease: 'power2.out'
+    }, '<').set(modal, {
+      transform: 'none'
+    });
+    return timeline;
+  };
+  var disappear = function disappear(props, timeline) {
+    var modal = props.modal,
+      backdrop = props.backdrop;
+    timeline.to(modal, {
+      opacity: 0,
+      scale: 0.97,
+      duration: 0.2,
+      ease: 'power2.in'
+    }).to(backdrop, {
+      opacity: 0,
+      duration: 0.2,
+      ease: 'power2.in'
+    }, '<').set(modal, {
+      visibility: 'hidden'
+    }).set(backdrop, {
+      visibility: 'hidden'
+    });
+    return timeline;
+  };
+  var getInitStyle = function getInitStyle() {
+    return {
+      visibility: 'hidden',
+      position: 'fixed'
+    };
+  };
+  var getBackdropInitStyle = function getBackdropInitStyle() {
+    return {
+      position: 'fixed',
+      visibility: 'hidden'
+    };
+  };
+  return {
+    appear: appear,
+    disappear: disappear,
+    getInitStyle: getInitStyle,
+    getBackdropInitStyle: getBackdropInitStyle
+  };
+};
 var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
   return {
     'fade-in-scale-up': FADE_IN_SCALE_UP_ANIMATION(),
     'slide-up-fade-in': SLIDE_UP_FADE_IN_ANIMATION(),
     'slide-down-fade-in': SLIDE_DOWN_FADE_IN_ANIMATION(),
-    'fade-in': FADE_IN_ANIMATION()
+    'fade-in': FADE_IN_ANIMATION(),
+    'fade-in-from-target': FADE_IN_FROM_TARGET_ANIMATION()
   };
 };
 
@@ -55830,7 +55917,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 MOVING_DURATION = 0.1;
 var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -55847,7 +55934,7 @@ var DEFAULT_ANIMATION = function DEFAULT_ANIMATION() {
     top: top,
     left: left,
     duration: duration,
-    ease: "power2.out"
+    ease: "power3.out"
   });
   return timeline;
 };
@@ -68740,9 +68827,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components */ "./src/ui/MediaViewer/ui/components/index.ts");
-/* harmony import */ var _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui/MediaViewer/styles */ "./src/ui/MediaViewer/styles/index.ts");
-/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
+/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles */ "./src/ui/MediaViewer/styles/index.ts");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components */ "./src/ui/MediaViewer/ui/components/index.ts");
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -68754,15 +68841,15 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
-function MediaViewer(_ref) {
+var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var _media$curMediaIndex, _media$curMediaIndex2;
-  var _ref$media = _ref.media,
-    media = _ref$media === void 0 ? [] : _ref$media,
-    mediaIndex = _ref.mediaIndex,
-    _ref$nearestElementsO = _ref.nearestElementsOnly,
-    nearestElementsOnly = _ref$nearestElementsO === void 0 ? true : _ref$nearestElementsO,
-    onClose = _ref.onClose;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
+  var _props$media = props.media,
+    media = _props$media === void 0 ? [] : _props$media,
+    mediaIndex = props.mediaIndex,
+    _props$nearestElement = props.nearestElementsOnly,
+    nearestElementsOnly = _props$nearestElement === void 0 ? true : _props$nearestElement,
+    onClose = props.onClose;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(mediaIndex || 0),
     _useState2 = _slicedToArray(_useState, 2),
     curMediaIndex = _useState2[0],
     setCurMediaIndex = _useState2[1];
@@ -68774,15 +68861,15 @@ function MediaViewer(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     play = _useState6[0],
     setPlay = _useState6[1];
-  var getPrevIndex = function getPrevIndex(curIndex) {
-    return curIndex > 0 ? curIndex - 1 : undefined;
+  var hasPrevIndex = function hasPrevIndex(curIndex) {
+    return curIndex > 0;
   };
-  var getNextIndex = function getNextIndex(curIndex) {
-    return curIndex < media.length - 1 ? curIndex + 1 : undefined;
+  var hasNextIndex = function hasNextIndex(curIndex) {
+    return curIndex < media.length - 1;
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     var isValid = mediaIndex != null && mediaIndex >= 0 && mediaIndex < media.length;
-    if (mediaIndex !== curMediaIndex && isValid) {
+    if (isValid) {
       setCurMediaIndex(mediaIndex);
     }
   }, [mediaIndex]);
@@ -68821,7 +68908,7 @@ function MediaViewer(_ref) {
     if (item == null || nearestElementsOnly && !isNearestElement(curMediaIndex, idx)) return undefined;
     switch (item.type) {
       case 'video':
-        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.VideoViewer, {
+        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.VideoViewer, {
           src: item.src,
           muted: curMediaIndex === idx ? muted : undefined,
           play: curMediaIndex === idx ? play : undefined,
@@ -68830,7 +68917,7 @@ function MediaViewer(_ref) {
           } : undefined
         }, idx);
       case 'image':
-        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.ImageViewer, {
+        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.ImageViewer, {
           src: item.src
         }, idx);
       default:
@@ -68838,30 +68925,30 @@ function MediaViewer(_ref) {
     }
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.MediaViewer,
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_4__.Carousel, {
+    className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.MediaViewer,
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.Carousel, {
       activeIndex: curMediaIndex,
       setActiveIndex: setCurMediaIndex,
       children: media.map(function (item, idx) {
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-          className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.content,
+          className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.content,
           children: getContent(item, idx)
         }, idx);
       })
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-      className: _ui_MediaViewer_styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.control,
-      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_2__.ControlBar, {
+      className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.control,
+      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.ControlBar, {
         muted: muted,
         play: play,
         onPlay: ((_media$curMediaIndex = media[curMediaIndex]) === null || _media$curMediaIndex === void 0 ? void 0 : _media$curMediaIndex.type) === 'video' ? _play : undefined,
         onMute: ((_media$curMediaIndex2 = media[curMediaIndex]) === null || _media$curMediaIndex2 === void 0 ? void 0 : _media$curMediaIndex2.type) === 'video' ? mute : undefined,
-        onNext: getNextIndex(curMediaIndex) ? next : undefined,
-        onPrev: getPrevIndex(curMediaIndex) ? prev : undefined,
+        onNext: hasNextIndex(curMediaIndex) ? next : undefined,
+        onPrev: hasPrevIndex(curMediaIndex) ? prev : undefined,
         onClose: onClose
       })
     })]
   });
-}
+});
 
 /***/ }),