├── examples
    ├── App.css
    ├── index.css
    ├── index.js
    ├── pages
    │   ├── bscroll-pullDown
    │   │   ├── main.css
    │   │   └── index.js
    │   ├── bscroll-pullup
    │   │   ├── main.css
    │   │   └── index.js
    │   ├── bscroll-vertical
    │   │   ├── main.css
    │   │   └── index.js
    │   ├── bscroll-multi
    │   │   ├── main.css
    │   │   └── index.js
    │   └── bscroll-sample
    │   │   ├── sample.css
    │   │   └── index.js
    └── App.js
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── loading
    │   ├── loading.gif
    │   ├── loading.css
    │   └── loading.js
    ├── scroll
    │   ├── betterScroll.css
    │   └── index.js
    └── bubble
    │   └── bubble.js
├── cli
    └── gh-pages.js
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.lib.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── .gitignore
├── lib
    ├── react-scroll.css
    └── react-bscroll.js
├── package.json
├── .eslintrc
├── README.md
└── scripts
    ├── dev.js
    ├── build-lib.js
    └── build-demo.js


/examples/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soluteli/react-bscroll/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/examples/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/loading/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soluteli/react-bscroll/HEAD/src/loading/loading.gif


--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/loading/loading.css:
--------------------------------------------------------------------------------
 1 | .loading-container {
 2 |     width: 100%;
 3 | }
 4 | 
 5 | .loading-container img {
 6 |     display: block;
 7 |     width: 20px;
 8 |     height: 20px;
 9 |     margin: 0 auto;
10 | }


--------------------------------------------------------------------------------
/cli/gh-pages.js:
--------------------------------------------------------------------------------
 1 | var ghpages = require('gh-pages');
 2 | // var path = require('path');
 3 | 
 4 | ghpages.publish('dist', function(err) {
 5 |   if (err) {
 6 |     return console.log('gh pages error', err)
 7 |   }
 8 |   console.log('gh pages success')
 9 | 
10 | });


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 
23 | yarn.lock
24 | 


--------------------------------------------------------------------------------
/src/loading/loading.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | import './loading.css'
 4 | 
 5 | const loadingImg = require('./loading.gif')
 6 | 
 7 | class Loading extends Component {
 8 |   
 9 |   render () {
10 |     return (
11 |       <div className="loading-container">
12 |         <img src={loadingImg} alt="loading" />
13 |       </div>
14 |     )
15 |   }
16 | }
17 | 
18 | export default Loading
19 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-pullDown/main.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     position: relative;
 3 |     height: 400px;
 4 |     background: rgba(0,0,0,.3);
 5 |     border: 1px solid #000;
 6 | }
 7 | 
 8 | .content {
 9 |     /*width: 200%;*/
10 |     position: relative;
11 |     margin: 0;
12 | }
13 | 
14 | .content-item {
15 |     height: 60px;
16 |     line-height: 60px;
17 |     font-size: 18px;
18 |     padding-left: 20px;
19 |     border-bottom: 1px solid #e5e5e5;
20 | }
21 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-pullup/main.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     position: relative;
 3 |     height: 400px;
 4 |     background: rgba(0,0,0,.3);
 5 |     border: 1px solid #000;
 6 | }
 7 | 
 8 | .content {
 9 |     /*width: 200%;*/
10 |     position: relative;
11 |     margin: 0;
12 | }
13 | 
14 | .content-item {
15 |     height: 60px;
16 |     line-height: 60px;
17 |     font-size: 18px;
18 |     padding-left: 20px;
19 |     border-bottom: 1px solid #e5e5e5;
20 | }
21 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-vertical/main.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     position: relative;
 3 |     height: 400px;
 4 |     background: rgba(0,0,0,.3);
 5 |     border: 1px solid #000;
 6 | }
 7 | 
 8 | .content {
 9 |     /*width: 200%;*/
10 |     position: relative;
11 |     margin: 0;
12 | }
13 | 
14 | .content-item {
15 |     height: 60px;
16 |     line-height: 60px;
17 |     font-size: 18px;
18 |     padding-left: 20px;
19 |     border-bottom: 1px solid #e5e5e5;
20 | }
21 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-multi/main.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     position: relative;
 3 |     height: 300px;
 4 |     background: rgba(0,0,0,.3);
 5 |     border: 1px solid #000;
 6 |     margin-bottom: 10px;
 7 | }
 8 | 
 9 | .content {
10 |     /*width: 200%;*/
11 |     position: relative;
12 |     margin: 0;
13 | }
14 | 
15 | .content-item {
16 |     height: 60px;
17 |     line-height: 60px;
18 |     font-size: 18px;
19 |     padding-left: 20px;
20 |     border-bottom: 1px solid #e5e5e5;
21 | }
22 | 


--------------------------------------------------------------------------------
/lib/react-scroll.css:
--------------------------------------------------------------------------------
1 | .loading-container{width:100%}.loading-container img{display:block;width:20px;height:20px;margin:0 auto}.b-wrapper{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;background:#fff}.b-pullup-wrapper{height:60px;line-height:60px}.b-pulldown-wrapper,.b-pullup-wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.b-pulldown-wrapper{position:absolute;top:0;left:0;-webkit-transition:all;-o-transition:all;transition:all;pointer-events:none}.b-pulldown-wrapper .after-trigger{margin-top:10px}


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/src/scroll/betterScroll.css:
--------------------------------------------------------------------------------
 1 | .b-wrapper {
 2 |     position: absolute;
 3 |     left: 0;
 4 |     top: 0;
 5 |     right: 0;
 6 |     bottom: 0;
 7 |     overflow: hidden;
 8 |     background: #fff;
 9 | }
10 | 
11 | .b-pullup-wrapper {
12 |     width: 100%;
13 |     display: flex;
14 |     justify-content: center;
15 |     align-items: center;
16 |     height: 60px;
17 |     line-height: 60px;
18 | }
19 | 
20 | .b-pulldown-wrapper {
21 |     position: absolute;
22 |     width: 100%;
23 |     top: 0;
24 |     left: 0;
25 |     display: flex;
26 |     justify-content: center;
27 |     align-items: center;
28 |     transition: all;
29 |     pointer-events: none;
30 | }
31 | 
32 | .b-pulldown-wrapper .after-trigger {
33 |     margin-top: 10px
34 | }
35 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-sample/sample.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     position: relative;
 3 |     height: 400px;
 4 |     background: rgba(0,0,0,.3);
 5 |     border: 1px solid #000;
 6 | }
 7 | 
 8 | .b-wrapper {
 9 |     position: absolute;
10 |     left: 0;
11 |     top: 0;
12 |     right: 0;
13 |     bottom: 0;
14 |     overflow: hidden;
15 |     background: #fff;
16 | }
17 | 
18 | .b-content {
19 |     /*width: 200%;*/
20 |     position: relative;
21 |     margin: 0;
22 | }
23 | 
24 | .b-content-item {
25 |     /*height: 60px;*/
26 |     line-height: 60px;
27 |     font-size: 18px;
28 |     padding-left: 20px;
29 |     border-bottom: 1px solid #e5e5e5;
30 | }
31 | 
32 | .b-pullup-wrapper {
33 |     width: 100%;
34 |     display: flex;
35 |     justify-content: center;
36 |     align-items: center;
37 |     height: 60px;
38 |     line-height: 60px;
39 | }
40 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-vertical/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Scroll from 'src/scroll'
 3 | 
 4 | import './main.css'
 5 | 
 6 | const Data = []
 7 | for (let i = 0; i < 10; i++) {
 8 |   Data.push(i)
 9 | }
10 | class VerticalScrollPage extends Component {
11 |   constructor (props, context) {
12 |     super(props, context)
13 | 
14 |     this.state = {
15 |       listData: Data,
16 |       childData: 666
17 |     }
18 |   }
19 | 
20 |   componentDidMount () {
21 |     for (let i = 10; i < 30; i++) {
22 |       Data.push(i)
23 |     }
24 |   }
25 | 
26 |   clickItem (item) {
27 |     console.log('clickEvent', item)
28 |   }
29 | 
30 |   render () {
31 |     return (
32 |       <div>
33 |         <div className="container">
34 |           <Scroll>
35 |             <ul className="content">
36 |               {this.state.listData.map((item, index) =>
37 |                 (<li className="content-item"
38 |                   key={index}
39 |                   onClick={this.clickItem.bind(this, item)}
40 |                 >
41 |                   item:{item}
42 |                 </li>),
43 |               )}
44 |             </ul>
45 |           </Scroll>
46 |         </div>
47 |       </div>
48 |     )
49 |   }
50 | }
51 | 
52 | export default VerticalScrollPage
53 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <!--<link rel="manifest" href="%PUBLIC_URL%/manifest.json">-->
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |     <script src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-multi/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Scroll from 'src/scroll'
 3 | 
 4 | import './main.css'
 5 | 
 6 | let Data = []
 7 | for (let i = 0; i < 10; i++) {
 8 |   Data.push(i)
 9 | }
10 | let Data2 = []
11 | for (let i = 10; i < 20; i++) {
12 |   Data2.push(i)
13 | }
14 | class BscrollMultiPage extends Component {
15 |   constructor (props, context) {
16 |     super(props, context)
17 | 
18 |     this.state = {
19 |       listData: Data,
20 |       listData2: Data2,
21 |       childData: 666
22 |     }
23 |   }
24 | 
25 |   componentDidMount () {
26 |     for (let i = 10; i < 30; i++) {
27 |       Data.push(i)
28 |     }
29 |   }
30 | 
31 |   clickItem (item) {
32 |     console.log('clickEvent', item)
33 |   }
34 | 
35 |   render () {
36 |     return (
37 |       <div>
38 |         <div className="container">
39 |           <Scroll>
40 |             <ul className="content">
41 |               {this.state.listData.map((item, index) =>
42 |                 (<li className="content-item"
43 |                   key={index}
44 |                   onClick={this.clickItem.bind(this, item)}
45 |                 >
46 |                   item:{item}
47 |                 </li>),
48 |               )}
49 |             </ul>
50 |           </Scroll>
51 |         </div>
52 |         <div className="container">
53 |           <Scroll>
54 |             <ul className="content">
55 |               {this.state.listData2.map((item, index) =>
56 |                 (<li className="content-item"
57 |                   key={index}
58 |                   onClick={this.clickItem.bind(this, item)}
59 |                 >
60 |                   item:{item}
61 |                 </li>),
62 |               )}
63 |             </ul>
64 |           </Scroll>
65 |         </div>
66 |       </div>
67 |     )
68 |   }
69 | }
70 | 
71 | export default BscrollMultiPage
72 | 


--------------------------------------------------------------------------------
/examples/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { HashRouter as Router, Route, Link } from 'react-router-dom'
 3 | 
 4 | // import BScrollSamplePage from './pages/bscroll-sample'
 5 | import BScrollVertivalPage from './pages/bscroll-vertical/index'
 6 | import BScrollPullupPage from './pages/bscroll-pullup/index'
 7 | import BScrollPullDownPage from './pages/bscroll-pullDown/index'
 8 | import BscrollMultiPage from './pages/bscroll-multi/index'
 9 | 
