All files / buffer-web-components/DateTimeForm index.jsx

100% Statements 10/10
100% Branches 4/4
100% Functions 3/3
100% Lines 10/10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95                    2x         2x       2x         2x 1x       2x 1x       2x                     11x                                                       2x                                          
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import {
  Button,
  InputDate,
  InputTime,
  Text,
} from '@bufferapp/components';
 
const formItemStyle = {
  marginTop: '1.5rem',
  textAlign: 'center',
};
 
const timezoneStyle = {
  marginTop: '0.5rem',
};
 
const buttonStyle = {
  ...formItemStyle,
  marginTop: '1.4rem',
};
 
const renderTimezoneLabel = timezoneLabel =>
  <div style={timezoneStyle}>
    <Text size={'small'}>{timezoneLabel}</Text>
  </div>;
 
const renderError = error =>
  <div style={formItemStyle}>
    <Text color={'torchRed'}>{error}</Text>
  </div>;
 
const DateTimeForm = ({
  error,
  handleSubmit,
  submitting,
  timezoneLabel,
  initialMonthYear,
  disableBefore,
  select24Hours,
  firstDayOfWeek,
  firstMonthToDisplay,
}) =>
  <form>
    <div>
      <Field
        name={'date'}
        component={InputDate}
        disableBefore={disableBefore}
        initialMonthYear={initialMonthYear}
        firstDayOfWeek={firstDayOfWeek}
        firstMonthToDisplay={firstMonthToDisplay}
      />
    </div>
    <div style={formItemStyle}>
      <Field name={'time'} component={InputTime} select24Hours={select24Hours} />
      { timezoneLabel ? renderTimezoneLabel(timezoneLabel) : null }
    </div>
    { error ? renderError(error) : null }
    <div style={buttonStyle}>
      <Button
        key='scheduleSubmit'
        onClick={handleSubmit}
        disabled={submitting}
        small
      >
          Schedule
      </Button>
    </div>
  </form>;
 
DateTimeForm.propTypes = {
  error: PropTypes.string,
  handleSubmit: PropTypes.func.isRequired,
  submitting: PropTypes.bool.isRequired,
  timezoneLabel: PropTypes.string,
  initialMonthYear: PropTypes.shape({
    month: PropTypes.number,
    year: PropTypes.number,
  }).isRequired,
  disableBefore: PropTypes.shape({
    month: PropTypes.number,
    year: PropTypes.number,
  }),
  select24Hours: PropTypes.bool,
  firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
  firstMonthToDisplay: PropTypes.instanceOf(Date),
};
 
export default reduxForm({
  form: 'date-time',
})(DateTimeForm);