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

81 lines
2.4 KiB
JavaScript
Raw Normal View History

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'
const messages = defineMessages({
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
2020-04-28 06:33:58 +01:00
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...', },
2020-03-05 15:44:17 +00:00
})
2020-04-11 23:29:19 +01:00
const mapStateToProps = (state) => ({
2020-03-05 15:44:17 +00:00
value: state.getIn(['listEditor', 'title']),
disabled: state.getIn(['listEditor', 'isSubmitting']),
})
2020-04-28 06:33:58 +01:00
const mapDispatchToProps = (dispatch, { isModal }) => ({
onChange: (value) => dispatch(changeListEditorTitle(value)),
onSubmit: () => {
if (isModal) dispatch(closeModal(MODAL_LIST_CREATE))
dispatch(submitListEditor(true))
},
2020-03-05 15:44:17 +00:00
})
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class ListCreate extends PureComponent {
static propTypes = {
2020-04-28 06:33:58 +01:00
value: PropTypes.string,
2020-03-05 15:44:17 +00:00
intl: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
2020-04-28 06:33:58 +01:00
isModal: PropTypes.bool,
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}
/>
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _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
)
}
}