component.jsx

// @flow
import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import { inject, observer } from 'mobx-react';
import { DateRangePicker } from 'react-dates';
import moment from 'moment';
import RaisedButton from 'material-ui/RaisedButton';

import css from './styles.scss';

type Props = {
  isOpen: boolean,
  onToggle: () => void,
};

type State = {
  visitedInputs: object,
};

const customContentStyle = {
  width: '725px',
  height: 'auto',
  maxWidth: 'none',
  overflow: 'visible',
};

@inject('AddModalStore')
@observer
class AddModal extends Component<Props, State> {
  // used for showing validation errors only for visited inputs
  state = {
    visitedInputs: {
      title: true,
      url: true,
      description: true,
    },
    focusedInput: '',
    startDate: moment(),
    endDate: moment().add(3, 'days'),
  };

  handleSubmit = () => {
    const { AddModalStore, onToggle } = this.props;

    AddModalStore.handleSubmit(onToggle);
  };

  updateValue = updateValue => {
    const { AddModalStore } = this.props;
    AddModalStore.updateValue(updateValue);
  };

  handleValueUpdate = ({ target }) => {
    const { name, value } = target;

    this.updateValue(target);
  };

  handleFocus = ({ target: { name } }) => {
    this.setState(state => ({
      visitedInputs: Object.assign(state.visitedInputs, { [name]: false }),
    }));
  };

  refreshFocusState = () => {
    this.setState({
      visitedInputs: {
        title: true,
        url: true,
        description: true,
      },
    });
  };

  handleClose = () => {
    const { onToggle } = this.props;

    onToggle();
    this.refreshFocusState();
  };

  handleDateChange = ({ startDate, endDate }) => {
    this.setState({
      startDate: startDate,
      endDate: endDate,
    });
  };

  get isDataValid() {
    const { AddModalStore } = this.props;

    return AddModalStore.isDataValid;
  }

  render() {
    const {
      onToggle,
      isOpen,
      AddModalStore: { title, url, description, isTitleValid, isUrlValid },
    } = this.props;

    const { visitedInputs, startDate, endDate } = this.state;
    const { isDataValid } = this;

    return (
      <Dialog
        modal={true}
        open={isOpen}
        onRequestClose={this.handleClose}
        contentStyle={customContentStyle}
        className={css.dialogContainer}
      >
        <section className={css.modalInnerContainer}>
          <header>
            <h3>Add new Task</h3>
          </header>

          <div className={css.content}>
            <div className={css.block}>
              <span>Title</span>
              <TextField
                value={title}
                name="title"
                onChange={this.handleValueUpdate}
                onBlur={this.handleFocus}
                hintText="Item's title"
                errorText={visitedInputs.title ? '' : isTitleValid}
                className={css.inputField}
              />
            </div>

            <div className={css.block}>
              <span>Link</span>
              <TextField
                value={url}
                name="url"
                onChange={this.handleValueUpdate}
                onBlur={this.handleFocus}
                hintText="Item's URL"
                errorText={visitedInputs.url ? '' : isUrlValid}
                className={css.inputField}
              />
            </div>

            <div className={css.block}>
              <span>Description</span>
              <TextField
                value={description}
                name="description"
                onChange={this.handleValueUpdate}
                onBlur={this.handleFocus}
                hintText="Description"
                // floatingLabelText="Give a brief description if necessary (optional)"
                multiLine={true}
                className={css.inputField}
                rows={2}
              />
            </div>

            <div className={css.schedule}>
              <span
                onClick={() => this.setState({ focusedInput: 'startDate' })}
                id="your_unique_start_date_id"
              >
                Schedule
              </span>

              <DateRangePicker
                noBorder
                displayFormat="LL"
                startDate={startDate}
                startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
                endDate={endDate}
                endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
                onDatesChange={this.handleDateChange}
                focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
                onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
              />
            </div>
          </div>

          <footer>
            <RaisedButton label="Cancel" onClick={this.handleClose} />
            <RaisedButton
              label="Create"
              primary={true}
              disabled={!isDataValid}
            />
          </footer>
        </section>
      </Dialog>
    );
  }
}

export default AddModal;