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

     1  import React from "react";
     2  import ConfigItemTitle from "./ConfigItemTitle";
     3  import Markdown from "react-remarkable";
     4  
     5  export default class ConfigInput extends React.Component {
     6  
     7    constructor(props) {
     8      super(props)
     9      this.inputRef = React.createRef();
    10      this.state = {
    11        inputVal: "",
    12        focused: false
    13      }
    14    }
    15  
    16    handleOnChange = (e) => {
    17      const { handleOnChange, name } = this.props;
    18      this.setState({ inputVal: 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({ inputVal: this.props.value });
    27      }
    28    }
    29  
    30    componentDidMount() {
    31      if (this.props.value) {
    32        this.setState({ inputVal: this.props.value });
    33      }
    34    }
    35  
    36    maskValue = value => {
    37      if (!value) {
    38        return "";
    39      }
    40      return value.replace(/./g, '•');
    41    }
    42    
    43    // p1-2019-06-27
    44    // Fields that are required sometimes don't have a title associated with them.
    45    // Use title -OR- required prop to render <ConfigItemTitle> to make sure error
    46    // elements are rendered.
    47    render() {
    48      var hidden = this.props.hidden || this.props.when === "false";
    49      var placeholder = this.props.inputType === "password" ? this.maskValue(this.props.default) : this.props.default;
    50  
    51      return (
    52        <div className={`field field-type-text ${hidden ? "hidden" : "u-marginTop--15"}`}>
    53          {this.props.title !== "" || this.props.required ?
    54            <ConfigItemTitle
    55              title={this.props.title}
    56              recommended={this.props.recommended}
    57              required={this.props.required}
    58              name={this.props.name}
    59              error={this.props.error}
    60            />
    61            : null}
    62          {this.props.help_text !== "" ? 
    63            <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
    64              <Markdown
    65                options={{
    66                  linkTarget: "_blank",
    67                  linkify: true,
    68                }}>
    69                {this.props.help_text}
    70              </Markdown>
    71            </p>
    72          : null}
    73          <div className="field-input-wrapper u-marginTop--15">
    74            <input
    75              ref={this.inputRef}
    76              type={this.props.inputType}
    77              {...this.props.props}
    78              placeholder={placeholder}
    79              value={this.state.inputVal}
    80              readOnly={this.props.readonly}
    81              disabled={this.props.readonly}
    82              onChange={(e) => this.handleOnChange(e)}
    83              onFocus={() => this.setState({ focused: true })}
    84              onBlur={() => this.setState({ focused: false })}
    85              className={`${this.props.className || ""} Input ${this.props.readonly ? "readonly" : ""}`} />
    86          </div>
    87        </div>
    88      );
    89    }
    90  }