store-ui/select/select.js

store-ui

/**
 * @desc
 *   store　select选择框
 * @使用场景
 * var Select =require('store-ui/select/select');
 * <Select
 *  onSelectOne={()=>{}}
 *  selectArr={[{"text": "最近三月", "value": "3"}, {"text": "最近半年1111", "value": "6"}, {
				"text" : "最近一年",
				"value": "12"
			}]}></Select>
 *
 * @author  张锴[of1711]
 * @company qianmi.com
 * @Date    15/8/12
 **/
'use strict';

var React = require('react');
var Select = React.createClass({
	/*
	** 初始化属性
	*/
	getDefaultProps(){
		return {
			selectArr   : [],
			defaultValue: null,
			onSelectOne : (itemInfo)=> {
			}
		}
	},


	/**
	 * 初始化状态
	 */
		getInitialState (){
		var _index = 0;
		if (this.props.defaultValue != null) {
			this.props.selectArr.forEach((item, index)=> {
				if (item.value == this.props.defaultValue) {
					_index = index;
				}
			});
		}
		return {
			chooseIndex: _index
		};
	},

	/**
	 * virtualdom
	 * @returns {XML}
	 */
		render() {

		return (
			<div className="yun-select" style={{}}>
				<span className="curOption">{this.props.selectArr[this.state.chooseIndex].text}</span>
				<ul className="options">
					{
						this.props.selectArr.map((item, index)=> {
							return <li className={this.state.chooseIndex == index?"cur":""}
							           onClick={this._clickOne.bind(item,index)}>{item.text}
							</li>
						})
					}
				</ul>
			</div>
		);
	},
	/**
	 * 点击option
	 */
		_clickOne(index){
		this.props.onSelectOne(this.props.selectArr[index]);
		this.setState({chooseIndex: index});
	}
});

module.exports = Select;