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); |