在React日历中编辑表单

时间：2018-11-28 09:52:41

标签： javascript reactjs redux google-calendar-api

我有一个用React和Redux构建的日历。通过单击任何空日期，将显示允许添加某些事件的模式。 问题是我无法弄清楚如何通过单击该事件来对其进行编辑。什么是正确的算法？

这是日历页面代码

/* eslint-disable no-unused-vars */

import React, { PropTypes } from 'react';
import moment from 'moment-timezone';
import Helmet from 'react-helmet';
import _ from 'lodash';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { reduxForm, reset } from 'redux-form';

import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';

import 'react-big-calendar/lib/less/styles.less';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

import AddCalendarEventForm from '../../../app/components/AddCalendarEventForm';

import { translate } from '../../../common/utilities/localization';

import {
  selectCurrentUser,
  selectCurrentGoogleUser,
} from '../../containers/App/selectors';

import {
  submitGoogleAuth,
  fetchGoogleCalendarEvents,
  editGoogleCalendarEvent,
  addGoogleCalendarEvent,
} from './actions';

import {
  selectGoogleAuth,
  selectCalendarEvents,
  selectAddEventProcess,
} from './selectors';

const formName = 'addCalendarEvent';

const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment);

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser(),
  currentGoogleUser: selectCurrentGoogleUser(),
  googleAuth: selectGoogleAuth(),
  calendarEvents: selectCalendarEvents(),
  addEventProcess: selectAddEventProcess(),
});

const mapDispatchToProps = (dispatch) => ({
  submitGoogleAuth: (externalUserId, googleToken) => dispatch(submitGoogleAuth(externalUserId, googleToken)),
  fetchGoogleCalendarEvents: (data) => dispatch(fetchGoogleCalendarEvents(data)),
  editGoogleCalendarEvent: (data) => dispatch(editGoogleCalendarEvent(data)),
  addGoogleCalendarEvent: (data) => dispatch(addGoogleCalendarEvent(data)),
  resetForm: () => dispatch(reset(formName)),
});

@reduxForm({
  form: formName,
})
@connect(mapStateToProps, mapDispatchToProps)
export default class CalendarPage extends React.Component {
  static propTypes = {
    currentUser: PropTypes.any,
    currentGoogleUser: PropTypes.any,
    submitGoogleAuth: PropTypes.func.isRequired,
    googleAuth: PropTypes.object,
    fetchGoogleCalendarEvents: PropTypes.func,
    calendarEvents: PropTypes.object,
    editGoogleCalendarEvent: PropTypes.func,
    addGoogleCalendarEvent: PropTypes.func,
    addEventProcess: PropTypes.object,
    resetForm: PropTypes.func,
  };

  constructor(props) {
    super(props);

    this.state = {
      events: [],
      show: null,
      calendarEvent: null,
    };

    this.onSuccess = this.onSuccess.bind(this);
    this.onFailure = this.onFailure.bind(this);
    this.moveEvent = this.moveEvent.bind(this);
    this.newEvent = this.newEvent.bind(this);
    this.showEventModal = this.showEventModal.bind(this);
    this.hideEventModal = this.hideEventModal.bind(this);
  }

  componentDidMount() {
    const { currentUser, currentGoogleUser } = this.props;

    if (currentGoogleUser && currentGoogleUser.expires_at && moment(currentGoogleUser.expires_at).isAfter(moment())) {
      this.props.fetchGoogleCalendarEvents({ ...currentGoogleUser, userId: currentUser.id });
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.currentGoogleUser !== this.props.currentGoogleUser) {
      this.props.fetchGoogleCalendarEvents({ ...nextProps.currentGoogleUser, userId: nextProps.currentUser.id });
    }

    if (nextProps.calendarEvents && nextProps.calendarEvents.details) {
      const events = [];
      for (const item of nextProps.calendarEvents.details.items) {
        if (item.start && item.end) {
          events.push({
            id: item.id,
            title: item.summary,
            start: moment(item.start.dateTime || item.start.date),
            end: moment(item.end.dateTime || item.end.date),
          });
        }
      }
      this.setState({ events });
    }

    if (!nextProps.addEventProcess.isSubmitting && this.props.addEventProcess.isSubmitting) {
      this.hideEventModal();
    }
  }

  onSuccess(ev) {
    const { submitGoogleAuth, currentUser } = this.props;
    submitGoogleAuth(currentUser.id, { ...ev.tokenObj, profileEmail: ev.profileObj.email });
  }

