diff --git a/client/coral-embed-stream/src/tabs/profile/components/Comment.css b/client/coral-embed-stream/src/tabs/profile/components/Comment.css
index 40a003de1..9004a1e6c 100644
--- a/client/coral-embed-stream/src/tabs/profile/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/profile/components/Comment.css
@@ -15,6 +15,7 @@
.main {
min-width: 70%;
+ max-width: 100%;
}
.sidebar {
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index 6165d126b..5df119fbc 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -16,7 +16,7 @@ import mapValues from 'lodash/mapValues';
import get from 'lodash/get';
import LoadMore from './LoadMore';
-import { getEditableUntilDate } from './util';
+import { getEditableUntilDate } from '../util';
import { findCommentWithId } from '../../../graphql/utils';
import CommentContent from 'coral-framework/components/CommentContent';
import Slot from 'coral-framework/components/Slot';
diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
index 65937b3ce..a65950d7d 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentForm.js
@@ -18,14 +18,8 @@ class CommentForm extends React.Component {
charCountEnable: PropTypes.bool.isRequired,
maxCharCount: PropTypes.number,
- // DOM ID for form input that edits comment body
- bodyInputId: PropTypes.string,
-
- // screen reader label for input that edits comment body
- bodyLabel: PropTypes.string,
-
- // Placeholder for input that edits comment body
- bodyPlaceholder: PropTypes.string,
+ // Unique identifier for this form
+ id: PropTypes.string,
// render at start of button container (useful for extra buttons)
buttonContainerStart: PropTypes.node,
@@ -37,15 +31,15 @@ class CommentForm extends React.Component {
submitButtonCStyle: PropTypes.string,
// return whether the submit button should be enabled for the provided
- // comment ({ body }) (for reasons other than charCount)
+ // input (for reasons other than charCount)
submitEnabled: PropTypes.func,
// className to add to buttons
submitButtonClassName: PropTypes.string,
cancelButtonClassName: PropTypes.string,
- body: PropTypes.string.isRequired,
- onBodyChange: PropTypes.func.isRequired,
+ input: PropTypes.object.isRequired,
+ onInputChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
onCancel: PropTypes.func,
state: PropTypes.string,
@@ -53,13 +47,12 @@ class CommentForm extends React.Component {
registerHook: PropTypes.func,
unregisterHook: PropTypes.func,
isReply: PropTypes.bool,
+ isEdit: PropTypes.bool,
root: PropTypes.object.isRequired,
comment: PropTypes.object,
};
static get defaultProps() {
return {
- bodyLabel: t('comment_box.comment'),
- bodyPlaceholder: t('comment_box.comment'),
submitText: t('comment_box.post'),
submitButtonCStyle: 'darkGrey',
submitEnabled: () => true,
@@ -90,20 +83,20 @@ class CommentForm extends React.Component {
cancelButtonClassName,
submitButtonClassName,
charCountEnable,
- body,
+ input,
loadingState,
comment,
root,
} = this.props;
- const length = body.length;
+ const length = input.body.length;
const isRespectingMaxCount = length =>
charCountEnable && maxCharCount && length > maxCharCount;
const disableSubmitButton =
!length ||
- body.trim().length === 0 ||
+ input.body.trim().length === 0 ||
isRespectingMaxCount(length) ||
- !submitEnabled({ body }) ||
+ !submitEnabled(input) ||
loadingState === 'loading';
const disableCancelButton = loadingState === 'loading';
const disableTextArea = loadingState === 'loading';
@@ -113,17 +106,16 @@ class CommentForm extends React.Component {
{this.props.buttonContainerStart}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
index 7150a124d..60bf18b40 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftArea.js
@@ -13,17 +13,17 @@ import styles from './DraftArea.css';
*/
export default class DraftArea extends React.Component {
renderCharCount() {
- const { value, maxCharCount } = this.props;
+ const { input, maxCharCount } = this.props;
const className = cn(
styles.charCount,
'talk-plugin-commentbox-char-count',
{
[`${styles.charMax} talk-plugin-commentbox-char-max`]:
- value.length > maxCharCount,
+ input.body.length > maxCharCount,
}
);
- const remaining = maxCharCount - value.length;
+ const remaining = maxCharCount - input.body.length;
return (
@@ -32,18 +32,30 @@ export default class DraftArea extends React.Component {
);
}
+ getLabel() {
+ if (this.props.isEdit) {
+ return t('edit_comment.body_input_label');
+ }
+ return this.props.isReply ? t('comment_box.reply') : t('comment.comment');
+ }
+
+ getPlaceholder() {
+ if (this.props.isEdit) {
+ return '';
+ }
+ return this.getLabel();
+ }
+
render() {
const {
- value,
- placeholder,
+ input,
id,
disabled,
- rows,
- label,
charCountEnable,
maxCharCount,
- onChange,
+ onInputChange,
isReply,
+ isEdit,
registerHook,
unregisterHook,
root,
@@ -51,31 +63,30 @@ export default class DraftArea extends React.Component {
} = this.props;
return (
-
+
-
+ {/* Is this slot here legitimate? (kiwi) */}
{charCountEnable && maxCharCount > 0 && this.renderCharCount()}
@@ -84,23 +95,17 @@ export default class DraftArea extends React.Component {
}
}
-DraftArea.defaultProps = {
- rows: 3,
-};
-
DraftArea.propTypes = {
charCountEnable: PropTypes.bool,
maxCharCount: PropTypes.number,
id: PropTypes.string,
- value: PropTypes.string,
- placeholder: PropTypes.string,
- label: PropTypes.string,
- onChange: PropTypes.func,
+ input: PropTypes.object,
+ onInputChange: PropTypes.func,
disabled: PropTypes.bool,
- rows: PropTypes.number,
root: PropTypes.object.isRequired,
comment: PropTypes.object,
registerHook: PropTypes.func,
unregisterHook: PropTypes.func,
isReply: PropTypes.bool,
+ isEdit: PropTypes.bool,
};
diff --git a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
index 50a481f6f..74e59f795 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/DraftAreaContent.js
@@ -3,36 +3,49 @@ import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './DraftAreaContent.css';
-const DraftAreaContent = ({
- value,
- placeholder,
- id,
- onChange,
- rows,
- disabled,
-}) => (
-