Commit c7760b6c authored by mgabdev's avatar mgabdev

Added schedule post dropdown component and container, styles

parent 6ede1426
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>
);
}
}
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);
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment