{"version":3,"sources":["components/activity/newyear-2019/common/system-bullet-screen/index.js"],"names":["SystemBulletScreen","count","state","showNotices","initializeSwiper","_this","Object","_Users_fe_frontCode_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_4__","_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","slideNext","len","props","bullets","length","sysNotice","height","removeSystemNotices","e","persist","target","setState","destroy","_this3","_this$props$bullets","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,CAAAE,GACXA,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,YAIhBH,EAAeE,GACjBH,EAAQJ,MAAMC,WAAd,aAAAQ,OAAwCJ,EAH/B,OAGT,YACAK,WAAW,WACTN,EAAQJ,MAAME,UAAd,eAAAO,SAA2CJ,EAAeE,GAAgB,GAA1E,YACC,MAEHG,WAAW,aACP/B,EAAKP,MACPQ,EAAO+B,aACN,QAIPhB,cAAgB,WAAM,IAGdiB,EAAuB,EAFXjC,EAAKkC,MAAhBC,QAEaC,SACdpC,EAAKP,QAAUwC,EACnBF,WAAW,WACT/B,EAAKqC,UAAUhB,MAAMiB,OAArB,OACC,KAEHP,WAAW,WACT/B,EAAKC,QAAUD,EAAKC,OAAO+B,aAC1B,QAIPO,oBAAsB,SAAAC,GACpBA,EAAEC,UACED,EAAEE,SAAW1C,EAAKqC,WACpBrC,EAAK2C,SAAS,CACZhD,aAAa,wFAvEjBe,KAAKd,kEAILc,KAAKT,QAAUS,KAAKT,OAAO2C,2CAwEpB,IAAAC,EAAAnC,KAAAoC,EAOHpC,KAAKwB,MALPC,eAFK,IAAAW,EAEK,CACR,2NACA,2NACA,4NALGA,EAQP,OACEpC,KAAKhB,MAAMC,aACXoD,EAAAC,EAAAC,cAAA,OAAKC,GAAG,uBAAuBC,gBAAiBzC,KAAK6B,oBAAqBa,IAAK,SAAAjC,GAAE,OAAI0B,EAAKR,UAAYlB,IACpG4B,EAAAC,EAAAC,cAAA,OAAKI,UAAU,SACVC,IAAI,8EAA8EC,IAAI,KAC3FR,EAAAC,EAAAC,cAAA,OAAKI,UAAU,sCACbN,EAAAC,EAAAC,cAAA,MAAII,UAAU,kBAEVlB,GAAWA,EAAQC,QAAUD,EAAQqB,IAAI,SAAC3C,EAAM4C,GAC9C,OACEV,EAAAC,EAAAC,cAAA,MAAII,UAAU,eAAeK,IAAKD,GAChCV,EAAAC,EAAAC,cAAA,YAAOpC,gBA1GM8C,cAuHlBnE","file":"mrstatic/js/system-notices.1191e8a7.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      setTimeout(() => {\n        ++this.count;\n        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        '第一条消息，第一条消息，第一条消息，第一条消息，第一条消息，第一条消息，',\n        '第二条消息，第二条消息，第二条消息，第二条消息，第二条消息，第二条消息，',\n        '第三条消息，第三条消息，第三条消息，第三条消息，第三条消息，第三条消息，',\n      ]\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-avatar.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            }\n          </ul>\n        </div>\n      </div>\n\n    )\n  }\n}\n\nexport default SystemBulletScreen\n"],"sourceRoot":""}