{"version":3,"file":"index-0cjo4Fg8.js","sources":["../../../app/javascript/src/explore/hocs/withScroll/index.jsx"],"sourcesContent":["import React, { Component } from 'react';\n\nimport SvgIcon from 'src/explore/elements/SvgIcon';\n\nconst ANIMATION_TIME = 300;\n\nconst withScroll = ( WrappedComponent ) => {\n  const componentName = WrappedComponent.displayName || WrappedComponent.name;\n\n  class EnhancedComponent extends Component {\n    scrollElm = React.createRef();\n\n    state = {\n      page: 0,\n    };\n\n    movePage = ( direction ) => {\n      // The ugly ( -10 ) is a hack to account for margins and paddings\n      const maxPageIndex = Math.floor(\n        ( this.scrollElm.current.scrollWidth - 10 ) / $( this.scrollElm.current ).width(),\n      );\n\n      this.setState(\n        ( state ) => ({\n          page: Math.min( Math.max( 0, state.page + 1 * direction ), maxPageIndex ),\n        }),\n        () => {\n          this.scroll();\n        },\n      );\n    };\n\n    scroll = () => {\n      const contentElem = $( this.scrollElm.current );\n      const { page } = this.state;\n\n      contentElem\n        .stop()\n        .animate({ scrollLeft: page * contentElem.width() }, ANIMATION_TIME, 'linear' );\n    };\n\n    render() {\n      return (\n        <div className=\"products-carousel\">\n          <div\n            className=\"products-carousel__left\"\n            role=\"presentation\"\n            onClick={() => this.movePage( -1 )}\n          >\n            <div className=\"products-carousel__prevpage\" tabIndex=\"0\" role=\"button\">\n              <SvgIcon icon=\"icon-arrow-left\" />\n            </div>\n          </div>\n\n          <div className=\"products-carousel__viewport\" ref={this.scrollElm}>\n            <WrappedComponent {...this.props} noWrap />\n          </div>\n\n          <div\n            className=\"products-carousel__right\"\n            role=\"presentation\"\n            onClick={() => this.movePage( 1 )}\n          >\n            <div className=\"products-carousel__nextpage\" tabIndex=\"0\" role=\"button\">\n              <SvgIcon icon=\"icon-arrow-right\" />\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  EnhancedComponent.displayName = `withScroll(${componentName})`;\n\n  return EnhancedComponent;\n};\n\nexport default withScroll;\n"],"names":["ANIMATION_TIME","withScroll","WrappedComponent","componentName","EnhancedComponent","Component","__publicField","React","direction","maxPageIndex","state","contentElem","page","SvgIcon"],"mappings":"2PAIA,MAAMA,EAAiB,IAEjBC,EAAeC,GAAsB,CACnC,MAAAC,EAAgBD,EAAiB,aAAeA,EAAiB,KAEvE,MAAME,UAA0BC,EAAAA,SAAU,CAA1C,kCACEC,EAAA,iBAAYC,EAAM,UAAU,GAE5BD,EAAA,aAAQ,CACN,KAAM,CACR,GAEAA,EAAA,gBAAaE,GAAe,CAE1B,MAAMC,EAAe,KAAK,OACtB,KAAK,UAAU,QAAQ,YAAc,IAAO,EAAG,KAAK,UAAU,OAAQ,EAAE,MAAM,CAClF,EAEK,KAAA,SACDC,IAAY,CACZ,KAAM,KAAK,IAAK,KAAK,IAAK,EAAGA,EAAM,KAAO,EAAIF,CAAU,EAAGC,CAAa,CAAA,GAE1E,IAAM,CACJ,KAAK,OAAO,CAAA,CAEhB,CACF,GAEAH,EAAA,cAAS,IAAM,CACb,MAAMK,EAAc,EAAG,KAAK,UAAU,OAAQ,EACxC,CAAE,KAAAC,GAAS,KAAK,MAGnBD,EAAA,KAAA,EACA,QAAQ,CAAE,WAAYC,EAAOD,EAAY,MAAM,GAAKX,EAAgB,QAAS,CAClF,GAEA,QAAS,CAEL,OAAAO,EAAA,cAAC,MAAI,CAAA,UAAU,mBACb,EAAAA,EAAA,cAAC,MAAA,CACC,UAAU,0BACV,KAAK,eACL,QAAS,IAAM,KAAK,SAAU,EAAG,CAAA,EAEhCA,EAAA,cAAA,MAAA,CAAI,UAAU,8BAA8B,SAAS,IAAI,KAAK,QAAA,EAC5DA,EAAA,cAAAM,EAAA,CAAQ,KAAK,kBAAkB,CAClC,CAAA,EAGDN,EAAA,cAAA,MAAA,CAAI,UAAU,8BAA8B,IAAK,KAAK,WACpDA,EAAA,cAAAL,EAAA,CAAkB,GAAG,KAAK,MAAO,OAAM,EAAC,CAAA,CAC3C,EAEAK,EAAA,cAAC,MAAA,CACC,UAAU,2BACV,KAAK,eACL,QAAS,IAAM,KAAK,SAAU,CAAE,CAAA,EAE/BA,EAAA,cAAA,MAAA,CAAI,UAAU,8BAA8B,SAAS,IAAI,KAAK,QAAA,EAC5DA,EAAA,cAAAM,EAAA,CAAQ,KAAK,mBAAmB,CACnC,CAAA,CAEJ,CAAA,CAEJ,CAGgB,OAAAT,EAAA,YAAc,cAAcD,CAAa,IAEpDC,CACT"}