10 | class Home extends Component {
11 |   render () {
12 |     return (
13 |       <dl>
14 |         <dt>
15 |           <h2>Demos</h2>
16 |           <p>如果在pc端预览，请在打开移动调试工具后，先刷新后查看效果</p>
17 |         </dt>
18 | 
19 |         {/*<dd><Link to="/bscroll-sample">01: 使用原better-scroll</Link></dd>*/}
20 |         <dd><Link to="/bscroll-vertical">01: react-scroll -- 简单案例</Link></dd>
21 |         <dd><Link to="/bscroll-pullup">02: react-scroll -- 上拉加载</Link></dd>
22 |         <dd><Link to="/bscroll-pullDown">03: react-scroll -- 下拉加载</Link></dd>
23 |         <dd><Link to="/multi">04: react-scroll -- 多个scroll</Link></dd>
24 |       </dl>
25 |     )
26 |   }
27 | }
28 | 
29 | class App extends Component {
30 |   render () {
31 |     return (
32 |       <Router>
33 |         <div className = 'App' >
34 |           {/* 导航 */}
35 |           <Route path="/" component={Home} exact ></Route>
36 | 
37 |           {/* better-scroll */}
38 |           {/*<Route path="/bscroll-sample" component={BScrollSamplePage}></Route>*/}
39 |           <Route path="/bscroll-vertical" component={BScrollVertivalPage}></Route>
40 |           <Route path="/bscroll-pullup" component={BScrollPullupPage}></Route>
41 |           <Route path="/bscroll-pullDown" component={BScrollPullDownPage}></Route>
42 |           <Route path="/multi" component={BscrollMultiPage}></Route>
43 |         </div>
44 |       </Router>
45 |     )
46 |   }
47 | }
48 | 
49 | export default App;
50 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-pullDown/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Scroll from 'src/scroll'
 3 | 
 4 | import './main.css'
 5 | 
 6 | const Data = []
 7 | let NEWTOPDATAINDEX1 = 1
 8 | for (let i = 0; i < 10; i++) {
 9 |   Data.push(i)
10 | }
11 | class PullDownScrollPage extends Component {
12 |   constructor (props, context) {
13 |     super(props, context)
14 | 
15 |     this.state = {
16 |       listData: Data,
17 |       childData: 666
18 |     }
19 |   }
20 | 
21 |   componentWillMount () {
22 |     NEWTOPDATAINDEX1 = 1
23 |   }
24 | 
25 |   componentDidMount () {
26 |   }
27 | 
28 |   componentWillUnmount () {
29 |     clearTimeout(this.timer)
30 |   }
31 | 
32 |   pullDownFreshAction = () => {
33 |     return new Promise((resolve) => {
34 |       this.timer = setTimeout(() => {
35 |         if (Math.random() > 0) {
36 |           // 如果有新数据
37 |           let newPage = []
38 |           for (let i = 0; i < 2; i++) {
39 |             newPage.unshift(`我是顶部新数据${NEWTOPDATAINDEX1++}`)
40 |           }
41 |           this.setState({
42 |             listData: [
43 |               ...newPage,
44 |               ...this.state.listData
45 |             ],
46 |           })
47 |         }
48 |         resolve()
49 |       }, 1000)
50 |     })
51 |   }
52 | 
53 |   clickItem (item) {
54 |     console.log('clickEvent', item)
55 |   }
56 | 
57 |   render () {
58 |     return (
59 |       <div>
60 |         <div className="container">
61 |           <Scroll
62 |             pullDownRefresh
63 |             doPullDownFresh={this.pullDownFreshAction}
64 |           >
65 |             <ul className="content">
66 |               {this.state.listData.map((item, index) =>
67 |                 (<li className="content-item"
68 |                   key={index}
69 |                   onClick={this.clickItem.bind(this, item)}
70 |                 >
71 |                   item:{item}
72 |                 </li>),
73 |               )}
74 |             </ul>
75 |           </Scroll>
76 |         </div>
77 |       </div>
78 |     )
79 |   }
80 | }
81 | 
82 | export default PullDownScrollPage
83 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-pullup/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Scroll from 'src/scroll'
 3 | 
 4 | import './main.css'
 5 | 
 6 | const Data = []
 7 | let NEWDATAINDEX = 1
 8 | for (let i = 0; i < 10; i++) {
 9 |   Data.push(i)
10 | }
11 | class PullupScrollPage extends Component {
12 |   constructor (props, context) {
13 |     super(props, context)
14 | 
15 |     this.state = {
16 |       listData: Data,
17 |       childData: 666
18 |     }
19 |   }
20 | 
21 |   componentWillMount () {
22 |     NEWDATAINDEX = 1
23 |   }
24 | 
25 |   componentDidMount () {
26 |   }
27 | 
28 |   componentWillUnmount () {
29 |     console.log('compomentWillUnmount')
30 |     console.log(this.timer)
31 |     clearTimeout(this.timer)
32 |   }
33 | 
34 |   loadMoreData = () => {
35 |     // 更新数据
36 |     return new Promise( resolve => {
37 |       console.log('pulling up and load data')
38 |       this.timer = setTimeout(() => {
39 |         if (Math.random() > 0) {
40 |           // 如果有新数据
41 |           let newPage = []
42 |           for (let i = 0; i < 2; i++) {
43 |             newPage.push(`我是新数据${NEWDATAINDEX++}`)
44 |           }
45 |           this.setState({
46 |             listData: [
47 |               ...this.state.listData,
48 |               ...newPage
49 |             ],
50 |           })
51 |         }
52 |         resolve()
53 |       }, 1000)
54 |     })
55 |   }
56 | 
57 |   clickItem (item) {
58 |     console.log('clickEvent', item)
59 |   }
60 | 
61 |   render () {
62 |     return (
63 |       <div>
64 |         <div className="container">
65 |           <Scroll
66 |             pullUpLoad
67 |             pullUpLoadMoreData={this.loadMoreData}
68 |             isPullUpTipHide={ false }
69 |           >
70 |             <ul className="content">
71 |               {this.state.listData.map((item, index) =>
72 |                 (<li className="content-item"
73 |                   key={index}
74 |                   onClick={this.clickItem.bind(this, item)}
75 |                 >
76 |                   item:{item}
77 |                 </li>),
78 |               )}
79 |             </ul>
80 |           </Scroll>
81 |         </div>
82 |       </div>
83 |     )
84 |   }
85 | }
86 | 
87 | export default PullupScrollPage
88 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('dist'),
45 |   appLib: resolveApp('lib'),
46 |   appPublic: resolveApp('public'),
47 |   appHtml: resolveApp('public/index.html'),
48 |   appIndexJs: resolveApp('examples/index.js'),
49 |   appLibJs: resolveApp('src/scroll/index.js'),
50 |   appPackageJson: resolveApp('package.json'),
51 |   appSrc: resolveApp('src'),
52 |   appExample: resolveApp('examples'),
53 |   yarnLockFile: resolveApp('yarn.lock'),
54 |   testsSetup: resolveApp('src/setupTests.js'),
55 |   appNodeModules: resolveApp('node_modules'),
56 |   publicUrl: getPublicUrl(resolveApp('package.json')),
57 |   servedPath: getServedPath(resolveApp('package.json')),
58 | };
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-bscroll",
 3 |   "version": "1.0.7",
 4 |   "description": "react-bscroll ui component for react",
 5 |   "keywords": [
 6 |     "react",
 7 |     "react-component",
 8 |     "react-bscroll"
 9 |   ],
