yylib-quick-mobile/dist/yylib/search-bar/YYSearchBar.js

yylib-quick-mobile

/**
 * Created By whh 2017/12/26
 * */
import React from 'react';
import {SearchBar} from 'antd-mobile';
import {isFunction} from '../../utils/FunctionUtil';
import classnames from 'classnames';

class YYSearchBar extends React.Component {
    state = {
        value: this.props.value,
    }

    componentWillReceiveProps(nextprops) {
        if (nextprops.value !== this.state.value) {
            this.setState({
                value: nextprops.value
            })
        }
    }

    onSubmit = (val) => {
        if (isFunction(this.props.onSubmit)) this.props.onSubmit(val)
    }
    onChange = (val) => {
        this.setState({
            value: val
        }, () => {
            if (isFunction(this.props.onChange)) this.props.onChange(val)
        })
    }
    onFocus = () => {
        if (isFunction(this.props.onFocus)) this.props.onFocus()
    }
    onBlur = () => {
        if (isFunction(this.props.onBlur)) this.props.onBlur()
    }
    onCancel = (val) => {
        this.setState({
            value: ''
        }, () => {
            if (isFunction(this.props.onCancel)) this.props.onCancel(val, this.state.value)
        })
    }
    onClear = (val) => {
        //val为空
        this.setState({
            value: ''
        });
        if (isFunction(this.props.onClear)) this.props.onClear(val)
    }

    //Start 外部方法
    focus = () => {
        this.SearchBar.focus();
    }
    getValue = () => {
        return this.state.value;
    }
    setValue = (value) => {
        this.setState({
            value: value
        })
    }
    //END 外部方法

    render() {
        let {visible,showCancelButton,...restProps} = this.props;
        let wrapClz = classnames('yy-search-bar',(!visible&&'hidden'), this.props.className);
        //defaultValue, value, placeholder, showCancelButton, cancelText, disabled, maxLength,
        return (
            <SearchBar
                {...restProps}
                className={wrapClz}
                value={this.state.value}
                ref={ref => this.SearchBar = ref}
                onSubmit={this.onSubmit}
                onChange={this.onChange}
                onFocus={this.onFocus}
                onBlur={this.onBlur}
                onCancel={this.onCancel}
                onClear={this.onClear}
                showCancelButton={showCancelButton}/>
        )
    };
}
;

YYSearchBar.defaultProps = {
  visible: true
}

export default YYSearchBar;