github.com/replicatedhq/ship@v0.55.0/web/init/src/components/config_render/ConfigTextarea.jsx (about)

     1  import React from "react";
     2  import ConfigItemTitle from "./ConfigItemTitle";
     3  import Markdown from "react-remarkable";
     4  
     5  export default class ConfigTextarea extends React.Component {
     6  
     7    constructor(props) {
     8      super(props)
     9      this.textareaRef = React.createRef();
    10      this.state = {
    11        textareaVal: "",
    12        focused: false
    13      }
    14    }
    15  
    16    handleOnChange = (e) => {
    17      const { handleOnChange, name } = this.props;
    18      this.setState({ textareaVal: e.target.value });
    19      if (handleOnChange && typeof handleOnChange === "function") {
    20        handleOnChange(name, e.target.value);
    21      }
    22    }
    23  
    24    componentDidUpdate(lastProps) {
    25      if (this.props.value !== lastProps.value && !this.state.focused) {
    26        this.setState({ textareaVal: this.props.value });
    27      }
    28    }
    29  
    30    componentDidMount() {
    31      if (this.props.value) {
    32        this.setState({ textareaVal: this.props.value });
    33      }
    34    }
    35  
    36    render() {
    37      var hidden = this.props.hidden || this.props.when === "false";
    38  
    39      return (
    40        <div className={`field field-type-text u-marginTop--15 ${hidden ? "hidden" : ""}`}>
    41          {this.props.title !== "" ?
    42            <ConfigItemTitle
    43              title={this.props.title}
    44              recommended={this.props.recommended}
    45              required={this.props.required}
    46              name={this.props.name}
    47              error={this.props.error}
    48            />
    49            : null}
    50          {this.props.help_text !== "" ?
    51            <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
    52              <Markdown
    53                options={{
    54                  linkTarget: "_blank",
    55                  linkify: true,
    56                }}>
    57                {this.props.help_text}
    58              </Markdown>
    59            </p>
    60           : null}
    61          <div className="field-input-wrapper u-marginTop--15">
    62            <textarea
    63              ref={this.textareaRef}
    64              {...this.props.props}
    65              placeholder={this.props.default}
    66              value={this.state.textareaVal}
    67              readOnly={this.props.readonly}
    68              disabled={this.props.readonly}
    69              onChange={(e) => this.handleOnChange(e)}
    70              onFocus={() => this.setState({ focused: true })}
    71              onBlur={() => this.setState({ focused: false })}
    72              className={`${this.props.className || ""} Textarea ${this.props.readonly ? "readonly" : ""}`}>
    73            </textarea>
    74          </div>
    75        </div>
    76      );
    77    }
    78  }