feat: add submitOnEnter to textarea

src/components/comment-input/CommentInput.js

@@ -72,6 +72,8 @@ export default class CommentInput extends PureComponent {
  defaultValue={ body }
  rows={ reply ? 2 : 1 }
  maxRows={ 10 }
+ submitOnEnter
+ onSubmit={ this.handleSubmitClick }
  onChange={ this.handleTextareaChange }
  onTransitionEnd={ this.handleTextareaTransitionEnd }
  className={ styles.textarea } />

src/components/textarea-autosize/README.md

@@ -16,5 +16,8 @@ import { TextareaAutosize } from '@discussify/styleguide';
 | ---- | ---- | ------- | ----------- |
 | maxRows | number | | The number of max rows of the textarea |
 | animate | bool | true | Animate the textarea height |
+| submitOnEnter | bool | false | True to submit whenever pressing the enter key; shift + enter is used for new lines |
+| onSubmit | func | *required* if submitOnEnter is enabled | Function to be called when enter was pressed |
 
-Any other properties supplied will be spread to the root element. One useful textarea property is `rows`, which defines the minimum number of rows within the textarea.
+Any other properties supplied will be spread to the root element.
+One useful textarea property is `rows`, which defines the minimum number of rows within the textarea.

src/components/textarea-autosize/TextareaAutosize.js

@@ -1,6 +1,7 @@
 import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { isRequiredIf } from 'prop-type-conditionals';
 import growElementFn from '@moxy/grow-element-fn';
 import { debounce } from 'lodash';
 import styles from './TextareaAutosize.css';
@@ -10,6 +11,8 @@ export default class TextareaAutosize extends Component {
  rows: PropTypes.number,
  maxRows: PropTypes.number,
  animate: PropTypes.bool,
+ submitOnEnter: PropTypes.bool,
+ onSubmit: isRequiredIf((props) => props.submitOnEnter, PropTypes.func),
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
@@ -19,6 +22,7 @@ export default class TextareaAutosize extends Component {
  static defaultProps = {
  rows: 1,
  animate: true,
+ submitOnEnter: false,
  };
 
  textareaRef = createRef();
@@ -37,13 +41,14 @@ export default class TextareaAutosize extends Component {
  }
 
  render() {
- const { className, maxRows, animate, ...rest } = this.props;
+ const { className, maxRows, animate, submitOnEnter, onSubmit, ...rest } = this.props;
  const finalClassName = classNames(styles.textareaAutosize, animate && styles.animate, className);
 
  return (
  <textarea
  { ...rest }
  ref={ this.textareaRef }
+ onKeyPress={ this.handleKeyPress }
  onFocus={ this.handleFocus }
  onBlur={ this.handleBlur }
  onChange={ this.handleChange }
@@ -60,6 +65,20 @@ export default class TextareaAutosize extends Component {
  });
  }
 
+ handleKeyPress = (event) => {
+ this.props.onKeyPress && this.props.onKeyPress(event);
+
+ if (event.defaultPrevented || !this.props.submitOnEnter) {
+ return;
+ }
+
+ // Create new comments when pressing enter without shift
+ if (event.key === 'Enter' && !event.shiftKey) {
+ event.preventDefault();
+ this.props.onSubmit();
+ }
+ };
+
  handleFocus = (event) => {
  this.focused = true;
  this.updateSize();

stories/textarea-autosize.js

@@ -12,22 +12,28 @@ storiesOf('TextareaAutosize', module)
 .add('Default (1 row, no max limit)', () => (
  <TextareaAutosize />
 ))
-.add('5 max rows ', () => (
+.add('5 max rows', () => (
  <TextareaAutosize maxRows={ 5 } />
 ))
-.add('2 rows, 5 max rows ', () => (
+.add('2 rows, 5 max rows', () => (
  <TextareaAutosize rows={ 2 } maxRows={ 5 } />
 ))
+.add('Submit on enter', () => (
+ <TextareaAutosize submitOnEnter onSubmit={ action('submit') } />
+))
 .add('Knobs playground ⚽', () => {
  const rows = number('rows', 1);
  const maxRows = number('maxRows', 5);
  const animate = boolean('animate');
+ const submitOnEnter = boolean('submitOnEnter');
 
  return (
  <TextareaAutosize
  rows={ rows }
  maxRows={ maxRows }
  animate={ animate }
+ submitOnEnter={ submitOnEnter }
+ onSubmit={ action('submit') }
  onFocus={ action('focus') }
  onBlur={ action('blur') }
  onChange={ action('change') } />