@ohkit/back-top 0.0.1 → 0.0.2

package/README.md

@@ -44,7 +44,7 @@ function CustomContainer() {
         </div>
       </div>
       <BackTop 
-        scrollRefDom={scrollContainerRef}
+        scrollDomRef={scrollContainerRef}
         mountType="absolute"
       />
     </section>
@@ -67,7 +67,7 @@ function CustomContainer() {
 | children | ReactNode | '↑' | 按钮内容，支持React节点 |
 | mountType | 'fixed' \| 'absolute' | 'fixed' | 按钮定位方式 |
 | scrollTop | number | 500 | 显示按钮的滚动阈值（像素） |
-| scrollRefDom | React.RefObject<HTMLElement> | - | 自定义滚动容器 |
+| scrollDomRef | React.RefObject<HTMLElement> | - | 自定义滚动容器 |
 | position | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' | 'bottom-right' | 按钮位置 |
 | offset | [number, number] | [50, 100] | 按钮偏移量 [top/bottom, left/right] |
 | realScroll | boolean | false | 是否查找真实可滚动容器 |

package/dist/index.css

@@ -1,2 +1,2 @@
-.ohkit-back-top__container{align-items:center;border-radius:4px;box-sizing:border-box;color:#fff;display:flex;font-size:14px;justify-content:center;line-height:1.2em;min-height:40px;min-width:40px;padding:4px;position:fixed;transition:all .2s ease-in;white-space:pre-line;z-index:10}.ohkit-back-top__absolute{bottom:20px;position:absolute;right:20px}.ohkit-back-top__invisible{background:transparent;opacity:0;pointer-events:none}.ohkit-back-top__visible{background:rgba(78,85,98,.25);cursor:pointer;opacity:1}.ohkit-back-top__visible:hover{background:rgba(78,85,98,.4)}
+.ohkit-back-top__container{align-items:center;border-radius:4px;box-sizing:border-box;color:#fff;display:flex;font-size:14px;justify-content:center;line-height:1.2em;min-height:40px;min-width:40px;padding:4px;position:fixed;transition:all .2s ease-in;white-space:pre-line;z-index:10}.ohkit-back-top__absolute{position:absolute}.ohkit-back-top__invisible{background:transparent;opacity:0;pointer-events:none}.ohkit-back-top__visible{background:rgba(78,85,98,.25);cursor:pointer;opacity:1}.ohkit-back-top__visible:hover{background:rgba(78,85,98,.4)}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,2BASE,kBAAmB,CAKnB,iBAAkB,CAZlB,qBAAsB,CAUtB,UAAW,CAJX,YAAa,CAGb,cAAe,CADf,sBAAuB,CAJvB,iBAAkB,CADlB,eAAgB,CADhB,cAAe,CADf,WAAY,CAFZ,cAAe,CAcf,0BAA4B,CAF5B,oBAAqB,CANrB,UASF,CACA,0BAGE,WAAY,CAFZ,iBAAkB,CAClB,UAEF,CACA,2BAGE,sBAAuB,CADvB,SAAU,CADV,mBAGF,CACA,yBACE,6BAAkC,CAElC,cAAe,CADf,SAEF,CACA,+BACE,4BACF","file":"index.css","sourcesContent":[".ohkit-back-top__container {\n  position: fixed;\n  box-sizing: border-box;\n  padding: 4px;\n  min-width: 40px;\n  min-height: 40px;\n  line-height: 1.2em;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: #fff;\n  white-space: pre-line;\n  border-radius: 4px;\n  transition: all 0.2s ease-in;\n}\n.ohkit-back-top__absolute {\n  position: absolute;\n  right: 20px;\n  bottom: 20px;\n}\n.ohkit-back-top__invisible {\n  pointer-events: none;\n  opacity: 0;\n  background: transparent;\n}\n.ohkit-back-top__visible {\n  background: rgba(78, 85, 98, 0.25);\n  opacity: 1;\n  cursor: pointer;\n}\n.ohkit-back-top__visible:hover {\n  background: rgba(78, 85, 98, 0.4);\n}"]}
+{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,2BASE,kBAAmB,CAKnB,iBAAkB,CAZlB,qBAAsB,CAUtB,UAAW,CAJX,YAAa,CAGb,cAAe,CADf,sBAAuB,CAJvB,iBAAkB,CADlB,eAAgB,CADhB,cAAe,CADf,WAAY,CAFZ,cAAe,CAcf,0BAA4B,CAF5B,oBAAqB,CANrB,UASF,CACA,0BACE,iBACF,CACA,2BAGE,sBAAuB,CADvB,SAAU,CADV,mBAGF,CACA,yBACE,6BAAkC,CAElC,cAAe,CADf,SAEF,CACA,+BACE,4BACF","file":"index.css","sourcesContent":[".ohkit-back-top__container {\n  position: fixed;\n  box-sizing: border-box;\n  padding: 4px;\n  min-width: 40px;\n  min-height: 40px;\n  line-height: 1.2em;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  color: #fff;\n  white-space: pre-line;\n  border-radius: 4px;\n  transition: all 0.2s ease-in;\n}\n.ohkit-back-top__absolute {\n  position: absolute;\n}\n.ohkit-back-top__invisible {\n  pointer-events: none;\n  opacity: 0;\n  background: transparent;\n}\n.ohkit-back-top__visible {\n  background: rgba(78, 85, 98, 0.25);\n  opacity: 1;\n  cursor: pointer;\n}\n.ohkit-back-top__visible:hover {\n  background: rgba(78, 85, 98, 0.4);\n}"]}

package/dist/index.es.js

@@ -1,2 +1,2 @@
-import o,{useState as r,useRef as e,useMemo as l,useEffect as i}from"react";import{prefixClassname as t,classNames as s}from"@ohkit/prefix-classname";import{useRuntime as n,useScrollEntry as c}from"@ohkit/react-helper";import{addEventListener as a}from"@ohkit/dom-helper";var m=t("ohkit-back-top__"),v=function(t){var v=t.children,p=t.className,u=t.scrollTop,f=void 0===u?500:u,d=t.mountType,b=void 0===d?"fixed":d,h=t.position,R=void 0===h?"bottom-right":h,k=t.offset,L=void 0===k?[50,100]:k,x=t.title,T=void 0===x?"返回顶部":x,y=t.scrollRefDom,V=t.realScroll,g=void 0!==V&&V,C=r(!1),E=C[0],N=C[1],S=e(null),_=n({preVisible:E,scrollListenerRemover:null})[0],D=c(y||S,{realScroll:g,autoFind:!0,intervalTime:3e3}),F=l(function(){var o,r=R.split("-"),e=r[1];return(o={})[r[0]]=L[0]+"px",o[e]=L[1]+"px",o},[R,L]);return i(function(){if(console.log("scrollEntry",D),D&&D.scroller){null==_.scrollListenerRemover||_.scrollListenerRemover();var o=function(){var o=D.scrollContainer,r=!!(o&&o.scrollTop>f);_.preVisible!==r&&(_.preVisible=r,N(r))};return o(),_.scrollListenerRemover=a(D.scroller,"scroll",o),function(){null==_.scrollListenerRemover||_.scrollListenerRemover()}}},[D.scroller]),/*#__PURE__*/o.createElement("div",{title:T,ref:S,style:F,className:s(m("container",{visible:!!E,invisible:!E}),m({absolute:"absolute"===b}),p),onClick:function(){var o;null==(o=D.scroller)||o.scrollTo({top:0,behavior:"smooth"})}},v||"↑")};export{v as BackTop,m as c};
+import o,{useState as r,useRef as e,useMemo as l,useEffect as i}from"react";import{prefixClassname as t,classNames as s}from"@ohkit/prefix-classname";import{useRuntime as n,useScrollEntry as c}from"@ohkit/react-helper";import{addEventListener as a}from"@ohkit/dom-helper";var m=t("ohkit-back-top__"),v=function(t){var v=t.children,p=t.className,u=t.scrollTop,f=void 0===u?500:u,d=t.mountType,b=void 0===d?"fixed":d,h=t.position,R=void 0===h?"bottom-right":h,k=t.offset,L=void 0===k?[50,100]:k,x=t.title,T=void 0===x?"返回顶部":x,y=t.scrollDomRef,V=t.realScroll,g=void 0!==V&&V,C=r(!1),E=C[0],N=C[1],S=e(null),_=n({preVisible:E,scrollListenerRemover:null})[0],D=c(y||S,{realScroll:g,autoFind:!0,intervalTime:3e3}),F=l(function(){var o,r=R.split("-"),e=r[1];return(o={})[r[0]]=L[0]+"px",o[e]=L[1]+"px",o},[R,L]);return i(function(){if(console.log("scrollEntry",D),D&&D.scroller){null==_.scrollListenerRemover||_.scrollListenerRemover();var o=function(){var o=D.scrollContainer,r=!!(o&&o.scrollTop>f);_.preVisible!==r&&(_.preVisible=r,N(r))};return o(),_.scrollListenerRemover=a(D.scroller,"scroll",o),function(){null==_.scrollListenerRemover||_.scrollListenerRemover()}}},[D.scroller]),/*#__PURE__*/o.createElement("div",{title:T,ref:S,style:F,className:s(m("container",{visible:!!E,invisible:!E}),m({absolute:"absolute"===b}),p),onClick:function(){var o;null==(o=D.scroller)||o.scrollTo({top:0,behavior:"smooth"})}},v||"↑")};export{v as BackTop,m as c};
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","BackTop","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollRefDom","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"gRAUa,IAAAA,EAAIC,EAAE,oBAuCNC,EAAU,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAuB,MAC/BC,EAAWC,EAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAed,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAQ,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAAU,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAC9BjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}
+{"version":3,"file":"index.es.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  /**\n   * 滚动容器，当 scrollDomRef 为空时，自动查找 BackTop 组件所属的滚动容器\n   */\n  scrollDomRef?: React.RefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollDomRef,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollDomRef ? scrollDomRef : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","BackTop","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollDomRef","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"gRAUa,IAAAA,EAAIC,EAAE,oBA0CNC,EAAU,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,GAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAuB,MAC/BC,EAAWC,EAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAed,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAQ,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAAU,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAC9BjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}

package/dist/index.js

@@ -1,2 +1,2 @@
-var e=require("react"),r=require("@ohkit/prefix-classname"),l=require("@ohkit/react-helper"),o=require("@ohkit/dom-helper");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=/*#__PURE__*/t(e),s=r.prefixClassname("ohkit-back-top__");exports.BackTop=function(t){var n=t.children,c=t.className,a=t.scrollTop,u=void 0===a?500:a,v=t.mountType,f=void 0===v?"fixed":v,m=t.position,p=void 0===m?"bottom-right":m,d=t.offset,b=void 0===d?[50,100]:d,h=t.title,R=void 0===h?"返回顶部":h,k=t.scrollRefDom,x=t.realScroll,L=void 0!==x&&x,T=e.useState(!1),y=T[0],E=T[1],q=e.useRef(null),S=l.useRuntime({preVisible:y,scrollListenerRemover:null})[0],C=l.useScrollEntry(k||q,{realScroll:L,autoFind:!0,intervalTime:3e3}),N=e.useMemo(function(){var e,r=p.split("-"),l=r[1];return(e={})[r[0]]=b[0]+"px",e[l]=b[1]+"px",e},[p,b]);return e.useEffect(function(){if(console.log("scrollEntry",C),C&&C.scroller){null==S.scrollListenerRemover||S.scrollListenerRemover();var e=function(){var e=C.scrollContainer,r=!!(e&&e.scrollTop>u);S.preVisible!==r&&(S.preVisible=r,E(r))};return e(),S.scrollListenerRemover=o.addEventListener(C.scroller,"scroll",e),function(){null==S.scrollListenerRemover||S.scrollListenerRemover()}}},[C.scroller]),/*#__PURE__*/i.default.createElement("div",{title:R,ref:q,style:N,className:r.classNames(s("container",{visible:!!y,invisible:!y}),s({absolute:"absolute"===f}),c),onClick:function(){var e;null==(e=C.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},n||"↑")},exports.c=s;
+var e=require("react"),r=require("@ohkit/prefix-classname"),l=require("@ohkit/react-helper"),o=require("@ohkit/dom-helper");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=/*#__PURE__*/t(e),s=r.prefixClassname("ohkit-back-top__");exports.BackTop=function(t){var n=t.children,c=t.className,a=t.scrollTop,u=void 0===a?500:a,v=t.mountType,f=void 0===v?"fixed":v,m=t.position,p=void 0===m?"bottom-right":m,d=t.offset,b=void 0===d?[50,100]:d,h=t.title,R=void 0===h?"返回顶部":h,k=t.scrollDomRef,x=t.realScroll,L=void 0!==x&&x,T=e.useState(!1),y=T[0],E=T[1],q=e.useRef(null),S=l.useRuntime({preVisible:y,scrollListenerRemover:null})[0],C=l.useScrollEntry(k||q,{realScroll:L,autoFind:!0,intervalTime:3e3}),N=e.useMemo(function(){var e,r=p.split("-"),l=r[1];return(e={})[r[0]]=b[0]+"px",e[l]=b[1]+"px",e},[p,b]);return e.useEffect(function(){if(console.log("scrollEntry",C),C&&C.scroller){null==S.scrollListenerRemover||S.scrollListenerRemover();var e=function(){var e=C.scrollContainer,r=!!(e&&e.scrollTop>u);S.preVisible!==r&&(S.preVisible=r,E(r))};return e(),S.scrollListenerRemover=o.addEventListener(C.scroller,"scroll",e),function(){null==S.scrollListenerRemover||S.scrollListenerRemover()}}},[C.scroller]),/*#__PURE__*/i.default.createElement("div",{title:R,ref:q,style:N,className:r.classNames(s("container",{visible:!!y,invisible:!y}),s({absolute:"absolute"===f}),c),onClick:function(){var e;null==(e=C.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},n||"↑")},exports.c=s;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","prefixClassname","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollRefDom","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"4NAUaA,EAAIC,EAACC,gBAAC,oCAuCI,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,EAAAA,UAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAAA,OAAuB,MAC/BC,EAAWC,EAAAA,WAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAcA,eAACd,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAOA,QAAC,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAASA,UAAC,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAAgBA,iBAC9CjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAA,QAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EAAAA,WACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  /**\n   * 滚动容器，当 scrollDomRef 为空时，自动查找 BackTop 组件所属的滚动容器\n   */\n  scrollDomRef?: React.RefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollDomRef,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollDomRef ? scrollDomRef : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","prefixClassname","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollDomRef","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"4NAUaA,EAAIC,EAACC,gBAAC,oCA0CI,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,EAAAA,UAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAAA,OAAuB,MAC/BC,EAAWC,EAAAA,WAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAcA,eAACd,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAOA,QAAC,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAASA,UAAC,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAAgBA,iBAC9CjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAA,QAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EAAAA,WACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}

package/dist/index.modern.mjs

@@ -1,2 +1,2 @@
-import e,{useState as l,useRef as r,useMemo as o,useEffect as t}from"react";import{prefixClassname as s,classNames as i}from"@ohkit/prefix-classname";import{useRuntime as c,useScrollEntry as n}from"@ohkit/react-helper";import{addEventListener as m}from"@ohkit/dom-helper";const a=s("ohkit-back-top__"),p=({children:s,className:p,scrollTop:u=500,mountType:v="fixed",position:f="bottom-right",offset:b=[50,100],title:h="返回顶部",scrollRefDom:R,realScroll:k=!1})=>{const[L,d]=l(!1),x=r(null),[T]=c({preVisible:L,scrollListenerRemover:null}),y=n(R||x,{realScroll:k,autoFind:!0,intervalTime:3e3}),V=o(()=>{const[e,l]=f.split("-");return{[e]:`${b[0]}px`,[l]:`${b[1]}px`}},[f,b]);return t(()=>{if(console.log("scrollEntry",y),y&&y.scroller){null==T.scrollListenerRemover||T.scrollListenerRemover();const e=()=>{const{scrollContainer:e}=y,l=!!(e&&e.scrollTop>u);T.preVisible!==l&&(T.preVisible=l,d(l))};return e(),T.scrollListenerRemover=m(y.scroller,"scroll",e),()=>{null==T.scrollListenerRemover||T.scrollListenerRemover()}}},[y.scroller]),/*#__PURE__*/e.createElement("div",{title:h,ref:x,style:V,className:i(a("container",{visible:!!L,invisible:!L}),a({absolute:"absolute"===v}),p),onClick:()=>{var e;null==(e=y.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},s||"↑")};export{p as BackTop,a as c};
+import e,{useState as l,useRef as r,useMemo as o,useEffect as t}from"react";import{prefixClassname as s,classNames as i}from"@ohkit/prefix-classname";import{useRuntime as c,useScrollEntry as n}from"@ohkit/react-helper";import{addEventListener as m}from"@ohkit/dom-helper";const a=s("ohkit-back-top__"),p=({children:s,className:p,scrollTop:u=500,mountType:v="fixed",position:f="bottom-right",offset:b=[50,100],title:h="返回顶部",scrollDomRef:R,realScroll:k=!1})=>{const[L,d]=l(!1),x=r(null),[T]=c({preVisible:L,scrollListenerRemover:null}),y=n(R||x,{realScroll:k,autoFind:!0,intervalTime:3e3}),V=o(()=>{const[e,l]=f.split("-");return{[e]:`${b[0]}px`,[l]:`${b[1]}px`}},[f,b]);return t(()=>{if(console.log("scrollEntry",y),y&&y.scroller){null==T.scrollListenerRemover||T.scrollListenerRemover();const e=()=>{const{scrollContainer:e}=y,l=!!(e&&e.scrollTop>u);T.preVisible!==l&&(T.preVisible=l,d(l))};return e(),T.scrollListenerRemover=m(y.scroller,"scroll",e),()=>{null==T.scrollListenerRemover||T.scrollListenerRemover()}}},[y.scroller]),/*#__PURE__*/e.createElement("div",{title:h,ref:x,style:V,className:i(a("container",{visible:!!L,invisible:!L}),a({absolute:"absolute"===v}),p),onClick:()=>{var e;null==(e=y.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},s||"↑")};export{p as BackTop,a as c};
 //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","BackTop","children","className","scrollTop","mountType","position","offset","title","scrollRefDom","realScroll","visible","setVisible","useState","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","x","y","split","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"gRAUa,MAAAA,EAAIC,EAAE,oBAuCNC,EAAUA,EACrBC,WACAC,YACAC,UAAAA,EAAY,IACZC,UAAAA,EAAY,QACZC,SAAAA,EAAW,eACXC,OAAAA,EAAS,CAAC,GAAI,KACdC,MAAAA,EAAQ,OACRC,eACAC,WAAAA,GAAa,MAEb,MAAOC,EAASC,GAAcC,GAAS,GACjCC,EAASC,EAAuB,OAC/BC,GAAWC,EAGf,CACDC,WAAYP,EACZQ,sBAAuB,OAGnBC,EAAcC,EAAeZ,GAA8BK,EAAQ,CACvEJ,WAAAA,EACAY,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAQ,KAC5B,MAAOC,EAAGC,GAAKrB,EAASsB,MAAM,KAC9B,MAAO,CACLF,CAACA,GAAI,GAAGnB,EAAO,OACfoB,CAACA,GAAI,GAAGpB,EAAO,SAEhB,CAACD,EAAUC,IA6Bd,OA3BAsB,EAAU,KAER,GADAC,QAAQC,IAAI,cAAeX,GACvBA,GAAeA,EAAYY,SAAU,CACvChB,MAAAA,EAAQG,uBAARH,EAAQG,wBACR,MAAMc,EAAWA,KACf,MAAMC,gBAAEA,GAAoBd,EACtBe,KACJD,GACCA,EAAgC9B,UAAYA,GAE3CY,EAAQE,aAAeiB,IACzBnB,EAAQE,WAAaiB,EACrBvB,EAAWuB,KASf,OANAF,IACAjB,EAAQG,sBAAwBiB,EAC9BhB,EAAYY,SACZ,SACAC,GAEK,KACLjB,MAAAA,EAAQG,uBAARH,EAAQG,wBAEX,GACA,CAACC,EAAYY,wBAGZK,EAAAC,cACE9B,MAAAA,CAAAA,MAAOA,EACP+B,IAAKzB,EACL0B,MAAOhB,EACPrB,UAAWsC,EACT1C,EAAE,YAAa,CACbY,UAAWA,EACX+B,WAAY/B,IAEdZ,EAAE,CAAE4C,SAAwB,aAAdtC,IACdF,GAEFyC,QAASA,KAAKC,IAAAA,EACZA,OAAAA,EAAAzB,EAAYY,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,aAIb9C,GAAY"}
+{"version":3,"file":"index.modern.mjs","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  /**\n   * 滚动容器，当 scrollDomRef 为空时，自动查找 BackTop 组件所属的滚动容器\n   */\n  scrollDomRef?: React.RefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollDomRef,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollDomRef ? scrollDomRef : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","BackTop","children","className","scrollTop","mountType","position","offset","title","scrollDomRef","realScroll","visible","setVisible","useState","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","x","y","split","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"gRAUa,MAAAA,EAAIC,EAAE,oBA0CNC,EAAUA,EACrBC,WACAC,YACAC,UAAAA,EAAY,IACZC,UAAAA,EAAY,QACZC,SAAAA,EAAW,eACXC,OAAAA,EAAS,CAAC,GAAI,KACdC,MAAAA,EAAQ,OACRC,eACAC,WAAAA,GAAa,MAEb,MAAOC,EAASC,GAAcC,GAAS,GACjCC,EAASC,EAAuB,OAC/BC,GAAWC,EAGf,CACDC,WAAYP,EACZQ,sBAAuB,OAGnBC,EAAcC,EAAeZ,GAA8BK,EAAQ,CACvEJ,WAAAA,EACAY,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAQ,KAC5B,MAAOC,EAAGC,GAAKrB,EAASsB,MAAM,KAC9B,MAAO,CACLF,CAACA,GAAI,GAAGnB,EAAO,OACfoB,CAACA,GAAI,GAAGpB,EAAO,SAEhB,CAACD,EAAUC,IA6Bd,OA3BAsB,EAAU,KAER,GADAC,QAAQC,IAAI,cAAeX,GACvBA,GAAeA,EAAYY,SAAU,CACvChB,MAAAA,EAAQG,uBAARH,EAAQG,wBACR,MAAMc,EAAWA,KACf,MAAMC,gBAAEA,GAAoBd,EACtBe,KACJD,GACCA,EAAgC9B,UAAYA,GAE3CY,EAAQE,aAAeiB,IACzBnB,EAAQE,WAAaiB,EACrBvB,EAAWuB,KASf,OANAF,IACAjB,EAAQG,sBAAwBiB,EAC9BhB,EAAYY,SACZ,SACAC,GAEK,KACLjB,MAAAA,EAAQG,uBAARH,EAAQG,wBAEX,GACA,CAACC,EAAYY,wBAGZK,EAAAC,cACE9B,MAAAA,CAAAA,MAAOA,EACP+B,IAAKzB,EACL0B,MAAOhB,EACPrB,UAAWsC,EACT1C,EAAE,YAAa,CACbY,UAAWA,EACX+B,WAAY/B,IAEdZ,EAAE,CAAE4C,SAAwB,aAAdtC,IACdF,GAEFyC,QAASA,KAAKC,IAAAA,EACZA,OAAAA,EAAAzB,EAAYY,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,aAIb9C,GAAY"}

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("@ohkit/prefix-classname"),require("@ohkit/react-helper"),require("@ohkit/dom-helper")):"function"==typeof define&&define.amd?define(["exports","react","@ohkit/prefix-classname","@ohkit/react-helper","@ohkit/dom-helper"],r):r((e||self).backTop={},e.react,e.prefixClassname,e.reactHelper,e.domHelper)}(this,function(e,r,o,l,t){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/i(r),s=o.prefixClassname("ohkit-back-top__");e.BackTop=function(e){var i=e.children,c=e.className,a=e.scrollTop,u=void 0===a?500:a,f=e.mountType,p=void 0===f?"fixed":f,d=e.position,m=void 0===d?"bottom-right":d,v=e.offset,h=void 0===v?[50,100]:v,b=e.title,k=void 0===b?"返回顶部":b,x=e.scrollRefDom,y=e.realScroll,R=void 0!==y&&y,T=r.useState(!1),L=T[0],E=T[1],g=r.useRef(null),q=l.useRuntime({preVisible:L,scrollListenerRemover:null})[0],C=l.useScrollEntry(x||g,{realScroll:R,autoFind:!0,intervalTime:3e3}),S=r.useMemo(function(){var e,r=m.split("-"),o=r[1];return(e={})[r[0]]=h[0]+"px",e[o]=h[1]+"px",e},[m,h]);return r.useEffect(function(){if(console.log("scrollEntry",C),C&&C.scroller){null==q.scrollListenerRemover||q.scrollListenerRemover();var e=function(){var e=C.scrollContainer,r=!!(e&&e.scrollTop>u);q.preVisible!==r&&(q.preVisible=r,E(r))};return e(),q.scrollListenerRemover=t.addEventListener(C.scroller,"scroll",e),function(){null==q.scrollListenerRemover||q.scrollListenerRemover()}}},[C.scroller]),/*#__PURE__*/n.default.createElement("div",{title:k,ref:g,style:S,className:o.classNames(s("container",{visible:!!L,invisible:!L}),s({absolute:"absolute"===p}),c),onClick:function(){var e;null==(e=C.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},i||"↑")},e.c=s});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("@ohkit/prefix-classname"),require("@ohkit/react-helper"),require("@ohkit/dom-helper")):"function"==typeof define&&define.amd?define(["exports","react","@ohkit/prefix-classname","@ohkit/react-helper","@ohkit/dom-helper"],r):r((e||self).backTop={},e.react,e.prefixClassname,e.reactHelper,e.domHelper)}(this,function(e,r,o,l,t){function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/i(r),s=o.prefixClassname("ohkit-back-top__");e.BackTop=function(e){var i=e.children,c=e.className,a=e.scrollTop,u=void 0===a?500:a,f=e.mountType,p=void 0===f?"fixed":f,d=e.position,m=void 0===d?"bottom-right":d,v=e.offset,h=void 0===v?[50,100]:v,b=e.title,k=void 0===b?"返回顶部":b,x=e.scrollDomRef,y=e.realScroll,R=void 0!==y&&y,T=r.useState(!1),L=T[0],E=T[1],g=r.useRef(null),q=l.useRuntime({preVisible:L,scrollListenerRemover:null})[0],C=l.useScrollEntry(x||g,{realScroll:R,autoFind:!0,intervalTime:3e3}),S=r.useMemo(function(){var e,r=m.split("-"),o=r[1];return(e={})[r[0]]=h[0]+"px",e[o]=h[1]+"px",e},[m,h]);return r.useEffect(function(){if(console.log("scrollEntry",C),C&&C.scroller){null==q.scrollListenerRemover||q.scrollListenerRemover();var e=function(){var e=C.scrollContainer,r=!!(e&&e.scrollTop>u);q.preVisible!==r&&(q.preVisible=r,E(r))};return e(),q.scrollListenerRemover=t.addEventListener(C.scroller,"scroll",e),function(){null==q.scrollListenerRemover||q.scrollListenerRemover()}}},[C.scroller]),/*#__PURE__*/n.default.createElement("div",{title:k,ref:g,style:S,className:o.classNames(s("container",{visible:!!L,invisible:!L}),s({absolute:"absolute"===p}),c),onClick:function(){var e;null==(e=C.scroller)||e.scrollTo({top:0,behavior:"smooth"})}},i||"↑")},e.c=s});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  scrollRefDom?: React.MutableRefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollRefDom,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","prefixClassname","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollRefDom","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"yjBAUaA,EAAIC,EAACC,gBAAC,8BAuCI,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,EAAAA,UAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAAA,OAAuB,MAC/BC,EAAWC,EAAAA,WAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAcA,eAACd,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAOA,QAAC,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAASA,UAAC,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAAgBA,iBAC9CjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAA,QAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EAAAA,WACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}
+{"version":3,"file":"index.umd.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useState, useMemo, useRef } from \"react\";\nimport {\n  prefixClassname as p,\n  classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport { useRuntime, useScrollEntry } from \"@ohkit/react-helper\";\nimport { addEventListener } from \"@ohkit/dom-helper\";\n\nimport \"./style.scss\";\n\nexport const c = p(\"ohkit-back-top__\");\n\nexport interface IBackTop {\n  className?: string;\n  /**\n   * 按钮位置，fixed 或 absolute\n   * @default \"fixed\"\n   */\n  mountType?: \"fixed\" | \"absolute\";\n  /**\n   * 滚动距离，当滚动距离大于此值时显示返回顶部按钮\n   * @default 500\n   */\n  scrollTop?: number;\n  /**\n   * 滚动容器，当 scrollDomRef 为空时，自动查找 BackTop 组件所属的滚动容器\n   */\n  scrollDomRef?: React.RefObject<HTMLElement>;\n  /**\n   * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left\n   * @default \"bottom-right\"\n   */\n  position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n  /**\n   * 按钮位置偏移量px, 即[position.split(\"-\")[0], position.split(\"-\")[1]]\n   * @default[50, 100]\n   */\n  offset?: [number, number];\n  /**\n   * 是否查找真实可滚动的容器，scrollHeight > clientHeight\n   * @default false\n   */\n  realScroll?: boolean;\n  /**\n   * 按钮标题\n   * @default \"返回顶部\"\n   */\n  title?: string;\n}\n\nexport type BackTopProps = PropsWithChildren<IBackTop>;\n\nexport const BackTop = ({\n  children,\n  className,\n  scrollTop = 500,\n  mountType = \"fixed\",\n  position = \"bottom-right\",\n  offset = [50, 100],\n  title = \"返回顶部\",\n  scrollDomRef,\n  realScroll = false,\n}: BackTopProps) => {\n  const [visible, setVisible] = useState(false);\n  const domRef = useRef<HTMLDivElement>(null);\n  const [runtime] = useRuntime<{\n    preVisible: boolean;\n    scrollListenerRemover: null | (() => void);\n  }>({\n    preVisible: visible,\n    scrollListenerRemover: null,\n  });\n\n  const scrollEntry = useScrollEntry(scrollDomRef ? scrollDomRef : domRef, {\n    realScroll,\n    autoFind: true,\n    intervalTime: 3000,\n  });\n\n  const positionStyle = useMemo(() => {\n    const [x, y] = position.split(\"-\");\n    return {\n      [x]: `${offset[0]}px`,\n      [y]: `${offset[1]}px`,\n    };\n  }, [position, offset]);\n\n  useEffect(() => {\n    console.log('scrollEntry', scrollEntry);\n    if (scrollEntry && scrollEntry.scroller) {\n      runtime.scrollListenerRemover?.();\n      const onScroll = () => {\n        const { scrollContainer } = scrollEntry;\n        const curVisible = !!(\n          scrollContainer &&\n          (scrollContainer as HTMLElement).scrollTop > scrollTop\n        );\n        if (runtime.preVisible !== curVisible) {\n          runtime.preVisible = curVisible;\n          setVisible(curVisible);\n        }\n      };\n      onScroll();\n      runtime.scrollListenerRemover = addEventListener(\n        scrollEntry.scroller,\n        \"scroll\",\n        onScroll\n      );\n      return () => {\n        runtime.scrollListenerRemover?.();\n      };\n    }\n  }, [scrollEntry.scroller]);\n\n  return (\n      <div\n        title={title}\n        ref={domRef}\n        style={positionStyle}\n        className={cx(\n          c(\"container\", {\n            visible: !!visible,\n            invisible: !visible,\n          }),\n          c({ absolute: mountType === \"absolute\" }),\n          className\n        )}\n        onClick={() => {\n          scrollEntry.scroller?.scrollTo({\n            top: 0,\n            behavior: \"smooth\",\n          });\n        }}\n      >\n        {children || '↑'}\n      </div>\n  );\n};\n"],"names":["c","p","prefixClassname","_ref","children","className","_ref$scrollTop","scrollTop","_ref$mountType","mountType","_ref$position","position","_ref$offset","offset","_ref$title","title","scrollDomRef","_ref$realScroll","realScroll","_useState","useState","visible","setVisible","domRef","useRef","runtime","useRuntime","preVisible","scrollListenerRemover","scrollEntry","useScrollEntry","autoFind","intervalTime","positionStyle","useMemo","_ref2","_position$split","split","y","useEffect","console","log","scroller","onScroll","scrollContainer","curVisible","addEventListener","React","createElement","ref","style","cx","invisible","absolute","onClick","_scrollEntry$scroller","scrollTo","top","behavior"],"mappings":"yjBAUaA,EAAIC,EAACC,gBAAC,8BA0CI,SAAHC,GAUD,IATjBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UAASC,EAAAH,EACTI,UAAAA,OAAY,IAAHD,EAAG,IAAGA,EAAAE,EAAAL,EACfM,UAAAA,OAAY,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACnBQ,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAT,EACzBU,OAAAA,OAAM,IAAAD,EAAG,CAAC,GAAI,KAAIA,EAAAE,EAAAX,EAClBY,MAAAA,OAAK,IAAAD,EAAG,OAAMA,EACdE,EAAYb,EAAZa,aAAYC,EAAAd,EACZe,WAAAA,OAAU,IAAAD,GAAQA,EAElBE,EAA8BC,EAAAA,UAAS,GAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAASC,EAAAA,OAAuB,MAC/BC,EAAWC,EAAAA,WAGf,CACDC,WAAYN,EACZO,sBAAuB,OALX,GAQRC,EAAcC,EAAcA,eAACd,GAA8BO,EAAQ,CACvEL,WAAAA,EACAa,UAAU,EACVC,aAAc,MAGVC,EAAgBC,EAAOA,QAAC,WAAK,IAAAC,EACjCC,EAAezB,EAAS0B,MAAM,KAApBC,EAACF,EACX,GAAA,OAAAD,EAAA,CAAA,GADQC,EAAEE,IAEAzB,EAAO,GAAEsB,KAAAA,EAChBG,GAAOzB,EAAO,GAAE,KAAAsB,CAErB,EAAG,CAACxB,EAAUE,IA6Bd,OA3BA0B,EAASA,UAAC,WAER,GADAC,QAAQC,IAAI,cAAeZ,GACvBA,GAAeA,EAAYa,SAAU,CACV,MAA7BjB,EAAQG,uBAARH,EAAQG,wBACR,IAAMe,EAAW,WACf,IAAQC,EAAoBf,EAApBe,gBACFC,KACJD,GACCA,EAAgCrC,UAAYA,GAE3CkB,EAAQE,aAAekB,IACzBpB,EAAQE,WAAakB,EACrBvB,EAAWuB,GAEf,EAOA,OANAF,IACAlB,EAAQG,sBAAwBkB,EAAgBA,iBAC9CjB,EAAYa,SACZ,SACAC,GAEK,WACLlB,MAAAA,EAAQG,uBAARH,EAAQG,uBACV,CACD,CACH,EAAG,CAACC,EAAYa,wBAGZK,EAAA,QAAAC,cAAA,MAAA,CACEjC,MAAOA,EACPkC,IAAK1B,EACL2B,MAAOjB,EACP5B,UAAW8C,EAAAA,WACTnD,EAAE,YAAa,CACbqB,UAAWA,EACX+B,WAAY/B,IAEdrB,EAAE,CAAEqD,SAAwB,aAAd5C,IACdJ,GAEFiD,QAAS,WAAK,IAAAC,EACZA,OAAAA,EAAA1B,EAAYa,WAAZa,EAAsBC,SAAS,CAC7BC,IAAK,EACLC,SAAU,UAEd,GAECtD,GAAY,IAGrB"}

package/dist/types/index.d.ts

@@ -14,7 +14,10 @@ export interface IBackTop {
      * @default 500
      */
     scrollTop?: number;
-    scrollRefDom?: React.MutableRefObject<HTMLElement>;
+    /**
+     * 滚动容器，当 scrollDomRef 为空时，自动查找 BackTop 组件所属的滚动容器
+     */
+    scrollDomRef?: React.RefObject<HTMLElement>;
     /**
      * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left
      * @default "bottom-right"
@@ -37,4 +40,4 @@ export interface IBackTop {
     title?: string;
 }
 export type BackTopProps = PropsWithChildren<IBackTop>;
-export declare const BackTop: ({ children, className, scrollTop, mountType, position, offset, title, scrollRefDom, realScroll, }: BackTopProps) => React.JSX.Element;
+export declare const BackTop: ({ children, className, scrollTop, mountType, position, offset, title, scrollDomRef, realScroll, }: BackTopProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohkit/back-top",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "列表滚动超过指定距离后自动展示返回顶部按钮",
   "keywords": [
     "back-top"
@@ -35,5 +35,5 @@
     "react": ">=17",
     "react-dom": ">=17"
   },
-  "gitHead": "032c94e624cb5be095bae2032083c12a75230de6"
+  "gitHead": "742219d8fb25f776dfbc796c8361f03851fa62c6"
 }

package/src/index.tsx

@@ -22,7 +22,10 @@ export interface IBackTop {
    * @default 500
    */
   scrollTop?: number;
-  scrollRefDom?: React.MutableRefObject<HTMLElement>;
+  /**
+   * 滚动容器，当 scrollDomRef 为空时，自动查找 BackTop 组件所属的滚动容器
+   */
+  scrollDomRef?: React.RefObject<HTMLElement>;
   /**
    * 按钮位置，top-right 或 top-left 或 bottom-right 或 bottom-left
    * @default "bottom-right"
@@ -55,7 +58,7 @@ export const BackTop = ({
   position = "bottom-right",
   offset = [50, 100],
   title = "返回顶部",
-  scrollRefDom,
+  scrollDomRef,
   realScroll = false,
 }: BackTopProps) => {
   const [visible, setVisible] = useState(false);
@@ -68,7 +71,7 @@ export const BackTop = ({
     scrollListenerRemover: null,
   });
 
-  const scrollEntry = useScrollEntry(scrollRefDom ? scrollRefDom : domRef, {
+  const scrollEntry = useScrollEntry(scrollDomRef ? scrollDomRef : domRef, {
     realScroll,
     autoFind: true,
     intervalTime: 3000,

package/src/style.scss

@@ -25,8 +25,8 @@ $prefix: ohkit;
   }
   &absolute {
       position: absolute;
-      right: 20px;
-      bottom: 20px;
+      // right: 20px;
+      // bottom: 20px;
   }
 
   &invisible {