react-tiny-slider/dist/react-tiny-slider.mjs.map

A react wrapper for tiny-slider library

{"version":3,"file":"react-tiny-slider.mjs","sources":["../src/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  CSSProperties,\n  MouseEvent,\n  useEffect,\n  useRef,\n  useCallback\n} from 'react'\nimport {\n  tns,\n  TinySliderInfo,\n  TinySliderInstance,\n  TinySliderSettings\n} from 'tiny-slider'\nimport 'tiny-slider/dist/tiny-slider.css'\nimport { renderToStaticMarkup } from 'react-dom/server'\n\ninterface ReactTinySliderConfig extends TinySliderSettings {\n  onClick?: (\n    slideClicked: number | null,\n    info: TinySliderInfo,\n    event: React.MouseEvent\n  ) => void\n  onInit?: () => void | false\n  onIndexChanged?: (info: TinySliderInfo) => void\n  onTransitionStart?: (info: TinySliderInfo) => void\n  onTransitionEnd?: (info: TinySliderInfo) => void\n  onTouchStart?: (info: TinySliderInfo) => void\n  onTouchMove?: (info: TinySliderInfo) => void\n  onTouchEnd?: (info: TinySliderInfo) => void\n  children?: JSX.Element[] | JSX.Element\n  className?: string\n  style?: CSSProperties\n}\n\nexport const TinySlider = forwardRef(\n  (props: ReactTinySliderConfig, ref: (ref: TinySliderInstance) => void) => {\n    const slider = useRef<TinySliderInstance | null>(null)\n    const containerRef = useRef<HTMLDivElement>(null)\n    const dragging = useRef<boolean>(false)\n\n    const {\n      onClick,\n      onIndexChanged,\n      onTransitionStart,\n      onTransitionEnd,\n      onTouchStart,\n      onTouchMove,\n      onTouchEnd,\n      onInit,\n      children\n    } = props\n\n    const clickHandler = useCallback(\n      (event: MouseEvent) => {\n        if (dragging.current || !onClick) return\n\n        if (!slider.current) return onClick(null, null, event)\n\n        const info = slider.current.getInfo()\n        onClick(info.index, info, event)\n      },\n      [onClick]\n    )\n\n    const postInit = useCallback(() => {\n      const events = slider.current?.events\n\n      if (events) {\n        events.on('dragMove', (info: TinySliderInfo) => {\n          dragging.current = true\n          onTransitionStart && onTransitionStart(info)\n        })\n\n        events.on('dragEnd', (info: TinySliderInfo) => {\n          dragging.current = false\n          onTransitionEnd && onTransitionEnd(info)\n        })\n\n        if (onIndexChanged) events.on('indexChanged', onIndexChanged)\n        if (onTouchStart) events.on('touchStart', onTouchStart)\n        if (onTouchMove) events.on('touchMove', onTouchMove)\n        if (onTouchEnd) events.on('touchEnd', onTouchEnd)\n      }\n\n      onInit && onInit()\n\n      setTimeout(() => {\n        // @ts-ignore\n        ref.current = slider.current\n      })\n    }, [\n      onTransitionStart,\n      onTransitionEnd,\n      onIndexChanged,\n      onTouchStart,\n      onTouchMove,\n      onTouchEnd,\n      onInit\n    ])\n\n    const build = useCallback(\n      (newSettings: ReactTinySliderConfig = {}) => {\n        const settings: ReactTinySliderConfig = {\n          ...newSettings,\n          onInit: () => {\n            setTimeout(postInit)\n          },\n          container: containerRef.current?.firstChild?.firstChild as HTMLElement\n        }\n        slider.current = tns(settings)\n      },\n      [postInit, children]\n    )\n\n    useEffect(() => {\n      build(props)\n      return () => {\n        if (slider.current && slider.current.destroy) slider.current.destroy()\n      }\n    }, [props, children])\n\n    /**\n     * This hack fixes tiny-slider's problem with container ref.\n     * When rendered traditionally, containerRef reference will be overwritten by tiny-slider\n     */\n    const markup = renderToStaticMarkup(\n      <div>\n        <div>{children}</div>\n      </div>\n    )\n\n    return (\n      <div\n        onClick={clickHandler}\n        ref={containerRef}\n        dangerouslySetInnerHTML={{ __html: markup }}\n      />\n    )\n  }\n)\n"],"names":["TinySlider","forwardRef","props","ref","slider","useRef","containerRef","dragging","onClick","onIndexChanged","onTransitionStart","onTransitionEnd","onTouchStart","onTouchMove","onTouchEnd","onInit","children","clickHandler","useCallback","event","current","info","getInfo","index","postInit","_slider$current","events","on","setTimeout","build","newSettings","_containerRef$current","settings","_extends","container","firstChild","tns","useEffect","destroy","markup","renderToStaticMarkup","_jsx","dangerouslySetInnerHTML","__html"],"mappings":"8dAmCa,IAAAA,EAAaC,EACxB,SAACC,EAA8BC,GAC7B,IAAMC,EAASC,EAAkC,MAC3CC,EAAeD,EAAuB,MACtCE,EAAWF,GAAgB,GAG/BG,EASEN,EATFM,QACAC,EAQEP,EARFO,eACAC,EAOER,EAPFQ,kBACAC,EAMET,EANFS,gBACAC,EAKEV,EALFU,aACAC,EAIEX,EAJFW,YACAC,EAGEZ,EAHFY,WACAC,EAEEb,EAFFa,OACAC,EACEd,EADFc,SAGIC,EAAeC,EACnB,SAACC,GACC,IAAIZ,EAASa,SAAYZ,EAAzB,CAEA,IAAKJ,EAAOgB,QAAS,OAAOZ,EAAQ,KAAM,KAAMW,GAEhD,IAAME,EAAOjB,EAAOgB,QAAQE,UAC5Bd,EAAQa,EAAKE,MAAOF,EAAMF,EALQ,CAMpC,EACA,CAACX,IAGGgB,EAAWN,EAAY,WAAKO,IAAAA,EAC1BC,EAASD,OAAHA,EAAGrB,EAAOgB,cAAPK,EAAAA,EAAgBC,OAE3BA,IACFA,EAAOC,GAAG,WAAY,SAACN,GACrBd,EAASa,SAAU,EACnBV,GAAqBA,EAAkBW,EACzC,GAEAK,EAAOC,GAAG,UAAW,SAACN,GACpBd,EAASa,SAAU,EACnBT,GAAmBA,EAAgBU,EACrC,GAEIZ,GAAgBiB,EAAOC,GAAG,eAAgBlB,GAC1CG,GAAcc,EAAOC,GAAG,aAAcf,GACtCC,GAAaa,EAAOC,GAAG,YAAad,GACpCC,GAAYY,EAAOC,GAAG,WAAYb,IAGxCC,GAAUA,IAEVa,WAAW,WAETzB,EAAIiB,QAAUhB,EAAOgB,OACvB,EACF,EAAG,CACDV,EACAC,EACAF,EACAG,EACAC,EACAC,EACAC,IAGIc,EAAQX,EACZ,SAACY,GAA2C,IAAAC,OAAN,IAArCD,IAAAA,EAAqC,CAAE,GACtC,IAAME,EAAQC,EACTH,CAAAA,EAAAA,EACHf,CAAAA,OAAQ,WACNa,WAAWJ,EACb,EACAU,UAA+B,OAAtBH,EAAEzB,EAAac,UAAmB,OAAZW,EAApBA,EAAsBI,iBAAU,EAAhCJ,EAAkCI,aAE/C/B,EAAOgB,QAAUgB,EAAIJ,EACvB,EACA,CAACR,EAAUR,IAGbqB,EAAU,WAER,OADAR,EAAM3B,GACC,WACDE,EAAOgB,SAAWhB,EAAOgB,QAAQkB,SAASlC,EAAOgB,QAAQkB,SAC/D,CACF,EAAG,CAACpC,EAAOc,IAMX,IAAMuB,EAASC,EACbC,EAAA,MAAA,CAAAzB,SACEyB,kBAAMzB,OAIV,OACEyB,EACE,MAAA,CAAAjC,QAASS,EACTd,IAAKG,EACLoC,wBAAyB,CAAEC,OAAQJ,IAGzC"}