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

     1  import React from "react";
     2  import Markdown from "react-remarkable";
     3  
     4  export default class ConfigCheckbox extends React.Component {
     5  
     6    handleOnChange = (e) => {
     7      const { handleOnChange, name } = this.props;
     8      var val = e.target.checked ? "1" : "0";
     9      if (this.props.handleOnChange && typeof handleOnChange === "function") {
    10        this.props.handleOnChange(name, val);
    11      }
    12    }
    13  
    14    render() {
    15  
    16      let val = this.props.value;
    17      if (!val || val.length === 0) {
    18        val = this.props.default;
    19      }
    20      var checked = val === "1";
    21  
    22      var hidden = this.props.hidden || this.props.when === "false";
    23  
    24      return (
    25        <div className={`field field-checkbox-wrapper u-marginTop--15 flex ${hidden ? "hidden" : ""}`}>
    26          <span className="u-marginTop--10 config-errblock" id={`${this.props.name}-errblock`}></span>
    27          <div className="flex1 flex u-marginRight--20">
    28            <input
    29              ref={(checkbox) => this.checkbox = checkbox}
    30              type="checkbox"
    31              name={this.props.name}
    32              id={this.props.name}
    33              value="1"
    34              checked={checked}
    35              readOnly={this.props.readonly}
    36              disabled={this.props.readonly}
    37              onChange={(e) => this.handleOnChange(e)}
    38              className={`${this.props.className || ""} flex-auto ${this.props.readonly ? "readonly" : ""}`} />
    39            <div>
    40              <label htmlFor={this.props.name} className={`u-marginLeft--small header-color field-section-sub-header u-userSelect--none ${this.props.readonly ? "u-cursor--default" : "u-cursor--pointer"}`}>
    41                {this.props.title} {
    42                  this.props.required ?
    43                    <span className="field-label required">Required</span> :
    44                    this.props.recommended ?
    45                      <span className="field-label recommended">Recommended</span> :
    46                      null}
    47              </label>
    48              {this.props.help_text !== "" ? 
    49                <p className="field-section-help-text u-marginTop--small u-lineHeight--normal u-marginLeft--small">
    50                  <Markdown
    51                    options={{
    52                      linkTarget: "_blank",
    53                      linkify: true,
    54                    }}>
    55                    {this.props.help_text}
    56                  </Markdown>
    57                </p>
    58              : null}
    59            </div>
    60          </div>
    61        </div>
    62      );
    63    }
    64  }