diff --git a/src/ui/component/commentCreate/view.jsx b/src/ui/component/commentCreate/view.jsx index 6d4950c31..acdfe185e 100644 --- a/src/ui/component/commentCreate/view.jsx +++ b/src/ui/component/commentCreate/view.jsx @@ -1,6 +1,6 @@ // @flow import { CHANNEL_NEW } from 'constants/claim'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { FormField, Form } from 'component/common/form'; import Button from 'component/button'; import ChannelSection from 'component/selectChannel'; @@ -19,6 +19,7 @@ export function CommentCreate(props: Props) { const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, ''); const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false); const [channel, setChannel] = usePersistedState('comment-channel', 'anonymous'); + const [charCount, setCharCount] = useState(commentValue.length); function handleCommentChange(event) { setCommentValue(event.target.value); @@ -37,6 +38,8 @@ export function CommentCreate(props: Props) { setCommentValue(''); } + useEffect(() => setCharCount(commentValue.length), [commentValue]); + return (
@@ -77,6 +80,7 @@ export function CommentCreate(props: Props) { label={__('Comment')} placeholder={__('Your comment')} value={commentValue} + charCount={charCount} onChange={handleCommentChange} />
diff --git a/src/ui/component/common/form-components/form-field.jsx b/src/ui/component/common/form-components/form-field.jsx index adead91ca..a64417e9d 100644 --- a/src/ui/component/common/form-components/form-field.jsx +++ b/src/ui/component/common/form-components/form-field.jsx @@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server'; import SimpleMDE from 'react-simplemde-editor'; import MarkdownPreview from 'component/common/markdown-preview-internal'; import { openEditorMenu, stopContextMenu } from 'util/context-menu'; +import { MAX_CHARACTERS_IN_COMMENT as defaultTextAreaLimit } from 'constants/comments'; import 'easymde/dist/easymde.min.css'; type Props = { @@ -30,6 +31,8 @@ type Props = { }, inputButton?: React$Node, blockWrap: boolean, + charCount?: number, + textAreaMaxLength?: number, }; export class FormField extends React.PureComponent { @@ -71,6 +74,8 @@ export class FormField extends React.PureComponent { inputButton, labelOnLeft, blockWrap, + charCount, + textAreaMaxLength = defaultTextAreaLimit, ...inputProps } = this.props; const errorMessage = typeof error === 'object' ? error.message : error; @@ -141,10 +146,15 @@ export class FormField extends React.PureComponent {
); } else if (type === 'textarea') { + const hasCharCount = charCount !== undefined && charCount >= 0; + const countInfo = hasCharCount && ( + {`${charCount || ''}/${textAreaMaxLength}`} + ); input = ( -