src/Select.jsx

   1 import React, { PropTypes } from 'react';
   2 import ReactDom from 'react-dom';
   3 import classnames from 'classnames';
   4
   5 const scrollTo = (element, to, duration) => {
   6   const requestAnimationFrame = window.requestAnimationFrame ||
   7     function requestAnimationFrameTimeout() {
   8       return setTimeout(arguments[0], 10);
   9     };
  10   // jump to target if duration zero
  11   if (duration <= 0) {
  12     element.scrollTop = to;
  13     return;
  14   }
  15   const difference = to - element.scrollTop;
  16   const perTick = difference / duration * 10;
  17
  18   requestAnimationFrame(() => {
  19     element.scrollTop = element.scrollTop + perTick;
  20     if (element.scrollTop === to) return;
  21     scrollTo(element, to, duration - 10);
  22   });
  23 };
  24
  25 const Select = React.createClass({
  26   propTypes: {
  27     prefixCls: PropTypes.string,
  28     options: PropTypes.array,
  29     selectedIndex: PropTypes.number,
  30     type: PropTypes.string,
  31     onSelect: PropTypes.func,
  32     onMouseEnter: PropTypes.func,
  33   },
  34
  35   getInitialState() {
  36     return {
  37       active: false,
  38     };
  39   },
  40
  41   componentDidMount() {
  42     // jump to selected option
  43     this.scrollToSelected(0);
  44   },
  45
  46   componentDidUpdate(prevProps) {
  47     // smooth scroll to selected option
  48     if (prevProps.selectedIndex !== this.props.selectedIndex) {
  49       this.scrollToSelected(120);
  50     }
  51   },
  52
  53   onSelect(value) {
  54     const { onSelect, type } = this.props;
  55     onSelect(type, value);
  56   },
  57
  58   getOptions() {
  59     const { options, selectedIndex, prefixCls } = this.props;
  60     return options.map((item, index) => {
  61       const cls = classnames({
  62         [`${prefixCls}-select-option-selected`]: selectedIndex === index,
  63         [`${prefixCls}-select-option-disabled`]: item.disabled,
  64       });
  65       let onclick = null;
  66       if (!item.disabled) {
  67         onclick = this.onSelect.bind(this, item.value);
  68       }
  69       return (<li
  70         className={cls}
  71         key={index}
  72         onClick={onclick}
  73         disabled={item.disabled}
  74       >
  75         {item.value}
  76       </li>);
  77     });
  78   },
  79
  80   scrollToSelected(duration) {
  81     // move to selected item
  82     const select = ReactDom.findDOMNode(this);
  83     const list = ReactDom.findDOMNode(this.refs.list);
  84     if (!list) {
  85       return;
  86     }
  87     let index = this.props.selectedIndex;
  88     if (index < 0) {
  89       index = 0;
  90     }
  91     const topOption = list.children[index];
  92     const to = topOption.offsetTop;
  93     scrollTo(select, to, duration);
  94   },
  95
  96   handleMouseEnter(e) {
  97     this.setState({ active: true });
  98     this.props.onMouseEnter(e);
  99   },
 100
 101   handleMouseLeave() {
 102     this.setState({ active: false });
 103   },
 104
 105   render() {
 106     if (this.props.options.length === 0) {
 107       return null;
 108     }
 109
 110     const { prefixCls } = this.props;
 111     const cls = classnames({
 112       [`${prefixCls}-select`]: 1,
 113       [`${prefixCls}-select-active`]: this.state.active,
 114     });
 115
 116     return (
 117       <div
 118         className={cls}
 119         onMouseEnter={this.handleMouseEnter}
 120         onMouseLeave={this.handleMouseLeave}
 121       >
 122         <ul ref="list">{this.getOptions()}</ul>
 123       </div>
 124     );
 125   },
 126 });
 127
 128 export default Select;