  onFailure(ev) {
    console.log('onFailure', ev);
  }

  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
    const { currentUser, editGoogleCalendarEvent, calendarEvents } = this.props;
    const { events } = this.state;
    let onlyDate = false;

    const idx = events.indexOf(event);
    const eventIndex = _.findIndex(calendarEvents.details.items, { id: event.id });
    let allDay = event.allDay;
    if (!event.allDay && droppedOnAllDaySlot) {
      allDay = true;
    } else if (event.allDay && !droppedOnAllDaySlot) {
      allDay = false;
    }

    const updatedEvent = { ...event, start, end, allDay };

    const nextEvents = [...events];
    nextEvents.splice(idx, 1, updatedEvent);
    if (eventIndex !== -1) {
      const item = calendarEvents.details.items[eventIndex];
      if (item.start.date && item.end.date) {
        updatedEvent.start = moment(start).format('YYYY-MM-DD');
        updatedEvent.end = moment(end).format('YYYY-MM-DD');
        onlyDate = true;
      }
    }

    this.setState({
      events: nextEvents,
    }, () => {
      editGoogleCalendarEvent({ ...updatedEvent, userId: currentUser.id, timezone: currentUser.timezone, onlyDate });
    });
  }

  resizeEvent = ({ event, start, end }) => {
    const { events } = this.state;

    const nextEvents = events.map(existingEvent => {
      return existingEvent.id === event.id
        ? { ...existingEvent, start, end }
        : existingEvent;
    });

    this.setState({
      events: nextEvents,
    });

    // console.log(`${event.title} was resized to ${start}-${end}`);
  }

  newEvent(params) {
    const { currentUser, addGoogleCalendarEvent } = this.props;
    const { event, formValues } = params;

    const newEvent = {
      title: formValues.title,
      description: formValues.description ? formValues.description : null,
      allDay: event.slots.length === 1,
      start: moment(event.start).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
      end: moment(event.end).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
    };
    this.setState({
      calendarEvent: null,
    }, () => {
      addGoogleCalendarEvent({ ...newEvent, userId: currentUser.id, timezone: currentUser.timezone });
    });
  }

  showEventModal(event) {
    this.setState({ calendarEvent: event, show: true });
  }

  hideEventModal() {
    const { resetForm } = this.props;
    this.setState({ show: false, calendarEvent: null }, () => {
      resetForm();
    });
  }

  render() {
    const { currentGoogleUser, addEventProcess } = this.props;
    let authorized = false;

    if (currentGoogleUser && currentGoogleUser.expires_at) {
      authorized = moment(currentGoogleUser.expires_at).isAfter(moment());
    }

    return (
      <div>
        <div className="container-fluid">
          <Helmet title={translate('portals.page.calendarPage.helmetTitle')} />
          <section className="calendar-section">
            <h2 className="main-heading">{translate('portals.page.calendarPage.pageTitle')}</h2>
            {!authorized &&
              <GoogleLogin
                clientId={GOOGLE_CLIENT_ID}
                scope="https://www.googleapis.com/auth/calendar"
                className="google-login"
                onSuccess={this.onSuccess}
                onFailure={this.onFailure}
              >
                <i className="google-image" />
                <span> Sign in with Google</span>
              </GoogleLogin>
            }
            {authorized &&
              <DragAndDropCalendar
                selectable
                events={this.state.events}
                localizer={localizer}
                onEventDrop={this.moveEvent}
                resizable
                onEventResize={this.resizeEvent}
                onSelectSlot={this.showEventModal}
                onSelectEvent={(e) => { console.log('e', e); }}
                defaultView={BigCalendar.Views.MONTH}
                defaultDate={new Date()}
                views={{ month: true }}
              />
            }

            <AddCalendarEventForm
              show={this.state.show}
              isSubmitting={addEventProcess.isSubmitting}
              calendarEvent={this.state.calendarEvent}
              onSubmit={this.newEvent}
              onHide={this.hideEventModal}
            />
          </section>
        </div>
      </div>
    );
  }
}

这是AddEventForm代码

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { Field, touch, reduxForm, reset } from 'redux-form';
import { Modal } from 'react-bootstrap';
import _ from 'lodash';

