Local-only option and dropdown all working

This commit is contained in:
Surinna Curtis 2017-07-01 16:39:19 -05:00 committed by Gô Shoemake
parent b73ee36949
commit 556cede00f
6 changed files with 76 additions and 10 deletions

View File

@ -24,6 +24,7 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
export const COMPOSE_MOUNT = 'COMPOSE_MOUNT'; export const COMPOSE_MOUNT = 'COMPOSE_MOUNT';
export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT'; export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE';
export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE'; export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE'; export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE'; export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
@ -244,6 +245,13 @@ export function unmountCompose() {
}; };
}; };
export function changeComposeAdvancedOption(option) {
return {
type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
option: option,
};
}
export function changeComposeSensitivity() { export function changeComposeSensitivity() {
return { return {
type: COMPOSE_SENSITIVITY_CHANGE, type: COMPOSE_SENSITIVITY_CHANGE,

View File

@ -1,12 +1,30 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
import { injectIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
local_only_short: { id: 'advanced-options.local-only.short', defaultMessage: 'Local-only'},
local_only_long: { id: 'advanced-options.local-only.long', defaultMessage: 'bla' },
advanced_options_icon_title: { id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
});
const iconStyle = { const iconStyle = {
height: null, height: null,
lineHeight: '27px', lineHeight: '27px',
}; };
@injectIntl
export default class AdvancedOptionsDropdown extends React.PureComponent { export default class AdvancedOptionsDropdown extends React.PureComponent {
static propTypes = {
values: ImmutablePropTypes.contains({
do_not_federate: PropTypes.bool.isRequired,
}).isRequired,
onChange: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
onToggleDropdown = () => { onToggleDropdown = () => {
this.setState({ open: !this.state.open }); this.setState({ open: !this.state.open });
}; };
@ -31,30 +49,43 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
open: false, open: false,
}; };
handleClick = (e) => {
const option = e.currentTarget.getAttribute('data-index');
e.preventDefault();
this.props.onChange(option);
}
setRef = (c) => { setRef = (c) => {
this.node = c; this.node = c;
} }
render () { render () {
const { open } = this.state; const { open } = this.state;
const { intl, values } = this.props;
const options = [ const options = [
{ icon: 'wifi', shortText: 'Local-only', longText: 'bla' }, { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' },
]; ];
const optionElems = options.map((option) => { const optionElems = options.map((option) => {
return <div role='button' className='advanced-options-dropdown__option'> const active = values.get(option.key) ? 'active' : '';
<div className='advanced-options-dropdown__option__icon'> return (
<IconButton icon={option.icon} /> <div role='button' className={`advanced-options-dropdown__option ${active}`}
onClick={this.handleClick} data-index={option.key} key={option.key} >
<div className='advanced-options-dropdown__option__icon'>
<IconButton icon={option.icon} title={intl.formatMessage(option.shortText)} />
</div>
<div className='advanced-options-dropdown__option__content'>
<strong>{intl.formatMessage(option.shortText)}</strong>
{intl.formatMessage(option.longText)}
</div>
</div> </div>
<div className='advanced-options-dropdown__option__content'> );
<strong>{option.shortText}</strong>
{option.longText}
</div>
</div>;
}); });
return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}> return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}>
<div className='advanced-options-dropdown__value'> <div className='advanced-options-dropdown__value'>
<IconButton className='advanced-options-dropdown__value' <IconButton className='advanced-options-dropdown__value'
title={intl.formatMessage(messages.advanced_options_icon_title)}
icon='ellipsis-h' active={open} icon='ellipsis-h' active={open}
size={18} inverted size={18} inverted
style={iconStyle} style={iconStyle}

View File

@ -36,6 +36,9 @@ export default class ComposeForm extends ImmutablePureComponent {
suggestions: ImmutablePropTypes.list, suggestions: ImmutablePropTypes.list,
spoiler: PropTypes.bool, spoiler: PropTypes.bool,
privacy: PropTypes.string, privacy: PropTypes.string,
advanced_options: ImmutablePropTypes.contains({
do_not_federate: PropTypes.bool,
}),
spoiler_text: PropTypes.string, spoiler_text: PropTypes.string,
focusDate: PropTypes.instanceOf(Date), focusDate: PropTypes.instanceOf(Date),
preselectDate: PropTypes.instanceOf(Date), preselectDate: PropTypes.instanceOf(Date),

View File

@ -1,3 +1,17 @@
import { connect } from 'react-redux';
import AdvancedOptionsDropdown from '../components/advanced_options_dropdown'; import AdvancedOptionsDropdown from '../components/advanced_options_dropdown';
import { changeComposeAdvancedOption } from '../../../actions/compose';
export default AdvancedOptionsDropdown; const mapStateToProps = state => ({
values: state.getIn(['compose', 'advanced_options']),
});
const mapDispatchToProps = dispatch => ({
onChange (option) {
dispatch(changeComposeAdvancedOption(option));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(AdvancedOptionsDropdown);

View File

@ -15,6 +15,7 @@ const mapStateToProps = state => ({
text: state.getIn(['compose', 'text']), text: state.getIn(['compose', 'text']),
suggestion_token: state.getIn(['compose', 'suggestion_token']), suggestion_token: state.getIn(['compose', 'suggestion_token']),
suggestions: state.getIn(['compose', 'suggestions']), suggestions: state.getIn(['compose', 'suggestions']),
advanced_options: state.getIn(['compose', 'advanced_options']),
spoiler: state.getIn(['compose', 'spoiler']), spoiler: state.getIn(['compose', 'spoiler']),
spoiler_text: state.getIn(['compose', 'spoiler_text']), spoiler_text: state.getIn(['compose', 'spoiler_text']),
privacy: state.getIn(['compose', 'privacy']), privacy: state.getIn(['compose', 'privacy']),

View File

@ -16,6 +16,7 @@ import {
COMPOSE_SUGGESTIONS_CLEAR, COMPOSE_SUGGESTIONS_CLEAR,
COMPOSE_SUGGESTIONS_READY, COMPOSE_SUGGESTIONS_READY,
COMPOSE_SUGGESTION_SELECT, COMPOSE_SUGGESTION_SELECT,
COMPOSE_ADVANCED_OPTIONS_CHANGE,
COMPOSE_SENSITIVITY_CHANGE, COMPOSE_SENSITIVITY_CHANGE,
COMPOSE_SPOILERNESS_CHANGE, COMPOSE_SPOILERNESS_CHANGE,
COMPOSE_SPOILER_TEXT_CHANGE, COMPOSE_SPOILER_TEXT_CHANGE,
@ -29,6 +30,9 @@ import uuid from '../uuid';
const initialState = Immutable.Map({ const initialState = Immutable.Map({
mounted: false, mounted: false,
advanced_options: Immutable.Map({
do_not_federate: false
}),
sensitive: false, sensitive: false,
spoiler: false, spoiler: false,
spoiler_text: '', spoiler_text: '',
@ -140,6 +144,11 @@ export default function compose(state = initialState, action) {
return state.set('mounted', true); return state.set('mounted', true);
case COMPOSE_UNMOUNT: case COMPOSE_UNMOUNT:
return state.set('mounted', false); return state.set('mounted', false);
case COMPOSE_ADVANCED_OPTIONS_CHANGE:
return state
.set('advanced_options',
state.get('advanced_options').set(action.option, !state.getIn(['advanced_options', action.option])))
.set('idempotencyKey', uuid());
case COMPOSE_SENSITIVITY_CHANGE: case COMPOSE_SENSITIVITY_CHANGE:
return state return state
.set('sensitive', !state.get('sensitive')) .set('sensitive', !state.get('sensitive'))