10 examples of 'react bootstrap textarea' in JavaScript

5
function PureTextarea(props) {
6
  const id = props.id || props.field.join('.');
7
  const {containerClassName,
8
         textareaClassName,
9
         label,
10
         errorMessage,
11
         options,
12
         isRequired,
13
         isTouched,
14
         isValid,
15
         ...otherProps} = props;
16
17
  const containerClasses = {
18
    required: isRequired,
19
    error: isTouched && !isValid
20
  };
21
 
22
  otherProps.defaultValue = undefined;
23
  return (
24
    <div className={cx(containerClassName, containerClasses)}>
25
      <label htmlFor={id}>{label}</label>
26
      <textarea {...otherProps} id={id} className={textareaClassName} />
27
      <aside className='pure-form-message'>
28
        {isTouched ? errorMessage : null}
29
      </aside>
30
    </div>
31
  );
32
}

10
function shallowTextArea(props = {}) {
11
  const textAreaProps = {
12
    ...props
13
  };
14
  return shallow(<TextArea {...textAreaProps} />);
15
}

699
function CustomTextarea(props, context) {
700
            _classCallCheck(this, CustomTextarea);
701
702
            var _this = _possibleConstructorReturn(this, (CustomTextarea.__proto__ || Object.getPrototypeOf(CustomTextarea)).call(this, props, context));
703
704
            _this.state = {
705
                value: props.value,
706
                isChanged: !!props.value,
707
                isUsed: false,
708
                isChecked: true
709
            };
710
711
            context.register(_this);
712
            return _this;
713
        }

1726
function Textarea(props) {
1727
  var _this;
1728
1729
  _classCallCheck(this, Textarea);
1730
1731
  _this = _possibleConstructorReturn(this, _getPrototypeOf(Textarea).call(this, props));
1732
  _this.focus = _this.focus.bind(_assertThisInitialized(_this));
1733
  return _this;
1734
}

91
renderInput() {
92
  const { id, value, onChange, onFocus, onBlur, inputProps } = this.props;
93
  const allInputProps = {
94
    id,
95
    value,
96
    onChange,
97
    onFocus,
98
    onBlur,
99
    ...combineClassNames(inputProps, styles.textarea),
100
    'aria-describedby': `${id}-message`
101
  };
102
103
  return (
104
    <textarea {...allInputProps} />
105
  );
106
}

6
render() {
7
    const {
8
        inputClass, sizeClass, readOnly, name, value, onChange, id
9
    } = this.props;
10
    if (readOnly) {
11
        return super.render(<div className={sizeClass}>
12
            <textarea id={id} rows="8" cols="60" readOnly className={inputClass} name={name} value={value} />
13
        </div>);
14
    }
15
    return super.render(<div className={sizeClass}>
16
        <textarea id={id} rows="8" cols="60" className={inputClass} name={name} value={value} onChange={onChange} />
17
    </div>);
18
}

56
render() {
57
58
  return (
59
    <View style={{ flex: 1 }}>
60
    <TextInput ref={c => this._root = c} {...this.prepareRootProps()} multiline={true} placeholderTextColor={ this.getTheme().inputColorPlaceholder} underlineColorAndroid='rgba(0,0,0,0)' />
61
    </View>
62
    );
63
}

18
public render() {
19
    const { className, label, subLabel, locked, value, required, onClick, forceValidation, errorText, placeholder } = this.props;
20
    const classes = [ 'leaf-input' ];
21
    const valid = !required ? true : !!value;
22
    let val = value || '';
23
24
    if (!valid) {
25
        classes.push('error');
26
    }
27
28
    return (
29
        <FormGroup>
30
            {label &&
31
            <Label>
32
                {label}
33
                {required &&
34
                <span className='required'>*</span>
35
                }
36
                {subLabel &&
37
                <FormText color="muted">{subLabel}</FormText>
38
                }
39
            </Label>
40
            }
41
            <div className={className}>
42
                <TextareaAutosize 
43
                    className={classes.join(' ')}
44
                    minRows={1}
45
                    maxRows={5}
46
                    onBlur={this.handleBlur}
47
                    onChange={this.handleChange}
48
                    onClick={onClick}
49
                    onFocus={this.handleFocus}
50
                    onKeyDown={this.handleKeydown}
51
                    placeholder={placeholder}
52
                    readOnly={locked}
53
                    spellCheck={false}
54
                    value={val}
55
                />
56
            </div>
57
            {forceValidation && !valid && errorText &&
58
            <span className='validation-error'>{errorText}</span>
59
            }
60
        </FormGroup>
61
    );
62
}

67
public render() {
68
  const className = classNames(
69
    'text-area-component',
70
    this.props.labelClassName
71
  )
72
  return (
73
    <label className={className}>
74
      {this.props.label}
75
76
      <textarea
77
        autoFocus={this.props.autoFocus}
78
        className={this.props.textareaClassName}
79
        disabled={this.props.disabled}
80
        rows={this.props.rows || 3}
81
        placeholder={this.props.placeholder}
82
        value={this.props.value}
83
        onChange={this.onChange}
84
        onKeyDown={this.props.onKeyDown}
85
        ref={this.props.onTextAreaRef}
86
        onContextMenu={this.onContextMenu}
87
      />
88
    </label>
89
  )
90
}

486
_isTextarea() {
487
    let /** @type {?} */ nativeElement = this._elementRef.nativeElement;
488
    // In Universal, we don't have access to `nodeName`, but the same can be achieved with `name`.
489
    // Note that this shouldn't be necessary once Angular switches to an API that resembles the
490
    // DOM closer.
491
    let /** @type {?} */ nodeName = this._platform.isBrowser ? nativeElement.nodeName : nativeElement.name;
492
    return nodeName ? nodeName.toLowerCase() === 'textarea' : false;
493
}