10 |   "files": [
11 |     "src",
12 |     "lib"
13 |   ],
14 |   "main": "lib/react-bscroll.js",
15 |   "homepage": "https://soluteli.github.io/rc-bscroll/",
16 |   "author": "soluteli@163.com",
17 |   "repository": "https://github.com/soluteli/react-bscroll.git",
18 |   "bugs": "https://github.com/soluteli/react-bscroll/issues",
19 |   "dependencies": {
20 |     "better-scroll": "^1.12.1"
21 |   },
22 |   "scripts": {
23 |     "dev": "node scripts/dev.js",
24 |     "build:demo": "node scripts/build-demo.js",
25 |     "build:lib": "node scripts/build-lib.js",
26 |     "gh-pages": "node cli/gh-pages.js"
27 |   },
28 |   "babel": {
29 |     "presets": [
30 |       "react-app"
31 |     ]
32 |   },
33 |   "eslintConfig": {
34 |     "extends": "react-app"
35 |   },
36 |   "devDependencies": {
37 |     "autoprefixer": "7.1.2",
38 |     "babel-core": "6.25.0",
39 |     "babel-eslint": "7.2.3",
40 |     "babel-jest": "20.0.3",
41 |     "babel-loader": "7.1.1",
42 |     "babel-preset-es2015": "^6.24.1",
43 |     "babel-preset-react": "^6.24.1",
44 |     "babel-preset-react-app": "^3.0.2",
45 |     "babel-preset-stage-2": "^6.24.1",
46 |     "babel-runtime": "6.26.0",
47 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
48 |     "chalk": "1.1.3",
49 |     "css-loader": "0.28.4",
50 |     "dotenv": "4.0.0",
51 |     "eslint": "4.4.1",
52 |     "eslint-config-react-app": "^2.0.0",
53 |     "eslint-loader": "1.9.0",
54 |     "eslint-plugin-flowtype": "2.35.0",
55 |     "eslint-plugin-import": "2.7.0",
56 |     "eslint-plugin-jsx-a11y": "5.1.1",
57 |     "eslint-plugin-react": "7.1.0",
58 |     "extract-text-webpack-plugin": "3.0.0",
59 |     "file-loader": "0.11.2",
60 |     "fs-extra": "3.0.1",
61 |     "gh-pages": "^1.0.0",
62 |     "html-webpack-plugin": "2.29.0",
63 |     "jest": "20.0.4",
64 |     "object-assign": "4.1.1",
65 |     "postcss-flexbugs-fixes": "3.2.0",
66 |     "postcss-loader": "2.0.6",
67 |     "promise": "8.0.1",
68 |     "prop-types": "^15.5.10",
69 |     "react": "^15.6.1",
70 |     "react-dev-utils": "^4.0.1",
71 |     "react-dom": "^15.6.1",
72 |     "react-router-dom": "^4.2.2",
73 |     "style-loader": "0.18.2",
74 |     "sw-precache-webpack-plugin": "0.11.4",
75 |     "url-loader": "0.5.9",
76 |     "webpack": "3.5.1",
77 |     "webpack-dev-server": "2.7.1",
78 |     "webpack-manifest-plugin": "1.2.1",
79 |     "whatwg-fetch": "2.0.3"
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "parser": "babel-eslint",
  3 |   "plugins": [
  4 |     "react"
  5 |   ],
  6 |   "parserOptions": {
  7 |     "ecmaVersion": 7
  8 |   },
  9 |   "env": {
 10 |     "es6": true,
 11 |     "browser": true,
 12 |     "jasmine": true,
 13 |     "node": true
 14 |   },
 15 |   "globals": {
 16 |     "_": true,
 17 |     "$": true,
 18 |     "USER_INFO": true,
 19 |     "log": true,
 20 |     "Primus": true
 21 |   },
 22 |   "rules": {
 23 |     "array-bracket-spacing": 0,
 24 |     "camelcase": 2,
 25 |     "computed-property-spacing": [
 26 |       2,
 27 |       "never"
 28 |     ],
 29 |     "curly": [
 30 |       2,
 31 |       "all"
 32 |     ],
 33 |     "dot-notation": 0,
 34 |     // "eol-last": 2,
 35 |     // "eqeqeq": 2,
 36 |     "max-len": [
 37 |       2,
 38 |       300,
 39 |       4
 40 |     ],
 41 |     "new-cap": [
 42 |       2, {
 43 |         "capIsNew": false
 44 |       }
 45 |     ],
 46 |     "no-eq-null": 2,
 47 |     "no-mixed-spaces-and-tabs": 2,
 48 |     "no-multiple-empty-lines": [
 49 |       2, {
 50 |         "max": 2
 51 |       }
 52 |     ],
 53 |     "no-use-before-define": [ 2, "nofunc" ],
 54 |     "no-undef": 2,
 55 |     "no-underscore-dangle": 0,
 56 |     "no-unused-vars": 1,
 57 |     "no-var": 1,
 58 |     "quotes": [
 59 |       2,
 60 |       "single"
 61 |     ],
 62 |     "semi": [ 0, "always" ],
 63 |     "keyword-spacing": [
 64 |       "error", {
 65 |         "after": true
 66 |       }
 67 |     ],
 68 |     "space-before-blocks": [ 2, "always" ],
 69 |     "object-curly-spacing": [ 2, "always" ],
 70 |     "space-infix-ops": [ 2 ],
 71 |     "space-unary-ops": [
 72 |       2, {
 73 |         "words": true,
 74 |         "nonwords": false
 75 |     }],
 76 |     "no-warning-comments": [
 77 |       1, {
 78 |         "terms": [
 79 |           "fixme"
 80 |         ],
 81 |         "location": "anywhere"
 82 |       }
 83 |     ],
 84 |     "strict": 0,
 85 |     "vars-on-top": 0,
 86 |     "indent": [
 87 |       2,
 88 |       2, {
 89 |         "SwitchCase": 1
 90 |       }
 91 |     ],
 92 |     "react/display-name": 0,
 93 |     "react/jsx-boolean-value": 2,
 94 |     "react/jsx-no-undef": 2,
 95 |     "react/jsx-sort-props": 0,
 96 |     "react/jsx-uses-react": 2,
 97 |     "react/jsx-uses-vars": 2,
 98 |     "react/no-did-mount-set-state": 2,
 99 |     "react/no-did-update-set-state": 2,
100 |     "react/no-multi-comp": 0,
101 |     "react/no-unknown-property": 2,
102 |     "react/prop-types": 2,
103 |     "react/react-in-jsx-scope": 2,
104 |     // "react/self-closing-comp": 2,
105 |     "react/jsx-wrap-multilines": 2
106 |   }
107 | }
108 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-bscroll
 2 | ---
 3 | 
 4 | 1. 本项目是[better-scroll](https://github.com/ustbhuangyi/better-scroll)在React中的一种实现。
 5 | 2. 适用于移动端
 6 | 
 7 | ## Example
 8 | 1. [demo](https://soluteli.github.io/react-bscroll/)   
 9 | 2. [源码](examples/pages)  
10 | 
11 | ## Install
12 | ```
13 | npm install react-bscroll -S
14 | ```
15 | OR   
16 | ```
17 | yarn add react-bscroll
18 | ```
19 | 
20 | 
21 | ## Usage
22 | ```react
23 | // 根据文件相对路径引入
24 | import Scroll from 'react-bscroll'
25 | import 'react-bscroll/lib/react-scroll.css'
26 | ...
27 | 
28 | render () {
29 |   return (
30 |     <div className="container">
31 |         <Scroll>
32 |           ...list
33 |         </Scroll>
34 |       </div>
35 |     </div>
36 |   )
37 | }
38 | ```
39 | 
40 | 
41 | **Tips**   
42 | 1. `Scroll`的父容器必须要相对或者绝对定位，否则会导致滚动条位置出错
43 | 2. 点击事件要将`click`设置为`true`
44 | 
45 | ## API
46 | 具体选项的含义请参考[Better-Scroll中文文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans)
47 | 
48 | ### 选项 
49 | | 属性 | 类型 | 默认值 | 说明 |   
50 | | ---- | ---- | ---- | ---- |  
51 | | probeType | Number | 3 | 我们需要知道滚动的位置， 当probeType为0：不派发滚动事件；为1：非实时（屏幕滑动超过一定时间后）派发scroll 事件； 为2：实时的派发 scroll 事件； 为 3 ：屏幕滑动的过程中和momentum 滚动动画运行过程中实时派发 scroll 事件 |
52 | | click | Boolean | false| better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件。但是自定义的 click 事件会阻止一些原生组件的行为，如 checkbox 的选中等，所以一旦滚动列表中有一些原生表单组件，推荐的做法是监听 tap 事件（*暂未实现tap*）或者 在需要click的原生Dom添加`orginEvent`类名 |   
53 | | scrollY | Boolean | true | 默认允许Y轴滚动 |
54 | | scrollX | Boolean | false | 默认阻止X轴滚动 |
55 | | bounce | Boolean | true | 是否开启回弹 |
56 | | disabled | Boolean | false | 是否禁用 better-scroll |
57 | | stopPropagation | Boolean | false | 默认不阻止事件冒泡 |
58 | | scrollbar | Boolean | false | 默认显示滚动条，有fade消失的效果（默认值也可以设置为Obeject，*暂未实现*） |  
59 | | pullDownRefresh | Boolean or Object | Object | 这个配置用于做下拉刷新功能，当设置 Object 的时，可以配置更多的具体细节。[demo](https://soluteli.github.io/react-bscroll/#/vertical-scroll)，无此需求时请设置为false | 
60 | | pullUpLoad | Boolean or Object | Obejct | 这个配置用于做上拉加载功能，若为Object时可以配置一些具体的参数，[demo](https://soluteli.github.io/react-bscroll/#/vertical-scroll)，无此需求时请设置为false | 
61 | | pullUpLoadMoreData | Function | null | 上拉加载时触发的异步加载数据的方法,需要返回一个resolved状态的Promise来刷新BetterScroll,[demo](https://soluteli.github.io/react-bscroll/#/vertical-scroll)| 
62 | | doPullDownFresh | Function | null | 下拉加载时的回调函数,需要返回一个resolved状态的Promise来刷新BetterScroll。[demo](https://soluteli.github.io/react-bscroll/#/vertical-scroll)| 
63 | | doScroll | Function | null | 滚动时的触发回调函数 | 
64 | | doScrollStart | Function | null | 滚动开始时的触发事件 | 
65 | | doScrollEnd | Function | null | 滚动结束时的操作 | 
66 | | isPullUpTipHide | Boolean | true | 主要用于在上拉加载可用时，若列表数据不足一页，则要隐藏底部提示；若超过一页则显示。 | 
67 | 
68 | ### 方法
69 | `react-scroll`只提供了一个获取`better-scroll`实例的方法：`getScrollObj`   
70 | 通过该方法可以获取`better-scroll`实例，从而可以调用实例的方法。[具体方法API点击这里](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans)
71 | 
72 | ```jsx
73 | // 根据文件相对路径引入
74 | import Scroll from 'react-bscroll'
75 | import 'react-bscroll/lib/react-scroll.css'
76 | ...
77 | 
78 | compoentDidMount () {
79 |   // 获取实例
80 |   this.scrollObj = this.refs.scroll.getScrollObj()
81 | }
82 | 
83 | render () {
84 |   return (
85 |     <div className="container">
86 |         <Scroll ref='scroll'>
87 |           ...list
88 |         </Scroll>
89 |       </div>
90 |     </div>
91 |   )
92 | }
93 | ```
94 | ### 修复问题
95 | 同一页面多次引入调用`<Scroll></Scroll>`组件会有BUG，新增每个`<scroll></scroll>`初始化时唯一ID。
96 | 
97 | ### 新增3个配置项
98 | `bounce`,`disabled`,`stopPropagation`。具体用途看[选项](#api)。


--------------------------------------------------------------------------------
/scripts/dev.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/examples/pages/bscroll-sample/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import BScroll from 'better-scroll'
  3 | 
  4 | import './sample.css'
  5 | 
  6 | const Data = []
  7 | 
  8 | for (let i = 0; i < 30; i++) {
  9 |   Data.push(i)
 10 | }
 11 | 
 12 | class Sample extends Component {
 13 |   constructor () {
 14 |     super()
 15 | 
 16 |     this.scroll = null
 17 | 
 18 |     this.pullUpload = {
 19 |       threshold: 0,
 20 |       txt: {
 21 |         more: '加载更多',
 22 |         nomore: '加载结束',
 23 |       },
 24 |     }
 25 |     this.isPullUpLoad = false
 26 | 
 27 |     this.state = {
 28 |       listData: Data,
 29 |       pullUpload: this.pullUpload,
 30 |       isPullUpLoad: this.isPullUpLoad,
 31 |     }
 32 |   }
 33 | 
 34 |   componentDidMount () {
 35 |     this.initScroll()
 36 |   }
 37 | 
 38 |   initScroll () {
 39 |     let wrapper = document.querySelector('.b-wrapper')
 40 | 
 41 |     let options = {
 42 |       probeType: 0, // https://ustbhuangyi.github.io/better-scroll/doc/options.html#probetype
 43 |       click:  true, // https://ustbhuangyi.github.io/better-scroll/doc/options.html#tap
 44 |       scrollY: true,
 45 |       scrollX: false,
 46 |       freeScroll: false,
 47 |       scrollbar: true,
 48 |       pullUpLoad: this.state.pullUpload,
 49 |     }
 50 | 
 51 |     this.scroll = new BScroll(wrapper, options)
 52 | 
 53 |     if (options.pullUpLoad) {
 54 |       this._initPullUpLoad()
 55 |     }
 56 |   }
 57 | 
 58 |   clickItem (item) {
 59 |     console.log('clickEvent item', item)
 60 |   }
 61 | 
 62 |   _initPullUpLoad () {
 63 |     console.log('_initPullUpLoad')
 64 |     this.scroll.on('pullingUp', () => {
 65 |       this.setState({
 66 |         isPullUpLoad: true,
 67 |       })
 68 |       console.log('pullingUp...')
 69 |       this.pullLoadMoreData()
 70 |     })
 71 |   }
 72 | 
 73 |   pullLoadMoreData () {
 74 |     // 更新数据
 75 |     console.log('pulling up and load data')
 76 |     setTimeout(() => {
 77 |       if (Math.random() > .5) {
 78 |         // 如果有新数据
 79 |         let newPage = []
 80 |         for (let i = 0; i < 10; i++) {
 81 |           newPage.push(`我是新数据${i}`)
 82 |         }
 83 |         this.setState({
 84 |           listData: [
 85 |             ...this.state.listData,
 86 |             ...newPage
 87 |           ],
 88 |           isPullUpLoad: false,
 89 |         })
 90 |       } else {
 91 |         this.setState({
 92 |           isPullUpLoad: false,
 93 |         })
 94 |       }
 95 |       this.forceUpdate()
 96 |     }, 1000)
 97 |   }
 98 | 
 99 |   forceUpdate () {
100 |     console.log('force update')
101 |     this.scroll.finishPullUp()
102 |     this.scroll && this.scroll.refresh();
103 |   }
104 | 
105 |   renderPullUpLoad () {
106 |     if (this.state.pullUpload && this.state.isPullUpLoad) {
107 |       return (
108 |         <div className="b-pullup-wrapper">
109 |           <div className="after-trigger">
110 |             loading...
111 |           </div>
112 |         </div>
113 |       )
114 |     }
115 |     if (this.state.pullUpload && !this.state.isPullUpLoad) {
116 |       return (
117 |         <div className="b-pullup-wrapper">
118 |           <div className="before-trigger">
119 |             <span>加载完成</span>
120 |           </div>
121 |         </div>
122 |       )
123 | 
124 |     }
125 |   }
126 | 
127 |   render () {
128 |     return (
129 |       <div className="container">
130 |         <div className="b-wrapper">
131 |           <div className="b-scroll-content">
132 |             <ul className="b-content">
133 |               {this.state.listData.map((item, index) =>
134 |                 (<li className="b-content-item"
135 |                   key={index}
136 |                   onClick={this.clickItem.bind(this, item)}
137 |                 >
138 |                   item:{item}
139 |                   <div onClick={e => {e.stopPropagation(); console.log('inner')}}>inner stopPropagation</div>
140 |                 </li>),
141 |               )}
142 |             </ul>
143 |             {this.renderPullUpLoad()}
144 |           </div>
145 | 
146 |         </div>
147 |       </div>
148 | 
149 |     )
150 |   }
151 | }
152 | 
153 | export default Sample
154 | 


--------------------------------------------------------------------------------
/src/bubble/bubble.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import PropTypes from 'prop-types'
  3 | 
  4 | 
  5 | class Bubble extends Component {
  6 |   static propTypes = {
  7 |     y: PropTypes.number,
  8 |   }
  9 | 
 10 |   static defaultProps = {
 11 |     y: 0
 12 |   }
 13 | 
 14 |   constructor () {
 15 |     super()
 16 | 
 17 |     this.width = 50
 18 |     this.height = 80
 19 | 
 20 |     this.state = {
 21 |       style: null
 22 |     }
 23 |   }
 24 | 
 25 |   componentWillMount () {
 26 |     this.ratio = window.devicePixelRatio
 27 |     this.width *= this.ratio
 28 |     this.height *= this.ratio
 29 |     this.initRadius = 18 * this.ratio
 30 |     this.minHeadRadius = 12 * this.ratio
 31 |     this.minTailRadius = 5 * this.ratio
 32 |     this.initArrowRadius = 10 * this.ratio
 33 |     this.minArrowRadius = 6 * this.ratio
 34 |     this.arrowWidth = 3 * this.ratio
 35 |     this.maxDistance = 40 * this.ratio
 36 |     this.initCenterX = 25 * this.ratio
 37 |     this.initCenterY = 25 * this.ratio
 38 |     this.headCenter = {
 39 |       x: this.initCenterX,
 40 |       y: this.initCenterY
 41 |     }
 42 | 
 43 |     this.setState({
 44 |       style: {
 45 |         width: `${this.width / this.ratio}px}`,
 46 |         height: `${this.height / this.ratio}px`,
 47 |       }
 48 |     })
 49 |   }
 50 | 
 51 |   componentDidUpdate () {
 52 |     this._draw()
 53 |   }
 54 | 
 55 |   _getDistance () {
 56 |     return Math.max(0, Math.min(this.props.y * this.ratio, this.maxDistance))
 57 |   }
 58 | 
 59 |   _draw () {
 60 |     const bubble = document.getElementById('bubble')
 61 |     let ctx = bubble.getContext('2d')
 62 |     ctx.clearRect(0, 0, bubble.width, bubble.height)
 63 | 
 64 |     this._drawBubble(ctx)
 65 | 
 66 |     this._drawArrow(ctx)
 67 |   }
 68 | 
 69 |   _drawBubble (ctx) {
 70 |     ctx.save()
 71 |     ctx.beginPath()
 72 | 
 73 |     const _distance = this._getDistance()
 74 | 
 75 |     const rate = _distance / this.maxDistance
 76 | 
 77 |     const headRadius = this.initRadius - (this.initRadius - this.minHeadRadius) * rate
 78 | 
 79 |     this.headCenter.y = this.initCenterY - (this.initRadius - this.minHeadRadius) * rate
 80 | 
 81 |     // 画上半弧线
 82 |     ctx.arc(this.headCenter.x, this.headCenter.y, headRadius, 0, Math.PI, true)
 83 | 
 84 |     // 画左侧贝塞尔
 85 |     const tailRadius = this.initRadius - (this.initRadius - this.minTailRadius) * rate
 86 |     const tailCenter = {
 87 |       x: this.headCenter.x,
 88 |       y: this.headCenter.y + _distance
 89 |     }
 90 | 
 91 |     const tailPointL = {
 92 |       x: tailCenter.x - tailRadius,
 93 |       y: tailCenter.y
 94 |     }
 95 |     const controlPointL = {
 96 |       x: tailPointL.x,
 97 |       y: tailPointL.y - _distance / 2
 98 |     }
 99 | 
100 |     ctx.quadraticCurveTo(controlPointL.x, controlPointL.y, tailPointL.x, tailPointL.y)
101 | 
102 |     // 画下半弧线
103 |     ctx.arc(tailCenter.x, tailCenter.y, tailRadius, Math.PI, 0, true)
104 | 
105 |     // 画右侧贝塞尔
106 |     const headPointR = {
107 |       x: this.headCenter.x + headRadius,
108 |       y: this.headCenter.y
109 |     }
110 |     const controlPointR = {
111 |       x: tailCenter.x + tailRadius,
112 |       y: headPointR.y + _distance / 2
113 |     }
114 |     ctx.quadraticCurveTo(controlPointR.x, controlPointR.y, headPointR.x, headPointR.y)
115 | 
116 |     ctx.fillStyle = 'rgb(170,170,170)'
117 |     ctx.fill()
118 |     ctx.strokeStyle = 'rgb(153,153,153)'
119 |     ctx.stroke()
120 |     ctx.restore()
121 | 
122 |   }
123 | 
124 |   _drawArrow (ctx) {
125 |     ctx.save()
126 |     ctx.beginPath()
127 | 
128 |     const _distance = this._getDistance()
129 | 
130 |     const rate = _distance / this.maxDistance
131 |     const arrowRadius = this.initArrowRadius - (this.initArrowRadius - this.minArrowRadius) * rate
132 | 
133 |     // 画内圆
134 |     ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius - (this.arrowWidth - rate), -Math.PI / 2, 0, true)
135 | 
136 |     // 画外圆
137 |     ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius, 0, Math.PI * 3 / 2, false)
138 | 
139 |     ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius - this.arrowWidth / 2 + rate)
140 |     ctx.lineTo(this.headCenter.x + this.arrowWidth * 2 - rate * 2, this.headCenter.y - arrowRadius + this.arrowWidth / 2)
141 | 
142 |     ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius + this.arrowWidth * 3 / 2 - rate)
143 | 
144 |     ctx.fillStyle = 'rgb(255,255,255)'
145 |     ctx.fill()
146 |     ctx.strokeStyle = 'rgb(170,170,170)'
147 |     ctx.stroke()
148 |     ctx.restore()
149 |   }
150 | 
151 | 
152 |   render () {
153 |     return (
154 |       <canvas id='bubble' width={this.width} height={this.height} style={this.state.style}></canvas>
155 |     )
156 |   }
157 | 
158 | 
159 | }
160 | 
161 | 
162 | export default Bubble


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const config = require('./webpack.config.dev');
 6 | const paths = require('./paths');
 7 | 
 8 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 9 | const host = process.env.HOST || '0.0.0.0';
10 | 
11 | module.exports = function(proxy, allowedHost) {
12 |   return {
13 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
14 |     // websites from potentially accessing local content through DNS rebinding:
15 |     // https://github.com/webpack/webpack-dev-server/issues/887
16 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
17 |     // However, it made several existing use cases such as development in cloud
18 |     // environment or subdomains in development significantly more complicated:
19 |     // https://github.com/facebookincubator/create-react-app/issues/2271
20 |     // https://github.com/facebookincubator/create-react-app/issues/2233
21 |     // While we're investigating better solutions, for now we will take a
22 |     // compromise. Since our WDS configuration only serves files in the `public`
23 |     // folder we won't consider accessing them a vulnerability. However, if you
24 |     // use the `proxy` feature, it gets more dangerous because it can expose
25 |     // remote code execution vulnerabilities in backends like Django and Rails.
26 |     // So we will disable the host check normally, but enable it if you have
27 |     // specified the `proxy` setting. Finally, we let you override it if you
28 |     // really know what you're doing with a special environment variable.
29 |     disableHostCheck:
30 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
31 |     // Enable gzip compression of generated files.
32 |     compress: true,
33 |     // Silence WebpackDevServer's own logs since they're generally not useful.
34 |     // It will still show compile warnings and errors with this setting.
35 |     clientLogLevel: 'none',
36 |     // By default WebpackDevServer serves physical files from current directory
37 |     // in addition to all the virtual build products that it serves from memory.
38 |     // This is confusing because those files won’t automatically be available in
39 |     // production build folder unless we copy them. However, copying the whole
40 |     // project directory is dangerous because we may expose sensitive files.
41 |     // Instead, we establish a convention that only files in `public` directory
42 |     // get served. Our build script will copy `public` into the `build` folder.
43 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
44 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
45 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
46 |     // Note that we only recommend to use `public` folder as an escape hatch
47 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
48 |     // for some reason broken when imported through Webpack. If you just want to
49 |     // use an image, put it in `src` and `import` it from JavaScript instead.
50 |     contentBase: paths.appPublic,
51 |     // By default files from `contentBase` will not trigger a page reload.
52 |     watchContentBase: true,
53 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
54 |     // for the WebpackDevServer client so it can learn when the files were
55 |     // updated. The WebpackDevServer client is included as an entry point
56 |     // in the Webpack development configuration. Note that only changes
57 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
58 |     hot: true,
59 |     // It is important to tell WebpackDevServer to use the same "root" path
60 |     // as we specified in the config. In development, we always serve from /.
61 |     publicPath: config.output.publicPath,
62 |     // WebpackDevServer is noisy by default so we emit custom message instead
63 |     // by listening to the compiler events with `compiler.plugin` calls above.
64 |     quiet: true,
65 |     // Reportedly, this avoids CPU overload on some systems.
66 |     // https://github.com/facebookincubator/create-react-app/issues/293
67 |     watchOptions: {
68 |       ignored: /node_modules/,
69 |     },
70 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
71 |     https: protocol === 'https',
72 |     host: host,
73 |     overlay: false,
74 |     historyApiFallback: {
75 |       // Paths with dots should still use the history fallback.
76 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
77 |       disableDotRule: true,
78 |     },
79 |     public: allowedHost,
80 |     proxy,
81 |     setup(app) {
82 |       // This lets us open files from the runtime error overlay.
83 |       app.use(errorOverlayMiddleware());
84 |       // This service worker file is effectively a 'no-op' that will reset any
85 |       // previous service worker registered for the same host:port combination.
86 |       // We do this in development to avoid hitting the production cache if
87 |       // it used the same host and port.
88 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
89 |       app.use(noopServiceWorkerMiddleware());
90 |     },
91 |   };
92 | };
93 | 


--------------------------------------------------------------------------------
/scripts/build-lib.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.lib');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appLib)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appLib);
 50 |     // Merge with the public folder
 51 |     // Start the webpack build
 52 |     return build(previousFileSizes);
 53 |   })
 54 |   .then(
 55 |     ({ stats, previousFileSizes, warnings }) => {
 56 |       if (warnings.length) {
 57 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 58 |         console.log(warnings.join('\n\n'));
 59 |         console.log(
 60 |           '\nSearch for the ' +
 61 |             chalk.underline(chalk.yellow('keywords')) +
 62 |             ' to learn more about each warning.'
 63 |         );
 64 |         console.log(
 65 |           'To ignore, add ' +
 66 |             chalk.cyan('// eslint-disable-next-line') +
 67 |             ' to the line before.\n'
 68 |         );
 69 |       } else {
 70 |         console.log(chalk.green('Compiled successfully.\n'));
 71 |       }
 72 | 
 73 |       console.log('File sizes after gzip:\n');
 74 |       printFileSizesAfterBuild(
 75 |         stats,
 76 |         previousFileSizes,
 77 |         paths.appLib,
 78 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 79 |         WARN_AFTER_CHUNK_GZIP_SIZE
 80 |       );
 81 |       console.log();
 82 | 
 83 |       const appPackage = require(paths.appPackageJson);
 84 |       const publicUrl = paths.publicUrl;
 85 |       const buildFolder = path.relative(process.cwd(), paths.appLib);
 86 |       printHostingInstructions(
 87 |         appPackage,
 88 |         publicUrl,
 89 |         '',
 90 |         buildFolder,
 91 |         useYarn
 92 |       );
 93 |     },
 94 |     err => {
 95 |       console.log(chalk.red('Failed to compile.\n'));
 96 |       printBuildError(err);
 97 |       process.exit(1);
 98 |     }
 99 |   );
100 | 
101 | // Create the production build and print the deployment instructions.
102 | function build(previousFileSizes) {
103 |   console.log('Creating an optimized production build...');
104 | 
105 |   let compiler = webpack(config);
106 |   return new Promise((resolve, reject) => {
107 |     compiler.run((err, stats) => {
108 |       if (err) {
109 |         return reject(err);
110 |       }
111 |       const messages = formatWebpackMessages(stats.toJson({}, true));
112 |       if (messages.errors.length) {
113 |         // Only keep the first error. Others are often indicative
114 |         // of the same problem, but confuse the reader with noise.
115 |         if (messages.errors.length > 1) {
116 |           messages.errors.length = 1;
117 |         }
118 |         return reject(new Error(messages.errors.join('\n\n')));
119 |       }
120 |       if (
121 |         process.env.CI &&
122 |         (typeof process.env.CI !== 'string' ||
123 |           process.env.CI.toLowerCase() !== 'false') &&
124 |         messages.warnings.length
125 |       ) {
126 |         console.log(
127 |           chalk.yellow(
128 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
129 |               'Most CI servers set it automatically.\n'
130 |           )
131 |         );
132 |         return reject(new Error(messages.warnings.join('\n\n')));
133 |       }
134 |       return resolve({
135 |         stats,
136 |         previousFileSizes,
137 |         warnings: messages.warnings,
138 |       });
139 |     });
140 |   });
141 | }
142 | 
143 | // function copyPublicFolder() {
144 | //   fs.copySync(paths.appPublic, paths.appLib, {
145 | //     dereference: true,
146 | //     filter: file => file !== paths.appHtml,
147 | //   });
148 | // }
149 | 


--------------------------------------------------------------------------------
/scripts/build-demo.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/config/webpack.config.lib.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | const autoprefixer = require('autoprefixer');
  3 | const path = require('path');
  4 | const webpack = require('webpack');
  5 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  6 | const paths = require('./paths');
  7 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
  8 | 
  9 | const shouldUseSourceMap = 'false'
 10 | // Get environment variables to inject into our app.
 11 | 
 12 | // Note: defined here because it will be used more than once.
 13 | const cssFilename = 'react-scroll.css';
 14 | 
 15 | // This is the production configuration.
 16 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 17 | // The development configuration is different and lives in a separate file.
 18 | module.exports = {
 19 |   // Don't attempt to continue if there are any errors.
 20 |   bail: true,
 21 |   // We generate sourcemaps in production. This is slow but gives good results.
 22 |   // You can exclude the *.map files from the build during deployment.
 23 |   devtool: false,
 24 |   // In production, we only want to load the polyfills and the app code.
 25 |   entry: paths.appLibJs,
 26 |   output: {
 27 |     // The build folder.
 28 |     path: paths.appLib,
 29 |     // Generated JS file names (with nested folders).
 30 |     // There will be one main bundle, and one file per asynchronous chunk.
 31 |     // We don't currently advertise code splitting but Webpack supports it.
 32 |     filename: 'react-bscroll.js',
 33 |     library: 'Scroll',
 34 |     libraryTarget: 'commonjs2',
 35 |     umdNamedDefine: true
 36 |   },
 37 |   externals : {
 38 |     react: 'react',
 39 |     'better-scroll': 'better-scroll',
 40 |   },
 41 |   resolve: {
 42 |     // This allows you to set a fallback for where Webpack should look for modules.
 43 |     // We placed these paths second because we want `node_modules` to "win"
 44 |     // if there are any conflicts. This matches Node resolution mechanism.
 45 |     // https://github.com/facebookincubator/create-react-app/issues/253
 46 |     modules: ['node_modules', paths.appNodeModules].concat(
 47 |       // It is guaranteed to exist because we tweak it in `env.js`
 48 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 49 |     ),
 50 |     // These are the reasonable defaults supported by the Node ecosystem.
 51 |     // We also include JSX as a common component filename extension to support
 52 |     // some tools, although we do not recommend using it, see:
 53 |     // https://github.com/facebookincubator/create-react-app/issues/290
 54 |     // `web` extension prefixes have been added for better support
 55 |     // for React Native Web.
 56 |     extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
 57 |     alias: {
 58 | 
 59 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 60 |       'react-native': 'react-native-web',
 61 |       src: path.resolve(__dirname, '..' ,'src'),
 62 |     },
 63 |   },
 64 |   module: {
 65 |     strictExportPresence: true,
 66 |     rules: [
 67 |       // TODO: Disable require.ensure as it's not a standard language feature.
 68 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
 69 |       // { parser: { requireEnsure: false } },
 70 | 
 71 |       // First, run the linter.
 72 |       {
 73 |         test: /\.(js|jsx)$/,
 74 |         enforce: 'pre',
 75 |         use: [
 76 |           {
 77 |             options: {
 78 |               formatter: eslintFormatter,
 79 |               eslintPath: require.resolve('eslint'),
 80 |               
 81 |             },
 82 |             loader: require.resolve('eslint-loader'),
 83 |           },
 84 |         ],
 85 |         include: [ paths.appSrc, paths.appExample ],
 86 |       },
 87 |       {
 88 |         // "oneOf" will traverse all following loaders until one will
 89 |         // match the requirements. When no loader matches it will fall
 90 |         // back to the "file" loader at the end of the loader list.
 91 |         oneOf: [
 92 |           // "url" loader works just like "file" loader but it also embeds
 93 |           // assets smaller than specified size as data URLs to avoid requests.
 94 |           {
 95 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
 96 |             loader: require.resolve('url-loader'),
 97 |             options: {
 98 |               limit: 10000,
 99 |               name: 'static/media/[name].[hash:8].[ext]',
100 |             },
101 |           },
102 |           // Process JS with Babel.
103 |           {
104 |             test: /\.(js|jsx)$/,
105 |             include: [ paths.appSrc, paths.appExample ],
106 |             loader: require.resolve('babel-loader'),
107 |             options: {
108 |               presets: [
109 |                 'react',
110 |                 'es2015',
111 |                 'stage-2',
112 |               ],
113 |               compact: true,
114 |             },
115 |           },
116 |           {
117 |             test: /\.css$/,
118 |             loader: ExtractTextPlugin.extract(
119 |               Object.assign(
120 |                 {
121 |                   fallback: require.resolve('style-loader'),
122 |                   use: [
123 |                     {
124 |                       loader: require.resolve('css-loader'),
125 |                       options: {
126 |                         importLoaders: 1,
127 |                         minimize: true,
128 |                         sourceMap: shouldUseSourceMap,
129 |                       },
130 |                     },
131 |                     {
132 |                       loader: require.resolve('postcss-loader'),
133 |                       options: {
134 |                         // Necessary for external CSS imports to work
135 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
136 |                         ident: 'postcss',
137 |                         plugins: () => [
138 |                           require('postcss-flexbugs-fixes'),
139 |                           autoprefixer({
140 |                             browsers: [
141 |                               '>1%',
142 |                               'last 4 versions',
143 |                               'Firefox ESR',
144 |                               'not ie < 9', // React doesn't support IE8 anyway
145 |                             ],
146 |                             flexbox: 'no-2009',
147 |                           }),
148 |                         ],
149 |                       },
150 |                     },
151 |                   ],
152 |                 },
153 |                 {}
154 |               )
155 |             ),
156 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
157 |           },
158 |           {
159 |             loader: require.resolve('file-loader'),
160 |             // Exclude `js` files to keep "css" loader working as it injects
161 |             // it's runtime that would otherwise processed through "file" loader.
162 |             // Also exclude `html` and `json` extensions so they get processed
163 |             // by webpacks internal loaders.
164 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
165 |             options: {
166 |               name: '[name].[ext]',
167 |             },
168 |           },
169 |           // ** STOP ** Are you adding a new loader?
170 |           // Make sure to add the new loader(s) before the "file" loader.
171 |         ],
172 |       },
173 |     ],
174 |   },
175 |   plugins: [
176 |     // Makes some environment variables available to the JS code, for example:
177 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
178 |     // It is absolutely essential that NODE_ENV was set to production here.
179 |     // Otherwise React will be compiled in the very slow development mode.
180 |     new webpack.DefinePlugin('"production"'),
181 |     // Minify the code.
182 |     new webpack.optimize.UglifyJsPlugin({
183 |       compress: {
184 |         warnings: false,
185 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
186 |         // https://github.com/facebookincubator/create-react-app/issues/2376
187 |         // Pending further investigation:
188 |         // https://github.com/mishoo/UglifyJS2/issues/2011
189 |         comparisons: false,
190 |       },
191 |       output: {
192 |         comments: false,
193 |         // Turned on because emoji and regex is not minified properly using default
194 |         // https://github.com/facebookincubator/create-react-app/issues/2488
195 |         ascii_only: true,
196 |       },
197 |       sourceMap: shouldUseSourceMap,
198 |     }),
199 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
200 |     new ExtractTextPlugin(cssFilename),
201 |     // Moment.js is an extremely popular library that bundles large locale files
202 |     // by default due to how Webpack interprets its code. This is a practical
203 |     // solution that requires the user to opt into importing specific locales.
204 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
205 |     // You can remove this if you don't use Moment.js:
206 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
207 |   ],
208 |   // Some libraries import Node modules but don't use them in the browser.
209 |   // Tell Webpack to provide empty mocks for them so importing them works.
210 | };
211 | 


--------------------------------------------------------------------------------
/src/scroll/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import PropTypes from 'prop-types'
  3 | 
  4 | import BScroll from 'better-scroll'
  5 | import Loading from '../loading/loading'
  6 | import Bubble from '../bubble/bubble'
  7 | 
  8 | import './betterScroll.css'
  9 | 
 10 | let defaultPullDownRefresh = {
 11 |   threshold: 100,
 12 |   stop: 50,
 13 |   stopTime: 600,
 14 |   txt: {
 15 |     success: '刷新成功',
 16 |   },
 17 | }
 18 | 
 19 | let defaultPullUpLoad = {
 20 |   threshold: 0,
 21 |   txt: {
 22 |     more: '加载更多',
 23 |     nomore: '我是有底线的',
 24 |   },
 25 | }
 26 | 
 27 | class Scroll extends Component {
 28 | 
 29 |   static defaultProps = {
 30 |     probeType: 3,
 31 |     click: false, // https://ustbhuangyi.github.io/better-scroll/doc/options.html#tap
 32 |     startY: 0,
 33 |     scrollY: true,
 34 |     scrollX: false,
 35 |     freeScroll: true,
 36 |     scrollbar: true,
 37 |     pullDownRefresh: false,
 38 |     pullUpLoad: false,
 39 |     bounce: true,
 40 |     preventDefaultException: {
 41 |       className: /(^|\s)originEvent(\s|$)/,
 42 |       tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|TABLE)$/,
 43 |     },
 44 |     eventPassthrough: '',
 45 |     isPullUpTipHide: true,
 46 |     disabled: false,
 47 |     stopPropagation: true,
 48 |   }
 49 | 
 50 |   static propTypes = {
 51 |     children: PropTypes.any,
 52 |     probeType: PropTypes.number,
 53 |     startY: PropTypes.number,
 54 |     click: PropTypes.oneOfType([
 55 |       PropTypes.string,
 56 |       PropTypes.bool,
 57 |     ]),
 58 |     scrollY: PropTypes.bool,
 59 |     scrollX: PropTypes.bool,
 60 |     freeScroll: PropTypes.bool,
 61 |     scrollbar: PropTypes.bool,
 62 |     pullDownRefresh: PropTypes.oneOfType([
 63 |       PropTypes.object,
 64 |       PropTypes.bool,
 65 |     ]),
 66 |     pullUpLoad: PropTypes.oneOfType([
 67 |       PropTypes.object,
 68 |       PropTypes.bool,
 69 |     ]),
 70 |     pullUpLoadMoreData: PropTypes.func,
 71 |     canRenderPullUpTip: PropTypes.bool,
 72 |     doPullDownFresh: PropTypes.func,
 73 |     doScroll: PropTypes.func,
 74 |     doScrollStart: PropTypes.func,
 75 |     doScrollEnd: PropTypes.func,
 76 | 
 77 |     preventDefaultException: PropTypes.object,
 78 |     eventPassthrough: PropTypes.string,
 79 |     isPullUpTipHide: PropTypes.bool,
 80 |     bounce: PropTypes.bool,
 81 |     disabled: PropTypes.bool,
 82 |     stopPropagation: PropTypes.bool,
 83 |   }
 84 | 
 85 |   constructor(props, context) {
 86 |     super(props, context)
 87 | 
 88 |     this.scroll = null // scroll 实例
 89 | 
 90 |     this.isRebounding = false
 91 |     this.pulling = false
 92 | 
 93 |     this.pullDownInitTop = -50
 94 |     
 95 |     this.state = {
 96 |       isPullUpLoad: false,
 97 |       beforePullDown: true,
 98 |       pulling: false,
 99 |       pullDownStyle: {
100 |         top: `${this.pullDownInitTop}px`,
101 |       },
102 |       bubbleY: 0,
103 |     }
104 | 
105 |   }
106 |   createScrollId() {
107 |     return Math.random().toString(36).substr(3, 10);
108 |   }
109 |   componentDidMount() {
110 |     this.initScroll()
111 |   }
112 | 
113 |   componentDidUpdate(prevProps) {
114 |     if (this.props.children !== prevProps.children) {
115 |       if (!this.state.pulling) {
116 |         this.scroll.refresh()
117 |       }
118 |       if (prevProps.disabled !== this.props.disabled) {
119 |         this.props.disabled ? this.scroll.disable() : this.scroll.enable();
120 |       }
121 |     }
122 |   }
123 | 
124 |   componentWillUnmount() {
125 |     this.scroll.stop()
126 |     this.scroll.destroy()
127 |     this.scroll = null;
128 |     clearTimeout(this.TimerA)
129 |     clearTimeout(this.TimerB)
130 |   }
131 | 
132 |   initScroll() {
133 |     let { probeType, click, startY, scrollY, scrollX, freeScroll, scrollbar, pullDownRefresh, pullUpLoad, preventDefaultException, eventPassthrough, bounce,stopPropagation } = this.props
134 |     let _pullDownRefresh = typeof pullDownRefresh === 'object' ? {
135 |       ...defaultPullDownRefresh,
136 |       ...pullDownRefresh
137 |     } : (pullDownRefresh ? defaultPullDownRefresh : false)
138 | 
139 |     let _pullUpLoad = typeof pullUpLoad === 'object' ? {
140 |       ...defaultPullUpLoad,
141 |       ...pullUpLoad
142 |     } : (pullUpLoad ? defaultPullUpLoad : false)
143 | 
144 |     this.options = {
145 |       probeType,
146 |       click,
147 |       startY,
148 |       scrollY,
149 |       freeScroll,
150 |       scrollX,
151 |       scrollbar,
152 |       pullDownRefresh: _pullDownRefresh,
153 |       pullUpLoad: _pullUpLoad,
154 |       preventDefaultException,
155 |       eventPassthrough,
156 |       bounce: bounce,
157 |       stopPropagation:stopPropagation,
158 |     }
159 |     let wrapper = this.refs.$dom
160 |     this.scroll = new BScroll(wrapper, this.options)
161 |     this.initEvents()
162 |   }
163 | 
164 |   initEvents() {
165 |     if (this.options.pullUpLoad) {
166 |       this._initPullUpLoad()
167 |     }
168 |     if (this.options.pullDownRefresh) {
169 |       this._initPullDownRefresh()
170 |     }
171 |     if (this.props.doScrollStart) {
172 |       this.scroll.on('scrollStart', (pos) => {
173 |         this.props.doScrollStart(pos)
174 |       })
175 |     }
176 |     if (this.props.doScroll) {
177 |       this.scroll.on('scroll', (pos) => {
178 |         this.props.doScroll(pos)
179 |       })
180 |     }
181 |     if (this.props.doScrollEnd) {
182 |       this.scroll.on('scrollEnd', (pos) => {
183 |         this.props.doScrollEnd(pos)
184 |       })
185 |     }
186 |     if (this.props.disabled) {
187 |       this.scroll.disable()
188 |     }
189 |   }
190 | 
191 | 
192 |   getScrollObj = () => {
193 |     return this.scroll
194 |   }
195 | 
196 |   _initPullDownRefresh() {
197 |     this.scroll.on('pullingDown', () => {
198 |       this.setState({
199 |         beforePullDown: false,
200 |         pulling: true,
201 |       })
202 | 
203 |       this.props.doPullDownFresh()
204 |         .then(() => {
205 |           if (!this.scroll) { return }
206 |           this.setState({
207 |             pulling: false,
208 |           })
209 |           this._reboundPullDown()
210 |             .then(() => {
211 |               this._afterPullDown()
212 |             })
213 |         })
214 |     })
215 | 
216 |     this.scroll.on('scroll', (pos) => {
217 |       const { beforePullDown } = this.state
218 | 
219 |       if (pos.y < 0) {
220 |         return
221 |       }
222 | 
223 |       if (beforePullDown) {
224 |         this.setState({
225 |           bubbleY: Math.max(0, pos.y + this.pullDownInitTop),
226 |           pullDownStyle: {
227 |             top: `${Math.min(pos.y + this.pullDownInitTop, 10)}px`,
228 |           },
229 |         })
230 |       } else {
231 |         this.setState({
232 |           bubbleY: 0,
233 |         })
234 |       }
235 | 
236 |       if (this.isRebounding) {
237 |         this.setState({
238 |           pullDownStyle: {
239 |             top: `${10 - (defaultPullDownRefresh.stop - pos.y)}px`,
240 |           },
241 |         })
242 |       }
243 |     })
244 |   }
245 | 
246 |   _reboundPullDown = () => {
247 |     let { stopTime = 600 } = this.options.pullDownRefresh
248 | 
249 |     return new Promise((resolve) => {
250 |       this.TimerA = setTimeout(() => {
251 |         this.isRebounding = true
252 |         this.scroll.finishPullDown()
253 |         resolve()
254 |       }, stopTime)
255 |     })
256 |   }
257 | 
258 |   _afterPullDown() {
259 |     this.TimerB = setTimeout(() => {
260 |       this.setState({
261 |         beforePullDown: true,
262 |         pullDownStyle: {
263 |           top: `${this.pullDownInitTop}px`,
264 |         },
265 |       })
266 |       this.isRebounding = false
267 |       this.scroll.refresh()
268 |     }, this.scroll.options.bounceTime)
269 |   }
270 | 
271 |   _initPullUpLoad = () => {
272 |     this.scroll.on('pullingUp', () => {
273 |       this.setState({
274 |         isPullUpLoad: true,
275 |       })
276 | 
277 |       this.props.pullUpLoadMoreData().then(() => {
278 |         if (!this.scroll) { return }
279 |         this.setState({
280 |           isPullUpLoad: false,
281 |         })
282 |         this.scroll.finishPullUp()
283 |         this.scroll.refresh()
284 |       })
285 |     })
286 |   }
287 | 
288 |   renderPullUpLoad() {
289 |     let { pullUpLoad, isPullUpTipHide } = this.props
290 | 
291 |     if (pullUpLoad && isPullUpTipHide) {
292 |       return (
293 |         <div className="b-pullup-wrapper">
294 |           <div className="after-trigger" style={{ lineHeight: '.32rem' }}>
295 |             <span style={{ color: '#999999', fontSize: '.28rem' }}>{''}</span>
296 |           </div>
297 |         </div>
298 |       )
299 |     }
300 | 
301 |     if (pullUpLoad && this.state.isPullUpLoad) {
302 |       return (
303 |         <div className="b-pullup-wrapper">
304 |           <div className="after-trigger" style={{ lineHeight: '.32rem' }}>
305 |             <i className="loading-icon"></i>
306 |             <span style={{ color: '#999999', fontSize: '.28rem' }}>{typeof pullUpLoad === 'object' ? pullUpLoad.txt.more : '加载中...'}</span>
307 |           </div>
308 |         </div>
309 |       )
310 |     }
311 |     if (pullUpLoad && !this.state.isPullUpLoad) {
312 |       return (
313 |         <div className="b-pullup-wrapper">
314 |           <div className="before-trigger">
315 |             <span style={{ color: '#999999', fontSize: '.28rem' }}>{typeof pullUpLoad === 'object' ? pullUpLoad.txt.nomore : '加载完成'}</span>
316 |           </div>
317 |         </div>
318 |       )
319 | 
320 |     }
321 |   }
322 | 
323 |   renderPullUpDown() {
324 |     let { pullDownRefresh } = this.props
325 |     let { beforePullDown, pulling, pullDownStyle } = this.state
326 | 
327 |     if (pullDownRefresh && beforePullDown) {
328 |       return (
329 |         <div className="b-pulldown-wrapper" style={pullDownStyle} >
330 |           <div className="before-trigger">
331 |             <Bubble y={this.state.bubbleY}></Bubble>
332 |           </div>
333 |         </div>
334 | 
335 |       )
336 |     }
337 | 
338 |     if (pullDownRefresh && !beforePullDown && pulling) {
339 |       return (
340 |         <div className="b-pulldown-wrapper" style={pullDownStyle}>
341 |           <div className="after-trigger">
342 |             <div className="loading">
343 |               <Loading></Loading>
344 |             </div>
345 |           </div>
346 |         </div>
347 |       )
348 |     }
349 | 
350 |     if (pullDownRefresh && !beforePullDown && !pulling) {
351 |       return (
352 |         <div className="b-pulldown-wrapper" style={pullDownStyle}>
353 |           <div className="after-trigger">
354 |             <div><span
355 |               style={{ fontSize: '.18rem' }}>{typeof this.options.pullDownRefresh === 'object' ? this.options.pullDownRefresh.txt.success : '刷新完成'}</span>
356 |             </div>
357 |           </div>
358 |         </div>
359 |       )
360 |     }
361 |   }
362 | 
363 |   render() {
364 |     return (
365 |       <div className="b-wrapper" ref="$dom">
366 |         <div className="b-scroll-content">
367 |           {this.props.children}
368 |           {this.renderPullUpLoad()}
369 |         </div>
370 |         {this.renderPullUpDown()}
371 |       </div>
372 |     )
373 |   }
374 | }
375 | 
376 | export default Scroll
377 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // In development, we always serve from the root. This makes config easier.
 17 | const publicPath = '/';
 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 21 | const publicUrl = '';
 22 | // Get environment variables to inject into our app.
 23 | const env = getClientEnvironment(publicUrl);
 24 | 
 25 | // This is the development configuration.
 26 | // It is focused on developer experience and fast rebuilds.
 27 | // The production configuration is different and lives in a separate file.
 28 | module.exports = {
 29 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 30 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 31 |   devtool: 'cheap-module-source-map',
 32 |   // These are the "entry points" to our application.
 33 |   // This means they will be the "root" imports that are included in JS bundle.
 34 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 35 |   entry: [
 36 |     // We ship a few polyfills by default:
 37 |     require.resolve('./polyfills'),
 38 |     // Include an alternative client for WebpackDevServer. A client's job is to
 39 |     // connect to WebpackDevServer by a socket and get notified about changes.
 40 |     // When you save a file, the client will either apply hot updates (in case
 41 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 42 |     // make a syntax error, this client will display a syntax error overlay.
 43 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 44 |     // to bring better experience for Create React App users. You can replace
 45 |     // the line below with these two lines if you prefer the stock client:
 46 |     // require.resolve('webpack-dev-server/client') + '?/',
 47 |     // require.resolve('webpack/hot/dev-server'),
 48 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 49 |     // Finally, this is your app's code:
 50 |     paths.appIndexJs,
 51 |     // We include the app code last so that if there is a runtime error during
 52 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 53 |     // changing JS code would still trigger a refresh.
 54 |   ],
 55 |   output: {
 56 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 57 |     path: paths.appBuild,
 58 |     // Add /* filename */ comments to generated require()s in the output.
 59 |     pathinfo: true,
 60 |     // This does not produce a real file. It's just the virtual path that is
 61 |     // served by WebpackDevServer in development. This is the JS bundle
 62 |     // containing code from all our entry points, and the Webpack runtime.
 63 |     filename: 'static/js/bundle.js',
 64 |     // There are also additional JS chunk files if you use code splitting.
 65 |     chunkFilename: 'static/js/[name].chunk.js',
 66 |     // This is the URL that app is served from. We use "/" in development.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We placed these paths second because we want `node_modules` to "win"
 75 |     // if there are any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     modules: ['node_modules', paths.appNodeModules].concat(
 78 |       // It is guaranteed to exist because we tweak it in `env.js`
 79 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 80 |     ),
 81 |     // These are the reasonable defaults supported by the Node ecosystem.
 82 |     // We also include JSX as a common component filename extension to support
 83 |     // some tools, although we do not recommend using it, see:
 84 |     // https://github.com/facebookincubator/create-react-app/issues/290
 85 |     // `web` extension prefixes have been added for better support
 86 |     // for React Native Web.
 87 |     extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
 88 |     alias: {
 89 |       
 90 |       // Support React Native Web
 91 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 92 |       'react-native': 'react-native-web',
 93 |       src: path.resolve(__dirname, '..' ,'src'),
 94 |     },
 95 |     plugins: [
 96 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 97 |       // This often causes confusion because we only process files within src/ with babel.
 98 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 99 |       // please link the files into your node_modules/ and let module-resolution kick in.
100 |       // Make sure your source files are compiled, as they will not be processed in any way.
101 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
102 |     ],
103 |   },
104 |   module: {
105 |     strictExportPresence: true,
106 |     rules: [
107 |       // TODO: Disable require.ensure as it's not a standard language feature.
108 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
109 |       // { parser: { requireEnsure: false } },
110 | 
111 |       // First, run the linter.
112 |       // It's important to do this before Babel processes the JS.
113 |       {
114 |         test: /\.(js|jsx)$/,
115 |         enforce: 'pre',
116 |         use: [
117 |           {
118 |             options: {
119 |               formatter: eslintFormatter,
120 |               eslintPath: require.resolve('eslint'),
121 |               
122 |             },
123 |             loader: require.resolve('eslint-loader'),
124 |           },
125 |         ],
126 |         include: [ paths.appSrc, paths.appExample ],
127 |       },
128 |       {
129 |         // "oneOf" will traverse all following loaders until one will
130 |         // match the requirements. When no loader matches it will fall
131 |         // back to the "file" loader at the end of the loader list.
132 |         oneOf: [
133 |           // "url" loader works like "file" loader except that it embeds assets
134 |           // smaller than specified limit in bytes as data URLs to avoid requests.
135 |           // A missing `test` is equivalent to a match.
136 |           {
137 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
138 |             loader: require.resolve('url-loader'),
139 |             options: {
140 |               limit: 10000,
141 |               name: 'static/media/[name].[hash:8].[ext]',
142 |             },
143 |           },
144 |           // Process JS with Babel.
145 |           {
146 |             test: /\.(js|jsx)$/,
147 |             include: [ paths.appSrc, paths.appExample ],
148 |             loader: require.resolve('babel-loader'),
149 |             options: {
150 |               
151 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
152 |               // It enables caching results in ./node_modules/.cache/babel-loader/
153 |               // directory for faster rebuilds.
154 |               cacheDirectory: true,
155 |             },
156 |           },
157 |           // "postcss" loader applies autoprefixer to our CSS.
158 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
159 |           // "style" loader turns CSS into JS modules that inject <style> tags.
160 |           // In production, we use a plugin to extract that CSS to a file, but
161 |           // in development "style" loader enables hot editing of CSS.
162 |           {
163 |             test: /\.css$/,
164 |             use: [
165 |               require.resolve('style-loader'),
166 |               {
167 |                 loader: require.resolve('css-loader'),
168 |                 options: {
169 |                   importLoaders: 1,
170 |                 },
171 |               },
172 |               {
173 |                 loader: require.resolve('postcss-loader'),
174 |                 options: {
175 |                   // Necessary for external CSS imports to work
176 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
177 |                   ident: 'postcss',
178 |                   plugins: () => [
179 |                     require('postcss-flexbugs-fixes'),
180 |                     autoprefixer({
181 |                       browsers: [
182 |                         '>1%',
183 |                         'last 4 versions',
184 |                         'Firefox ESR',
185 |                         'not ie < 9', // React doesn't support IE8 anyway
186 |                       ],
187 |                       flexbox: 'no-2009',
188 |                     }),
189 |                   ],
190 |                 },
191 |               },
192 |             ],
193 |           },
194 |           // "file" loader makes sure those assets get served by WebpackDevServer.
195 |           // When you `import` an asset, you get its (virtual) filename.
196 |           // In production, they would get copied to the `build` folder.
197 |           // This loader don't uses a "test" so it will catch all modules
198 |           // that fall through the other loaders.
199 |           {
200 |             // Exclude `js` files to keep "css" loader working as it injects
201 |             // it's runtime that would otherwise processed through "file" loader.
202 |             // Also exclude `html` and `json` extensions so they get processed
203 |             // by webpacks internal loaders.
204 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
205 |             loader: require.resolve('file-loader'),
206 |             options: {
207 |               name: 'static/media/[name].[hash:8].[ext]',
208 |             },
209 |           },
210 |         ],
211 |       },
212 |       // ** STOP ** Are you adding a new loader?
213 |       // Make sure to add the new loader(s) before the "file" loader.
214 |     ],
215 |   },
216 |   plugins: [
217 |     // Makes some environment variables available in index.html.
218 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
219 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
220 |     // In development, this will be an empty string.
221 |     new InterpolateHtmlPlugin(env.raw),
222 |     // Generates an `index.html` file with the <script> injected.
223 |     new HtmlWebpackPlugin({
224 |       inject: true,
225 |       template: paths.appHtml,
226 |     }),
227 |     // Add module names to factory functions so they appear in browser profiler.
228 |     new webpack.NamedModulesPlugin(),
229 |     // Makes some environment variables available to the JS code, for example:
230 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
231 |     new webpack.DefinePlugin(env.stringified),
232 |     // This is necessary to emit hot updates (currently CSS only):
233 |     new webpack.HotModuleReplacementPlugin(),
234 |     // Watcher doesn't work well if you mistype casing in a path so we use
235 |     // a plugin that prints an error when you attempt to do this.
236 |     // See https://github.com/facebookincubator/create-react-app/issues/240
237 |     new CaseSensitivePathsPlugin(),
238 |     // If you require a missing module and then `npm install` it, you still have
239 |     // to restart the development server for Webpack to discover it. This plugin
240 |     // makes the discovery automatic so you don't have to restart.
241 |     // See https://github.com/facebookincubator/create-react-app/issues/186
242 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
243 |     // Moment.js is an extremely popular library that bundles large locale files
244 |     // by default due to how Webpack interprets its code. This is a practical
245 |     // solution that requires the user to opt into importing specific locales.
246 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
247 |     // You can remove this if you don't use Moment.js:
248 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
249 |   ],
250 |   // Some libraries import Node modules but don't use them in the browser.
251 |   // Tell Webpack to provide empty mocks for them so importing them works.
252 |   node: {
253 |     dgram: 'empty',
254 |     fs: 'empty',
255 |     net: 'empty',
256 |     tls: 'empty',
257 |     child_process: 'empty',
258 |   },
259 |   // Turn off performance hints during development because we don't do any
260 |   // splitting or minification in interest of speed. These warnings become
261 |   // cumbersome.
262 |   performance: {
263 |     hints: false,
264 |   },
265 | };
266 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = '/react-bscroll';
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   // Don't attempt to continue if there are any errors.
 54 |   bail: true,
 55 |   // We generate sourcemaps in production. This is slow but gives good results.
 56 |   // You can exclude the *.map files from the build during deployment.
 57 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 58 |   // In production, we only want to load the polyfills and the app code.
 59 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path
 73 |         .relative(paths.appSrc, info.absoluteResourcePath)
 74 |         .replace(/\\/g, '/'),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     // `web` extension prefixes have been added for better support
 90 |     // for React Native Web.
 91 |     extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
 92 |     alias: {
 93 |       
 94 |       // Support React Native Web
 95 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 96 |       'react-native': 'react-native-web',
 97 |       src: path.resolve(__dirname, '..' ,'src'),
 98 |     },
 99 |     plugins: [
100 |       // Prevents users from importing files from outside of src/ (or node_modules/).
101 |       // This often causes confusion because we only process files within src/ with babel.
102 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
103 |       // please link the files into your node_modules/ and let module-resolution kick in.
104 |       // Make sure your source files are compiled, as they will not be processed in any way.
105 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
106 |     ],
107 |   },
108 |   module: {
109 |     strictExportPresence: true,
110 |     rules: [
111 |       // TODO: Disable require.ensure as it's not a standard language feature.
112 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
113 |       // { parser: { requireEnsure: false } },
114 | 
115 |       // First, run the linter.
116 |       // It's important to do this before Babel processes the JS.
117 |       {
118 |         test: /\.(js|jsx)$/,
119 |         enforce: 'pre',
120 |         use: [
121 |           {
122 |             options: {
123 |               formatter: eslintFormatter,
124 |               eslintPath: require.resolve('eslint'),
125 |               
126 |             },
127 |             loader: require.resolve('eslint-loader'),
128 |           },
129 |         ],
130 |         include: [ paths.appSrc, paths.appExample ],
131 |       },
132 |       {
133 |         // "oneOf" will traverse all following loaders until one will
134 |         // match the requirements. When no loader matches it will fall
135 |         // back to the "file" loader at the end of the loader list.
136 |         oneOf: [
137 |           // "url" loader works just like "file" loader but it also embeds
138 |           // assets smaller than specified size as data URLs to avoid requests.
139 |           {
140 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
141 |             loader: require.resolve('url-loader'),
142 |             options: {
143 |               limit: 10000,
144 |               name: 'static/media/[name].[hash:8].[ext]',
145 |             },
146 |           },
147 |           // Process JS with Babel.
148 |           {
149 |             test: /\.(js|jsx)$/,
150 |             include: [ paths.appSrc, paths.appExample ],
151 |             loader: require.resolve('babel-loader'),
152 |             options: {
153 |               compact: true,
154 |             },
155 |           },
156 |           // The notation here is somewhat confusing.
157 |           // "postcss" loader applies autoprefixer to our CSS.
158 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
159 |           // "style" loader normally turns CSS into JS modules injecting <style>,
160 |           // but unlike in development configuration, we do something different.
161 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
162 |           // (second argument), then grabs the result CSS and puts it into a
163 |           // separate file in our build process. This way we actually ship
164 |           // a single CSS file in production instead of JS code injecting <style>
165 |           // tags. If you use code splitting, however, any async bundles will still
166 |           // use the "style" loader inside the async code so CSS from them won't be
167 |           // in the main CSS file.
168 |           {
169 |             test: /\.css$/,
170 |             loader: ExtractTextPlugin.extract(
171 |               Object.assign(
172 |                 {
173 |                   fallback: require.resolve('style-loader'),
174 |                   use: [
175 |                     {
176 |                       loader: require.resolve('css-loader'),
177 |                       options: {
178 |                         importLoaders: 1,
179 |                         minimize: true,
180 |                         sourceMap: shouldUseSourceMap,
181 |                       },
182 |                     },
183 |                     {
184 |                       loader: require.resolve('postcss-loader'),
185 |                       options: {
186 |                         // Necessary for external CSS imports to work
187 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
188 |                         ident: 'postcss',
189 |                         plugins: () => [
190 |                           require('postcss-flexbugs-fixes'),
191 |                           autoprefixer({
192 |                             browsers: [
193 |                               '>1%',
194 |                               'last 4 versions',
195 |                               'Firefox ESR',
196 |                               'not ie < 9', // React doesn't support IE8 anyway
197 |                             ],
198 |                             flexbox: 'no-2009',
199 |                           }),
200 |                         ],
201 |                       },
202 |                     },
203 |                   ],
204 |                 },
205 |                 extractTextPluginOptions
206 |               )
207 |             ),
208 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
209 |           },
210 |           // "file" loader makes sure assets end up in the `build` folder.
211 |           // When you `import` an asset, you get its filename.
212 |           // This loader don't uses a "test" so it will catch all modules
213 |           // that fall through the other loaders.
214 |           {
215 |             loader: require.resolve('file-loader'),
216 |             // Exclude `js` files to keep "css" loader working as it injects
217 |             // it's runtime that would otherwise processed through "file" loader.
218 |             // Also exclude `html` and `json` extensions so they get processed
219 |             // by webpacks internal loaders.
220 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
221 |             options: {
222 |               name: 'static/media/[name].[hash:8].[ext]',
223 |             },
224 |           },
225 |           // ** STOP ** Are you adding a new loader?
226 |           // Make sure to add the new loader(s) before the "file" loader.
227 |         ],
228 |       },
229 |     ],
230 |   },
231 |   plugins: [
232 |     // Makes some environment variables available in index.html.
233 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
234 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
235 |     // In production, it will be an empty string unless you specify "homepage"
236 |     // in `package.json`, in which case it will be the pathname of that URL.
237 |     new InterpolateHtmlPlugin(env.raw),
238 |     // Generates an `index.html` file with the <script> injected.
239 |     new HtmlWebpackPlugin({
240 |       inject: true,
241 |       template: paths.appHtml,
242 |       minify: {
243 |         removeComments: true,
244 |         collapseWhitespace: true,
245 |         removeRedundantAttributes: true,
246 |         useShortDoctype: true,
247 |         removeEmptyAttributes: true,
248 |         removeStyleLinkTypeAttributes: true,
249 |         keepClosingSlash: true,
250 |         minifyJS: true,
251 |         minifyCSS: true,
252 |         minifyURLs: true,
253 |       },
254 |     }),
255 |     // Makes some environment variables available to the JS code, for example:
256 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
257 |     // It is absolutely essential that NODE_ENV was set to production here.
258 |     // Otherwise React will be compiled in the very slow development mode.
259 |     new webpack.DefinePlugin(env.stringified),
260 |     // Minify the code.
261 |     new webpack.optimize.UglifyJsPlugin({
262 |       compress: {
263 |         warnings: false,
264 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
265 |         // https://github.com/facebookincubator/create-react-app/issues/2376
266 |         // Pending further investigation:
267 |         // https://github.com/mishoo/UglifyJS2/issues/2011
268 |         comparisons: false,
269 |       },
270 |       output: {
271 |         comments: false,
272 |         // Turned on because emoji and regex is not minified properly using default
273 |         // https://github.com/facebookincubator/create-react-app/issues/2488
274 |         ascii_only: true,
275 |       },
276 |       sourceMap: shouldUseSourceMap,
277 |     }),
278 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
279 |     new ExtractTextPlugin({
280 |       filename: cssFilename,
281 |     }),
282 |     // Generate a manifest file which contains a mapping of all asset filenames
283 |     // to their corresponding output file so that tools can pick it up without
284 |     // having to parse `index.html`.
285 |     new ManifestPlugin({
286 |       fileName: 'asset-manifest.json',
287 |     }),
288 |     // Generate a service worker script that will precache, and keep up to date,
289 |     // the HTML & assets that are part of the Webpack build.
290 |     new SWPrecacheWebpackPlugin({
291 |       // By default, a cache-busting query parameter is appended to requests
292 |       // used to populate the caches, to ensure the responses are fresh.
293 |       // If a URL is already hashed by Webpack, then there is no concern
294 |       // about it being stale, and the cache-busting can be skipped.
295 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
296 |       filename: 'service-worker.js',
297 |       logger(message) {
298 |         if (message.indexOf('Total precache size is') === 0) {
299 |           // This message occurs for every build and is a bit too noisy.
300 |           return;
301 |         }
302 |         if (message.indexOf('Skipping static resource') === 0) {
303 |           // This message obscures real errors so we ignore it.
304 |           // https://github.com/facebookincubator/create-react-app/issues/2612
305 |           return;
306 |         }
307 |         console.log(message);
308 |       },
309 |       minify: true,
310 |       // For unknown URLs, fallback to the index page
311 |       navigateFallback: publicUrl + '/index.html',
312 |       // Ignores URLs starting from /__ (useful for Firebase):
313 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
314 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
315 |       // Don't precache sourcemaps (they're large) and build asset manifest:
316 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
317 |     }),
318 |     // Moment.js is an extremely popular library that bundles large locale files
319 |     // by default due to how Webpack interprets its code. This is a practical
320 |     // solution that requires the user to opt into importing specific locales.
321 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
322 |     // You can remove this if you don't use Moment.js:
323 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
324 |   ],
325 |   // Some libraries import Node modules but don't use them in the browser.
326 |   // Tell Webpack to provide empty mocks for them so importing them works.
327 |   node: {
328 |     dgram: 'empty',
329 |     fs: 'empty',
330 |     net: 'empty',
331 |     tls: 'empty',
332 |     child_process: 'empty',
333 |   },
334 | };
335 | 


