src/textarea/index.js File

import React from 'react'
import PropTypes from 'prop-types'
import Component from '../utils/Component'
import classnames from 'classnames'

import '../style'
import 'phoenix-styles/less/modules/textarea.less'

/**
 * <h5>表单组件，主要包括组件:</h5>
 * <strong><a href='../classes/Input.html'>Input 文本框/单选框/多选框</a></strong><br/>
 * <strong><a href='../classes/Textarea.html'>Textarea 多行文本框</a></strong><br>
 * <strong><a href='../classes/FormGroup.html'>FormGroup 表单组</a></strong><br/>
 * <strong><a href='../classes/Switch.html'>Switch 开关</a></strong><br>
 * <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6>
 * @module 表单组件
 * @main 表单组件
 * @static
 */
/**
 * 多行文本框组件<br/>
 * - 可通过value设置默认值。 
 * - 可通过设置count判断是否显示当前输入字数，需要配合maxLength配置最大输入字数。
 * - getValueCallback: 获取当前的输入值。
 * - className属性加在外层，其余属性均赋予input元素。
 *
 * 主要属性和接口：
 * - value:默认值 <br/>
 * 如：`<Textarea value='测试' />`
 * - count:是否显示当前输入字数, 默认false不显示, 配合maxLength使用<br/>
 * 如：`<Textarea count maxLength={150} />`
 * - getValueCallback: 获取当前的输入值。<br/>
 * 如：`<Textarea ref={(textElem)=>{this.textElem=textElem}} />`<br/>
 * `this.textElem.getValueCallback();`
 *
 * @class TextArea
 * @module 表单组件
 * @extends Component
 * @constructor
 * @since 0.3.0
 * @demo textarea|textarea.js {展示}
 * @show true
 * */

export default class Textarea extends Component{

    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'textarea'
         * */
        classPrefix: PropTypes.string,
        /**
         * 初始值
         * @property value
         * @type String
         * */
        value: PropTypes.string,
        /**
         * 是否显示输入计数
         * @property count
         * @type Boolean
         * */
        count: PropTypes.bool,
        /**
         * 可输入的总长度
         * @property maxLength
         * @type Number
         * */
        maxLength: PropTypes.number
    };

    static defaultProps = {
        disabled: false,
        classPrefix:'textarea',
        classMapping : {}
    };

    constructor(props, context) {
        super(props, context);

        this.setMethod('getValueCallback',this.getValue.bind(this))

        this.state = {
            value: props.value || '',
            inputLength: this.getInputLength(props)
        }
    }

    getValue(){
        return this.state.value;
    }

    getInputLength(props){
        return props.value? props.value.length:0;
    }

    componentWillReceiveProps(nextProps){
        if(this.state.value != nextProps.value){
            this.setState({
                value: nextProps.value,
                inputLength: this.getInputLength(nextProps)
            });
        }        
    }

    onTextareaChange(event){
        let {onChange} = this.props,
            value = event.target.value;

        if(onChange) onChange(event,value);
        
        this.setState({
            value: value,
            inputLength: event.target.value.length
        })
    }

    renderCount(){
        let {count, maxLength} = this.props

        if(count){
            return (
                <span className={classnames(this.setPhPrefix('count'))}> 
                    <b className={this.setPhPrefix('length')}>{this.state.inputLength}</b>/<b>{maxLength}</b>
                </span>
            )
        }
    }

    renderTextarea(){
        let {className, disabled, style} = this.props

        return (
            <div className={classnames(this.setPhPrefix('field'), className)} style={this.getStyles(style)}>
                <textarea {...this.otherProps} className={this.getProperty(true)} 
                    value={this.state.value} 
                    onChange={(event)=>{this.onTextareaChange(event)}} 
                    disabled={disabled} style={null}></textarea>
                {this.renderCount()}
            </div>
        )
    }

    render(){
        return this.renderTextarea()
    }

}