Add list title editing (#9748)

* Add list title editing

Port changes made by ash for glitch-soc

* Code style fixes
This commit is contained in:
ThibG 2019-02-13 18:52:02 +01:00 committed by Eugen Rochko
parent dad339da6d
commit 188f1c7c89
4 changed files with 83 additions and 7 deletions

View file

@ -0,0 +1,70 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
import IconButton from '../../../components/icon_button';
import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
});
const mapStateToProps = state => ({
value: state.getIn(['listEditor', 'title']),
disabled: !state.getIn(['listEditor', 'isChanged']),
});
const mapDispatchToProps = dispatch => ({
onChange: value => dispatch(changeListEditorTitle(value)),
onSubmit: () => dispatch(submitListEditor(false)),
});
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class ListForm extends React.PureComponent {
static propTypes = {
value: PropTypes.string.isRequired,
disabled: PropTypes.bool,
intl: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
};
handleChange = e => {
this.props.onChange(e.target.value);
}
handleSubmit = e => {
e.preventDefault();
this.props.onSubmit();
}
handleClick = () => {
this.props.onSubmit();
}
render () {
const { value, disabled, intl } = this.props;
const title = intl.formatMessage(messages.title);
return (
<form className='column-inline-form' onSubmit={this.handleSubmit}>
<input
className='setting-text'
value={value}
onChange={this.handleChange}
/>
<IconButton
disabled={disabled}
icon='check'
title={title}
onClick={this.handleClick}
/>
</form>
);
}
}

View file

@ -7,11 +7,11 @@ import { injectIntl } from 'react-intl';
import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists'; import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists';
import Account from './components/account'; import Account from './components/account';
import Search from './components/search'; import Search from './components/search';
import EditListForm from './components/edit_list_form';
import Motion from '../ui/util/optional_motion'; import Motion from '../ui/util/optional_motion';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
title: state.getIn(['listEditor', 'title']),
accountIds: state.getIn(['listEditor', 'accounts', 'items']), accountIds: state.getIn(['listEditor', 'accounts', 'items']),
searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']), searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
}); });
@ -33,7 +33,6 @@ class ListEditor extends ImmutablePureComponent {
onInitialize: PropTypes.func.isRequired, onInitialize: PropTypes.func.isRequired,
onClear: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired, onReset: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
accountIds: ImmutablePropTypes.list.isRequired, accountIds: ImmutablePropTypes.list.isRequired,
searchAccountIds: ImmutablePropTypes.list.isRequired, searchAccountIds: ImmutablePropTypes.list.isRequired,
}; };
@ -49,12 +48,12 @@ class ListEditor extends ImmutablePureComponent {
} }
render () { render () {
const { title, accountIds, searchAccountIds, onClear } = this.props; const { accountIds, searchAccountIds, onClear } = this.props;
const showSearch = searchAccountIds.size > 0; const showSearch = searchAccountIds.size > 0;
return ( return (
<div className='modal-root__modal list-editor'> <div className='modal-root__modal list-editor'>
<h4>{title}</h4> <EditListForm />
<Search /> <Search />

View file

@ -22,6 +22,7 @@ import {
const initialState = ImmutableMap({ const initialState = ImmutableMap({
listId: null, listId: null,
isSubmitting: false, isSubmitting: false,
isChanged: false,
title: '', title: '',
accounts: ImmutableMap({ accounts: ImmutableMap({
@ -47,10 +48,16 @@ export default function listEditorReducer(state = initialState, action) {
map.set('isSubmitting', false); map.set('isSubmitting', false);
}); });
case LIST_EDITOR_TITLE_CHANGE: case LIST_EDITOR_TITLE_CHANGE:
return state.set('title', action.value); return state.withMutations(map => {
map.set('title', action.value);
map.set('isChanged', true);
});
case LIST_CREATE_REQUEST: case LIST_CREATE_REQUEST:
case LIST_UPDATE_REQUEST: case LIST_UPDATE_REQUEST:
return state.set('isSubmitting', true); return state.withMutations(map => {
map.set('isSubmitting', true);
map.set('isChanged', false);
});
case LIST_CREATE_FAIL: case LIST_CREATE_FAIL:
case LIST_UPDATE_FAIL: case LIST_UPDATE_FAIL:
return state.set('isSubmitting', false); return state.set('isSubmitting', false);

View file

@ -5163,7 +5163,7 @@ noscript {
.icon-button { .icon-button {
flex: 0 0 auto; flex: 0 0 auto;
margin-left: 5px; margin: 0 5px;
} }
} }