gab-social/app/javascript/gabsocial/features/list_create.js

82 lines
2.5 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-03-05 15:44:17 +00:00
import { defineMessages, injectIntl } from 'react-intl'
import { changeListEditorTitle, submitListEditor } from '../actions/lists'
2020-04-28 06:33:58 +01:00
import { closeModal } from '../actions/modal'
import { MODAL_LIST_CREATE } from '../constants'
2020-03-05 15:44:17 +00:00
import Button from '../components/button'
import Input from '../components/input'
2020-04-28 06:33:58 +01:00
import Form from '../components/form'
2020-03-05 15:44:17 +00:00
import Text from '../components/text'
class ListCreate extends React.PureComponent {
2020-03-05 15:44:17 +00:00
render() {
const {
value,
intl,
onSubmit,
2020-04-28 06:33:58 +01:00
onChange,
2020-03-05 15:44:17 +00:00
} = this.props
2020-04-28 06:33:58 +01:00
const isDisabled = !value
2020-03-05 15:44:17 +00:00
return (
2020-04-28 06:33:58 +01:00
<Form>
2020-03-05 15:44:17 +00:00
<Input
title={intl.formatMessage(messages.label)}
2020-04-28 06:33:58 +01:00
placeholder={intl.formatMessage(messages.new_list_placeholder)}
2020-03-05 15:44:17 +00:00
value={value}
onChange={onChange}
/>
<div className={[_s.d, _s.my10, _s.py5, _s.ml10].join(' ')}>
2020-03-05 15:44:17 +00:00
<Text color='secondary' size='small'>
2020-04-28 06:33:58 +01:00
{intl.formatMessage(messages.list_description)}
2020-03-05 15:44:17 +00:00
</Text>
</div>
<Button
2020-04-28 06:33:58 +01:00
isDisabled={isDisabled}
onClick={onSubmit}
2020-03-05 15:44:17 +00:00
>
2020-04-28 06:33:58 +01:00
<Text color='inherit' align='center'>
2020-03-05 15:44:17 +00:00
{intl.formatMessage(messages.create)}
</Text>
</Button>
2020-04-28 06:33:58 +01:00
</Form>
2020-03-05 15:44:17 +00:00
)
}
}
const messages = defineMessages({
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
create: { id: 'lists.new.create_title', defaultMessage: 'Create list' },
list_description: { id: 'list.description', defaultMessage: 'Lists are private and only you can see who is on a list.\nNo one else can view your lists. No one knows that they are on your list.' },
new_list_placeholder: { id: 'list.title_placeholder', defaultMessage: 'My new list...', },
})
const mapStateToProps = (state) => ({
value: state.getIn(['listEditor', 'title']),
disabled: state.getIn(['listEditor', 'isSubmitting']),
})
const mapDispatchToProps = (dispatch, { isModal }) => ({
onChange: (value) => dispatch(changeListEditorTitle(value)),
onSubmit: () => {
if (isModal) dispatch(closeModal(MODAL_LIST_CREATE))
dispatch(submitListEditor(true))
},
})
ListCreate.propTypes = {
value: PropTypes.string,
intl: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
isModal: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ListCreate))