1 | import React from 'react';
|
2 |
|
3 | const LABEL_TEXT = 'Add an optional message';
|
4 | const MAXIMUM_CHARACTERS = 300;
|
5 |
|
6 | function characters (maximum, current) {
|
7 | const remaining = maximum - current;
|
8 | const limitedClass = remaining <= 10 ? ' email-article__message--characters-limited' : '';
|
9 | const remainingClasses = `email-article__message--characters${limitedClass}`
|
10 | return (
|
11 | <span className={remainingClasses}>
|
12 | {remaining} character{remaining !== 1 ? 's' : ''} remaining
|
13 | </span>
|
14 | )
|
15 | }
|
16 |
|
17 | export default ({customMessage, messageText, onMessageTyping, messageLength}) => {
|
18 | if (customMessage) {
|
19 | return (
|
20 | <div className="email-article__message">
|
21 | <label className="email-article__message--label">{LABEL_TEXT}
|
22 | {characters(MAXIMUM_CHARACTERS, messageLength)}
|
23 | </label>
|
24 | <textarea
|
25 | className="o-forms-textarea email-article__message--textarea"
|
26 | type="text"
|
27 | inputMode="latin-prose"
|
28 | maxLength={MAXIMUM_CHARACTERS}
|
29 | placeholder="Enter your message"
|
30 | rows="7"
|
31 | value={messageText}
|
32 | onChange={event => onMessageTyping(event.target.value)}></textarea>
|
33 | </div>
|
34 | )
|
35 | }
|
36 | }
|