You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
1.9 KiB

  1. import CharacterCounter from './character_counter';
  2. import Button from './button';
  3. import PureRenderMixin from 'react-addons-pure-render-mixin';
  4. import ImmutablePropTypes from 'react-immutable-proptypes';
  5. import ReplyIndicator from './reply_indicator';
  6. import UploadButton from './upload_button';
  7. const ComposeForm = React.createClass({
  8. propTypes: {
  9. text: React.PropTypes.string.isRequired,
  10. is_submitting: React.PropTypes.bool,
  11. in_reply_to: ImmutablePropTypes.map,
  12. onChange: React.PropTypes.func.isRequired,
  13. onSubmit: React.PropTypes.func.isRequired,
  14. onCancelReply: React.PropTypes.func.isRequired
  15. },
  16. mixins: [PureRenderMixin],
  17. handleChange (e) {
  18. this.props.onChange(e.target.value);
  19. },
  20. handleKeyUp (e) {
  21. if (e.keyCode === 13 && e.ctrlKey) {
  22. this.props.onSubmit();
  23. }
  24. },
  25. handleSubmit () {
  26. this.props.onSubmit();
  27. },
  28. render () {
  29. let replyArea = '';
  30. if (this.props.in_reply_to) {
  31. replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
  32. }
  33. return (
  34. <div style={{ padding: '10px' }}>
  35. {replyArea}
  36. <textarea disabled={this.props.is_submitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='compose-form__textarea' style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px', margin: '0' }} />
  37. <div style={{ marginTop: '10px', overflow: 'hidden' }}>
  38. <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div>
  39. <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.props.text} /></div>
  40. </div>
  41. </div>
  42. );
  43. }
  44. });
  45. export default ComposeForm;