├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README.md
├── examples
    ├── containers
    │   ├── BirthPicker.js
    │   ├── NamePicker.js
    │   └── app.js
    ├── example.less
    ├── index.html
    ├── main.js
    ├── qr.png
    ├── screen-capture.gif
    ├── server.js
    ├── webpack.build.js
    └── webpack.config.js
├── lib
    └── react-mobile-picker.js
├── package.json
├── src
    ├── index.js
    └── style.less
├── webpack.build.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["react", "es2015", "stage-0"],
 3 |   "env": {
 4 |     "development": {
 5 |       "plugins": [
 6 |         ["react-transform", {
 7 |           "transforms": [{
 8 |             "transform": "react-transform-hmr",
 9 |             "imports": ["react"],
10 |             "locals": ["module"]
11 |           }, {
12 |             "transform": "react-transform-catch-errors",
13 |             "imports": ["react", "redbox-react"]
14 |           }]
15 |         }]
16 |       ]
17 |     }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "ecmaFeatures": {
 3 |     "jsx": true,
 4 |     "modules": true
 5 |   },
 6 |   "env": {
 7 |     "browser": true,
 8 |     "node": true
 9 |   },
10 |   "parser": "babel-eslint",
11 |   "rules": {
12 |     "quotes": [2, "single"],
13 |     "strict": [2, "never"],
14 |     "babel/generator-star-spacing": 1,
15 |     "babel/new-cap": 1,
16 |     "babel/object-shorthand": 1,
17 |     "babel/arrow-parens": 1,
18 |     "babel/no-await-in-loop": 1,
19 |     "react/jsx-uses-react": 2,
20 |     "react/jsx-uses-vars": 2,
21 |     "react/react-in-jsx-scope": 2
22 |   },
23 |   "plugins": [
24 |     "babel",
25 |     "react"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | bower_components
4 | npm-debug.log
5 | 
6 | examples/dist
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Lei Lei
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Mobile Picker
  2 | 
  3 | This package is a fork of the original React Mobile Picker made by @adcentury, modified to provide scroll wheel and keyboard up/down event support for desktop browsers.
  4 | 
  5 | React Mobile Picker is a super simple component with no restriction, which means you can use it in any way you want.
  6 | 
  7 | ![screen-capture](./examples/screen-capture.gif)
  8 | 
  9 | ## Preview
 10 | 
 11 | ![qr](./examples/qr.png)
 12 | 
 13 | Scan this Qr in you mobile.
 14 | 
 15 | Or visit (in mobile or mobile simulator): [http://adcentury.github.io/react-mobile-picker](http://adcentury.github.io/react-mobile-picker)
 16 | 
 17 | ## Install
 18 | 
 19 | ```
 20 | npm install react-mobile-picker-scroll --save
 21 | ```
 22 | 
 23 | ## Usage
 24 | 
 25 | ### ES6
 26 | 
 27 | ```javascript
 28 | import Picker from 'react-mobile-picker-scroll';
 29 | ```
 30 | 
 31 | ### CommonJS
 32 | 
 33 | ```javascript
 34 | var Picker = require('react-mobile-picker-scroll');
 35 | ```
 36 | 
 37 | ## Props
 38 | 
 39 | | Property name | Type | Default | Description |
 40 | | ------------- | ---- | ------- | ----------- |
 41 | | optionGroups | Object | N/A | Key-value pairs as `{name1: options1, name2: options2}`. `options` is an array of all options for this name. |
 42 | | valueGroups | Object | N/A | Selected value pairs as `{name1: value1, name2: value2}`. |
 43 | | onChange(name, value) | Function | N/A | Callback called when user pick a new value. |
 44 | | itemHeight | Number | 36 | Height of each item (that is each option). In `px`. |
 45 | | height | Number | 216 | Height of the picker. In `px`. |
 46 | | textColor | String | N/A | Text color of the picker item |
 47 | | textFontFamily | String | N/A | Font family of the picker item. |
 48 | | textSize | Number | N/A | Text size of the picker item. In `px`. |
 49 | 
 50 | ## Getting Started
 51 | 
 52 | By design, React Mobile Picker is a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components), which means the selected value of the rendered element will always reflect the `valueGroups`. Every time you want to change the selected item, just modify `valueGroups` values.
 53 | 
 54 | Here is an example of how to integrate React Mobile Picker:
 55 | 
 56 | ```javascript
 57 | import React, {Component} from 'react';
 58 | import Picker from 'react-mobile-picker-scroll';
 59 | 
 60 | class App extends Component {
 61 |   constructor(props) {
 62 |     super(props);
 63 |     this.state = {
 64 |       valueGroups: {
 65 |         title: 'Mr.',
 66 |         firstName: 'Micheal',
 67 |         secondName: 'Jordan'
 68 |       }, 
 69 |       optionGroups: {
 70 |         title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],
 71 |         firstName: ['John', 'Micheal', 'Elizabeth'],
 72 |         secondName: ['Lennon', 'Jackson', 'Jordan', 'Legend', 'Taylor']
 73 |       }
 74 |     };
 75 |   }
 76 | 
 77 |   // Update the value in response to user picking event
 78 |   handleChange = (name, value) => {
 79 |     this.setState(({valueGroups}) => ({
 80 |       valueGroups: {
 81 |         ...valueGroups,
 82 |         [name]: value
 83 |       }
 84 |     }));
 85 |   };
 86 | 
 87 |   render() {
 88 |     const {optionGroups, valueGroups} = this.state;
 89 | 
 90 |     return (
 91 |       <Picker
 92 |         optionGroups={optionGroups}
 93 |         valueGroups={valueGroups}
 94 |         onChange={this.handleChange} />
 95 |     );
 96 |   }
 97 | }
 98 | ```
 99 | 
100 | ## More Examples
101 | 
102 | ```
103 | git clone this repo
104 | npm install
105 | npm start
106 | point your browser to http://localhost:8080
107 | ```
108 | 
109 | ## License
110 | 
111 | MIT.
112 | 


--------------------------------------------------------------------------------
/examples/containers/BirthPicker.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import Picker from 'react-mobile-picker';
  4 | 
  5 | function generateNumberArray(begin, end) {
  6 |   let array = [];
  7 |   for (let i = begin; i <= end; i++) {
  8 |     array.push((i < 10 ? '0' : '') + i);
  9 |   }
 10 |   return array;
 11 | }
 12 | 
 13 | export default class BirthPicker extends Component {
 14 |   constructor(props) {
 15 |     super(props);
 16 |     this.state = {
 17 |       isPickerShow: false,
 18 |       valueGroups: {
 19 |         year: '1989',
 20 |         month: '08',
 21 |         day: '12'
 22 |       },
 23 |       optionGroups: {
 24 |         year: generateNumberArray(1970, 2015),
 25 |         month: generateNumberArray(1, 12),
 26 |         day: generateNumberArray(1, 31)
 27 |       }
 28 |     };
 29 |   }
 30 | 
 31 |   handleChange = (name, value) => {
 32 |     this.setState(({valueGroups, optionGroups}) => {
 33 |       const nextState = {
 34 |         valueGroups: {
 35 |           ...valueGroups,
 36 |           [name]: value
 37 |         }
 38 |       };
 39 |       if (name === 'year' && valueGroups.month === '02') {
 40 |         const yearValue = parseInt(value);
 41 |         if ((yearValue % 4 === 0 && yearValue % 100 !== 0) || (yearValue % 400 === 0)) {
 42 |           nextState.optionGroups = {
 43 |             ...optionGroups,
 44 |             day: generateNumberArray(1, 29)
 45 |           };
 46 |         } else {
 47 |           nextState.optionGroups = {
 48 |             ...optionGroups,
 49 |             day: generateNumberArray(1, 28)
 50 |           };
 51 |         }
 52 |       } else if (name === 'month') {
 53 |         if (value === '02') {
 54 |           nextState.optionGroups = {
 55 |             ...optionGroups,
 56 |             day: generateNumberArray(1, 28)
 57 |           };
 58 |         } else if (['01', '03', '05', '07', '08', '10', '12'].indexOf(value) > -1 &&
 59 |           ['01', '03', '05', '07', '08', '10', '12'].indexOf(valueGroups.month) < 0) {
 60 |           nextState.optionGroups = {
 61 |             ...optionGroups,
 62 |             day: generateNumberArray(1, 31)
 63 |           };
 64 |         } else if (['01', '03', '05', '07', '08', '10', '12'].indexOf(value) < 0 &&
 65 |           ['01', '03', '05', '07', '08', '10', '12'].indexOf(valueGroups.month) > -1) {
 66 |           nextState.optionGroups = {
 67 |             ...optionGroups,
 68 |             day: generateNumberArray(1, 30)
 69 |           };
 70 |         }
 71 |       }
 72 |       return nextState;
 73 |     });
 74 |   };
 75 | 
 76 |   togglePicker = () => {
 77 |     this.setState(({isPickerShow}) => ({
 78 |       isPickerShow: !isPickerShow
 79 |     }));
 80 |   };
 81 | 
 82 |   render() {
 83 |     const {isPickerShow, optionGroups, valueGroups} = this.state;
 84 |     const maskStyle = {
 85 |       display: isPickerShow ? 'block' : 'none'
 86 |     };
 87 |     const pickerModalClass = `picker-modal${isPickerShow ? ' picker-modal-toggle' : ''}`;
 88 | 
 89 |     return (
 90 |       <div className="example-container">
 91 |         <div className="weui_cells_title">2. As a modal and bind to input field</div>
 92 |         <div className="weui_cells">
 93 |           <div className="weui_cell weui_cell_select weui_select_after">
 94 |             <div className="weui_cell_hd">Birthdate</div>
 95 |             <div className="weui_cell_bd weui_cell_primary">
 96 |               <input
 97 |                 type="text"
 98 |                 className="weui_select"
 99 |                 value={valueGroups.year + '-' + valueGroups.month + '-' + valueGroups.day}
100 |                 readOnly
101 |                 onClick={this.togglePicker} />
102 |             </div>
103 |           </div>
104 |         </div>
105 |         <div className="picker-modal-container">
106 |           <div className="picker-modal-mask" style={maskStyle} onClick={this.togglePicker}></div>
107 |           <div className={pickerModalClass}>
108 |             <header>
109 |               <div className="title">Choose your birthdate</div>
110 |               <a href="javascript:;" onClick={this.togglePicker}>OK</a>
111 |             </header>
112 |             <Picker
113 |              optionGroups={optionGroups}
114 |              valueGroups={valueGroups}
115 |              onChange={this.handleChange} />
116 |           </div>
117 |         </div>
118 |       </div>
119 |     );
120 |   }
121 | }
122 | 


--------------------------------------------------------------------------------
/examples/containers/NamePicker.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Picker from 'react-mobile-picker';
 4 | 
 5 | export default class NamePicker extends Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |     this.state = {
 9 |       valueGroups: {
10 |         title: 'Mr.',
11 |         firstName: 'Micheal',
12 |         secondName: 'Jordan'
13 |       }, 
14 |       optionGroups: {
15 |         title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],
16 |         firstName: ['John', 'Micheal', 'Elizabeth'],
17 |         secondName: ['Lennon', 'Jackson', 'Jordan', 'Legend', 'Taylor']
18 |       }
19 |     };
20 |   }
21 | 
22 |   handleChange = (name, value) => {
23 |     this.setState(({valueGroups}) => ({
24 |       valueGroups: {
25 |         ...valueGroups,
26 |         [name]: value
27 |       }
28 |     }));
29 |   };
30 | 
31 |   render() {
32 |     const {optionGroups, valueGroups} = this.state;
33 | 
34 |     return (
35 |       <div className="example-container">
36 |         <div className="weui_cells_title">1. As an inline component</div>
37 |         <div className="weui_cells">
38 |           <div className="weui_cell">
39 |             <div className="weui_cell_bd weui_cell_primary">Hi, {valueGroups.title} {valueGroups.firstName} {valueGroups.secondName}</div>
40 |           </div>
41 |         </div>
42 |         <div className="picker-inline-container">
43 |           <Picker
44 |             optionGroups={optionGroups}
45 |             valueGroups={valueGroups}
46 |             onChange={this.handleChange} />
47 |         </div>
48 |       </div>
49 |     );
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/examples/containers/app.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import NamePicker from './NamePicker';
 4 | import BirthPicker from './BirthPicker';
 5 | 
 6 | export default class App extends Component {
 7 |   render() {
 8 |     return (
 9 |       <div className="page">
10 |         <header className="page-header">
11 |           <h1 className="page-title">React Mobile Picker</h1>
12 |         </header>
13 |         <main className="page-body">
14 |           <p className="description">Note: This is a fork of the original React Mobile Picker, with added support for mouse scroll and keyboard up/down events.</p>
15 |           <p className="description">React Mobile Picker is a super simple component with no restriction, which means you can use it in any way you want.</p>
16 |           <p className="description">Here are two examples:</p>
17 |           <NamePicker />
18 |           <BirthPicker />
19 |         </main>
20 |       </div>
21 |     );
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/example.less:
--------------------------------------------------------------------------------
  1 | *, *:before, *:after {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | html, body, .app-container {
  8 |   width: 100%;
  9 |   height: 100%;
 10 | }
 11 | 
 12 | .page {
 13 |   width: 100%;
 14 |   height: 100%;
 15 |   max-width: 480px;
 16 |   margin: 0 auto;
 17 |   padding-top: 5px;
 18 |   background-color: #fbf9fe;
 19 | }
 20 | 
 21 | .page-header {
 22 |   padding: 10px 0 5px;
 23 | 
 24 |   .page-title {
 25 |     text-align: center;
 26 |     font-size: 26px;
 27 |     font-weight: 400;
 28 |     color: #3cc51f;
 29 |   }
 30 | }
 31 | 
 32 | .page-body {
 33 |   .description {
 34 |     padding: 0 15px;
 35 |     margin-bottom: 8px;
 36 | 
 37 |     font-size: 14px;
 38 |     line-height: 1.4;
 39 |   }
 40 | }
 41 | 
 42 | .example-container {
 43 |   margin-bottom: 20px;
 44 | }
 45 | 
 46 | .picker-modal-mask {
 47 |   position: fixed;
 48 |   left: 0;
 49 |   top: 0;
 50 |   bottom: 0;
 51 |   right: 0;
 52 |   z-index: 1;
 53 | 
 54 |   display: none;
 55 |   width: 100%;
 56 |   height: 100%;
 57 | 
 58 |   background: rgba(0, 0, 0, 0.6);
 59 | }
 60 | 
 61 | .picker-modal {
 62 |   position: fixed;
 63 |   left: 0;
 64 |   bottom: 0;
 65 |   z-index: 2;
 66 | 
 67 |   width: 100%;
 68 | 
 69 |   background-color: #efeff4;
 70 | 
 71 |   transform: translate(0, 100%);
 72 |   backface-visibility: hidden;
 73 |   transition: transform .3s;
 74 | 
 75 |   &.picker-modal-toggle {
 76 |     transform: translate(0, 0);
 77 |   }
 78 | 
 79 |   header {
 80 |     display: flex;
 81 |     align-items: center;
 82 |     width: 100%;
 83 |     height: 40px;
 84 |     padding: 0 15px;
 85 | 
 86 |     background-color: #fbf9fe;
 87 | 
 88 |     .title {
 89 |       flex: 1 1;
 90 |       color: #888;
 91 |     }
 92 | 
 93 |     a {
 94 |       text-decoration: none;
 95 |       color: #04BE02;
 96 |       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 97 |     }
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/examples/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,user-scalable=0">
 6 |   <title>React Mobile Picker</title>
 7 |   <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.2.2/weui.css">
 8 | </head>
 9 | <body>
10 |   <div id="app" class="app-container">
11 |   </div>
12 |   <script src="/__build__/bundle.js"></script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {render} from 'react-dom';
 3 | import App from './containers/app';
 4 | 
 5 | import './example.less';
 6 | 
 7 | render(
 8 |   <App />,
 9 |   document.getElementById('app')
10 | );
11 | 


--------------------------------------------------------------------------------
/examples/qr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dsmalicsi/react-mobile-picker-scroll/f5ff9f496aa30b2d38a3613b13ff13cee60cd14b/examples/qr.png


--------------------------------------------------------------------------------
/examples/screen-capture.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dsmalicsi/react-mobile-picker-scroll/f5ff9f496aa30b2d38a3613b13ff13cee60cd14b/examples/screen-capture.gif


--------------------------------------------------------------------------------
/examples/server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var webpack = require('webpack');
 3 | var config = require('./webpack.config');
 4 | 
 5 | var app = express();
 6 | var compiler = webpack(config);
 7 | 
 8 | app.use(require('webpack-dev-middleware')(compiler, {
 9 |   publicPath: config.output.publicPath
10 | }));
11 | 
12 | app.use(require('webpack-hot-middleware')(compiler));
13 | 
14 | app.use(express.static(__dirname));
15 | 
16 | app.listen(8080, function () {
17 |   console.log('Server listening on http://localhost:8080, Ctrl+C to stop')
18 | });
19 | 


--------------------------------------------------------------------------------
/examples/webpack.build.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   entry: [
 6 |     path.join(__dirname, 'main.js')
 7 |   ],
 8 | 
 9 |   output: {
10 |     path: path.join(__dirname, 'dist'),
11 |     filename: '[hash].app.js'
12 |   },
13 | 
14 |   module: {
15 |     loaders: [
16 |       {test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
17 |       {test: /\.less$/, loader: 'style!css!autoprefixer!less'}
18 |     ]
19 |   },
20 | 
21 |   resolve: {
22 |     alias: {
23 |       'react-mobile-picker': path.join(__dirname, '..', 'src')
24 |     }
25 |   },
26 | 
27 |   plugins: [
28 |     new webpack.optimize.OccurenceOrderPlugin(),
29 |     new webpack.DefinePlugin({
30 |       'process.env': {
31 |         NODE_ENV: '"production"'
32 |       }
33 |     }),
34 |     new webpack.optimize.UglifyJsPlugin({
35 |       compressor: {
36 |         warnings: false
37 |       }
38 |     })
39 |   ]
40 | };
41 | 


--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   devtool: 'inline-source-map',
 6 | 
 7 |   entry: [
 8 |     'webpack-hot-middleware/client',
 9 |     path.join(__dirname, 'main.js')
10 |   ],
11 | 
12 |   output: {
13 |     path: path.join(__dirname, '__build__'),
14 |     publicPath: '/__build__/',
15 |     filename: 'bundle.js'
16 |   },
17 | 
18 |   module: {
19 |     loaders: [
20 |       {test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
21 |       {test: /\.less$/, loader: 'style!css!autoprefixer!less'}
22 |     ]
23 |   },
24 | 
25 |   resolve: {
26 |     alias: {
27 |       'react-mobile-picker': path.join(__dirname, '..', 'src')
28 |     }
29 |   },
30 | 
31 |   plugins: [
32 |     new webpack.optimize.OccurenceOrderPlugin(),
33 |     new webpack.HotModuleReplacementPlugin(),
34 |     new webpack.NoErrorsPlugin()
35 |   ]
36 | };
37 | 


--------------------------------------------------------------------------------
/lib/react-mobile-picker.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Picker=t(require("react")):e.Picker=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(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 a(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 s=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},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}}(),c=n(8),u=r(c),p=n(4),f=r(p);n(7);var h=function(e){function t(e){o(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return d.call(n),n.state=s({isMoving:!1,startTouchY:0,startScrollerTranslate:0},n.computeTranslate(e)),n}return a(t,e),l(t,[{key:"componentWillReceiveProps",value:function(e){this.state.isMoving||this.setState(this.computeTranslate(e))}},{key:"postMove",value:function(){var e=this.props,t=e.options,n=e.itemHeight,r=this.state,o=r.scrollerTranslate,i=r.minTranslate,a=r.maxTranslate,s=void 0;s=o>a?0:o<i?t.length-1:-Math.floor((o-a)/n),this.onValueSelected(t[s])}},{key:"postWheel",value:function(){var e=this,t=this;setTimeout(function(){return t.state.isScrolling>Date.now()-250?void e.postWheel():void e.postMove()},250)}},{key:"renderItems",value:function(){var e=this,t=this.props,n=t.options,r=t.itemHeight,o=t.value,i=t.textColor,a=t.textFontFamily,s=t.textSize;return n.map(function(t,n){var l={height:r+"px",lineHeight:r+"px",color:i,fontFamily:a,fontSize:s},c="picker-item"+(t===o?" picker-item-selected":"");return u.default.createElement("div",{key:n,className:c,style:l,onClick:function(){return e.handleItemClick(t)}},t)})}},{key:"render",value:function(){var e=this.props.tabIndex,t="translate3d(0, "+this.state.scrollerTranslate+"px, 0)",n={MsTransform:t,MozTransform:t,OTransform:t,WebkitTransform:t,transform:t};return this.state.isMoving&&(n.transitionDuration="0ms"),u.default.createElement("div",{className:"picker-column"},u.default.createElement("div",{tabIndex:e,className:"picker-scroller",style:n,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,onTouchCancel:this.handleTouchCancel,onWheel:this.handleScroll,onKeyDown:this.handleScroll},this.renderItems()))}}]),t}(c.Component);h.propTypes={options:f.default.array.isRequired,name:f.default.string.isRequired,value:f.default.any.isRequired,itemHeight:f.default.number.isRequired,columnHeight:f.default.number.isRequired,onChange:f.default.func.isRequired,tabIndex:f.default.number.isRequired,textColor:f.default.string,textFontFamily:f.default.string,textSize:f.default.number};var d=function(){var e=this;this.computeTranslate=function(t){var n=t.options,r=t.value,o=t.itemHeight,i=t.columnHeight,a=n.indexOf(r);return a<0&&(console.warn('Warning: "'+e.props.name+'" doesn\'t contain an option of "'+r+'".'),e.onValueSelected(n[0]),a=0),{scrollerTranslate:i/2-o/2-a*o,minTranslate:i/2-o*n.length+o/2,maxTranslate:i/2-o/2}},this.onValueSelected=function(t){e.props.onChange(e.props.name,t)},this.handleTouchStart=function(t){var n=t.targetTouches[0].pageY;e.setState(function(e){var t=e.scrollerTranslate;return{startTouchY:n,startScrollerTranslate:t}})},this.handleTouchMove=function(t){t.preventDefault();var n=t.targetTouches[0].pageY;e.setState(function(e){var t=e.isMoving,r=e.startTouchY,o=e.startScrollerTranslate,i=e.minTranslate,a=e.maxTranslate;if(!t)return{isMoving:!0};var s=o+n-r;return s<i?s=i-Math.pow(i-s,.8):s>a&&(s=a+Math.pow(s-a,.8)),{scrollerTranslate:s}})},this.handleTouchEnd=function(t){e.state.isMoving&&(e.setState({isMoving:!1,startTouchY:0,startScrollerTranslate:0}),setTimeout(function(){e.postMove()},0))},this.handleTouchCancel=function(t){e.state.isMoving&&e.setState(function(e){return{isMoving:!1,startTouchY:0,startScrollerTranslate:0,scrollerTranslate:e}})},this.handleItemClick=function(t){t!==e.props.value&&e.onValueSelected(t)},this.handleScroll=function(t){var n=void 0;n=!t.keyCode||38!=t.keyCode&&40!=t.keyCode?t.deltaY?t.deltaY:0:38==t.keyCode?53:-53,e.setState(function(t){var r=t.scrollerTranslate,o=t.minTranslate,i=t.maxTranslate,a=((r||0)+Math.round(n),Math.max(o,Math.min(i,(r||0)+Math.round(n))));return e.postWheel(),{scrollerTranslate:a,isScrolling:Date.now()}})}},m=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),l(t,[{key:"renderInner",value:function(){var e=this.props,t=e.optionGroups,n=e.valueGroups,r=e.itemHeight,o=e.height,i=e.onChange,a=e.textColor,s=e.textFontFamily,l=e.textSize,c={height:r,marginTop:-(r/2)},p=1e3,f=[];for(var d in t)f.push(u.default.createElement(h,{tabIndex:p++,key:d,name:d,options:t[d],value:n[d],itemHeight:r,columnHeight:o,onChange:i,textColor:a,textFontFamily:s,textSize:l}));return u.default.createElement("div",{className:"picker-inner"},f,u.default.createElement("div",{className:"picker-highlight",style:c}))}},{key:"render",value:function(){var e={height:this.props.height,width:this.props.width,minHeight:this.props.minHeight,minWidth:this.props.minWidth};return u.default.createElement("div",{className:"picker-container",style:e},this.renderInner())}}]),t}(c.Component);m.propTyps={optionGroups:f.default.object.isRequired,valueGroups:f.default.object.isRequired,onChange:f.default.func.isRequired,itemHeight:f.default.number,height:f.default.number,minHeight:f.default.number,width:f.default.number,minWidth:f.default.number,textColor:f.default.string,textFontFamily:f.default.string,textSize:f.default.number},m.defaultProps={itemHeight:36,height:216},t.default=m},function(e,t,n){t=e.exports=n(2)(),t.push([e.id,'.picker-container{z-index:10001;-ms-user-select:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;width:100%}.picker-container,.picker-container *,.picker-container :after,.picker-container :before{box-sizing:border-box}.picker-container .picker-inner{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:100%;padding:0 20px;font-size:1.2em;-webkit-mask-box-image:linear-gradient(0deg,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent)}.picker-container .picker-column{-ms-flex:1 1;flex:1 1;position:relative;max-height:100%;overflow:hidden;text-align:center}.picker-container .picker-column .picker-scroller{transition:.3s;transition-timing-function:ease-out}.picker-container .picker-column .picker-item{position:relative;padding:0 10px;white-space:nowrap;color:#999;overflow:hidden;text-overflow:ellipsis}.picker-container .picker-column .picker-item.picker-item-selected{color:#222}.picker-container .picker-highlight{position:absolute;top:50%;left:0;width:100%;pointer-events:none}.picker-container .picker-highlight:after,.picker-container .picker-highlight:before{content:" ";position:absolute;left:0;right:auto;display:block;width:100%;height:1px;background-color:#d9d9d9;transform:scaleY(.5)}.picker-container .picker-highlight:before{top:0;bottom:auto}.picker-container .picker-highlight:after{bottom:0;top:auto}',""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(e,t,n){"use strict";function r(){}function o(){}var i=n(5);o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,a){if(a!==i){var s=new Error("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");throw s.name="Invariant Violation",s}}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,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){e.exports=n(3)()},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){function r(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=h[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(c(r.parts[i],t))}else{for(var a=[],i=0;i<r.parts.length;i++)a.push(c(r.parts[i],t));h[r.id]={id:r.id,refs:1,parts:a}}}}function o(e){for(var t=[],n={},r=0;r<e.length;r++){var o=e[r],i=o[0],a=o[1],s=o[2],l=o[3],c={css:a,media:s,sourceMap:l};n[i]?n[i].parts.push(c):t.push(n[i]={id:i,parts:[c]})}return t}function i(e,t){var n=v(),r=b[b.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),b.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function a(e){e.parentNode.removeChild(e);var t=b.indexOf(e);t>=0&&b.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",i(e,t),t}function l(e){var t=document.createElement("link");return t.rel="stylesheet",i(e,t),t}function c(e,t){var n,r,o;if(t.singleton){var i=y++;n=g||(g=s(t)),r=u.bind(null,n,i,!1),o=u.bind(null,n,i,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=l(t),r=f.bind(null,n),o=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(t),r=p.bind(null,n),o=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function u(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=x(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function p(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function f(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var h={},d=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},m=d(function(){return/msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase())}),v=d(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,y=0,b=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=m()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=o(e);return r(n,t),function(e){for(var i=[],a=0;a<n.length;a++){var s=n[a],l=h[s.id];l.refs--,i.push(l)}if(e){var c=o(e);r(c,t)}for(var a=0;a<i.length;a++){var l=i[a];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete h[l.id]}}}};var x=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t,n){var r=n(1);"string"==typeof r&&(r=[[e.id,r,""]]);n(6)(r,{});r.locals&&(e.exports=r.locals)},function(t,n){t.exports=e}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-mobile-picker-scroll",
 3 |   "version": "0.2.14",
 4 |   "description": "An iOS like select box component for React, with scroll wheel and keyboard support",
 5 |   "main": "lib/react-mobile-picker.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "dsmalicsi/react-mobile-picker"
 9 |   },
10 |   "dependencies": {
11 |     "prop-types": "^15.6.0"
12 |   },
13 |   "files": [
14 |     "LICENCE",
15 |     "README.md",
16 |     "src",
17 |     "lib"
18 |   ],
19 |   "keywords": [
20 |     "react",
21 |     "react mobile picker",
22 |     "mobile picker",
23 |     "picker",
24 |     "react-component",
25 |     "react components",
26 |     "react ui",
27 |     "mobile ui"
28 |   ],
29 |   "devDependencies": {
30 |     "autoprefixer-loader": "^3.1.0",
31 |     "babel-core": "^6.3.17",
32 |     "babel-eslint": "^4.1.6",
33 |     "babel-loader": "^6.2.0",
34 |     "babel-plugin-react-transform": "^2.0.0-beta1",
35 |     "babel-preset-es2015": "^6.3.13",
36 |     "babel-preset-react": "^6.3.13",
37 |     "babel-preset-stage-0": "^6.3.13",
38 |     "css-loader": "^0.23.0",
39 |     "eslint": "^1.10.3",
40 |     "eslint-plugin-babel": "^3.0.0",
41 |     "eslint-plugin-react": "^3.11.3",
42 |     "express": "^4.13.3",
43 |     "less": "^2.5.3",
44 |     "less-loader": "^2.2.2",
45 |     "react": "^16.0.0",
46 |     "react-dom": "^16.0.0",
47 |     "react-transform-catch-errors": "^1.0.0",
48 |     "react-transform-hmr": "^1.0.1",
49 |     "redbox-react": "^1.2.0",
50 |     "rimraf": "^2.4.4",
51 |     "style-loader": "^0.13.0",
52 |     "webpack": "^1.12.9",
53 |     "webpack-dev-middleware": "^1.4.0",
54 |     "webpack-hot-middleware": "^2.6.0"
55 |   },
56 |   "peerDependencies": {
57 |     "react": ">=0.14.0 <17.0.0",
58 |     "react-dom": ">=0.14.0 <17.0.0"
59 |   },
60 |   "scripts": {
61 |     "clean": "rimraf lib",
62 |     "start": "node examples/server.js",
63 |     "lint": "eslint src",
64 |     "build-examples": "rimraf examples/dist && eslint examples && set NODE_ENV=production && webpack --progress --hide-modules --config examples/webpack.build.js",
65 |     "build": "npm run clean && npm run lint && set NODE_ENV=production && webpack --progress --hide-modules --config webpack.build.js",
66 |     "test": "npm run lint"
67 |   },
68 |   "author": {
69 |     "name": "Daryll Malicsi",
70 |     "email": "dsmalicsi@gmail.com"
71 |   },
72 |   "license": "MIT"
73 | }
74 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component, WheelEvent } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import './style.less';
  4 | 
  5 | class PickerColumn extends Component {
  6 |   static propTypes = {
  7 |     options: PropTypes.array.isRequired,
  8 |     name: PropTypes.string.isRequired,
  9 |     value: PropTypes.any.isRequired,
 10 |     itemHeight: PropTypes.number.isRequired,
 11 |     columnHeight: PropTypes.number.isRequired,
 12 |     onChange: PropTypes.func.isRequired,
 13 |     tabIndex: PropTypes.number.isRequired,
 14 |     textColor: PropTypes.string,
 15 |     textFontFamily: PropTypes.string,
 16 |     textSize: PropTypes.number
 17 |   };
 18 | 
 19 |   constructor(props) {
 20 |     super(props);
 21 |     this.state = {
 22 |       isMoving: false,
 23 |       startTouchY: 0,
 24 |       startScrollerTranslate: 0,
 25 |       ...this.computeTranslate(props)
 26 |     };
 27 |   }
 28 | 
 29 |   componentWillReceiveProps(nextProps) {
 30 |     if (this.state.isMoving) {
 31 |       return;
 32 |     }
 33 |     this.setState(this.computeTranslate(nextProps));
 34 |   }
 35 | 
 36 |   computeTranslate = (props) => {
 37 |     const { options, value, itemHeight, columnHeight } = props;
 38 |     let selectedIndex = options.indexOf(value);
 39 |     if (selectedIndex < 0) {
 40 |       // throw new ReferenceError();
 41 |       console.warn('Warning: "' + this.props.name + '" doesn\'t contain an option of "' + value + '".');
 42 |       this.onValueSelected(options[0]);
 43 |       selectedIndex = 0;
 44 |     }
 45 |     return {
 46 |       scrollerTranslate: columnHeight / 2 - itemHeight / 2 - selectedIndex * itemHeight,
 47 |       minTranslate: columnHeight / 2 - itemHeight * options.length + itemHeight / 2,
 48 |       maxTranslate: columnHeight / 2 - itemHeight / 2
 49 |     };
 50 |   };
 51 | 
 52 |   onValueSelected = (newValue) => {
 53 |     this.props.onChange(this.props.name, newValue);
 54 |   };
 55 | 
 56 |   handleTouchStart = (event) => {
 57 |     const startTouchY = event.targetTouches[0].pageY;
 58 |     this.setState(({ scrollerTranslate }) => ({
 59 |       startTouchY,
 60 |       startScrollerTranslate: scrollerTranslate
 61 |     }));
 62 |   };
 63 | 
 64 |   handleTouchMove = (event) => {
 65 |     event.preventDefault();
 66 |     const touchY = event.targetTouches[0].pageY;
 67 |     this.setState(({ isMoving, startTouchY, startScrollerTranslate, minTranslate, maxTranslate }) => {
 68 |       if (!isMoving) {
 69 |         return {
 70 |           isMoving: true
 71 |         }
 72 |       }
 73 | 
 74 |       let nextScrollerTranslate = startScrollerTranslate + touchY - startTouchY;
 75 |       if (nextScrollerTranslate < minTranslate) {
 76 |         nextScrollerTranslate = minTranslate - Math.pow(minTranslate - nextScrollerTranslate, 0.8);
 77 |       } else if (nextScrollerTranslate > maxTranslate) {
 78 |         nextScrollerTranslate = maxTranslate + Math.pow(nextScrollerTranslate - maxTranslate, 0.8);
 79 |       }
 80 |       return {
 81 |         scrollerTranslate: nextScrollerTranslate
 82 |       };
 83 |     });
 84 |   };
 85 | 
 86 |   handleTouchEnd = (event) => {
 87 |     if (!this.state.isMoving) {
 88 |       return;
 89 |     }
 90 |     this.setState({
 91 |       isMoving: false,
 92 |       startTouchY: 0,
 93 |       startScrollerTranslate: 0
 94 |     });
 95 |     setTimeout(() => {
 96 |       this.postMove();
 97 |     }, 0);
 98 |   };
 99 | 
100 |   handleTouchCancel = (event) => {
101 |     if (!this.state.isMoving) {
102 |       return;
103 |     }
104 |     this.setState((startScrollerTranslate) => ({
105 |       isMoving: false,
106 |       startTouchY: 0,
107 |       startScrollerTranslate: 0,
108 |       scrollerTranslate: startScrollerTranslate
109 |     }));
110 |   };
111 | 
112 |   handleItemClick = (option) => {
113 |     if (option !== this.props.value) {
114 |       this.onValueSelected(option);
115 |     }
116 |   };
117 | 
118 |   postMove() {
119 |     const { options, itemHeight } = this.props;
120 |     const { scrollerTranslate, minTranslate, maxTranslate } = this.state;
121 |     let activeIndex;
122 |     if (scrollerTranslate > maxTranslate) {
123 |       activeIndex = 0;
124 |     } else if (scrollerTranslate < minTranslate) {
125 |       activeIndex = options.length - 1;
126 |     } else {
127 |       activeIndex = - Math.floor((scrollerTranslate - maxTranslate) / itemHeight);
128 |     }
129 |     this.onValueSelected(options[activeIndex]);
130 |   }
131 | 
132 |   postWheel() {
133 |     const that = this;
134 |     setTimeout(() => {
135 |       if (that.state.isScrolling > (Date.now() - 250)) {
136 |         this.postWheel();
137 |         return;
138 |       }
139 |       this.postMove();
140 |     }, 250);
141 |   }
142 | 
143 |   handleScroll = (event) => {
144 | 
145 |     // Support for keyboard up/down
146 |     let deltaY;
147 |     if (!!event.keyCode && (event.keyCode == 38 || event.keyCode == 40)) {
148 |       deltaY = event.keyCode == 38 ? 53 : -53;
149 |     } else if (!!event.deltaY) {
150 |       deltaY = event.deltaY;
151 |     } else {
152 |       deltaY = 0;
153 |     }
154 | 
155 |     this.setState(({ scrollerTranslate, minTranslate, maxTranslate }) => {
156 |       const newValue = (scrollerTranslate || 0) + Math.round(deltaY);
157 |       const newTranslate = Math.max(minTranslate, Math.min(maxTranslate, (scrollerTranslate || 0) + Math.round(deltaY)));
158 | 
159 |       this.postWheel();
160 | 
161 |       return {
162 |         scrollerTranslate: newTranslate,
163 |         isScrolling: Date.now()
164 |       };
165 |     });
166 |   };
167 | 
168 |   renderItems() {
169 |     const { options, itemHeight, value, textColor, textFontFamily, textSize } = this.props;
170 |     return options.map((option, index) => {
171 |       const style = {
172 |         height: itemHeight + 'px',
173 |         lineHeight: itemHeight + 'px',
174 |         color: textColor,
175 |         fontFamily: textFontFamily,
176 |         fontSize: textSize + 'px'
177 |       };
178 |       const className = `picker-item${option === value ? ' picker-item-selected' : ''}`;
179 |       return (
180 |         <div
181 |           key={index}
182 |           className={className}
183 |           style={style}
184 |           onClick={() => this.handleItemClick(option)}>{option}</div>
185 |       );
186 |     });
187 |   }
188 | 
189 |   render() {
190 |     const { tabIndex } = this.props;
191 |     const translateString = `translate3d(0, ${this.state.scrollerTranslate}px, 0)`;
192 |     const style = {
193 |       MsTransform: translateString,
194 |       MozTransform: translateString,
195 |       OTransform: translateString,
196 |       WebkitTransform: translateString,
197 |       transform: translateString
198 |     };
199 |     if (this.state.isMoving) {
200 |       style.transitionDuration = '0ms';
201 |     }
202 |     return (
203 |       <div className="picker-column">
204 |         <div
205 |           tabIndex={tabIndex}
206 |           className="picker-scroller"
207 |           style={style}
208 |           onTouchStart={this.handleTouchStart}
209 |           onTouchMove={this.handleTouchMove}
210 |           onTouchEnd={this.handleTouchEnd}
211 |           onTouchCancel={this.handleTouchCancel}
212 |           onWheel={this.handleScroll}
213 |           onKeyDown={this.handleScroll}
214 |         >
215 |           {this.renderItems()}
216 |         </div>
217 |       </div>
218 |     )
219 |   }
220 | }
221 | 
222 | export default class Picker extends Component {
223 |   static propTyps = {
224 |     optionGroups: PropTypes.object.isRequired,
225 |     valueGroups: PropTypes.object.isRequired,
226 |     onChange: PropTypes.func.isRequired,
227 |     itemHeight: PropTypes.number,
228 |     height: PropTypes.number,
229 |     textColor: PropTypes.string,
230 |     textFontFamily: PropTypes.string,
231 |     textSize: PropTypes.number
232 |   };
233 | 
234 |   static defaultProps = {
235 |     itemHeight: 36,
236 |     height: 216
237 |   };
238 | 
239 |   renderInner() {
240 |     const { optionGroups, valueGroups, itemHeight, height, onChange, textColor, textFontFamily, textSize } = this.props;
241 |     const highlightStyle = {
242 |       height: itemHeight,
243 |       marginTop: -(itemHeight / 2)
244 |     };
245 |     let index = 1000;
246 |     const columnNodes = [];
247 |     for (let name in optionGroups) {
248 |       columnNodes.push(
249 |         <PickerColumn
250 |           tabIndex={index++}
251 |           key={name}
252 |           name={name}
253 |           options={optionGroups[name]}
254 |           value={valueGroups[name]}
255 |           itemHeight={itemHeight}
256 |           columnHeight={height}
257 |           onChange={onChange}
258 |           textColor={textColor}
259 |           textFontFamily={textFontFamily}
260 |           textSize={textSize}
261 |         />
262 |       );
263 |     }
264 |     return (
265 |       <div className="picker-inner">
266 |         {columnNodes}
267 |         <div className="picker-highlight" style={highlightStyle}></div>
268 |       </div>
269 |     );
270 |   }
271 | 
272 |   render() {
273 |     const style = {
274 |       height: this.props.height
275 |     };
276 | 
277 |     return (
278 |       <div className="picker-container" style={style}>
279 |         {this.renderInner()}
280 |       </div>
281 |     );
282 |   }
283 | }


--------------------------------------------------------------------------------
/src/style.less:
--------------------------------------------------------------------------------
 1 | .picker-container {
 2 |   z-index: 10001;
 3 |   user-select: none;
 4 |   -moz-user-select: none;
 5 |   -webkit-user-select: none;
 6 |   width: 100%;
 7 | 
 8 |   &, *, *:before, *:after {
 9 |     box-sizing: border-box;;
10 |   }
11 | 
12 |   .picker-inner {
13 |     position: relative;
14 | 
15 |     display: flex;
16 |     justify-content: center;
17 |     height: 100%;
18 |     padding: 0 20px;
19 | 
20 |     font-size: 1.2em;
21 |     -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
22 |   }
23 | 
24 |   .picker-column {
25 |     flex: 1 1;
26 | 
27 |     position: relative;
28 | 
29 |     max-height: 100%;
30 | 
31 |     overflow: hidden;
32 |     text-align: center;
33 | 
34 |     .picker-scroller {
35 |       transition: 300ms;
36 |       transition-timing-function: ease-out;
37 |     }
38 | 
39 |     .picker-item {
40 |       position: relative;
41 | 
42 |       padding: 0 10px;
43 | 
44 |       white-space: nowrap;
45 |       color: #999999;
46 |       overflow: hidden;
47 |       text-overflow: ellipsis;
48 | 
49 |       &.picker-item-selected {
50 |         color: #222;
51 |       }
52 |     }
53 |   }
54 | 
55 |   .picker-highlight {
56 |     position: absolute;
57 |     top: 50%;
58 |     left: 0;
59 | 
60 |     width: 100%;
61 | 
62 |     pointer-events: none;
63 | 
64 |     &:before, &:after {
65 |       content: ' ';
66 |       position: absolute;
67 |       left: 0;
68 |       right: auto;
69 | 
70 |       display: block;
71 |       width: 100%;
72 |       height: 1px;
73 | 
74 |       background-color: #d9d9d9;
75 |       transform: scaleY(0.5);
76 |     }
77 | 
78 |     &:before {
79 |       top: 0;
80 |       bottom: auto;
81 |     }
82 | 
83 |     &:after {
84 |       bottom: 0;
85 |       top: auto;
86 |     }
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/webpack.build.js:
--------------------------------------------------------------------------------
 1 | process.env.NODE_ENV = 'production';
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   entry: {
 6 |     'react-mobile-picker': './src/index.js'
 7 |   },
 8 | 
 9 |   output: {
10 |     filename: './lib/[name].js',
11 |     library: 'Picker',
12 |     libraryTarget: 'umd'
13 |   },
14 | 
15 |   externals: [
16 |     {
17 |       react: {
18 |         root: 'React',
19 |         commonjs2: 'react',
20 |         commonjs: 'react',
21 |         amd: 'react'
22 |       }
23 |     }
24 |   ],
25 | 
26 |   module: {
27 |     loaders: [
28 |       {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
29 |       {test: /\.less$/, loader: 'style!css!autoprefixer!less'}
30 |     ]
31 |   },
32 | 
33 |   plugins: [
34 |     new webpack.optimize.OccurenceOrderPlugin(),
35 |     new webpack.DefinePlugin({
36 |       'process.env': {
37 |         NODE_ENV: '"production"'
38 |       }
39 |     }),
40 |     new webpack.optimize.UglifyJsPlugin({
41 |       compressor: {
42 |         warnings: false
43 |       }
44 |     })
45 |   ]
46 | };
47 | 


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