[NEW] Message character limit feature (#443)

* [NEW] Setting a character limit

* adding new component ReminderCharacters on Footer

* update function shouldComponentUpdate in Composer

* adding config.settings.limitTextLength in screenProps

* [FIX] Null limitTextLength validation

* added limitTextLength validation if null

* [FEAT] Adding write lock

* Removing visual effects when exceeding message limit
* Adding write block when passing the character limit value

* [FEAT] Highlighting character counter

* Creating class footer__remainder-alert
* Changing to class footer__remainder-alert when textLength is equal character limit

* [FIX] CharCounter

* Changing component name to CharCounter
* Changing alert to hilight

* [FEAT] Storybook CharCounter

* Remove number 1
* Create storybook in stories

src/components/Composer/index.js

@@ -157,7 +157,7 @@ export class Composer extends Component {
 	// we only update composer if value length changed from 0 to 1 or 1 to 0
 	// everything else is managed by this.el
 	shouldComponentUpdate({ value: nextValue }) {
-		const { value } = this.props;
+		const { value, limitTextLength } = this.props;
 
 		const nextValueEmpty = !nextValue || nextValue.length === 0;
 		const valueEmpty = !value || value.length === 0;
@@ -166,6 +166,10 @@ export class Composer extends Component {
 			return true;
 		}
 
+		if (nextValue.length === limitTextLength || value.length === limitTextLength) {
+			return true;
+		}
+
 		return false;
 	}
 

src/components/Footer/index.js

@@ -46,3 +46,13 @@ export const FooterOptions = ({ children }) => (
 		{children}
 	</PopoverMenu>
 );
+
+
+export const CharCounter = ({ className, style = {}, textLength, limitTextLength }) => (
+	<span
+		className={createClassName(styles, 'footer__remainder', { highlight: textLength === limitTextLength }, [className])}
+		style={style}
+	>
+		{textLength} / {limitTextLength}
+	</span>
+);

src/components/Footer/styles.scss

@@ -41,6 +41,17 @@
 
 		@include pressable-button(2px);
 	}
+
+	&__remainder  {
+		margin-left: 10px;
+		min-width: 100px;
+		font-weight: bold;
+		&--highlight {
+			color: $color-red;
+			transition: color .2s;
+		}
+	}
+
 }
 
 .powered-by {

src/components/Screen/index.js

@@ -129,7 +129,7 @@ export const ScreenContent = ({ children, nopadding }) => (
 );
 
 
-export const ScreenFooter = ({ children, options }) => (
+export const ScreenFooter = ({ children, options, limit }) => (
 	<Footer>
 		{children && (
 			<FooterContent>
@@ -138,6 +138,7 @@ export const ScreenFooter = ({ children, options }) => (
 		)}
 		<FooterContent>
 			{options}
+			{limit}
 			<PoweredBy />
 		</FooterContent>
 	</Footer>

src/routes/Chat/component.js

@@ -3,7 +3,7 @@ import { h, Component } from 'preact';
 
 import { Composer, ComposerAction, ComposerActions } from '../../components/Composer';
 import { FilesDropTarget } from '../../components/FilesDropTarget';
-import { FooterOptions } from '../../components/Footer';
+import { FooterOptions, CharCounter } from '../../components/Footer';
 import { Menu } from '../../components/Menu';
 import { MessageList } from '../../components/Messages';
 import { Screen } from '../../components/Screen';
@@ -67,9 +67,13 @@ export default class Chat extends Component {
 	}
 
 	handleChangeText = (text) => {
-		this.setState({ text });
-		const { onChangeText } = this.props;
-		onChangeText && onChangeText(text);
+		let value = text;
+		const { onChangeText, limitTextLength } = this.props;
+		if (limitTextLength && limitTextLength < text.length) {
+			value = value.substring(0, limitTextLength);
+		}
+		this.setState({ text: value });
+		onChangeText && onChangeText(value);
 	}
 
 	toggleEmojiPickerState = () => {
@@ -110,6 +114,7 @@ export default class Chat extends Component {
 		onRemoveUserData,
 		lastReadMessageId,
 		queueInfo,
+		limitTextLength,
 		...props
 	}, {
 		atBottom = true,
@@ -174,6 +179,11 @@ export default class Chat extends Component {
 							</Menu.Group>
 						</FooterOptions>
 					) : null}
+					limit={limitTextLength
+						? <CharCounter
+							limitTextLength={limitTextLength}
+							textLength={text.length}
+						/> : null}
 				>
 					<Composer onUpload={onUpload}
 						onSubmit={this.handleSubmit}
@@ -203,6 +213,7 @@ export default class Chat extends Component {
 								)}
 							</ComposerActions>
 						)}
+						limitTextLength={limitTextLength}
 					/>
 				</Screen.Footer>
 			</FilesDropTarget>

src/routes/Chat/container.js

@@ -337,6 +337,7 @@ export const ChatConnector = ({ ref, ...props }) => (
 					allowSwitchingDepartments,
 					forceAcceptDataProcessingConsent: allowRemoveUserData,
 					showConnecting,
+					limitTextLength,
 				} = {},
 				messages: {
 					conversationFinishedMessage,
@@ -423,7 +424,7 @@ export const ChatConnector = ({ ref, ...props }) => (
 					estimatedWaitTimeSeconds: queueInfo.estimatedWaitTimeSeconds,
 					message: queueInfo.message,
 				} : undefined}
-
+				limitTextLength={limitTextLength}
 			/>
 		)}
 	</Consumer>

src/routes/Chat/stories.js

@@ -52,6 +52,7 @@ storiesOf('Routes/Chat', module)
 			onBottom={action('bottom')}
 			onUpload={action('upload')}
 			onSubmit={action('submit')}
+			limitTextLength={number('limitTextLength', 0)}
 			{...screenProps()}
 		/>
 	))
@@ -72,6 +73,7 @@ storiesOf('Routes/Chat', module)
 			onBottom={action('bottom')}
 			onUpload={action('upload')}
 			onSubmit={action('submit')}
+			limitTextLength={number('limitTextLength', 0)}
 			{...screenProps()}
 		/>
 	))
@@ -92,6 +94,7 @@ storiesOf('Routes/Chat', module)
 			onBottom={action('bottom')}
 			onUpload={action('upload')}
 			onSubmit={action('submit')}
+			limitTextLength={number('limitTextLength', 0)}
 			{...screenProps()}
 		/>
 	));

src/routes/Chat/styles.scss

@@ -50,6 +50,11 @@
 			border-radius: 50%;
 		}
 	}
+
+	.none__action {
+		opacity: 0.6;
+		margin: 0 6px;
+	}
 }
 
 @keyframes loader-rotate {