stitch-ui/src/values/components/ValueForm.js

import React from "react";
import PropTypes from "prop-types";
import { Value } from "../../models";
import { AlertContainer } from "../../alert";
import { Spinner, Banner, RichJSONEditor, Button, Panel } from "../../core";

class ValueForm extends React.Component {
  constructor(props) {
    super(props);
    this.save = this.save.bind(this);
  }
  save() {
    const { name, value } = this.props;
    if (!name || name.length === 0) {
      this.props.setNameError("Name must not be blank");
      return Promise.resolve();
    }
    const parsedValue = value.valueJson.parseInput();
    const valueObj = new Value({
      valueJson: parsedValue,
      isPrivate: value.private,
      dirty: value.dirty
    });
    this.props.setValue(valueObj);
    if (parsedValue.error) {
      return Promise.resolve();
    }
    return this.props
      .saveValue(name, valueObj.toRaw())
      .then(() => {
        if (this.props.nameInput) {
          this.props.setNameInput("");
          this.props.setValueInput("");
          this.props.setPrivateChecked(false);
          this.props.setNewValueDirty(false);
        }
      })
      .catch(() => {});
  }
  render() {
    const {
      remove,
      savingValue,
      name,
      value,
      alertKey,
      nameError,
      saveError
    } = this.props;
    const {
      nameInput,
      setValueInput,
      setNameInput,
      discardValueChanges,
      setPrivateChecked
    } = this.props;
    return (
      <Panel alone dirty={value.dirty}>
        <div className="panel-header">
          {!nameInput
            ? <h3 className="panel-header-title">
                {name}
              </h3>
            : <div className="panel-header-title">
                <label className="panel-header-title-label" htmlFor="name">
                  New Value Name
                </label>
                <input
                  type="text"
                  className="text-input form-row-text-input splitpanel-rightside-header-title-input"
                  placeholder="Value Name"
                  name="name"
                  value={name}
                  onChange={e => setNameInput(e.target.value)}
                />
                <Banner small message={nameError} error />
                <Banner small message={saveError} error />
              </div>}
          <div className="slide-toggle-round-container">
            <h5 className="slide-toggle-round-label">Private</h5>
            <div className="switch">
              <input
                id={`private/${name}`}
                type="checkbox"
                name={`private/${name}`}
                onChange={e => setPrivateChecked(e.target.checked)}
                checked={value.private || false}
                className="slide-toggle-round"
              />
              <label htmlFor={`private/${name}`} />
            </div>
          </div>
          <AlertContainer alertKey={alertKey} />
          <div className="splitpanel-rightside-header-actions">
            <Button small primary disabled={savingValue} onClick={this.save}>
              Save
            </Button>
            {remove &&
              <Button small default onClick={remove}>
                Delete
              </Button>}
          </div>
        </div>
        <div className="panel-content">
          <Banner message={value.valueJson.error} error />
          <Spinner open={savingValue} />
          <RichJSONEditor
            minLines={5}
            maxLines={10}
            id={`values/${name}`}
            value={value.valueJson.input}
            onChange={setValueInput}
          />
        </div>
        {value.dirty &&
          <div className="panel-discard">
            <div className="panel-discard-modified">
              You have unsaved changes.
            </div>
            <div className="panel-discard-controls">
              <Button small default onClick={discardValueChanges}>
                Discard Changes
              </Button>
            </div>
          </div>}
      </Panel>
    );
  }
}

ValueForm.propTypes = {
  nameInput: PropTypes.bool,
  setValueInput: PropTypes.func.isRequired,
  discardValueChanges: PropTypes.func.isRequired,
  saveValue: PropTypes.func.isRequired,
  setNameInput: PropTypes.func,
  name: PropTypes.string,
  setPrivateChecked: PropTypes.func,
  value: PropTypes.instanceOf(Value),
  remove: PropTypes.func,
  savingValue: PropTypes.bool,
  alertKey: PropTypes.string,
  nameError: PropTypes.string,
  saveError: PropTypes.string,
  setNameError: PropTypes.func.isRequired,
  setValue: PropTypes.func.isRequired,
  setNewValueDirty: PropTypes.func
};

ValueForm.defaultProps = {
  name: "",
  nameInput: false,
  setNameInput: () => {},
  setNewValueDirty: () => {},
  setPrivateChecked: () => {},
  value: {},
  remove: null,
  savingValue: false,
  alertKey: "",
  nameError: null,
  saveError: null
};

export default ValueForm;