src/textarea/index.js File

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import Component from '../utils/Component'
  4. import classnames from 'classnames'
  5.  
  6. import '../style'
  7. import 'phoenix-styles/less/modules/textarea.less'
  8.  
  9. /**
  10.  * <h5>表单组件，主要包括组件:</h5>
  11.  * <strong><a href='../classes/Input.html'>Input 文本框/单选框/多选框</a></strong><br/>
  12.  * <strong><a href='../classes/Textarea.html'>Textarea 多行文本框</a></strong><br>
  13.  * <strong><a href='../classes/FormGroup.html'>FormGroup 表单组</a></strong><br/>
  14.  * <strong><a href='../classes/Switch.html'>Switch 开关</a></strong><br>
  15.  * <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6>
  16.  * @module 表单组件
  17.  * @main 表单组件
  18.  * @static
  19.  */
  20. /**
  21.  * 多行文本框组件<br/>
  22.  * - 可通过value设置默认值。 
  23.  * - 可通过设置count判断是否显示当前输入字数，需要配合maxLength配置最大输入字数。
  24.  * - getValueCallback: 获取当前的输入值。
  25.  * - className属性加在外层，其余属性均赋予input元素。
  26.  *
  27.  * 主要属性和接口：
  28.  * - value:默认值 <br/>
  29.  * 如：`<Textarea value='测试' />`
  30.  * - count:是否显示当前输入字数, 默认false不显示, 配合maxLength使用<br/>
  31.  * 如：`<Textarea count maxLength={150} />`
  32.  * - getValueCallback: 获取当前的输入值。<br/>
  33.  * 如：`<Textarea ref={(textElem)=>{this.textElem=textElem}} />`<br/>
  34.  * `this.textElem.getValueCallback();`
  35.  *
  36.  * @class TextArea
  37.  * @module 表单组件
  38.  * @extends Component
  39.  * @constructor
  40.  * @since 0.3.0
  41.  * @demo textarea|textarea.js {展示}
  42.  * @show true
  43.  * */
  44.  
  45. export default class Textarea extends Component{
  46.  
  47.     static propTypes = {
  48.         /**
  49.          * 样式前缀
  50.          * @property classPrefix
  51.          * @type String
  52.          * @default 'textarea'
  53.          * */
  54.         classPrefix: PropTypes.string,
  55.         /**
  56.          * 初始值
  57.          * @property value
  58.          * @type String
  59.          * */
  60.         value: PropTypes.string,
  61.         /**
  62.          * 是否显示输入计数
  63.          * @property count
  64.          * @type Boolean
  65.          * */
  66.         count: PropTypes.bool,
  67.         /**
  68.          * 可输入的总长度
  69.          * @property maxLength
  70.          * @type Number
  71.          * */
  72.         maxLength: PropTypes.number
  73.     };
  74.  
  75.     static defaultProps = {
  76.         disabled: false,
  77.         classPrefix:'textarea',
  78.         classMapping : {}
  79.     };
  80.  
  81.     constructor(props, context) {
  82.         super(props, context);
  83.  
  84.         this.setMethod('getValueCallback',this.getValue.bind(this))
  85.  
  86.         this.state = {
  87.             value: props.value || '',
  88.             inputLength: this.getInputLength(props)
  89.         }
  90.     }
  91.  
  92.     getValue(){
  93.         return this.state.value;
  94.     }
  95.  
  96.     getInputLength(props){
  97.         return props.value? props.value.length:0;
  98.     }
  99.  
  100.     componentWillReceiveProps(nextProps){
  101.         if(this.state.value != nextProps.value){
  102.             this.setState({
  103.                 value: nextProps.value,
  104.                 inputLength: this.getInputLength(nextProps)
  105.             });
  106.         }        
  107.     }
  108.  
  109.     onTextareaChange(event){
  110.         let {onChange} = this.props,
  111.             value = event.target.value;
  112.  
  113.         if(onChange) onChange(event,value);
  114.         
  115.         this.setState({
  116.             value: value,
  117.             inputLength: event.target.value.length
  118.         })
  119.     }
  120.  
  121.     renderCount(){
  122.         let {count, maxLength} = this.props
  123.  
  124.         if(count){
  125.             return (
  126.                 <span className={classnames(this.setPhPrefix('count'))}> 
  127.                     <b className={this.setPhPrefix('length')}>{this.state.inputLength}</b>/<b>{maxLength}</b>
  128.                 </span>
  129.             )
  130.         }
  131.     }
  132.  
  133.     renderTextarea(){
  134.         let {className, disabled, style} = this.props
  135.  
  136.         return (
  137.             <div className={classnames(this.setPhPrefix('field'), className)} style={this.getStyles(style)}>
  138.                 <textarea {...this.otherProps} className={this.getProperty(true)} 
  139.                     value={this.state.value} 
  140.                     onChange={(event)=>{this.onTextareaChange(event)}} 
  141.                     disabled={disabled} style={null}></textarea>
  142.                 {this.renderCount()}
  143.             </div>
  144.         )
  145.     }
  146.  
  147.     render(){
  148.         return this.renderTextarea()
  149.     }
  150.  
  151. }
  152.