import Input from '../../../common/components/Input';
import ReactSelect from '../../../common/components/Input/ReactSelect';
import CenteredModal from '../../../common/components/CenteredModal/index';
import LoadingSpinner from '../../components/LoadingSpinner';
import { selectCurrentUser } from '../../containers/App/selectors';
import { selectSyncErrorBool, selectSyncErrors, selectValues } from '../../common/selectors/form.selector';

import validator, { fields } from './validator';

const formName = 'addCalendarEvent';

function numberSequenceCreator(start, end) {
  return _.range(start, end).map(n => {
    if (n < 10) {
      return {
        label: `0${n}`,
        value: n.toString(),
      };
    }
    return {
      label: n.toString(),
      value: n.toString(),
    };
  });
}

const hourOptions = numberSequenceCreator(1, 13);
const minuteOptions = numberSequenceCreator(0, 60);
const periodOptions = [
  { label: 'AM', value: 'AM' },
  { label: 'PM', value: 'PM' },
];

const mapDispatchToProps = (dispatch) => ({
  touchFields: () => dispatch(touch(formName, ...fields)),
  resetForm: () => dispatch(reset(formName)),
});

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser(),
  formError: selectSyncErrorBool(formName),
  formErrors: selectSyncErrors(formName),
  formValues: selectValues(formName),
});

@reduxForm({
  form: formName,
  validate: validator,
  enableReinitialize: true,
  keepDirtyOnReinitialize: false,
})
@connect(mapStateToProps, mapDispatchToProps)
export default class AddCalendarEventForm extends Component { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    resetForm: PropTypes.func,
    currentUser: PropTypes.object,
    formError: PropTypes.bool,
    formErrors: PropTypes.object,
    formValues: PropTypes.object,
    show: PropTypes.bool,
    onHide: PropTypes.func,
    onSubmit: PropTypes.func,
    touchFields: React.PropTypes.func.isRequired,
    calendarEvent: PropTypes.object,
    isSubmitting: PropTypes.bool,
  };

  constructor(props) {
    super(props);

    this.handleCloseModal = this.handleCloseModal.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleCloseModal() {
    this.props.resetForm();
    this.props.onHide(false);
  }

  handleFormSubmit(event) {
    event.preventDefault();
    const { formError, formValues, onSubmit, calendarEvent, touchFields } = this.props;

    if (!formValues.title || !formValues.period || !formValues.hour || !formValues.minute) {
      touchFields();
    } else if (!formError) {
      onSubmit({ event: calendarEvent, formValues });
    }
  }

  render() {
    const { show, isSubmitting } = this.props;

    return (
      <div>
        <Modal
          className="edit-study-modal"
          id="edit-study"
          dialogComponentClass={CenteredModal}
          show={show}
          onHide={this.handleCloseModal}
          backdrop
          keyboard
        >
          <Modal.Header>
            <Modal.Title>Add Calendar Event</Modal.Title>
            <a className="lightbox-close close" onClick={this.handleCloseModal}>
              <i className="icomoon-icon_close" />
            </a>
          </Modal.Header>
          <Modal.Body>
            <div className="form">
              <div className="inner">
                <form className="" onSubmit={this.handleFormSubmit}>
                  <div className="form-lightbox">
                    <div className="clearfix">
                      <div className="field-row">
                        <strong className="required label">
                          <label>Title</label>
                        </strong>
                        <div className="field">
                          <Field
                            name="title"
                            component={Input}
                            type="text"
                          />
                        </div>
                      </div>
                      <div className="field-row time-field-row">
                        <strong className="label required">
                          <label>Time</label>
                        </strong>
                        <div className="field time-field">
                          <div className="row">
                            <div className="col-small pull-left hours">
                              <Field
                                name="hour"
                                placeholder="Hours"
                                options={hourOptions}
                                component={ReactSelect}
                              />
                            </div>
                            <div className="col-small pull-left minutes">
                              <Field
                                name="minute"
                                placeholder="Minutes"
                                options={minuteOptions}
                                component={ReactSelect}
                              />
                            </div>
                            <div className="col-small pull-left time-mode">
                              <Field
                                name="period"
                                placeholder="AM/PM"
                                options={periodOptions}
                                component={ReactSelect}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="field-row">
                        <strong className="label">
                          <label>Description</label>
                        </strong>
                        <Field
                          name="description"
                          component={Input}
                          className="field"
                          bsClass="form-control input-lg"
                          componentClass="textarea"
                        />
                      </div>
                      <button
                        type="submit"
                        className="btn btn-default btn-submit pull-right"
                      >
                        {isSubmitting
                          ? <span><LoadingSpinner showOnlyIcon size={20} /></span>
                          : <span>Submit</span>
                        }
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}

1 个答案:

答案 0 :(得分：0)

这是日历页面代码

/* eslint-disable no-unused-vars */

import React, { PropTypes } from 'react';
import moment from 'moment-timezone';
import Helmet from 'react-helmet';
import _ from 'lodash';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { reduxForm, reset } from 'redux-form';

import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';

import 'react-big-calendar/lib/less/styles.less';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';

import AddCalendarEventForm from '../../../app/components/AddCalendarEventForm';

import { translate } from '../../../common/utilities/localization';

import {
  selectCurrentUser,
  selectCurrentGoogleUser,
} from '../../containers/App/selectors';

import {
  submitGoogleAuth,
  fetchGoogleCalendarEvents,
  editGoogleCalendarEvent,
  addGoogleCalendarEvent,
} from './actions';

import {
  selectGoogleAuth,
  selectCalendarEvents,
  selectAddEventProcess,
} from './selectors';

const formName = 'addCalendarEvent';

const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment);

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser(),
  currentGoogleUser: selectCurrentGoogleUser(),
  googleAuth: selectGoogleAuth(),
  calendarEvents: selectCalendarEvents(),
  addEventProcess: selectAddEventProcess(),
});

