feat: 🎸 add maxCharacters prop to TextField, rendered in label

Defines the maximum number of characters the user can enter into the field; mapped to `input` element `maxlength` attribute. Helper text is rendered in the component label. ✅ Closes: #19
SelectQuoteLabs · Mar 2, 2021 · cd78a17 · cd78a17
1 parent 3d3dc16
commit cd78a17
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/src/components/SQForm/SQFormTextField.js b/src/components/SQForm/SQFormTextField.js
@@ -18,19 +18,45 @@ function SQFormTextField({
   startAdornment,
   endAdornment,
   type = 'text',
+  inputProps = {},
+  maxCharacters,
   muiFieldProps = {}
 }) {
   const {
     formikField: {field},
     fieldState: {isFieldError},
-    fieldHelpers: {handleBlur, handleChange, HelperTextComponent}
+    fieldHelpers: {
+      handleBlur,
+      handleChange: handleChangeHelper,
+      HelperTextComponent
+    }
   } = useForm({
     name,
     isRequired,
     onBlur,
     onChange
   });
 
+  const [valueLength, setValueLength] = React.useState(field.value.length || 0);
+
+  const handleChange = e => {
+    setValueLength(e.target.value.length);
+    handleChangeHelper(e);
+  };
+
+  const maxCharactersValue = inputProps.maxLength || maxCharacters;
+  const characterCounter = maxCharactersValue && (
+    <small>
+      : {valueLength}/{maxCharactersValue}
+    </small>
+  );
+
+  const labelText = (
+    <span>
+      {label} {characterCounter}
+    </span>
+  );
+
   return (
     <Grid item sm={size}>
       <TextField
@@ -47,10 +73,14 @@ function SQFormTextField({
             <InputAdornment position="end">{endAdornment}</InputAdornment>
           ) : null
         }}
+        inputProps={{
+          maxLength: maxCharacters,
+          ...inputProps
+        }}
         FormHelperTextProps={{error: isFieldError}}
         name={name}
         type={type}
-        label={label}
+        label={labelText}
         helperText={HelperTextComponent}
         placeholder={placeholder}
         onChange={handleChange}
@@ -86,6 +116,10 @@ SQFormTextField.propTypes = {
   endAdornment: PropTypes.node,
   /** Defines the input type for the text field. Must be a valid HTML5 input type */
   type: PropTypes.string,
+  /** Attributes applied to the `input` element */
+  inputProps: PropTypes.object,
+  /** Defines the maximum number of characters the user can enter into the field; mapped to `input` element `maxlength` attribute */
+  maxCharacters: PropTypes.number,
   /** Any valid prop for material ui text input child component - https://material-ui.com/api/text-field/#props */
   muiFieldProps: PropTypes.object
 };

diff --git a/stories/SQForm.stories.js b/stories/SQForm.stories.js
@@ -131,7 +131,12 @@ export const basicForm = () => {
         onSubmit={handleSubmit}
         muiGridProps={{spacing: 4}}
       >
-        <SQFormTextField name="firstName" label="First name" size={3} />
+        <SQFormTextField
+          name="firstName"
+          label="First name"
+          size={3}
+          maxCharacters={10}
+        />
         <SQFormTextField name="lastName" label="Last name" size={3} />
         <SQFormReadOnlyField name="city" label="City" />
         <SQFormReadOnlyField name="state" label="State" size={1} />
@@ -200,6 +205,7 @@ export const formWithValidation = () => {
           label="First name"
           size={6}
           isRequired={true}
+          maxCharacters={10}
         />
         <SQFormTextField
           name="lastName"