diff options
author | ThibG <thib@sitedethib.com> | 2019-02-13 18:52:02 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2019-02-13 18:52:02 +0100 |
commit | 188f1c7c89d6fc7349302a9680bac9a82515cb90 (patch) | |
tree | 28031bac4e0a92bbe263e8ff88c8c66a2ba5c9f1 /app/javascript/mastodon/features/list_editor/components | |
parent | dad339da6d19679f0361bfd49d9bcf3a3517af0c (diff) |
Add list title editing (#9748)
* Add list title editing Port changes made by ash for glitch-soc * Code style fixes
Diffstat (limited to 'app/javascript/mastodon/features/list_editor/components')
-rw-r--r-- | app/javascript/mastodon/features/list_editor/components/edit_list_form.js | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/list_editor/components/edit_list_form.js b/app/javascript/mastodon/features/list_editor/components/edit_list_form.js new file mode 100644 index 000000000..3dc59c12e --- /dev/null +++ b/app/javascript/mastodon/features/list_editor/components/edit_list_form.js @@ -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> + ); + } + +} |