75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
import { defineMessages, injectIntl } from 'react-intl'
|
|
import { changeListEditorTitle, submitListEditor } from '../actions/lists'
|
|
import Button from '../components/button'
|
|
import Input from '../components/input'
|
|
import Text from '../components/text'
|
|
|
|
const messages = defineMessages({
|
|
label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
|
|
create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
|
|
})
|
|
|
|
const mapStateToProps = state => ({
|
|
value: state.getIn(['listEditor', 'title']),
|
|
disabled: state.getIn(['listEditor', 'isSubmitting']),
|
|
})
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
onChange: value => dispatch(changeListEditorTitle(value)),
|
|
onSubmit: () => dispatch(submitListEditor(true)),
|
|
})
|
|
|
|
export default
|
|
@connect(mapStateToProps, mapDispatchToProps)
|
|
@injectIntl
|
|
class ListCreate extends PureComponent {
|
|
|
|
static propTypes = {
|
|
value: PropTypes.string.isRequired,
|
|
disabled: PropTypes.bool,
|
|
intl: PropTypes.object.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
onSubmit: PropTypes.func.isRequired,
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
value,
|
|
disabled,
|
|
intl,
|
|
onSubmit,
|
|
onChange
|
|
} = this.props
|
|
|
|
return (
|
|
<form onSubmit={onSubmit}>
|
|
<Input
|
|
title={intl.formatMessage(messages.label)}
|
|
placeholder='My new list...'
|
|
value={value}
|
|
onChange={onChange}
|
|
onSubmit={onSubmit}
|
|
disabled={disabled}
|
|
/>
|
|
|
|
<div className={[_s.default, _s.my10, _s.py5, _s.ml10].join(' ')}>
|
|
<Text color='secondary' size='small'>
|
|
Lists are private and only you can see who is on a list.<br/>
|
|
No one else can view your lists. No one knows that they are on your list.
|
|
</Text>
|
|
</div>
|
|
|
|
<Button
|
|
className={_s.ml10}
|
|
type='submit'
|
|
>
|
|
<Text color='white'>
|
|
{intl.formatMessage(messages.create)}
|
|
</Text>
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
}
|