moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'datepicker-async' into 'develop' 

Load react-datepicker asynchronously

Closes #855

See merge request soapbox-pub/soapbox-fe!1086
This commit is contained in:
Alex Gleason 2022-03-16 21:42:13 +00:00
parent 4b543c6545 a29019dbb0
commit 1d4daee53b
4 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/soapbox/components/birthday_input.js
View File

@ -1,12 +1,12 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import DatePicker from 'react-datepicker';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import 'react-datepicker/dist/react-datepicker.css';
import IconButton from 'soapbox/components/icon_button'; import IconButton from 'soapbox/components/icon_button';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { DatePicker } from 'soapbox/features/ui/util/async-components';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
const messages = defineMessages({ const messages = defineMessages({
@ -112,16 +112,18 @@ class BirthdayInput extends ImmutablePureComponent {
</div> </div>
)} )}
<div className='datepicker__input'> <div className='datepicker__input'>
<DatePicker <BundleContainer fetchComponent={DatePicker}>
selected={value} {Component => (<Component
wrapperClassName='react-datepicker-wrapper' selected={value}
onChange={onChange} wrapperClassName='react-datepicker-wrapper'
placeholderText={intl.formatMessage(messages.birthdayPlaceholder)} onChange={onChange}
minDate={new Date('1900-01-01')} placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
maxDate={maxDate} minDate={new Date('1900-01-01')}
required={required} maxDate={maxDate}
renderCustomHeader={this.renderHeader} required={required}
/> renderCustomHeader={this.renderHeader}
/>)}
</BundleContainer>
</div> </div>
</div> </div>
); );

4
app/soapbox/features/birthdays/date_picker.js Normal file
View File

@ -0,0 +1,4 @@
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
export default DatePicker;

30
app/soapbox/features/compose/components/schedule_form.js
View File

@ -3,12 +3,12 @@
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import DatePicker from 'react-datepicker';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import 'react-datepicker/dist/react-datepicker.css';
import IconButton from 'soapbox/components/icon_button'; import IconButton from 'soapbox/components/icon_button';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { DatePicker } from 'soapbox/features/ui/util/async-components';
import { setSchedule, removeSchedule } from '../../../actions/compose'; import { setSchedule, removeSchedule } from '../../../actions/compose';
@ -104,18 +104,20 @@ class ScheduleForm extends React.Component {
<FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' /> <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
</div> </div>
<div className='datepicker__input'> <div className='datepicker__input'>
<DatePicker <BundleContainer fetchComponent={DatePicker}>
selected={scheduledAt} {Component => (<Component
showTimeSelect selected={scheduledAt}
dateFormat='MMMM d, yyyy h:mm aa' showTimeSelect
timeIntervals={15} dateFormat='MMMM d, yyyy h:mm aa'
wrapperClassName='react-datepicker-wrapper' timeIntervals={15}
onChange={this.setSchedule} wrapperClassName='react-datepicker-wrapper'
placeholderText={this.props.intl.formatMessage(messages.schedule)} onChange={this.setSchedule}
filterDate={this.isCurrentOrFutureDate} placeholderText={this.props.intl.formatMessage(messages.schedule)}
filterTime={this.isFiveMinutesFromNow} filterDate={this.isCurrentOrFutureDate}
ref={this.setRef} filterTime={this.isFiveMinutesFromNow}
/> ref={this.setRef}
/>)}
</BundleContainer>
<div className='datepicker__cancel'> <div className='datepicker__cancel'>
<IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} /> <IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} />
</div> </div>

4
app/soapbox/features/ui/util/async-components.js
View File

@ -465,3 +465,7 @@ export function CreateApp() {
export function SettingsStore() { export function SettingsStore() {
return import(/* webpackChunkName: "features/developers" */'../../developers/settings_store'); return import(/* webpackChunkName: "features/developers" */'../../developers/settings_store');
} }
export function DatePicker() {
return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker');
}