TextArea refactor with react-aria

plone · Nov 13, 2022 · 3a3bdd5 · 3a3bdd5
1 parent 6c877ff
commit 3a3bdd5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/.npmignore b/.npmignore
@@ -108,6 +108,7 @@ styleguide.config
 .vscode
 packages/*
 !packages/volto-slate
+!packages/volto-quanta
 .tx
 
 # yarn 3

diff --git a/packages/volto-quanta/src/components/Input/Input.jsx b/packages/volto-quanta/src/components/Input/Input.jsx
@@ -70,7 +70,11 @@ const Input = React.forwardRef((props, ref) => {
       errorMessageProps={errorMessageProps}
       className="text"
     >
-      <input ref={inputRef} {...mergeProps(localInputProps, inputProps)} />
+      <input
+        ref={inputRef}
+        required={required}
+        {...mergeProps(localInputProps, inputProps)}
+      />
     </FormFieldWrapper>
   );
 });

diff --git a/packages/volto-quanta/src/components/TextArea/TextArea.jsx b/packages/volto-quanta/src/components/TextArea/TextArea.jsx
@@ -4,50 +4,73 @@ import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
 import cx from 'classnames';
 import { isNil } from 'lodash';
 import { useForwardedRef } from '../../helpers';
+import { useTextField } from 'react-aria';
+import { mergeProps } from 'react-aria';
 
 const TextArea = React.forwardRef((props, ref) => {
   const {
     disabled,
     error,
     id,
-    minLength,
-    maxLength,
     onChange,
     onClick,
     placeholder,
     readOnly,
     required,
     tabIndex,
+    title,
     value,
   } = props;
 
   const TextAreaRef = useForwardedRef(ref);
 
+  const {
+    labelProps,
+    inputProps,
+    descriptionProps,
+    errorMessageProps,
+  } = useTextField(
+    {
+      ...props,
+      inputElementType: 'textarea',
+      id: `field-${id}`,
+      label: title,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+    },
+    TextAreaRef,
+  );
+
   const computeTabIndex = () => {
     if (!isNil(tabIndex)) return tabIndex;
     if (disabled) return -1;
   };
 
+  const localTextAreaProps = {
+    className: cx('q input textarea', { error: error }),
+    placeholder: placeholder || ' ',
+    onChange: ({ target }) =>
+      readOnly
+        ? undefined
+        : onChange(id, target.value === '' ? undefined : target.value),
+    onClick: () => onClick(),
+    tabIndex: computeTabIndex(),
+    value: value || '',
+  };
+
   return (
-    <FormFieldWrapper {...props} className="text">
+    <FormFieldWrapper
+      {...props}
+      labelProps={labelProps}
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+      className="text"
+    >
       <textarea
-        aria-labelledby={`field-label-${id}`}
-        aria-describedby={`field-hint-${id}`}
-        className={cx('q input textarea', { error: error })}
-        id={`field-${id}`}
-        disabled={disabled}
-        placeholder={placeholder || ' '}
-        onChange={({ target }) =>
-          readOnly
-            ? undefined
-            : onChange(id, target.value === '' ? undefined : target.value)
-        }
-        onClick={() => onClick()}
-        readOnly={readOnly}
         ref={TextAreaRef}
         required={required}
-        tabIndex={computeTabIndex()}
-        value={value || ''}
+        {...mergeProps(localTextAreaProps, inputProps)}
       />
     </FormFieldWrapper>
   );