stitch-ui/src/services/slack/components/EditIncomingWebhook.js

import React from "react";
import PropTypes from "prop-types";
import {
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  MaskedInput
} from "../../../core";

const TOKEN = "token";

export default class EditSlackWebhookOptions extends React.Component {
  constructor(props) {
    super(props);
    this.handleChangeToken = this.handleChangeToken.bind(this);
  }
  handleChangeToken(e) {
    const { options, setWebhookOptions } = this.props;
    setWebhookOptions(options.set(TOKEN, e.target.value));
  }
  render() {
    const { options } = this.props;
    return (
      <div>
        <FormRow last>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor={TOKEN}>
              Token
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <MaskedInput
              name={TOKEN}
              className="text-input form-row-text-input"
              value={options.get(TOKEN)}
              onChange={this.handleChangeToken}
            />
          </FormRowInputGroup>
        </FormRow>
      </div>
    );
  }
}

EditSlackWebhookOptions.propTypes = {
  setWebhookOptions: PropTypes.func.isRequired,
  options: PropTypes.object // eslint-disable-line react/forbid-prop-types
};

EditSlackWebhookOptions.defaultProps = {
  options: null
};