const mapDispatchToProps = (dispatch) => ({
  submitGoogleAuth: (externalUserId, googleToken) => dispatch(submitGoogleAuth(externalUserId, googleToken)),
  fetchGoogleCalendarEvents: (data) => dispatch(fetchGoogleCalendarEvents(data)),
  editGoogleCalendarEvent: (data) => dispatch(editGoogleCalendarEvent(data)),
  addGoogleCalendarEvent: (data) => dispatch(addGoogleCalendarEvent(data)),
  resetForm: () => dispatch(reset(formName)),
});

@reduxForm({
  form: formName,
})
@connect(mapStateToProps, mapDispatchToProps)
export default class CalendarPage extends React.Component {
  static propTypes = {
    currentUser: PropTypes.any,
    currentGoogleUser: PropTypes.any,
    submitGoogleAuth: PropTypes.func.isRequired,
    googleAuth: PropTypes.object,
    fetchGoogleCalendarEvents: PropTypes.func,
    calendarEvents: PropTypes.object,
    editGoogleCalendarEvent: PropTypes.func,
    addGoogleCalendarEvent: PropTypes.func,
    addEventProcess: PropTypes.object,
    resetForm: PropTypes.func,
  };

  constructor(props) {
    super(props);

    this.state = {
      events: [],
      show: null,
      calendarEvent: null,
    };

    this.onSuccess = this.onSuccess.bind(this);
    this.onFailure = this.onFailure.bind(this);
    this.moveEvent = this.moveEvent.bind(this);
    this.newEvent = this.newEvent.bind(this);
    this.showEventModal = this.showEventModal.bind(this);
    this.hideEventModal = this.hideEventModal.bind(this);
  }

  componentDidMount() {
    const { currentUser, currentGoogleUser } = this.props;

    if (currentGoogleUser && currentGoogleUser.expires_at && moment(currentGoogleUser.expires_at).isAfter(moment())) {
      this.props.fetchGoogleCalendarEvents({ ...currentGoogleUser, userId: currentUser.id });
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.currentGoogleUser !== this.props.currentGoogleUser) {
      this.props.fetchGoogleCalendarEvents({ ...nextProps.currentGoogleUser, userId: nextProps.currentUser.id });
    }

    if (nextProps.calendarEvents && nextProps.calendarEvents.details) {
      const events = [];
      for (const item of nextProps.calendarEvents.details.items) {
        if (item.start && item.end) {
          events.push({
            id: item.id,
            title: item.summary,
            start: moment(item.start.dateTime || item.start.date),
            end: moment(item.end.dateTime || item.end.date),
          });
        }
      }
      this.setState({ events });
    }

    if (!nextProps.addEventProcess.isSubmitting && this.props.addEventProcess.isSubmitting) {
      this.hideEventModal();
    }
  }

  onSuccess(ev) {
    const { submitGoogleAuth, currentUser } = this.props;
    submitGoogleAuth(currentUser.id, { ...ev.tokenObj, profileEmail: ev.profileObj.email });
  }

  onFailure(ev) {
    console.log('onFailure', ev);
  }

  moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
    const { currentUser, editGoogleCalendarEvent, calendarEvents } = this.props;
    const { events } = this.state;
    let onlyDate = false;

    const idx = events.indexOf(event);
    const eventIndex = _.findIndex(calendarEvents.details.items, { id: event.id });
    let allDay = event.allDay;
    if (!event.allDay && droppedOnAllDaySlot) {
      allDay = true;
    } else if (event.allDay && !droppedOnAllDaySlot) {
      allDay = false;
    }

    const updatedEvent = { ...event, start, end, allDay };

    const nextEvents = [...events];
    nextEvents.splice(idx, 1, updatedEvent);
    if (eventIndex !== -1) {
      const item = calendarEvents.details.items[eventIndex];
      if (item.start.date && item.end.date) {
        updatedEvent.start = moment(start).format('YYYY-MM-DD');
        updatedEvent.end = moment(end).format('YYYY-MM-DD');
        onlyDate = true;
      }
    }

    this.setState({
      events: nextEvents,
    }, () => {
      editGoogleCalendarEvent({ ...updatedEvent, userId: currentUser.id, timezone: currentUser.timezone, onlyDate });
    });
  }

  resizeEvent = ({ event, start, end }) => {
    const { events } = this.state;

    const nextEvents = events.map(existingEvent => {
      return existingEvent.id === event.id
        ? { ...existingEvent, start, end }
        : existingEvent;
    });

    this.setState({
      events: nextEvents,
    });

    // console.log(`${event.title} was resized to ${start}-${end}`);
  }

  newEvent(params) {
    const { currentUser, addGoogleCalendarEvent } = this.props;
    const { event, formValues } = params;

    const newEvent = {
      title: formValues.title,
      description: formValues.description ? formValues.description : null,
      allDay: event.slots.length === 1,
      start: moment(event.start).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
      end: moment(event.end).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
    };
    this.setState({
      calendarEvent: null,
    }, () => {
      addGoogleCalendarEvent({ ...newEvent, userId: currentUser.id, timezone: currentUser.timezone });
    });
  }

  showEventModal(event) {
    this.setState({ calendarEvent: event, show: true });
  }

  hideEventModal() {
    const { resetForm } = this.props;
    this.setState({ show: false, calendarEvent: null }, () => {
      resetForm();
    });
  }

  render() {
    const { currentGoogleUser, addEventProcess } = this.props;
    let authorized = false;

    if (currentGoogleUser && currentGoogleUser.expires_at) {
      authorized = moment(currentGoogleUser.expires_at).isAfter(moment());
    }

    return (
      <div>
        <div className="container-fluid">
          <Helmet title={translate('portals.page.calendarPage.helmetTitle')} />
          <section className="calendar-section">
            <h2 className="main-heading">{translate('portals.page.calendarPage.pageTitle')}</h2>
            {!authorized &&
              <GoogleLogin
                clientId={GOOGLE_CLIENT_ID}
                scope="https://www.googleapis.com/auth/calendar"
                className="google-login"
                onSuccess={this.onSuccess}
                onFailure={this.onFailure}
              >
                <i className="google-image" />
                <span> Sign in with Google</span>
              </GoogleLogin>
            }
            {authorized &&
              <DragAndDropCalendar
                selectable
                events={this.state.events}
                localizer={localizer}
                onEventDrop={this.moveEvent}
                resizable
                onEventResize={this.resizeEvent}
                onSelectSlot={this.showEventModal}
                onSelectEvent={(e) => { console.log('e', e); }}
                defaultView={BigCalendar.Views.MONTH}
                defaultDate={new Date()}
                views={{ month: true }}
              />
            }

            <AddCalendarEventForm
              show={this.state.show}
              isSubmitting={addEventProcess.isSubmitting}
              calendarEvent={this.state.calendarEvent}
              onSubmit={this.newEvent}
              onHide={this.hideEventModal}
            />
          </section>
        </div>
      </div>
    );
  }
}

这是AddEventForm代码

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { Field, touch, reduxForm, reset } from 'redux-form';
import { Modal } from 'react-bootstrap';
import _ from 'lodash';

import Input from '../../../common/components/Input';
import ReactSelect from '../../../common/components/Input/ReactSelect';
import CenteredModal from '../../../common/components/CenteredModal/index';
import LoadingSpinner from '../../components/LoadingSpinner';
import { selectCurrentUser } from '../../containers/App/selectors';
import { selectSyncErrorBool, selectSyncErrors, selectValues } from '../../common/selectors/form.selector';

