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. this.setState({
  115. value: value,
  116. inputLength: event.target.value.length
  117. })
  118. }
  119.  
  120. renderCount(){
  121. let {count, maxLength} = this.props
  122.  
  123. if(count){
  124. return (
  125. <span className={classnames(this.setPhPrefix('count'))}>
  126. <b className={this.setPhPrefix('length')}>{this.state.inputLength}</b>/<b>{maxLength}</b>
  127. </span>
  128. )
  129. }
  130. }
  131.  
  132. renderTextarea(){
  133. let {className, disabled, style} = this.props
  134.  
  135. return (
  136. <div className={classnames(this.setPhPrefix('field'), className)} style={this.getStyles(style)}>
  137. <textarea {...this.otherProps} className={this.getProperty(true)}
  138. value={this.state.value}
  139. onChange={(event)=>{this.onTextareaChange(event)}}
  140. disabled={disabled} style={null}></textarea>
  141. {this.renderCount()}
  142. </div>
  143. )
  144. }
  145.  
  146. render(){
  147. return this.renderTextarea()
  148. }
  149.  
  150. }