{"version":3,"sources":["components/activity/newyear-2019/common/system-bullet-screen/index.js"],"names":["SystemBulletScreen","count","state","showNotices","initializeSwiper","_this","Object","_Users_xzh_dnmp_www_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_5__","_this2","swiper","Swiper","allowTouchMove","direction","loop","on","init","Array","from","this","slides","forEach","item","querySelector","addEventListener","transitionEnd","slideChangeTransitionEnd","slideHorizontal","el","previousIndex","style","transition","transform","activeIndex","content","contentWidth","offsetWidth","wrapperWidth","clientWidth","concat","setTimeout","len","props","bullets","length","sysNotice","height","destroyed","slideNext","removeSystemNotices","e","persist","target","setState","destroy","_this3","react__WEBPACK_IMPORTED_MODULE_6___default","a","createElement","id","onTransitionEnd","ref","className","src","alt","map","index","key","Component"],"mappings":"2KAMMA,6NAGJC,MAAQ,IAGRC,MAAQ,CACNC,aAAa,KAWfC,iBAAmB,WACjB,IAAMC,EAAKC,OAAAC,EAAA,EAAAD,QAAAC,EAAA,EAAAD,CAAAE,IACXA,EAAKC,OAAS,IAAIC,IAAO,sCAAuC,CAC9DC,gBAAgB,EAChBC,UAAW,WACXC,MAAM,EACNC,GAAI,CACFC,KADE,WAEAC,MAAMC,KAAKC,KAAKC,QAAQC,QAAQ,SAAAC,GAC9BA,EAAKC,cAAc,QAAQC,iBAAiB,gBAAiBlB,EAAMmB,kBAGvEC,yBANE,WAOApB,EAAMqB,gBAAgBR,OAExBM,cATE,WAUA,IAAMG,EAAKT,KAAKC,OAAOD,KAAKU,eAAeN,cAAc,QACzDK,EAAGE,MAAMC,WAAa,QACtBH,EAAGE,MAAME,UAAY,4BAM7BL,gBAAkB,SAACjB,GACjB,IAAIkB,EAAKlB,EAAOU,OAAOV,EAAOuB,aAC5BC,EAAUN,EAAGL,cAAc,QAC3BY,EAAeD,EAAQE,YACvBC,EAAeT,EAAGU,YAIpB,GAAIH,EAAeE,EACjBH,EAAQJ,MAAMC,WAAd,aAAAQ,OAAwCJ,EAH/B,OAGT,YACAK,WAAW,WACTN,EAAQJ,MAAME,UAAd,eAAAO,SAA2CJ,EAAeE,GAAgB,GAA1E,YACC,SACE,KAECI,EAAuB,EADXhC,EAAKiC,MAAhBC,QACaC,OACpBJ,WAAW,aACH/B,EAAKP,QAAUuC,IACnBhC,EAAKoC,UAAUf,MAAMgB,OAArB,OAEDpC,IAAWA,EAAOqC,WAAcrC,EAAOsC,aACvC,SAIPvB,cAAgB,WAAM,IAGdgB,EAAuB,EAFXhC,EAAKiC,MAAhBC,QAEaC,SACdnC,EAAKP,QAAUuC,EACnBD,WAAW,WACT/B,EAAKoC,UAAUf,MAAMgB,OAArB,OACC,KAEHN,WAAW,WACT/B,EAAKC,QAAUD,EAAKC,OAAOsC,aAC1B,QAIPC,oBAAsB,SAAAC,GACpBA,EAAEC,UACED,EAAEE,SAAW3C,EAAKoC,WACpBpC,EAAK4C,SAAS,CACZjD,aAAa,wFA3EjBe,KAAKd,kEAILc,KAAKT,QAAUS,KAAKT,OAAO4C,2CA4EpB,IAAAC,EAAApC,KAELwB,EACExB,KAAKuB,MADPC,QAEF,OACExB,KAAKhB,MAAMC,aACXoD,EAAAC,EAAAC,cAAA,OAAKC,GAAG,uBAAuBC,gBAAiBzC,KAAK8B,oBAAqBY,IAAK,SAAAjC,GAAE,OAAI2B,EAAKV,UAAYjB,IACpG4B,EAAAC,EAAAC,cAAA,OAAKI,UAAU,SACVC,IAAI,mFAAmFC,IAAI,KAChGR,EAAAC,EAAAC,cAAA,OAAKI,UAAU,sCACbN,EAAAC,EAAAC,cAAA,MAAII,UAAU,kBAETnB,GAAWA,EAAQC,OAAUD,EAAQsB,IAAI,SAAC3C,EAAM4C,GAC7C,OACEV,EAAAC,EAAAC,cAAA,MAAII,UAAU,eAAeK,IAAKD,GAChCV,EAAAC,EAAAC,cAAA,YAAOpC,MAIX,eA9Ge8C,cAwHlBnE","file":"mrstatic/js/system-notices.88596789.chunk.js","sourcesContent":["import React, { Component } from 'react'\nimport Swiper from 'swiper'\nimport 'swiper/dist/css/swiper.min.css'\nimport './system-bullet-screen.scss'\n\n\nclass SystemBulletScreen extends Component {\n\n  swiper\n  count = 0\n  sysNotice\n\n  state = {\n    showNotices: true\n  }\n\n  componentDidMount() {\n    this.initializeSwiper()\n  }\n\n  componentWillUnmount() {\n    this.swiper && this.swiper.destroy()\n  }\n\n  initializeSwiper = () => {\n    const _this = this\n    this.swiper = new Swiper('.sys-bullet-screen-swiper-container', {\n      allowTouchMove: false,\n      direction: 'vertical',\n      loop: true,\n      on: {\n        init() {\n          Array.from(this.slides).forEach(item => {\n            item.querySelector('span').addEventListener('transitionend', _this.transitionEnd)\n          })\n        },\n        slideChangeTransitionEnd() {\n          _this.slideHorizontal(this)\n        },\n        transitionEnd() {\n          const el = this.slides[this.previousIndex].querySelector('span')\n          el.style.transition = 'unset'\n          el.style.transform = 'translate3d(0,0,0)'\n        }\n      }\n    })\n  }\n\n  slideHorizontal = (swiper) => {\n    let el = swiper.slides[swiper.activeIndex],\n      content = el.querySelector('span'),\n      contentWidth = content.offsetWidth,\n      wrapperWidth = el.clientWidth\n\n    const co = 131.25\n\n    if (contentWidth > wrapperWidth) {\n      content.style.transition = `transform ${contentWidth / co}s linear`\n      setTimeout(() => {\n        content.style.transform = `translate3d(${-(contentWidth - wrapperWidth) - 10}px,0,0)`\n      }, 1000)\n    } else {\n      const {bullets} = this.props\n      const len = bullets.length * 3\n      setTimeout(() => {\n        if (++this.count === len) {\n          this.sysNotice.style.height = `0px`\n        }\n        (swiper && !swiper.destroyed) && swiper.slideNext()\n      }, 3000)\n    }\n  }\n\n  transitionEnd = () => {\n    const {bullets} = this.props\n\n    const len = bullets.length * 3\n    if (++this.count === len) {\n      setTimeout(() => {\n        this.sysNotice.style.height = `0px`\n      }, 2000)\n    } else {\n      setTimeout(() => {\n        this.swiper && this.swiper.slideNext()\n      }, 1000)\n    }\n  }\n\n  removeSystemNotices = e => {\n    e.persist()\n    if (e.target === this.sysNotice) {\n      this.setState({\n        showNotices: false\n      })\n    }\n  }\n\n  render() {\n    const {\n      bullets\n    } = this.props\n    return (\n      this.state.showNotices &&\n      <div id=\"system-bullet-screen\" onTransitionEnd={this.removeSystemNotices} ref={el => this.sysNotice = el}>\n        <img className='avatar'\n             src='https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/system-notice-icon.png' alt=\"\"/>\n        <div className='sys-bullet-screen-swiper-container'>\n          <ul className=\"swiper-wrapper\">\n            {\n              (bullets && bullets.length) ? bullets.map((item, index) => {\n                  return (\n                    <li className=\"swiper-slide\" key={index}>\n                      <span>{item}</span>\n                    </li>\n                  )\n                })\n                : null\n            }\n          </ul>\n        </div>\n      </div>\n\n    )\n  }\n}\n\nexport default SystemBulletScreen\n"],"sourceRoot":""}