From e5ed7aa53a32f6699af7a568eac87ae0f9ff3dce Mon Sep 17 00:00:00 2001 From: Kiran Varma Date: Mon, 18 Nov 2024 22:48:21 +0000 Subject: [PATCH 01/29] word count changes working --- package.json | 1 + src/character-count/index.jsx | 104 ++++++++++++++++++++++++++++++++++ src/fieldset/index.jsx | 4 +- src/index.jsx | 1 + 4 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 src/character-count/index.jsx diff --git a/package.json b/package.json index 263d520a..46ee0c0a 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "classnames": "^2.2.6", "date-fns": "^3.6.0", "diff": "^4.0.1", + "govuk-frontend": "^5.7.1", "lodash": "^4.17.21", "moment": "^2.29.4", "mustache": "^3.0.1", diff --git a/src/character-count/index.jsx b/src/character-count/index.jsx new file mode 100644 index 00000000..a84bcd50 --- /dev/null +++ b/src/character-count/index.jsx @@ -0,0 +1,104 @@ +import React, { useState, useEffect, Fragment, useCallback } from 'react'; +import { TextArea } from '@ukhomeoffice/react-components'; +import classNames from 'classnames'; + +export default function CharacterCount(props) { + + const getWordCount = text => text.split(/\s+/).filter(Boolean).length; + + const [{ content, wordCount }, setContent] = useState({ + content: props.value, + wordCount: getWordCount(props.value) ?? 0, + }); + + const handleChange = useCallback(text => { + console.log('useCallback', text); + + const words = text.split(/\s+/).filter(Boolean); + + if (words.length > props.limit) { + setContent({ + content: text, + wordCount: words.length + }); + console.log('useCallback-content-1', content); + + } else { + setContent({ + content: text, + wordCount: words.length + }); + console.log('useCallback-content-2', content); + } + },[props.limit, content]); + + // useEffect(() => { + // console.log('useEffect'); + // handleChange(content); + // }, []); + + const formErrorClass = classNames({ + 'govuk-form-group': true, + 'govuk-form-group--error': props.error + }); + + const textAreaClass = classNames({ + 'govuk-textarea govuk-js-character-count': true, + 'govuk-textarea--error': props.error + }); + + const wordCountHintMessage = wordCount => { + if (!wordCount) { + return ( +
+ You have {props.limit} words remaining +
+ ); + } + + if (wordCount > props.limit) { + const count = wordCount - props.limit; + return ( +
+ You have {count === 1 ? count + ' word' : count + ' words' } too many +
+ ); + } else { + const count = props.limit - wordCount; + return ( +
+ You have {count === 1 ? count + ' word' : count + ' words' } remaining +
+ ); + } + }; + + return ( +
+ + // {wordCountHintMessage(wordCount)} + //
+ // + ); +} \ No newline at end of file diff --git a/src/fieldset/index.jsx b/src/fieldset/index.jsx index 33dac4ee..0b554d61 100644 --- a/src/fieldset/index.jsx +++ b/src/fieldset/index.jsx @@ -26,7 +26,8 @@ import { MultiInput, DurationField, SelectMany, - Inset + Inset, + CharacterCount } from '../'; function getLabel(opt, name, type = 'label') { @@ -70,6 +71,7 @@ const fields = { declaration: props => , inputDate: props => props.onChange({ target: { value } })} />, textarea: props => - // {wordCountHintMessage(wordCount)} - // - // ); } \ No newline at end of file From d565817f2412c50d0e65c3e166ff9f4a231a0a0c Mon Sep 17 00:00:00 2001 From: Kiran Varma Date: Tue, 19 Nov 2024 11:43:29 +0000 Subject: [PATCH 04/29] minor refactor --- src/character-count/index.jsx | 19 ++++++++++--------- src/fieldset/index.jsx | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/character-count/index.jsx b/src/character-count/index.jsx index 4e897abd..9a34403c 100644 --- a/src/character-count/index.jsx +++ b/src/character-count/index.jsx @@ -4,18 +4,19 @@ import classNames from 'classnames'; export default function CharacterCount(props) { + const { value, maxWordCount, error } = props; const getWordCount = text => text?.split(/\s+/).filter(Boolean).length; const [{ content, wordCount }, setContent] = useState({ - content: props.value, - wordCount: getWordCount(props.value) ?? 0, + content: value, + wordCount: getWordCount(value) ?? 0, }); const handleChange = useCallback(text => { const wordCount = getWordCount(text); - if (wordCount > props.limit) { + if (wordCount > maxWordCount) { setContent({ content: text, wordCount @@ -26,26 +27,26 @@ export default function CharacterCount(props) { wordCount }); } - },[props.limit, content]); + },[maxWordCount, content]); const wordCountHintMessage = wordCount => { if (!wordCount) { return (
- You have {props.limit} words remaining + You have {maxWordCount} words remaining
); } - if (wordCount > props.limit) { - const count = wordCount - props.limit; + if (wordCount > maxWordCount) { + const count = wordCount - maxWordCount; return (
You have {count === 1 ? count + ' word' : count + ' words' } too many
); } else { - const count = props.limit - wordCount; + const count = maxWordCount - wordCount; return (
You have {count === 1 ? count + ' word' : count + ' words' } remaining @@ -57,7 +58,7 @@ export default function CharacterCount(props) { const formErrorClass = classNames({ 'govuk-form-group': true, 'govuk-character-count': true, - 'govuk-form-group--error': props.error + 'govuk-form-group--error': error }); return ( diff --git a/src/fieldset/index.jsx b/src/fieldset/index.jsx index 0b554d61..fa96ebc6 100644 --- a/src/fieldset/index.jsx +++ b/src/fieldset/index.jsx @@ -71,7 +71,7 @@ const fields = { declaration: props => , inputDate: props => props.onChange({ target: { value } })} />, textarea: props =>