react-scrollable-accordion/dist/index.js

A scrollable list/accordion component with sticky headers

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-scrollable-accordion"]=t(require("react")):e["react-scrollable-accordion"]=t(e.react)}(this,(function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=10)}([function(e,t,r){e.exports=r(5)()},function(t,r){t.exports=e},function(e,t){function r(){return e.exports=r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},r.apply(this,arguments)}e.exports=r},function(e,t){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}},function(e,t,r){var n=r(7),o=r(8),i=r(9);e.exports=function(e,t){return n(e)||o(e,t)||i()}},function(e,t,r){"use strict";var n=r(6);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,i,c){if(c!==n){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){e.exports=function(e){if(Array.isArray(e))return e}},function(e,t){e.exports=function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var c,a=e[Symbol.iterator]();!(n=(c=a.next()).done)&&(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(o)throw i}}return r}}},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}},function(e,t,r){"use strict";r.r(t);var n=r(2),o=r.n(n),i=r(3),c=r.n(i),a=r(0),l=r.n(a),s=r(1),u=r.n(s),f=r(4),p=r.n(f),d={List:{boxSizing:"border-box",height:"inherit",listStylePosition:"inside",margin:0,overflowX:"hidden",overflowY:"scroll",padding:0},ListHeader:{position:"relative"},Wrapper:{height:"inherit",overflowX:"hidden",position:"relative"}};function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(r,!0).forEach((function(t){c()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var m=function(e){var t=e.addHeader,r=e.children,n=e.className,i=e.component,c=e.getStickedHeadersTotalHeight,a=e.getTotalHeaders,l=e.index,f=e.listRef,y=e.stickTo,m=Object(s.useRef)(),g=Object(s.useState)({}),O=p()(g,2),h=O[0],v=O[1],T=Object(s.useCallback)((function(){var e=requestAnimationFrame((function(){if(f.current)if(["all","top"].includes(y)&&f.current.scrollTop+c(0,l)>=m.current.initialOffsetTop)m.current.nextElementSibling.style.marginTop="".concat(m.current.getBoundingClientRect().height,"px"),v({styles:{position:"absolute",top:"".concat(c(0,l),"px")}});else if(["all","bottom"].includes(y)&&f.current.scrollTop+(f.current.offsetHeight-c(l,a()))<m.current.initialOffsetTop){if(m.current.style.bottom)return;m.current.nextElementSibling.style.marginTop=0,v({styles:{bottom:"".concat(c(l+1,a()),"px"),position:"absolute"}})}else(m.current.style.bottom||m.current.style.top)&&(m.current.nextElementSibling.style.marginTop=0,v({}))}));return function(){return cancelAnimationFrame(e)}}),[c,a,l,f,y]);return Object(s.useEffect)((function(){f&&m.current&&(t(m),v({reset:!0,styles:{margin:"initial",padding:"initial"}}))}),[t,T,f]),Object(s.useEffect)((function(){if(f){var e=f.current;return e.addEventListener("scroll",T),function(){return e.removeEventListener("scroll",T)}}return function(){}}),[T,f]),Object(s.useEffect)((function(){h.reset&&(m.current.style=b({},m.current.style,{},h.styles),m.current.initialOffsetTop=m.current.offsetTop-c(0,l),T())}),[c,T,l,h]),u.a.createElement(i,o()({"aria-level":"1"},n?{className:n}:{},{ref:m,onClick:function(){f.current.scrollTop=m.current.initialOffsetTop-c(0,l)},role:"listitem",style:b({},d.ListHeader,{},h.styles)}),r)};m.propTypes={addHeader:l.a.func,children:l.a.node,className:l.a.string,component:l.a.string,getStickedHeadersTotalHeight:l.a.func,getTotalHeaders:l.a.func,index:l.a.number,listRef:l.a.oneOfType([l.a.func,l.a.shape({current:l.a.any})]),stickTo:l.a.oneOf(["all","bottom","top"])},m.defaultProps={addHeader:function(){},children:[],className:"",component:"li",getStickedHeadersTotalHeight:function(){},getTotalHeaders:function(){},index:0,listRef:null,stickTo:"all"};var g=m;function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?O(r,!0).forEach((function(t){c()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var v=function(e){var t=e.children,r=e.className,n=e.component,i=e.label,c=e.scrollBehavior,a=e.stickyHeaders,l=e.stickTo,f=Object(s.useRef)(),p=0,y=[],b=function(e,t){return y.slice(e,t).reduce((function(e,t){return e+t.current.getBoundingClientRect().height}),0)},m=function(e){y.push(e)},O=function(){return y.length},v=a?u.a.Children.map(t,(function(e){if(e&&e.type===g){var t=u.a.cloneElement(e,{addHeader:m,getStickedHeadersTotalHeight:b,getTotalHeaders:O,index:p,listRef:f,stickTo:l});return p+=1,t}return e})):t;return u.a.createElement("div",{style:d.Wrapper},u.a.createElement(n,o()({},i?{"aria-label":i}:{},r?{className:r}:{},{ref:f,role:"list",style:h({},d.List,{scrollBehavior:c}),tabIndex:"0"}),v))};v.propTypes={children:l.a.oneOfType([l.a.arrayOf(l.a.node),l.a.node]).isRequired,className:l.a.string,component:l.a.string,label:l.a.string,scrollBehavior:l.a.oneOf(["auto","smooth"]),stickyHeaders:l.a.bool,stickTo:l.a.oneOf(["all","bottom","top"])},v.defaultProps={className:"",component:"ul",label:"",scrollBehavior:"auto",stickyHeaders:!1,stickTo:"all"};var T=v,j=function(e){var t=e.children,r=e.className,n=e.component;return u.a.createElement(n,o()({"aria-level":"1"},r?{className:r}:{},{role:"listitem"}),t)};j.propTypes={children:l.a.node,className:l.a.string,component:l.a.string},j.defaultProps={children:[],className:"",component:"li"};var x=j;r.d(t,"List",(function(){return T})),r.d(t,"ListHeader",(function(){return g})),r.d(t,"ListItem",(function(){return x}))}])}));