--------------------------------------------------------------------------------
/lib/react-bscroll.js:
--------------------------------------------------------------------------------
1 | module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function l(){y&&d&&(y=!1,d.length?h=d.concat(h):b=-1,h.length&&a())}function a(){if(!y){var e=o(l);y=!0;for(var t=h.length;t;){for(d=h,h=[];++b<t;)d&&d[b].run();b=-1,t=h.length}d=null,y=!1,i(e)}}function u(e,t){this.fun=e,this.array=t}function s(){}var c,f,p=e.exports={};!function(){try{c="function"===typeof setTimeout?setTimeout:n}catch(e){c=n}try{f="function"===typeof clearTimeout?clearTimeout:r}catch(e){f=r}}();var d,h=[],y=!1,b=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];h.push(new u(e,t)),1!==h.length||y||o(a)},u.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=s,p.addListener=s,p.once=s,p.off=s,p.removeListener=s,p.removeAllListeners=s,p.emit=s,p.prependListener=s,p.prependOnceListener=s,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";(function(t){function n(e,t,n,o,i,l,a,u){if(r(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,i,l,a,u],f=0;s=new Error(t.replace(/%s/g,function(){return c[f++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(0))},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"===typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"===typeof e&&null!==e&&e.$$typeof===r};e.exports=n(8)(o,!0)}else e.exports=n(10)()}).call(t,n(0))},function(e,t,n){"use strict";(function(t){var r=n(2),o=r;if("production"!==t.env.NODE_ENV){var i=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!==typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(e,t){if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){for(var n=arguments.length,r=Array(n>2?n-2:0),o=2;o<n;o++)r[o-2]=arguments[o];i.apply(void 0,[t].concat(r))}}}e.exports=o}).call(t,n(0))},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function l(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u="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},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(1),f=r(c),p=n(5),d=r(p),h=n(11),y=r(h),b=n(12),m=r(b),v=n(15),A=r(v);n(16);var w={threshold:100,stop:50,stopTime:600,txt:{success:"\u5237\u65b0\u6210\u529f"}},g={threshold:0,txt:{more:"\u52a0\u8f7d\u66f4\u591a",nomore:"\u6211\u662f\u6709\u5e95\u7ebf\u7684"}},O=function(e){function t(e,n){o(this,t);var r=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return r.getScrollObj=function(){return r.scroll},r._reboundPullDown=function(){var e=r.options.pullDownRefresh.stopTime,t=void 0===e?600:e;return new Promise(function(e){r.TimerA=setTimeout(function(){r.isRebounding=!0,r.scroll.finishPullDown(),e()},t)})},r._initPullUpLoad=function(){r.scroll.on("pullingUp",function(){r.setState({isPullUpLoad:!0}),r.props.pullUpLoadMoreData().then(function(){r.scroll&&(r.setState({isPullUpLoad:!1}),r.scroll.finishPullUp(),r.scroll.refresh())})})},r.scroll=null,r.isRebounding=!1,r.pulling=!1,r.pullDownInitTop=-50,r.state={isPullUpLoad:!1,beforePullDown:!0,pulling:!1,pullDownStyle:{top:r.pullDownInitTop+"px"},bubbleY:0},r}return l(t,e),s(t,[{key:"createScrollId",value:function(){return Math.random().toString(36).substr(3,10)}},{key:"componentDidMount",value:function(){this.initScroll()}},{key:"componentDidUpdate",value:function(e){this.props.children!==e.children&&(this.state.pulling||this.scroll.refresh(),e.disabled!==this.props.disabled&&(this.props.disabled?this.scroll.disable():this.scroll.enable()))}},{key:"componentWillUnmount",value:function(){this.scroll.stop(),this.scroll.destroy(),this.scroll=null,clearTimeout(this.TimerA),clearTimeout(this.TimerB)}},{key:"initScroll",value:function(){var e=this.props,t=e.probeType,n=e.click,r=e.startY,o=e.scrollY,i=e.scrollX,l=e.freeScroll,s=e.scrollbar,c=e.pullDownRefresh,f=e.pullUpLoad,p=e.preventDefaultException,d=e.eventPassthrough,h=e.bounce,b=e.stopPropagation,m="object"===("undefined"===typeof c?"undefined":u(c))?a({},w,c):!!c&&w,v="object"===("undefined"===typeof f?"undefined":u(f))?a({},g,f):!!f&&g;this.options={probeType:t,click:n,startY:r,scrollY:o,freeScroll:l,scrollX:i,scrollbar:s,pullDownRefresh:m,pullUpLoad:v,preventDefaultException:p,eventPassthrough:d,bounce:h,stopPropagation:b};var A=this.refs.$dom;this.scroll=new y.default(A,this.options),this.initEvents()}},{key:"initEvents",value:function(){var e=this;this.options.pullUpLoad&&this._initPullUpLoad(),this.options.pullDownRefresh&&this._initPullDownRefresh(),this.props.doScrollStart&&this.scroll.on("scrollStart",function(t){e.props.doScrollStart(t)}),this.props.doScroll&&this.scroll.on("scroll",function(t){e.props.doScroll(t)}),this.props.doScrollEnd&&this.scroll.on("scrollEnd",function(t){e.props.doScrollEnd(t)}),this.props.disabled&&this.scroll.disable()}},{key:"_initPullDownRefresh",value:function(){var e=this;this.scroll.on("pullingDown",function(){e.setState({beforePullDown:!1,pulling:!0}),e.props.doPullDownFresh().then(function(){e.scroll&&(e.setState({pulling:!1}),e._reboundPullDown().then(function(){e._afterPullDown()}))})}),this.scroll.on("scroll",function(t){var n=e.state.beforePullDown;t.y<0||(n?e.setState({bubbleY:Math.max(0,t.y+e.pullDownInitTop),pullDownStyle:{top:Math.min(t.y+e.pullDownInitTop,10)+"px"}}):e.setState({bubbleY:0}),e.isRebounding&&e.setState({pullDownStyle:{top:10-(w.stop-t.y)+"px"}}))})}},{key:"_afterPullDown",value:function(){var e=this;this.TimerB=setTimeout(function(){e.setState({beforePullDown:!0,pullDownStyle:{top:e.pullDownInitTop+"px"}}),e.isRebounding=!1,e.scroll.refresh()},this.scroll.options.bounceTime)}},{key:"renderPullUpLoad",value:function(){var e=this.props,t=e.pullUpLoad,n=e.isPullUpTipHide;return t&&n?f.default.createElement("div",{className:"b-pullup-wrapper"},f.default.createElement("div",{className:"after-trigger",style:{lineHeight:".32rem"}},f.default.createElement("span",{style:{color:"#999999",fontSize:".28rem"}},""))):t&&this.state.isPullUpLoad?f.default.createElement("div",{className:"b-pullup-wrapper"},f.default.createElement("div",{className:"after-trigger",style:{lineHeight:".32rem"}},f.default.createElement("i",{className:"loading-icon"}),f.default.createElement("span",{style:{color:"#999999",fontSize:".28rem"}},"object"===("undefined"===typeof t?"undefined":u(t))?t.txt.more:"\u52a0\u8f7d\u4e2d..."))):t&&!this.state.isPullUpLoad?f.default.createElement("div",{className:"b-pullup-wrapper"},f.default.createElement("div",{className:"before-trigger"},f.default.createElement("span",{style:{color:"#999999",fontSize:".28rem"}},"object"===("undefined"===typeof t?"undefined":u(t))?t.txt.nomore:"\u52a0\u8f7d\u5b8c\u6210"))):void 0}},{key:"renderPullUpDown",value:function(){var e=this.props.pullDownRefresh,t=this.state,n=t.beforePullDown,r=t.pulling,o=t.pullDownStyle;return e&&n?f.default.createElement("div",{className:"b-pulldown-wrapper",style:o},f.default.createElement("div",{className:"before-trigger"},f.default.createElement(A.default,{y:this.state.bubbleY}))):e&&!n&&r?f.default.createElement("div",{className:"b-pulldown-wrapper",style:o},f.default.createElement("div",{className:"after-trigger"},f.default.createElement("div",{className:"loading"},f.default.createElement(m.default,null)))):!e||n||r?void 0:f.default.createElement("div",{className:"b-pulldown-wrapper",style:o},f.default.createElement("div",{className:"after-trigger"},f.default.createElement("div",null,f.default.createElement("span",{style:{fontSize:".18rem"}},"object"===u(this.options.pullDownRefresh)?this.options.pullDownRefresh.txt.success:"\u5237\u65b0\u5b8c\u6210"))))}},{key:"render",value:function(){return f.default.createElement("div",{className:"b-wrapper",ref:"$dom"},f.default.createElement("div",{className:"b-scroll-content"},this.props.children,this.renderPullUpLoad()),this.renderPullUpDown())}}]),t}(c.Component);O.defaultProps={probeType:3,click:!1,startY:0,scrollY:!0,scrollX:!1,freeScroll:!0,scrollbar:!0,pullDownRefresh:!1,pullUpLoad:!1,bounce:!0,preventDefaultException:{className:/(^|\s)originEvent(\s|$)/,tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|TABLE)$/},eventPassthrough:"",isPullUpTipHide:!0,disabled:!1,stopPropagation:!0},O.propTypes={children:d.default.any,probeType:d.default.number,startY:d.default.number,click:d.default.oneOfType([d.default.string,d.default.bool]),scrollY:d.default.bool,scrollX:d.default.bool,freeScroll:d.default.bool,scrollbar:d.default.bool,pullDownRefresh:d.default.oneOfType([d.default.object,d.default.bool]),pullUpLoad:d.default.oneOfType([d.default.object,d.default.bool]),pullUpLoadMoreData:d.default.func,canRenderPullUpTip:d.default.bool,doPullDownFresh:d.default.func,doScroll:d.default.func,doScrollStart:d.default.func,doScrollEnd:d.default.func,preventDefaultException:d.default.object,eventPassthrough:d.default.string,isPullUpTipHide:d.default.bool,bounce:d.default.bool,disabled:d.default.bool,stopPropagation:d.default.bool},t.default=O},function(e,t,n){"use strict";(function(t){var r=n(2),o=n(3),i=n(6),l=n(4),a=n(9);e.exports=function(e,n){function u(e){var t=e&&(R&&e[R]||e[D]);if("function"===typeof t)return t}function s(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function c(e){this.message=e,this.stack=""}function f(e){function r(r,s,f,p,d,h,y){if(p=p||j,h=h||f,y!==l)if(n)o(!1,"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");else if("production"!==t.env.NODE_ENV&&"undefined"!==typeof console){var b=p+":"+f;!a[b]&&u<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",h,p),a[b]=!0,u++)}return null==s[f]?r?new c(null===s[f]?"The "+d+" `"+h+"` is marked as required in `"+p+"`, but its value is `null`.":"The "+d+" `"+h+"` is marked as required in `"+p+"`, but its value is `undefined`."):null:e(s,f,p,d,h)}if("production"!==t.env.NODE_ENV)var a={},u=0;var s=r.bind(null,!1);return s.isRequired=r.bind(null,!0),s}function p(e){function t(t,n,r,o,i,l){var a=t[n];if(g(a)!==e)return new c("Invalid "+o+" `"+i+"` of type `"+O(a)+"` supplied to `"+r+"`, expected `"+e+"`.");return null}return f(t)}function d(e){function t(t,n,r,o,i){if("function"!==typeof e)return new c("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var a=t[n];if(!Array.isArray(a)){return new c("Invalid "+o+" `"+i+"` of type `"+g(a)+"` supplied to `"+r+"`, expected an array.")}for(var u=0;u<a.length;u++){var s=e(a,u,r,o,i+"["+u+"]",l);if(s instanceof Error)return s}return null}return f(t)}function h(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var l=e.name||j;return new c("Invalid "+o+" `"+i+"` of type `"+T(t[n])+"` supplied to `"+r+"`, expected instance of `"+l+"`.")}return null}return f(t)}function y(e){function n(t,n,r,o,i){for(var l=t[n],a=0;a<e.length;a++)if(s(l,e[a]))return null;return new c("Invalid "+o+" `"+i+"` of value `"+l+"` supplied to `"+r+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?f(n):("production"!==t.env.NODE_ENV&&i(!1,"Invalid argument supplied to oneOf, expected an instance of array."),r.thatReturnsNull)}function b(e){function t(t,n,r,o,i){if("function"!==typeof e)return new c("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var a=t[n],u=g(a);if("object"!==u)return new c("Invalid "+o+" `"+i+"` of type `"+u+"` supplied to `"+r+"`, expected an object.");for(var s in a)if(a.hasOwnProperty(s)){var f=e(a,s,r,o,i+"."+s,l);if(f instanceof Error)return f}return null}return f(t)}function m(e){function n(t,n,r,o,i){for(var a=0;a<e.length;a++){if(null==(0,e[a])(t,n,r,o,i,l))return null}return new c("Invalid "+o+" `"+i+"` supplied to `"+r+"`.")}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV&&i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."),r.thatReturnsNull;for(var o=0;o<e.length;o++){var a=e[o];if("function"!==typeof a)return i(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",E(a),o),r.thatReturnsNull}return f(n)}function v(e){function t(t,n,r,o,i){var a=t[n],u=g(a);if("object"!==u)return new c("Invalid "+o+" `"+i+"` of type `"+u+"` supplied to `"+r+"`, expected `object`.");for(var s in e){var f=e[s];if(f){var p=f(a,s,r,o,i+"."+s,l);if(p)return p}}return null}return f(t)}function A(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(A);if(null===t||e(t))return!0;var n=u(t);if(!n)return!1;var r,o=n.call(t);if(n!==t.entries){for(;!(r=o.next()).done;)if(!A(r.value))return!1}else for(;!(r=o.next()).done;){var i=r.value;if(i&&!A(i[1]))return!1}return!0;default:return!1}}function w(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"===typeof Symbol&&t instanceof Symbol)}function g(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":w(t,e)?"symbol":t}function O(e){if("undefined"===typeof e||null===e)return""+e;var t=g(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function E(e){var t=O(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function T(e){return e.constructor&&e.constructor.name?e.constructor.name:j}var R="function"===typeof Symbol&&Symbol.iterator,D="@@iterator",j="<<anonymous>>",P={array:p("array"),bool:p("boolean"),func:p("function"),number:p("number"),object:p("object"),string:p("string"),symbol:p("symbol"),any:function(){return f(r.thatReturnsNull)}(),arrayOf:d,element:function(){function t(t,n,r,o,i){var l=t[n];if(!e(l)){return new c("Invalid "+o+" `"+i+"` of type `"+g(l)+"` supplied to `"+r+"`, expected a single ReactElement.")}return null}return f(t)}(),instanceOf:h,node:function(){function e(e,t,n,r,o){return A(e[t])?null:new c("Invalid "+r+" `"+o+"` supplied to `"+n+"`, expected a ReactNode.")}return f(e)}(),objectOf:b,oneOf:y,oneOfType:m,shape:v};return c.prototype=Error.prototype,P.checkPropTypes=a,P.PropTypes=P,P}}).call(t,n(0))},function(e,t,n){"use strict";(function(t){function r(e,n,r,u,s){if("production"!==t.env.NODE_ENV)for(var c in e)if(e.hasOwnProperty(c)){var f;try{o("function"===typeof e[c],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",u||"React class",r,c),f=e[c](n,c,u,r,null,l)}catch(e){f=e}if(i(!f||f instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",u||"React class",r,c,typeof f),f instanceof Error&&!(f.message in a)){a[f.message]=!0;var p=s?s():"";i(!1,"Failed %s type: %s%s",r,f.message,null!=p?p:"")}}}if("production"!==t.env.NODE_ENV)var o=n(3),i=n(6),l=n(4),a={};e.exports=r}).call(t,n(0))},function(e,t,n){"use strict";var r=n(2),o=n(3),i=n(4);e.exports=function(){function e(e,t,n,r,l,a){a!==i&&o(!1,"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")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t){e.exports=require("better-scroll")},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(1),u=function(e){return e&&e.__esModule?e:{default:e}}(a);n(13);var s=n(14),c=function(e){function t(){return r(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),l(t,[{key:"render",value:function(){return u.default.createElement("div",{className:"loading-container"},u.default.createElement("img",{src:s,alt:"loading"}))}}]),t}(a.Component);t.default=c},function(e,t){},function(e,t){e.exports="data:image/gif;base64,R0lGODlhZABkAKIEAN7e3rq6uv///5mZmQAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpBRjA4RUZDMDI3MjA2ODExODA4M0Y1OTQyMzVDRDM3MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMzE0Rjk3NDdDRTgxMUUzOUJCRjk0NjAxMUE1NzRBMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMzE0Rjk3MzdDRTgxMUUzOUJCRjk0NjAxMUE1NzRBMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDVBMTZDQjczOTIwNjgxMTgwODNGNTk0MjM1Q0QzNzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUYwOEVGQzAyNzIwNjgxMTgwODNGNTk0MjM1Q0QzNzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFAAAEACwAAAAAZABkAAAD/0i63P4wykmrvTjrzbv/YCiOZGme6CasbOqObPvOXRzTeGbLeT/tK18KQLwABZeBUlghOgGVY0VJHTAlT2cUOK0ur4+s9sedeKngsBhK3lHO3zRjXZRIJfC4fEFv28xwew50bBB3EHlWgg2EEYcOiYtqYo5lD3mSk5QPjwyRmYNrhpYNmKChog6dCp+njKkNqwSmrq+wDG6QtD4BvRiNsX+lu296Hb3IARd9qjyegRZnH8nUTbfR0IDZG9TdFJsa0trEGd3eE08eVcWJihzm5ovt6x7w8WDz9CD25z35aCT4Vcvxz9gIgchwFJyBUOG8HvwckqNhT6K4K/1oXJST0P8HwFogQ4ocSbKkyVoFP8pJaRARS31MXsJ0KdNdzJo2L+FsqXFnzmE7r/j8CVRmmqDjXh7F2UXpSqMno0qdSrWq1ZNENWby4m/mzY0uJvYUa6JdV7NjW4XNZ1Ft2X9nH5ZIKYSuiIX44ILAu5StOr8RvGIQ/EwuB8OBuW4Aq9NtBseNCbOTXJjx4G14MDdVPJny5qyROS9gDJkmzxkTLZM95ZhcaVCQU6+WJ1v17D2lxb4WRLa3Zkmvff/mPZxV8VnH8x5fvfur5cqem3tMjvw5dJW4qd++HRe7ac/GRWcX/9176NNCwYcn//3qevXuz6OPn9g6/czw7xedrz9x//8KAAYo4IAEFthAAgAh+QQFAAAEACwLAAUAPwAjAAADxUi63P4QyAmrvfhNmrvP2/aNJBNyZdqdkvoFsMcCnmCTcB6AbGb/gpcuhpn5gLfOMFfsXZA/z5JoMT6hQeV0V3VWsEnt8mL9YkdbbsT7AGeF00rZ4U5t5ewGWJVenyB1fHEaeQt7Ln0Oc4aHiIMNiwqNjo8mIW2TCwObcGOQl3qZCpukA1KVCyJ0Zw6lrhl3I6IErrUYniRQELW2FzouQBW8vC7FDcPExsrIvcouzK/OxdCk0sbU1svI2drJ3NfR387V4hgJACH5BAUAAAQALBoABQA/ACMAAAPFSLrcHjC6Sau9L0LMu1ea9o0kE0pl6p2b6g3wynpATcL4wLEBV/+ATw63m2GAv9cwduEdkbbOkmlxXqBRzpRKsVawWe20afxiR1tdxTsBB9HbddnhTsW78wZYlcafKHV8YxNsDHsufRl/dIeIgw2FCo2OjyYhbZOUS4oohpkXAqEVd5CdnlAeoaoCFKQ0Zxirsq1DKaigsrO0XCRAsbm6LsIKwMDDwsXGxynJucsqzcHPI9Gq09DR1y7N2sjF3cPO4MfWHQkAIfkEBQAABAAsLgAFADEAMAAAA71Is0z+MMpJJ2s1a33v/qDTYWFJjYupSugQBvAKtR9sB7KI1ncs05qeLQfMCH2rIuWIVCknzJxiV2HiiFRoVPqEbLnZiFWqGy2P5HJHi053CV/3WjJOq1Pi+AbAz3jobR98gwAyehSEiYY9e4mKi02Ijo92kpOUlRCXk5kRm46dnp+EoZqjfaWmn6kSq6ytl6+Wg7IZtLW4ubq7vL2dAsDBwsPApcTHyL/Iy8GZzM/FdtDPztPHytbDodnCDgkAIfkEBQAABAAsOwAKACQAPwAAA69IujzOMMpJnB0062u1h1z3jeEzeqV5Zum6te6UYrFc1vaNR/De9D4FMDgLLoqngDLHSSqfkuHkSV3ympqqlunRbndeLy4sjpG/5jN1rLayz0a4kUCeL9B2BTTP7/v/gIERAISFhoeELoiLjCeMj4YjkJOJHpSTkpeLjpqIK52RgqKjpKUjAoECqqp+q66oea+vdrKyRrW2Qbi5O7u8OL6uusGsw8Fzx7S4fMt9sxEJACH5BAUAAAQALDsAGQAkAD8AAAOtSLrcziO+SV+8o2qL8f5d+GmhOHJldzZpuS6t+RKxOtO1dCv5DrU+VirokBGFmaNyyWw6n8yAdEqtSl/WrPak7VJH3vB1Iw6Dy1ku2rpaf6HwuHzuBMQBePwzz7cz+31LgIBHg4REhoc+iYo7jHyIj3oTApUCGpJ+DZaWG48PnJ2ehg6hoqONCqanqJOlq02rlbGyTLKXtrW5prSwu6G9vL/Aw6xHusW4yU/EOwkAIfkEBQAABAAsLgAtADEAMQAAA7lIutz+ZMhJq4Q4L8u7/k0nUmA5nlepoaf6sZ67wpb80pOt73zv/8CgcLgLEGWBZPIIUjqNTMzzGX1Mp1XGFZtVbLnZL7gqdnYJZWUPwAZo0lBbu/0p7+b0+laHz+vHCwKCgw59fn9LD4OEhYZCi4uNjkCQjA2GbJSVAg+Ybj+bnJ2YoJsYpD6hp6g8qqt9qaavsK2ys3i1lR+sNq4ZvDK+v7Q6wreZO8a3PcpdzVnP0JBnitPU1dcOCQAh+QQFAAAEACwaADoAPwAkAAADyEi63P4wkiGrvXhojbu3W0h9ZCmKZZqdqOo+7PnOTCzTs33jrh7yL99GIigKXIFkoCIcOYzGlFIJ0j2g0dKUWmVdsUXSltttMcBZBmDNdozJZecZ/WC33W8cOtyw2/F5L3tHDn53DW9Jgnt1hgAPiUsqgxCOj5CJk3SVjhGZJZSchp6fH4wRlhKlHaGifqqrFq2uf7CBF6cSqRWxRJu6nby3smAXu8JbrMUWx7ZTHlgYzc6SQIXB1jPT2Snb3CWj39qv4jRr5QwJACH5BAUAAAQALAsAOgA/ACQAAAPHSLrcJC7KSesUGNvNu8og5I3kE4Jlap2n6kZs+86xPKu1fZc5uuM9zS8VFE0ASIBrwBxccpZkMtVsSmob6bRUtTpiHO3W0/V+fVkx0hFoux1l80ytZLvbkbjzRq8z7ndwenN0EYBvgnEvfYaHAXmDKoyNhxJ6eyWFEo6PloqZmpSAE5egYhScFJEek5uOqqtpahWpsJ+yWha1tl0doRO7pLdRp7qvFsMVs8aVyGWsUhzBvJhDDdPWKtjZJdvcJM3fL+Hi450qCQAh+QQFAAAEACwFAC0AMQAxAAADukgq3P5MyUmrlTDryzvRoOONU2hG5HiaKblurfpCsTs3da7vfO//wKBwCAQQa4Bk8jhSOo1My/MZpUynVckVW91ymd7vMezMkpXmsyfADvDIo3Z75yXJ57pt6o7PUfd8bBUDhIVDgW6DhYRCiIkTi4tAjhaRhj+UipaYiBeWjD6dnp+hopWkPaanmzyZo6w6rq+RrYEjnwO1fLeosbu8sDm2wLS6giS4WavFypC9zQrJ0M6S09SX1s4SCQAh+QQFAAAEACwFABkAJAA/AAADrki6Ks4wytmcpRjb/bJfXPh5oThSZXlOqbpGrfmC8TZD9XUz+Q63vp8riOMQUZ2jcslsOp8MgHRKrUpf1qz2pO1SR97w1SMOg8tZLtq6Wn+h8Lh8Tj8F4oF83qnv35V+fkeBgUSEhTuHiDOKiy+NfT6QepKTGQOYAxOQHpmZEoofnp8RhyOjpBCCp6iYTK2aS7CxR7OvsLK4uai3rb2jv8BKtrvCxZ5Nvsm8TsYRCQAh+QQFAAAEACwFAAoAJAA/AAADrki63K4ivklnvKJqi+X+S3eBoOiRmnmilMqm7tvG8kPXjZrhzs1Dvl+Qp6MAjqii48gEkILN6AcalcIwj2p1g81qt7yv9icG18pWHJr5I6zbijI8/p0vzHa6M8/v+/+AGgGDhIWGgyyHioski46FII+SiBuTkpGWio2ZhyickIGhoqOkogOAA6mpfKqtp3Curm2xsT+0tTW3uC+6uyy9rTjAqsLDtr2wt3bKebI/CQA7"},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function l(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(1),s=r(u),c=n(5),f=r(c),p=function(e){function t(){o(this,t);var e=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.width=50,e.height=80,e.state={style:null},e}return l(t,e),a(t,[{key:"componentWillMount",value:function(){this.ratio=window.devicePixelRatio,this.width*=this.ratio,this.height*=this.ratio,this.initRadius=18*this.ratio,this.minHeadRadius=12*this.ratio,this.minTailRadius=5*this.ratio,this.initArrowRadius=10*this.ratio,this.minArrowRadius=6*this.ratio,this.arrowWidth=3*this.ratio,this.maxDistance=40*this.ratio,this.initCenterX=25*this.ratio,this.initCenterY=25*this.ratio,this.headCenter={x:this.initCenterX,y:this.initCenterY},this.setState({style:{width:this.width/this.ratio+"px}",height:this.height/this.ratio+"px"}})}},{key:"componentDidUpdate",value:function(){this._draw()}},{key:"_getDistance",value:function(){return Math.max(0,Math.min(this.props.y*this.ratio,this.maxDistance))}},{key:"_draw",value:function(){var e=document.getElementById("bubble"),t=e.getContext("2d");t.clearRect(0,0,e.width,e.height),this._drawBubble(t),this._drawArrow(t)}},{key:"_drawBubble",value:function(e){e.save(),e.beginPath();var t=this._getDistance(),n=t/this.maxDistance,r=this.initRadius-(this.initRadius-this.minHeadRadius)*n;this.headCenter.y=this.initCenterY-(this.initRadius-this.minHeadRadius)*n,e.arc(this.headCenter.x,this.headCenter.y,r,0,Math.PI,!0);var o=this.initRadius-(this.initRadius-this.minTailRadius)*n,i={x:this.headCenter.x,y:this.headCenter.y+t},l={x:i.x-o,y:i.y},a={x:l.x,y:l.y-t/2};e.quadraticCurveTo(a.x,a.y,l.x,l.y),e.arc(i.x,i.y,o,Math.PI,0,!0);var u={x:this.headCenter.x+r,y:this.headCenter.y},s={x:i.x+o,y:u.y+t/2};e.quadraticCurveTo(s.x,s.y,u.x,u.y),e.fillStyle="rgb(170,170,170)",e.fill(),e.strokeStyle="rgb(153,153,153)",e.stroke(),e.restore()}},{key:"_drawArrow",value:function(e){e.save(),e.beginPath();var t=this._getDistance(),n=t/this.maxDistance,r=this.initArrowRadius-(this.initArrowRadius-this.minArrowRadius)*n;e.arc(this.headCenter.x,this.headCenter.y,r-(this.arrowWidth-n),-Math.PI/2,0,!0),e.arc(this.headCenter.x,this.headCenter.y,r,0,3*Math.PI/2,!1),e.lineTo(this.headCenter.x,this.headCenter.y-r-this.arrowWidth/2+n),e.lineTo(this.headCenter.x+2*this.arrowWidth-2*n,this.headCenter.y-r+this.arrowWidth/2),e.lineTo(this.headCenter.x,this.headCenter.y-r+3*this.arrowWidth/2-n),e.fillStyle="rgb(255,255,255)",e.fill(),e.strokeStyle="rgb(170,170,170)",e.stroke(),e.restore()}},{key:"render",value:function(){return s.default.createElement("canvas",{id:"bubble",width:this.width,height:this.height,style:this.state.style})}}]),t}(u.Component);p.propTypes={y:f.default.number},p.defaultProps={y:0},t.default=p},function(e,t){}]);


--------------------------------------------------------------------------------