react-spring-carousel 3.0.0-beta002 → 3.0.0-beta005

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spring-carousel",
-  "version": "3.0.0-beta002",
+  "version": "3.0.0-beta005",
   "description": "A new <Carousel /> experience for the web",
   "homepage": "https://react-spring-carousel.emilianobucci.com",
   "repository": "https://github.com/Emiliano-Bucci/react-spring-carousel",
@@ -9,7 +9,6 @@
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm",
   "type": "module",
-  "types": "./dist/types/index.d.ts",
   "files": [
     "dist"
   ],
@@ -40,8 +39,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-node-resolve": "^13.1.3",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-interactions": "^6.5.12",
@@ -64,6 +61,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.1.0",
+    "typescript": "^4.8.4",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.22",
     "rollup-plugin-filesize": "^9.1.2",
@@ -71,16 +69,16 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-visualizer": "^5.8.2",
-    "typescript": "^4.8.4"
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@react-spring/web": "^9.5.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@react-spring/web": "^9.5.5",
     "@use-gesture/react": "^10.2.20",
-    "react-spring-carousel": "^3.0.0-beta001",
     "screenfull": "^5.2.0"
   }
 }

package/dist/esm/useThumbsModule-ce69c348.js

@@ -1,2 +0,0 @@
-import{useRef as e,useEffect as n}from"react";import t from"screenfull";import{jsx as r}from"react/jsx-runtime";import{useSpring as i}from"@react-spring/web";function u(){const t=e(null);return n((()=>{t.current=document.createElement("div")}),[]),{useListenToCustomEvent:function(e){n((()=>{function n(n){e(n.detail)}if(t.current)return t.current.addEventListener("RSC::Event",n,!1),()=>{var e;null===(e=t.current)||void 0===e||e.removeEventListener("RSC::Event",n,!1)}}),[])},emitEvent:function(e){if(t.current){const n=new CustomEvent("RSC::Event",{detail:e});t.current.dispatchEvent(n)}}}}function l({mainCarouselWrapperRef:r,emitEvent:i,handleResize:u}){const l=e(!1);function o(e){l.current=e}return n((()=>{function e(){document.fullscreenElement&&(o(!0),i({eventName:"onFullscreenChange",isFullscreen:!0}),u&&u()),document.fullscreenElement||(o(!1),i({eventName:"onFullscreenChange",isFullscreen:!1}),u&&u())}if(t.isEnabled)return t.on("change",e),()=>{t.isEnabled&&t.off("change",e)}}),[]),{enterFullscreen:function(e){t.isEnabled&&t.request(e||r.current)},exitFullscreen:function(){t.isEnabled&&t.exit()},getIsFullscreen:function(){return l.current}}}function o({thumbsSlideAxis:n="x",withThumbs:t=!1,prepareThumbsData:u,items:l}){const o=e(null),[c,s]=i((()=>({val:0})));function a(){var e;return Math.round(Number(null===(e=o.current)||void 0===e?void 0:e["x"===n?"scrollWidth":"scrollHeight"])-o.current.getBoundingClientRect()["x"===n?"width":"height"])}return{thumbsFragment:t?r("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:o,onWheel:()=>c.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===n?"row":"column"},"x"===n?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return u?u(e(l)):e(l)}().map((({id:e,renderThumb:n})=>{const t=`thumb-item-${e}`;return r("div",Object.assign({id:t,className:"thumb-item"},{children:n}),t)}))})):null,handleScroll:function(e){var t,r;const i=o.current?o.current.querySelector(`#thumb-item-${l[e].id}`):null;if(i&&o.current&&!function(e){const n=e.getBoundingClientRect();return n.top>=0&&n.left>=0&&n.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&n.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const e=i.offsetLeft,u=e>a()?a():e;s.start({from:{val:null!==(r=null===(t=o.current)||void 0===t?void 0:t["x"===n?"scrollLeft":"scrollTop"])&&void 0!==r?r:0},to:{val:u},onChange:({value:e})=>{o.current&&(o.current["x"===n?"scrollLeft":"scrollTop"]=Math.abs(e.val))}})}}}}export{o as a,l as b,u};
-//# sourceMappingURL=useThumbsModule-ce69c348.js.map

package/dist/esm/useThumbsModule-ce69c348.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useThumbsModule-ce69c348.js","sources":["../../src/modules/useEventsModule.ts","../../src/modules/useFullscreenModule.ts","../../src/modules/useThumbsModule.tsx"],"sourcesContent":["import { FullGestureState } from \"@use-gesture/react\";\nimport { useEffect, useRef } from \"react\";\nimport { SlideActionType, SlideMode } from \"../types/common\";\n\nconst eventLabel = \"RSC::Event\";\n\ntype OnSlideStartChange = {\n  eventName: \"onSlideStartChange\";\n  slideActionType: SlideActionType;\n  slideMode: SlideMode;\n  nextItem: {\n    index: number;\n    id: string;\n    startReached: boolean;\n    endReached: boolean;\n  };\n};\ntype OnSlideChange = {\n  eventName: \"onSlideChange\";\n  slideActionType: SlideActionType;\n  slideMode: SlideMode;\n  currentItem: {\n    index: number;\n    id: string;\n    startReached: boolean;\n    endReached: boolean;\n  };\n};\ntype OnFullscreenChange = {\n  eventName: \"onFullscreenChange\";\n  isFullscreen: boolean;\n};\ntype OnDrag = Omit<FullGestureState<\"drag\">, \"event\"> & {\n  eventName: \"onDrag\";\n  slideActionType: SlideActionType;\n};\n\ntype Events = OnSlideStartChange | OnSlideChange | OnDrag | OnFullscreenChange;\n\ntype EventHandler = (props: Events) => void;\n\nexport type EmitEvent = (event: Events) => void;\nexport type UseListenToCustomEvent = {\n  useListenToCustomEvent: (eventHandler: EventHandler) => void;\n  emitEvent: (event: Events) => void;\n};\n\nexport function useEventsModule() {\n  const targetEvent = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    targetEvent.current = document.createElement(\"div\");\n  }, []);\n\n  function useListenToCustomEvent(eventHandler: EventHandler) {\n    useEffect(() => {\n      function handleEvent(event: CustomEvent<Events>) {\n        eventHandler(event.detail);\n      }\n\n      if (targetEvent.current) {\n        // @ts-ignore\n        targetEvent.current.addEventListener(eventLabel, handleEvent, false);\n        return () => {\n          // @ts-ignore\n          targetEvent.current?.removeEventListener(\n            eventLabel,\n            handleEvent,\n            false\n          );\n        };\n      }\n    }, []);\n  }\n  function emitEvent(event: Events) {\n    if (targetEvent.current) {\n      const newEvent = new CustomEvent(eventLabel, {\n        detail: event,\n      });\n      targetEvent.current.dispatchEvent(newEvent);\n    }\n  }\n\n  return {\n    useListenToCustomEvent,\n    emitEvent,\n  };\n}\n","import { useRef, MutableRefObject, useEffect } from \"react\";\nimport screenfull from \"screenfull\";\nimport { EmitEvent } from \"./useEventsModule\";\n\ntype FullscreenModule = {\n  mainCarouselWrapperRef: MutableRefObject<HTMLDivElement | null>;\n  emitEvent: EmitEvent;\n  handleResize?(): void;\n};\n\nexport function useFullscreenModule({\n  mainCarouselWrapperRef,\n  emitEvent,\n  handleResize,\n}: FullscreenModule) {\n  const isFullscreen = useRef(false);\n\n  useEffect(() => {\n    function handleFullscreenChange() {\n      if (document.fullscreenElement) {\n        setIsFullscreen(true);\n        emitEvent({\n          eventName: \"onFullscreenChange\",\n          isFullscreen: true,\n        });\n\n        handleResize && handleResize();\n      }\n\n      if (!document.fullscreenElement) {\n        setIsFullscreen(false);\n        emitEvent({\n          eventName: \"onFullscreenChange\",\n          isFullscreen: false,\n        });\n        handleResize && handleResize();\n      }\n    }\n\n    if (screenfull.isEnabled) {\n      screenfull.on(\"change\", handleFullscreenChange);\n      return () => {\n        if (screenfull.isEnabled) {\n          screenfull.off(\"change\", handleFullscreenChange);\n        }\n      };\n    }\n  }, []);\n\n  function setIsFullscreen(_isFullscreen: boolean) {\n    isFullscreen.current = _isFullscreen;\n  }\n\n  function getIsFullscreen() {\n    return isFullscreen.current;\n  }\n\n  function enterFullscreen(elementRef?: HTMLElement) {\n    if (screenfull.isEnabled) {\n      screenfull.request(\n        (elementRef || mainCarouselWrapperRef.current) as Element\n      );\n    }\n  }\n\n  function exitFullscreen() {\n    screenfull.isEnabled && screenfull.exit();\n  }\n\n  return {\n    enterFullscreen,\n    exitFullscreen,\n    getIsFullscreen,\n  };\n}\n","import { useSpring } from \"@react-spring/web\";\nimport { useRef } from \"react\";\nimport {\n  SpringCarouselWithThumbs,\n  PrepareThumbsData,\n} from \"src/types/internals\";\n\ntype Props = {\n  withThumbs?: boolean;\n  thumbsSlideAxis: SpringCarouselWithThumbs[\"thumbsSlideAxis\"];\n  prepareThumbsData?: PrepareThumbsData;\n  items: SpringCarouselWithThumbs[\"items\"];\n};\n\nfunction isInViewport(el: HTMLElement) {\n  const rect = el.getBoundingClientRect();\n  return (\n    rect.top >= 0 &&\n    rect.left >= 0 &&\n    rect.bottom <=\n      (window.innerHeight || document.documentElement.clientHeight) &&\n    rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n  );\n}\n\nexport function useThumbsModule({\n  thumbsSlideAxis = \"x\",\n  withThumbs = false,\n  prepareThumbsData,\n  items,\n}: Props) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const [spring, setSpring] = useSpring(() => ({\n    val: 0,\n  }));\n\n  function getTotalScrollValue() {\n    return Math.round(\n      Number(\n        wrapperRef.current?.[\n          thumbsSlideAxis === \"x\" ? \"scrollWidth\" : \"scrollHeight\"\n        ]\n      ) -\n        wrapperRef.current!.getBoundingClientRect()[\n          thumbsSlideAxis === \"x\" ? \"width\" : \"height\"\n        ]\n    );\n  }\n\n  function handleScroll(activeItem: number) {\n    function getThumbNode() {\n      if (wrapperRef.current) {\n        return wrapperRef.current.querySelector(\n          `#thumb-item-${items[activeItem].id}`\n        ) as HTMLElement;\n      }\n      return null;\n    }\n\n    const thumbNode = getThumbNode();\n    if (thumbNode && wrapperRef.current) {\n      if (!isInViewport(thumbNode)) {\n        const offset = thumbNode.offsetLeft;\n        const val =\n          offset > getTotalScrollValue() ? getTotalScrollValue() : offset;\n\n        setSpring.start({\n          from: {\n            val:\n              wrapperRef.current?.[\n                thumbsSlideAxis === \"x\" ? \"scrollLeft\" : \"scrollTop\"\n              ] ?? 0,\n          },\n          to: {\n            val,\n          },\n          onChange: ({ value }) => {\n            if (wrapperRef.current) {\n              wrapperRef.current[\n                thumbsSlideAxis === \"x\" ? \"scrollLeft\" : \"scrollTop\"\n              ] = Math.abs(value.val);\n            }\n          },\n        });\n      }\n    }\n  }\n\n  function handlePrepareThumbsData() {\n    function getPreparedItems(\n      _items: ReturnType<PrepareThumbsData>\n    ): ReturnType<PrepareThumbsData> {\n      return _items.map((i) => ({\n        id: i.id,\n        renderThumb: i.renderThumb,\n      }));\n    }\n\n    if (prepareThumbsData) {\n      return prepareThumbsData(getPreparedItems(items));\n    }\n    return getPreparedItems(items);\n  }\n\n  const thumbsFragment = withThumbs ? (\n    <div\n      className=\"use-spring-carousel-thumbs-wrapper\"\n      ref={wrapperRef}\n      onWheel={() => spring.val.stop()}\n      style={{\n        display: \"flex\",\n        flex: \"1\",\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        flexDirection: thumbsSlideAxis === \"x\" ? \"row\" : \"column\",\n        ...(thumbsSlideAxis === \"x\"\n          ? { overflowX: \"auto\" }\n          : {\n              overflowY: \"auto\",\n              maxHeight: \"100%\",\n            }),\n      }}\n    >\n      {handlePrepareThumbsData().map(({ id, renderThumb }) => {\n        const thumbId = `thumb-item-${id}`;\n        return (\n          <div key={thumbId} id={thumbId} className=\"thumb-item\">\n            {renderThumb}\n          </div>\n        );\n      })}\n    </div>\n  ) : null;\n\n  return {\n    thumbsFragment,\n    handleScroll,\n  };\n}\n"],"names":["useEventsModule","targetEvent","useRef","useEffect","current","document","createElement","useListenToCustomEvent","eventHandler","handleEvent","event","detail","addEventListener","_a","removeEventListener","emitEvent","newEvent","CustomEvent","dispatchEvent","useFullscreenModule","mainCarouselWrapperRef","handleResize","isFullscreen","setIsFullscreen","_isFullscreen","handleFullscreenChange","fullscreenElement","eventName","screenfull","isEnabled","on","off","enterFullscreen","elementRef","request","exitFullscreen","exit","getIsFullscreen","useThumbsModule","thumbsSlideAxis","withThumbs","prepareThumbsData","items","wrapperRef","spring","setSpring","useSpring","val","getTotalScrollValue","Math","round","Number","getBoundingClientRect","thumbsFragment","_jsx","Object","assign","className","ref","onWheel","stop","style","display","flex","position","width","height","flexDirection","overflowX","overflowY","maxHeight","children","getPreparedItems","_items","map","i","id","renderThumb","handlePrepareThumbsData","thumbId","handleScroll","activeItem","thumbNode","querySelector","el","rect","top","left","bottom","window","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth","isInViewport","offset","offsetLeft","start","from","to","onChange","value","abs"],"mappings":"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"}