/**
 * Created by n7best.
 */



import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import Icon from '../icon';

class SearchBar extends React.Component {
    static propTypes = {
        placeholder: React.PropTypes.string,
        onChange: React.PropTypes.func,
        onClear: React.PropTypes.func,
        onCancel: React.PropTypes.func,
        lang: React.PropTypes.object
    };

    static defaultProps = {
        placeholder: '搜索',
        onChange: undefined,
        onClear: undefined,
        onCancel: undefined,
        lang: {
            cancel: '取消'
        }
    };

    state={
        focus: false,
        text: ''
    }

    changeHandle(e) {
        let text = e.target.value;
        this.setState({text});
        if(this.props.onChange) this.props.onChange(text,e);
    }

    cancelHandle(e) {
        this.setState({focus:false});
        if(this.props.onCancel) this.props.onCancel(e);
    }

    clearHandle(e) {
        this.setState({text: ''});
        if(this.props.onClear) this.props.onClear(e);
        if(this.props.onChange) this.props.onChange('',e);
    }

    render() {
        const {children, placeholder, className, ...others} = this.props;
        const clz = classNames({
            'weui_search_bar': true,
            'weui_search_focusing': this.state.focus
        }, className);

        return (
            <div className={clz}>
                <form className='weui_search_outer'>
                    <div className='weui_search_inner'>
                        <Icon value='search'/>
                        <input
                            ref='searchInput'
                            type='search'
                            className='weui_search_input'
                            placeholder={placeholder}
                            onFocus={e=>this.setState({focus:true})}
                            onBlur={e=>this.setState({focus:false})}
                            onChange={this.changeHandle.bind(this)}
                            value={this.state.text}
                        />
                        {/*React will not trigger onMouseDown when not onClick presented*/}
                        <a
                            className='weui_icon_clear'
                            onClick={e=>e/*issues #59*/}
                            onMouseDown={this.clearHandle.bind(this)}
                        />
                    </div>
                    <label
                        className='weui_search_text'
                        onClick={e=>ReactDOM.findDOMNode(this.refs.searchInput).focus()}
                        style={{display: this.state.text ? 'none': null}}
                    >
                        <Icon value='search'/>
                        <span>{placeholder}</span>
                    </label>
                </form>
                <a className='weui_search_cancel' onClick={this.cancelHandle.bind(this)}>{this.props.lang.cancel}</a>
            </div>
        );
    }
}

export default SearchBar;
@@ -265,16 +265,60 @@
 string,%0A
+        searchName: React.PropTypes.string,%0A
         
@@ -420,32 +420,72 @@
 PropTypes.func,%0A
+        onSubmit: React.PropTypes.func,%0A
         lang: Re
@@ -568,16 +568,41 @@
 : '%E6%90%9C%E7%B4%A2',%0A
+        searchName: 'q',%0A
         
@@ -671,32 +671,61 @@
 cel: undefined,%0A
+        onSubmit: undefined,%0A
         lang: %7B%0A
@@ -1276,24 +1276,216 @@
 ,e);%0A    %7D%0A%0A
+    submitHandle(e) %7B%0A        if (this.props.onSubmit) %7B%0A            e.preventDefault();%0A            e.stopPropagation();%0A            this.props.onSubmit(this.state.text, e);%0A        %7D%0A    %7D%0A%0A
     render()
@@ -1535,16 +1535,28 @@
 assName,
+ searchName,
  ...othe
@@ -1822,16 +1822,56 @@
 h_outer'
+ onSubmit=%7Bthis.submitHandle.bind(this)%7D
 %3E%0A      
@@ -2086,16 +2086,62 @@
 search'%0A
+                            name=%7BsearchName%7D%0A
         

fix searchbar submit bug