src/Select.jsx

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