import validator, { fields } from './validator';

const formName = 'addCalendarEvent';

function numberSequenceCreator(start, end) {
  return _.range(start, end).map(n => {
    if (n < 10) {
      return {
        label: `0${n}`,
        value: n.toString(),
      };
    }
    return {
      label: n.toString(),
      value: n.toString(),
    };
  });
}

const hourOptions = numberSequenceCreator(1, 13);
const minuteOptions = numberSequenceCreator(0, 60);
const periodOptions = [
  { label: 'AM', value: 'AM' },
  { label: 'PM', value: 'PM' },
];

const mapDispatchToProps = (dispatch) => ({
  touchFields: () => dispatch(touch(formName, ...fields)),
  resetForm: () => dispatch(reset(formName)),
});

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser(),
  formError: selectSyncErrorBool(formName),
  formErrors: selectSyncErrors(formName),
  formValues: selectValues(formName),
});

@reduxForm({
  form: formName,
  validate: validator,
  enableReinitialize: true,
  keepDirtyOnReinitialize: false,
})
@connect(mapStateToProps, mapDispatchToProps)
export default class AddCalendarEventForm extends Component { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    resetForm: PropTypes.func,
    currentUser: PropTypes.object,
    formError: PropTypes.bool,
    formErrors: PropTypes.object,
    formValues: PropTypes.object,
    show: PropTypes.bool,
    onHide: PropTypes.func,
    onSubmit: PropTypes.func,
    touchFields: React.PropTypes.func.isRequired,
    calendarEvent: PropTypes.object,
    isSubmitting: PropTypes.bool,
  };

  constructor(props) {
    super(props);

    this.handleCloseModal = this.handleCloseModal.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleCloseModal() {
    this.props.resetForm();
    this.props.onHide(false);
  }

  handleFormSubmit(event) {
    event.preventDefault();
    const { formError, formValues, onSubmit, calendarEvent, touchFields } = this.props;

    if (!formValues.title || !formValues.period || !formValues.hour || !formValues.minute) {
      touchFields();
    } else if (!formError) {
      onSubmit({ event: calendarEvent, formValues });
    }
  }

  render() {
    const { show, isSubmitting } = this.props;

    return (
      <div>
        <Modal
          className="edit-study-modal"
          id="edit-study"
          dialogComponentClass={CenteredModal}
          show={show}
          onHide={this.handleCloseModal}
          backdrop
          keyboard
        >
          <Modal.Header>
            <Modal.Title>Add Calendar Event</Modal.Title>
            <a className="lightbox-close close" onClick={this.handleCloseModal}>
              <i className="icomoon-icon_close" />
            </a>
          </Modal.Header>
          <Modal.Body>
            <div className="form">
              <div className="inner">
                <form className="" onSubmit={this.handleFormSubmit}>
                  <div className="form-lightbox">
                    <div className="clearfix">
                      <div className="field-row">
                        <strong className="required label">
                          <label>Title</label>
                        </strong>
                        <div className="field">
                          <Field
                            name="title"
                            component={Input}
                            type="text"
                          />
                        </div>
                      </div>
                      <div className="field-row time-field-row">
                        <strong className="label required">
                          <label>Time</label>
                        </strong>
                        <div className="field time-field">
                          <div className="row">
                            <div className="col-small pull-left hours">
                              <Field
                                name="hour"
                                placeholder="Hours"
                                options={hourOptions}
                                component={ReactSelect}
                              />
                            </div>
                            <div className="col-small pull-left minutes">
                              <Field
                                name="minute"
                                placeholder="Minutes"
                                options={minuteOptions}
                                component={ReactSelect}
                              />
                            </div>
                            <div className="col-small pull-left time-mode">
                              <Field
                                name="period"
                                placeholder="AM/PM"
                                options={periodOptions}
                                component={ReactSelect}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="field-row">
                        <strong className="label">
                          <label>Description</label>
                        </strong>
                        <Field
                          name="description"
                          component={Input}
                          className="field"
                          bsClass="form-control input-lg"
                          componentClass="textarea"
                        />
                      </div>
                      <button
                        type="submit"
                        className="btn btn-default btn-submit pull-right"
                      >
                        {isSubmitting
                          ? <span><LoadingSpinner showOnlyIcon size={20} /></span>
                          : <span>Submit</span>
                        }
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}
相关问题
最新问题