react-sticky-ts
Version:
TypeScript version of react-sticky, using function components and hooks refactor.
13 lines (12 loc) • 5.25 kB
JavaScript
var bt=Object.defineProperty,pt=Object.defineProperties;var yt=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var mt=Object.prototype.hasOwnProperty,ht=Object.prototype.propertyIsEnumerable;var w=(c,t,a)=>t in c?bt(c,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[t]=a,V=(c,t)=>{for(var a in t||(t={}))mt.call(t,a)&&w(c,a,t[a]);if(A)for(var a of A(t))ht.call(t,a)&&w(c,a,t[a]);return c},z=(c,t)=>pt(c,yt(t));var j=(c,t,a)=>(w(c,typeof t!="symbol"?t+"":t,a),a);(function(c,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("react"),require("raf")):typeof define=="function"&&define.amd?define(["exports","react","raf"],t):(c=typeof globalThis!="undefined"?globalThis:c||self,t(c["react-sticky-ts"]={},c.React,c.raf))})(this,function(c,t,a){"use strict";function _(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var J=_(t),E=_(a);class W{constructor(){j(this,"subscribers");j(this,"root");this.subscribers=[],this.root=null}setRoot(n){this.root=n}subscribe(n){this.subscribers=this.subscribers.concat(n)}unsubscribe(n){this.subscribers=this.subscribers.filter(e=>e!==n)}}var k=new W,g={exports:{}},p={};/*
object-assign
(c) Sindre Sorhus
@license MIT
*/var R=Object.getOwnPropertySymbols,Y=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable;function G(s){if(s==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(s)}function K(){try{if(!Object.assign)return!1;var s=new String("abc");if(s[5]="de",Object.getOwnPropertyNames(s)[0]==="5")return!1;for(var n={},e=0;e<10;e++)n["_"+String.fromCharCode(e)]=e;var r=Object.getOwnPropertyNames(n).map(function(o){return n[o]});if(r.join("")!=="0123456789")return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach(function(o){i[o]=o}),Object.keys(Object.assign({},i)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}K();/** @license React v17.0.2
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var Q=J.default,x=60103;if(p.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var T=Symbol.for;x=T("react.element"),p.Fragment=T("react.fragment")}var X=Q.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,q=Object.prototype.hasOwnProperty,$={key:!0,ref:!0,__self:!0,__source:!0};function P(s,n,e){var r,i={},o=null,f=null;e!==void 0&&(o=""+e),n.key!==void 0&&(o=""+n.key),n.ref!==void 0&&(f=n.ref);for(r in n)q.call(n,r)&&!$.hasOwnProperty(r)&&(i[r]=n[r]);if(s&&s.defaultProps)for(r in n=s.defaultProps,n)i[r]===void 0&&(i[r]=n[r]);return{$$typeof:x,type:s,key:o,ref:f,props:i,_owner:X.current}}p.jsx=P,p.jsxs=P,g.exports=p;const C=g.exports.jsx,tt=g.exports.jsxs,H=["resize","scroll","touchstart","touchmove","touchend","pageshow","load"];function et(s){const n=t.useRef(null),e=t.useRef({framePending:!1,rafHandle:null,es:k}),r=t.useCallback(i=>{if(!e.current.framePending){const{currentTarget:o}=i;e.current.rafHandle=E.default(()=>{e.current.framePending=!1;const f=n.current;if(f){const{top:u,bottom:y}=f.getBoundingClientRect();e.current.es.subscribers.forEach(m=>m(u,y,o===window?document.body:f))}}),e.current.framePending=!0}},[]);return t.useEffect(()=>{e.current.es.setRoot(n.current)},[]),t.useEffect(()=>{H.forEach(o=>window.addEventListener(o,r));const{rafHandle:i}=e.current;return()=>{i&&E.default.cancel(i),H.forEach(o=>window.removeEventListener(o,r))}},[r]),C("div",z(V({},s),{ref:n,onScroll:r,onTouchStart:r,onTouchMove:r,onTouchEnd:r}))}var nt=t.memo(et);const rt={isSticky:!1,wasSticky:!1,distanceFromTop:0,distanceFromBottom:0,calculatedHeight:0,style:{}};function ot(s){const{children:n,disableCompensation:e}=s,[r,i]=t.useState(rt),o=t.useRef(null),f=t.useRef(null),u=t.useRef({es:k,props:s,state:r}),y=t.useCallback((d,h,S)=>{const{root:l}=u.current.es;if(!o.current||!f.current||!l||!l.offsetParent)return;const{topOffset:lt=0,bottomOffset:B=0,disableHardwareAcceleration:dt,relative:L}=u.current.props;let N=!1;const b=o.current.getBoundingClientRect(),O=f.current.getBoundingClientRect().height;let I=0;L&&(N=S!==l,d=-(S.scrollTop+S.offsetTop)+o.current.offsetTop,I=l.offsetTop-l.offsetParent.scrollTop);const D=h-B-O,F=!!u.current.state.isSticky,M=N?F:d<=-lt&&h>-B;l&&(h=(L?l.scrollHeight-l.scrollTop:h)-O);const U=M?{position:"fixed",top:D>0?I:D,left:b==null?void 0:b.left,width:b==null?void 0:b.width}:{};dt||(U.transform="translateZ(0)"),i({isSticky:M,wasSticky:F,distanceFromTop:d,distanceFromBottom:h,calculatedHeight:O,style:U})},[]),{isSticky:m,wasSticky:ct,distanceFromTop:it,distanceFromBottom:at,calculatedHeight:v,style:ft}=r;t.useEffect(()=>{const d=u.current.es;return d.subscribe(y),()=>{d.unsubscribe(y)}},[y]),t.useEffect(()=>{o.current&&(o.current.style.paddingBottom=e?"0px":`${m?v:0}px`)},[m,e,v]);const ut=t.cloneElement(n({isSticky:m,wasSticky:ct,distanceFromTop:it,distanceFromBottom:at,calculatedHeight:v,style:ft}),{ref:f});return tt("div",{children:[C("div",{ref:o}),ut]})}var st=t.memo(ot);c.Sticky=st,c.StickyContainer=nt,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});