stitch-ui/src/namedpipelines/components/PipelineParameter.js

import React from "react";
import PropTypes from "prop-types";
import { Button } from "../../core";

export default class PipelineParameter extends React.Component {
  constructor(props) {
    super(props);
    this.changeParamName = this.changeParamName.bind(this);
    this.changeParamRequired = this.changeParamRequired.bind(this);
  }
  changeParamName(e) {
    this.props.updateParameter({
      required: this.props.parameter.required,
      name: e.target.value
    });
  }
  changeParamRequired(e) {
    this.props.updateParameter({
      required: e.target.checked,
      name: this.props.parameter.name // eslint-disable-line react/prop-types
    });
  }
  render() {
    const { parameter, index, removeParameter } = this.props;
    return (
      <div className="delible-input">
        <input
          name={`pipeline_param/${index}`}
          type="text"
          className="text-input form-row-text-input"
          placeholder="Parameter Name"
          value={parameter.name}
          onChange={this.changeParamName}
        />
        <div className="slide-toggle-round-container">
          <h5 className="slide-toggle-round-label">Required</h5>
          <div className="switch">
            <input
              id={`Required_pipeline_param/${index}`}
              type="checkbox"
              name="Required"
              onChange={this.changeParamRequired}
              checked={parameter.required}
              className="slide-toggle-round"
            />
            <label htmlFor={`Required_pipeline_param/${index}`} />
          </div>
        </div>
        <Button
          small
          circle
          className="delible-input-button"
          onClick={() => removeParameter(index)}
        >
          <i className="fa fa-minus" />
        </Button>
      </div>
    );
  }
}

PipelineParameter.propTypes = {
  index: PropTypes.number.isRequired,
  updateParameter: PropTypes.func.isRequired,
  removeParameter: PropTypes.func.isRequired,
  parameter: PropTypes.shape({
    required: PropTypes.bool,
    naem: PropTypes.string
  }).isRequired
};