Added schedule post dropdown component and container, styles

app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages } from 'react-intl';
+import DatePicker from 'react-datepicker';
+import IconButton from '../../../components/icon_button';
+
+import "react-datepicker/dist/react-datepicker.css";
+
+const messages = defineMessages({
+  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
+});
+
+export default @injectIntl
+class SchedulePostDropdown extends React.PureComponent {
+
+  static propTypes = {
+    date: PropTypes.instanceOf(Date),
+    setScheduledAt: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    isPro: PropTypes.bool,
+    onOpenProUpgradeModal: PropTypes.func.isRequired,
+  };
+
+  state = {
+    open: false,
+  };
+
+  handleToggle = () => {
+    if (!this.props.isPro) {
+      return this.props.onOpenProUpgradeModal();
+    }
+
+    const newOpen = !this.state.open;
+    const newDate = newOpen ? new Date() : null;
+
+    this.handleSetDate(newDate);
+
+    this.setState({
+      open: newOpen
+    });
+  }
+
+  handleSetDate = (date) => {
+    this.props.setScheduledAt(date);
+  }
+
+  render () {
+    const { intl, date, isPro } = this.props;
+    const { open } = this.state;
+
+    const datePickerDisabled = !isPro;
+
+    return (
+      <div className='schedule-post-dropdown'>
+        <div className='schedule-post-dropdown__container'>
+          <IconButton
+            inverted
+            className='schedule-post-dropdown__icon'
+            icon='calendar'
+            title={intl.formatMessage(messages.change_privacy)}
+            size={18}
+            expanded={open}
+            active={open}
+            onClick={this.handleToggle}
+            style={{ height: null, lineHeight: '27px' }}
+          />
+        </div>
+        {
+          open &&
+          <DatePicker
+            target={this}
+            className='schedule-post-dropdown__datepicker'
+            minDate={new Date()}
+            selected={date}
+            onChange={date => this.handleSetDate(date)}
+            timeFormat="HH:mm"
+            timeIntervals={15}
+            timeCaption="Time"
+            dateFormat="MMMM d, yyyy h:mm aa"
+            disabled={datePickerDisabled}
+            showTimeSelect
+          />
+        }
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import SchedulePostDropdown from '../components/schedule_post_dropdown';
+import { changeScheduledAt } from '../../../actions/compose';
+import { openModal } from '../../../actions/modal';
+import { me } from '../../../initial_state';
+
+const mapStateToProps = state => ({
+  date: state.getIn(['compose', 'scheduled_at']),
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  setScheduledAt (date) {
+    dispatch(changeScheduledAt(date));
+  },
+
+  onOpenProUpgradeModal() {
+    dispatch(openModal('PRO_UPGRADE'));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SchedulePostDropdown);

app/javascript/styles/gabsocial/components.scss

@@ -5260,6 +5260,30 @@ noscript {
     color: #000;
 	}
 }
+
+.schedule-post-dropdown {
+	display: flex;
+	align-items: center;
+
+	&__datepicker {
+		margin-left: 4px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    line-height: 22px;
+    padding-left: 6px;
+    width: 165px;
+	}
+
+	.react-datepicker-popper {
+		z-index: 1000;
+	}
+
+	.react-datepicker__day--selected,
+	li.react-datepicker__time-list-item--selected {
+		background-color: $gab-brand-default !important;
+	}
+}
+
 .pro-upgrade-modal {
 	&__content {
     overflow-y: scroll !important;