@gsretail.com/gui-core/build/node_modules/react-list/react-list.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{commonjsGlobal as e}from"../../_virtual/_commonjsHelpers.js";import{r as t}from"../../_virtual/react-list.js";import"../prop-types/index.js";import r from"react";import{p as i}from"../../_virtual/index3.js";var n;n=t,"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self&&self,function(e,t){var r,i;function o(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return o=function(){return e},e}function a(e){if(e&&e.__esModule)return e;if(null===e||"object"!==l(e)&&"function"!=typeof e)return{default:e};var t=o();if(t&&t.has(e))return t.get(e);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var a=i?Object.getOwnPropertyDescriptor(e,n):null;a&&(a.get||a.set)?Object.defineProperty(r,n,a):r[n]=e[n]}return r.default=e,t&&t.set(e,r),r}function s(e){return e&&e.__esModule?e:{default:e}}function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function f(e,t,r){return t&&c(e.prototype,t),r&&c(e,r),e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}function p(e,t){return p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},p(e,t)}function m(e){var t=y();return function(){var r,i=S(e);if(t){var n=S(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return d(this,r)}}function d(e,t){return!t||"object"!==l(t)&&"function"!=typeof t?v(e):t}function v(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function y(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function S(e){return S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},S(e)}function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}e=s(e),t=a(t);var P={x:"clientWidth",y:"clientHeight"},z={x:"clientTop",y:"clientLeft"},O={x:"innerWidth",y:"innerHeight"},x={x:"offsetWidth",y:"offsetHeight"},k={x:"offsetLeft",y:"offsetTop"},E={x:"overflowX",y:"overflowY"},j={x:"scrollWidth",y:"scrollHeight"},C={x:"scrollLeft",y:"scrollTop"},R={x:"width",y:"height"},M=function(){},T=!!function(){if("undefined"==typeof window)return!1;var e=!1;try{document.createElement("div").addEventListener("test",M,{get passive(){return e=!0,!1}})}catch(e){}return e}()&&{passive:!0},F="ReactList failed to reach a stable state.",I=40,A=function(e,t){for(var r in t)if(e[r]!==t[r])return!1;return!0},_=function(e){for(var t=e.props.axis,r=e.getEl(),i=E[t];r=r.parentElement;)switch(window.getComputedStyle(r)[i]){case"auto":case"scroll":case"overlay":return r}return window},L=function(e){var t=e.props.axis,r=e.scrollParent;return r===window?window[O[t]]:r[P[t]]},D=function(e,t){var r=e.length,i=e.minSize,n=e.type,o=t.from,a=t.size,s=t.itemsPerRow,l=(a=Math.max(a,i))%s;return l&&(a+=s-l),a>r&&(a=r),(l=(o="simple"!==n&&o?Math.max(Math.min(o,r-a),0):0)%s)&&(o-=l,a+=l),o===t.from&&a==t.size?t:b(b({},t),{},{from:o,size:a})};n.exports=(i=r=function(e){h(i,e);var r=m(i);function i(e){var t;return u(this,i),(t=r.call(this,e)).state=D(e,{itemsPerRow:1,from:e.initialIndex,size:0}),t.cache={},t.cachedScrollPosition=null,t.prevPrevState={},t.unstable=!1,t.updateCounter=0,t}return f(i,null,[{key:"getDerivedStateFromProps",value:function(e,t){var r=D(e,t);return r===t?null:r}}]),f(i,[{key:"componentDidMount",value:function(){this.updateFrameAndClearCache=this.updateFrameAndClearCache.bind(this),window.addEventListener("resize",this.updateFrameAndClearCache),this.updateFrame(this.scrollTo.bind(this,this.props.initialIndex))}},{key:"componentDidUpdate",value:function(e){var t=this;if(this.props.axis!==e.axis&&this.clearSizeCache(),!this.unstable){if(++this.updateCounter>I)return this.unstable=!0,console.error(F);this.updateCounterTimeoutId||(this.updateCounterTimeoutId=setTimeout((function(){t.updateCounter=0,delete t.updateCounterTimeoutId}),0)),this.updateFrame()}}},{key:"maybeSetState",value:function(e,t){if(A(this.state,e))return t();this.setState(e,t)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.updateFrameAndClearCache),this.scrollParent.removeEventListener("scroll",this.updateFrameAndClearCache,T),this.scrollParent.removeEventListener("mousewheel",M,T)}},{key:"getOffset",value:function(e){var t=this.props.axis,r=e[z[t]]||0,i=k[t];do{r+=e[i]||0}while(e=e.offsetParent);return r}},{key:"getEl",value:function(){return this.el||this.items}},{key:"getScrollPosition",value:function(){if("number"==typeof this.cachedScrollPosition)return this.cachedScrollPosition;var e=this.scrollParent,t=this.props.axis,r=C[t],i=e===window?document.body[r]||document.documentElement[r]:e[r],n=this.getScrollSize()-this.props.scrollParentViewportSizeGetter(this),o=Math.max(0,Math.min(i,n)),a=this.getEl();return this.cachedScrollPosition=this.getOffset(e)+o-this.getOffset(a),this.cachedScrollPosition}},{key:"setScroll",value:function(e){var t=this.scrollParent,r=this.props.axis;if(e+=this.getOffset(this.getEl()),t===window)return window.scrollTo(0,e);e-=this.getOffset(this.scrollParent),t[C[r]]=e}},{key:"getScrollSize",value:function(){var e=this.scrollParent,t=document,r=t.body,i=t.documentElement,n=j[this.props.axis];return e===window?Math.max(r[n],i[n]):e[n]}},{key:"hasDeterminateSize",value:function(){var e=this.props,t=e.itemSizeGetter;return"uniform"===e.type||t}},{key:"getStartAndEnd",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.threshold,t=this.getScrollPosition(),r=Math.max(0,t-e),i=t+this.props.scrollParentViewportSizeGetter(this)+e;return this.hasDeterminateSize()&&(i=Math.min(i,this.getSpaceBefore(this.props.length))),{start:r,end:i}}},{key:"getItemSizeAndItemsPerRow",value:function(){var e=this.props,t=e.axis,r=e.useStaticSize,i=this.state,n=i.itemSize,o=i.itemsPerRow;if(r&&n&&o)return{itemSize:n,itemsPerRow:o};var a=this.items.children;if(!a.length)return{};var s=a[0],l=s[x[t]],u=Math.abs(l-n);if((isNaN(u)||u>=1)&&(n=l),!n)return{};for(var c=k[t],f=s[c],h=a[o=1];h&&h[c]===f;h=a[o])++o;return{itemSize:n,itemsPerRow:o}}},{key:"clearSizeCache",value:function(){this.cachedScrollPosition=null}},{key:"updateFrameAndClearCache",value:function(e){return this.clearSizeCache(),this.updateFrame(e)}},{key:"updateFrame",value:function(e){switch(this.updateScrollParent(),"function"!=typeof e&&(e=M),this.props.type){case"simple":return this.updateSimpleFrame(e);case"variable":return this.updateVariableFrame(e);case"uniform":return this.updateUniformFrame(e)}}},{key:"updateScrollParent",value:function(){var e=this.scrollParent;this.scrollParent=this.props.scrollParentGetter(this),e!==this.scrollParent&&(e&&(e.removeEventListener("scroll",this.updateFrameAndClearCache),e.removeEventListener("mousewheel",M)),this.clearSizeCache(),this.scrollParent.addEventListener("scroll",this.updateFrameAndClearCache,T),this.scrollParent.addEventListener("mousewheel",M,T))}},{key:"updateSimpleFrame",value:function(e){var t=this.getStartAndEnd().end,r=this.items.children,i=0;if(r.length){var n=this.props.axis,o=r[0],a=r[r.length-1];i=this.getOffset(a)+a[x[n]]-this.getOffset(o)}if(i>t)return e();var s=this.props,l=s.pageSize,u=s.length,c=Math.min(this.state.size+l,u);this.maybeSetState({size:c},e)}},{key:"updateVariableFrame",value:function(e){this.props.itemSizeGetter||this.cacheSizes();for(var t=this.getStartAndEnd(),r=t.start,i=t.end,n=this.props,o=n.length,a=n.pageSize,s=0,l=0,u=0,c=o-1;l<c;){var f=this.getSizeOfItem(l);if(null==f||s+f>r)break;s+=f,++l}for(var h=o-l;u<h&&s<i;){var p=this.getSizeOfItem(l+u);if(null==p){u=Math.min(u+a,h);break}s+=p,++u}this.maybeSetState(D(this.props,{from:l,itemsPerRow:1,size:u}),e)}},{key:"updateUniformFrame",value:function(e){var t=this.getItemSizeAndItemsPerRow(),r=t.itemSize,i=t.itemsPerRow;if(!r||!i)return e();var n=this.getStartAndEnd(),o=n.start,a=n.end,s=D(this.props,{from:Math.floor(o/r)*i,size:(Math.ceil((a-o)/r)+1)*i,itemsPerRow:i}),l=s.from,u=s.size;return this.maybeSetState({itemsPerRow:i,from:l,itemSize:r,size:u},e)}},{key:"getSpaceBefore",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(null!=t[e])return t[e];var r=this.state,i=r.itemSize,n=r.itemsPerRow;if(i)return t[e]=Math.floor(e/n)*i;for(var o=e;o>0&&null==t[--o];);for(var a=t[o]||0,s=o;s<e;++s){t[s]=a;var l=this.getSizeOfItem(s);if(null==l)break;a+=l}return t[e]=a}},{key:"cacheSizes",value:function(){for(var e=this.cache,t=this.state.from,r=this.items.children,i=x[this.props.axis],n=0,o=r.length;n<o;++n)e[t+n]=r[n][i]}},{key:"getSizeOfItem",value:function(e){var t=this.cache,r=this.items,i=this.props,n=i.axis,o=i.itemSizeGetter,a=i.itemSizeEstimator,s=i.type,l=this.state,u=l.from,c=l.itemSize,f=l.size;if(c)return c;if(o)return o(e);if(e in t)return t[e];if("simple"===s&&e>=u&&e<u+f&&r){var h=r.children[e-u];if(h)return h[x[n]]}return a?a(e,t):void 0}},{key:"scrollTo",value:function(e){null!=e&&this.setScroll(this.getSpaceBefore(e))}},{key:"scrollAround",value:function(e){var t=this.getScrollPosition(),r=this.getSpaceBefore(e),i=r-this.props.scrollParentViewportSizeGetter(this)+this.getSizeOfItem(e),n=Math.min(i,r),o=Math.max(i,r);return t<=n?this.setScroll(n):t>o?this.setScroll(o):void 0}},{key:"getVisibleRange",value:function(){for(var e,t,r=this.state,i=r.from,n=r.size,o=this.getStartAndEnd(0),a=o.start,s=o.end,l={},u=i;u<i+n;++u){var c=this.getSpaceBefore(u,l),f=c+this.getSizeOfItem(u);null==e&&f>a&&(e=u),null!=e&&c<s&&(t=u)}return[e,t]}},{key:"renderItems",value:function(){for(var e=this,t=this.props,r=t.itemRenderer,i=t.itemsRenderer,n=this.state,o=n.from,a=n.size,s=[],l=0;l<a;++l)s.push(r(o+l,l));return i(s,(function(t){return e.items=t}))}},{key:"render",value:function(){var e=this,r=this.props,i=r.axis,n=r.length,o=r.type,a=r.useTranslate3d,s=this.state,l=s.from,u=s.itemsPerRow,c=this.renderItems();if("simple"===o)return c;var f={position:"relative"},h={},p=Math.ceil(n/u)*u,m=this.getSpaceBefore(p,h);m&&(f[R[i]]=m,"x"===i&&(f.overflowX="hidden"));var d=this.getSpaceBefore(l,h),v="x"===i?d:0,y="y"===i?d:0,S=a?"translate3d(".concat(v,"px, ").concat(y,"px, 0)"):"translate(".concat(v,"px, ").concat(y,"px)"),g={msTransform:S,WebkitTransform:S,transform:S};return t.default.createElement("div",{style:f,ref:function(t){return e.el=t}},t.default.createElement("div",{style:g},c))}}]),i}(t.Component),w(r,"displayName","ReactList"),w(r,"propTypes",{axis:e.default.oneOf(["x","y"]),initialIndex:e.default.number,itemRenderer:e.default.func,itemSizeEstimator:e.default.func,itemSizeGetter:e.default.func,itemsRenderer:e.default.func,length:e.default.number,minSize:e.default.number,pageSize:e.default.number,scrollParentGetter:e.default.func,scrollParentViewportSizeGetter:e.default.func,threshold:e.default.number,type:e.default.oneOf(["simple","variable","uniform"]),useStaticSize:e.default.bool,useTranslate3d:e.default.bool}),w(r,"defaultProps",{axis:"y",itemRenderer:function(e,r){return t.default.createElement("div",{key:r},e)},itemsRenderer:function(e,r){return t.default.createElement("div",{ref:r},e)},length:0,minSize:1,pageSize:10,scrollParentGetter:_,scrollParentViewportSizeGetter:L,threshold:100,type:"simple",useStaticSize:!1,useTranslate3d:!1}),i)}(i.exports,r);