Add UI for creating polls (#10184)
* Add actions and reducers for polls * Add poll button * Disable media upload if poll enabled * Add poll form * Make delete & redraft work with pollsmaster
Eugen Rochko
6 years ago
committed by
GitHub
parent
4407f07014
commit
d97cbb0da6
@ -0,0 +1,55 @@ |
||||
import React from 'react'; |
||||
import IconButton from '../../../components/icon_button'; |
||||
import PropTypes from 'prop-types'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
|
||||
const messages = defineMessages({ |
||||
add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' }, |
||||
remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' }, |
||||
}); |
||||
|
||||
const iconStyle = { |
||||
height: null, |
||||
lineHeight: '27px', |
||||
}; |
||||
|
||||
export default |
||||
@injectIntl |
||||
class PollButton extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
disabled: PropTypes.bool, |
||||
unavailable: PropTypes.bool, |
||||
active: PropTypes.bool, |
||||
onClick: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleClick = () => { |
||||
this.props.onClick(); |
||||
} |
||||
|
||||
render () { |
||||
const { intl, active, unavailable, disabled } = this.props; |
||||
|
||||
if (unavailable) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div className='compose-form__poll-button'> |
||||
<IconButton |
||||
icon='tasks' |
||||
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)} |
||||
disabled={disabled} |
||||
onClick={this.handleClick} |
||||
className={`compose-form__poll-button-icon ${active ? 'active' : ''}`} |
||||
size={18} |
||||
inverted |
||||
style={iconStyle} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,121 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||
import IconButton from 'mastodon/components/icon_button'; |
||||
import Icon from 'mastodon/components/icon'; |
||||
import classNames from 'classnames'; |
||||
|
||||
const messages = defineMessages({ |
||||
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' }, |
||||
add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' }, |
||||
remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' }, |
||||
poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' }, |
||||
minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' }, |
||||
hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' }, |
||||
days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' }, |
||||
}); |
||||
|
||||
@injectIntl |
||||
class Option extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
title: PropTypes.string.isRequired, |
||||
index: PropTypes.number.isRequired, |
||||
isPollMultiple: PropTypes.bool, |
||||
onChange: PropTypes.func.isRequired, |
||||
onRemove: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleOptionTitleChange = e => { |
||||
this.props.onChange(this.props.index, e.target.value); |
||||
}; |
||||
|
||||
handleOptionRemove = () => { |
||||
this.props.onRemove(this.props.index); |
||||
}; |
||||
|
||||
render () { |
||||
const { isPollMultiple, title, index, intl } = this.props; |
||||
|
||||
return ( |
||||
<li> |
||||
<label className='poll__text editable'> |
||||
<span className={classNames('poll__input', { checkbox: isPollMultiple })} /> |
||||
|
||||
<input |
||||
type='text' |
||||
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })} |
||||
maxlength={25} |
||||
value={title} |
||||
onChange={this.handleOptionTitleChange} |
||||
/> |
||||
</label> |
||||
|
||||
<div className='poll__cancel'> |
||||
<IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} /> |
||||
</div> |
||||
</li> |
||||
); |
||||
} |
||||
|
||||
} |
||||
|
||||
export default |
||||
@injectIntl |
||||
class PollForm extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
options: ImmutablePropTypes.list, |
||||
expiresIn: PropTypes.number, |
||||
isMultiple: PropTypes.bool, |
||||
onChangeOption: PropTypes.func.isRequired, |
||||
onAddOption: PropTypes.func.isRequired, |
||||
onRemoveOption: PropTypes.func.isRequired, |
||||
onChangeSettings: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleAddOption = () => { |
||||
this.props.onAddOption(''); |
||||
}; |
||||
|
||||
handleSelectDuration = e => { |
||||
this.props.onChangeSettings(e.target.value, this.props.isMultiple); |
||||
}; |
||||
|
||||
render () { |
||||
const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl } = this.props; |
||||
|
||||
if (!options) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div className='compose-form__poll-wrapper'> |
||||
<ul> |
||||
{options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} />)} |
||||
</ul> |
||||
|
||||
<div className='poll__footer'> |
||||
{options.size < 4 && ( |
||||
<button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button> |
||||
)} |
||||
|
||||
<select value={expiresIn} onChange={this.handleSelectDuration}> |
||||
<option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option> |
||||
<option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option> |
||||
<option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option> |
||||
<option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option> |
||||
<option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option> |
||||
<option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option> |
||||
<option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
import { connect } from 'react-redux'; |
||||
import PollButton from '../components/poll_button'; |
||||
import { addPoll, removePoll } from '../../../actions/compose'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0), |
||||
active: state.getIn(['compose', 'poll']) !== null, |
||||
}); |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
|
||||
onClick () { |
||||
dispatch((_, getState) => { |
||||
if (getState().getIn(['compose', 'poll'])) { |
||||
dispatch(removePoll()); |
||||
} else { |
||||
dispatch(addPoll()); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
}); |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(PollButton); |
||||
@ -0,0 +1,29 @@ |
||||
import { connect } from 'react-redux'; |
||||
import PollForm from '../components/poll_form'; |
||||
import { addPollOption, removePollOption, changePollOption, changePollSettings } from '../../../actions/compose'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
options: state.getIn(['compose', 'poll', 'options']), |
||||
expiresIn: state.getIn(['compose', 'poll', 'expires_in']), |
||||
isMultiple: state.getIn(['compose', 'poll', 'multiple']), |
||||
}); |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
onAddOption(title) { |
||||
dispatch(addPollOption(title)); |
||||
}, |
||||
|
||||
onRemoveOption(index) { |
||||
dispatch(removePollOption(index)); |
||||
}, |
||||
|
||||
onChangeOption(index, title) { |
||||
dispatch(changePollOption(index, title)); |
||||
}, |
||||
|
||||
onChangeSettings(expiresIn, isMultiple) { |
||||
dispatch(changePollSettings(expiresIn, isMultiple)); |
||||
}, |
||||
}); |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(PollForm); |
||||
Loading…
Reference in new issue