Add char count and max char info near textarea of comments area

This commit is contained in:
danielcaldas 2019-09-30 23:16:46 +02:00 committed by Sean Yesmunt
parent 99c957a4f5
commit ad2425f275
4 changed files with 22 additions and 2 deletions

View file

@ -1,6 +1,6 @@
// @flow // @flow
import { CHANNEL_NEW } from 'constants/claim'; import { CHANNEL_NEW } from 'constants/claim';
import React from 'react'; import React, { useEffect, useState } from 'react';
import { FormField, Form } from 'component/common/form'; import { FormField, Form } from 'component/common/form';
import Button from 'component/button'; import Button from 'component/button';
import ChannelSection from 'component/selectChannel'; import ChannelSection from 'component/selectChannel';
@ -19,6 +19,7 @@ export function CommentCreate(props: Props) {
const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, ''); const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, '');
const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false); const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
const [channel, setChannel] = usePersistedState('comment-channel', 'anonymous'); const [channel, setChannel] = usePersistedState('comment-channel', 'anonymous');
const [charCount, setCharCount] = useState(commentValue.length);
function handleCommentChange(event) { function handleCommentChange(event) {
setCommentValue(event.target.value); setCommentValue(event.target.value);
@ -37,6 +38,8 @@ export function CommentCreate(props: Props) {
setCommentValue(''); setCommentValue('');
} }
useEffect(() => setCharCount(commentValue.length), [commentValue]);
return ( return (
<section> <section>
<UnsupportedOnWeb type="feature" /> <UnsupportedOnWeb type="feature" />
@ -77,6 +80,7 @@ export function CommentCreate(props: Props) {
label={__('Comment')} label={__('Comment')}
placeholder={__('Your comment')} placeholder={__('Your comment')}
value={commentValue} value={commentValue}
charCount={charCount}
onChange={handleCommentChange} onChange={handleCommentChange}
/> />
<div className="card__actions"> <div className="card__actions">

View file

@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server';
import SimpleMDE from 'react-simplemde-editor'; import SimpleMDE from 'react-simplemde-editor';
import MarkdownPreview from 'component/common/markdown-preview-internal'; import MarkdownPreview from 'component/common/markdown-preview-internal';
import { openEditorMenu, stopContextMenu } from 'util/context-menu'; import { openEditorMenu, stopContextMenu } from 'util/context-menu';
import { MAX_CHARACTERS_IN_COMMENT as defaultTextAreaLimit } from 'constants/comments';
import 'easymde/dist/easymde.min.css'; import 'easymde/dist/easymde.min.css';
type Props = { type Props = {
@ -30,6 +31,8 @@ type Props = {
}, },
inputButton?: React$Node, inputButton?: React$Node,
blockWrap: boolean, blockWrap: boolean,
charCount?: number,
textAreaMaxLength?: number,
}; };
export class FormField extends React.PureComponent<Props> { export class FormField extends React.PureComponent<Props> {
@ -71,6 +74,8 @@ export class FormField extends React.PureComponent<Props> {
inputButton, inputButton,
labelOnLeft, labelOnLeft,
blockWrap, blockWrap,
charCount,
textAreaMaxLength = defaultTextAreaLimit,
...inputProps ...inputProps
} = this.props; } = this.props;
const errorMessage = typeof error === 'object' ? error.message : error; const errorMessage = typeof error === 'object' ? error.message : error;
@ -141,10 +146,15 @@ export class FormField extends React.PureComponent<Props> {
</div> </div>
); );
} else if (type === 'textarea') { } else if (type === 'textarea') {
const hasCharCount = charCount !== undefined && charCount >= 0;
const countInfo = hasCharCount && (
<span className="comment__char-count">{`${charCount || ''}/${textAreaMaxLength}`}</span>
);
input = ( input = (
<fieldset-section> <fieldset-section>
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
<textarea type={type} id={name} {...inputProps} /> <textarea type={type} id={name} maxLength={textAreaMaxLength} {...inputProps} />
{countInfo}
</fieldset-section> </fieldset-section>
); );
} else { } else {

View file

@ -0,0 +1 @@
export const MAX_CHARACTERS_IN_COMMENT = 2000;

View file

@ -45,3 +45,8 @@
flex-basis: 200px; flex-basis: 200px;
text-align: right; text-align: right;
} }
.comment__char-count {
align-self: flex-end;
font-size: 12px;
}