feature: add TextAreaField primitive (aws-amplify#1356)

dpilch · Feb 18, 2022 · adc6d84 · adc6d84
1 parent 65ed535
commit adc6d84
Show file tree

Hide file tree

Showing 38 changed files with 1,463 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -67,6 +67,7 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 | Table            |    ✅     |             |
 | Tabs             |    ✅     |             |
 | Text             |    ✅     |             |
+| TextAreaField    |    ✅     |             |
 | TextField        |    ✅     |             |
 | ToggleButton     |    ✅     |             |
 | View             |    ✅     |             |

diff --git a/docs/src/data/links.ts b/docs/src/data/links.ts
@@ -96,6 +96,11 @@ export const feedbackComponents: ComponentNavItem[] = [
 ].sort(sortByLabel);
 
 export const inputComponents = [
+  {
+    href: '/components/textareafield',
+    label: 'TextArea Field',
+    body: `The TextAreaField form primitive can be used allow users to input multiline text content.`,
+  },
   {
     href: '/components/textfield',
     label: 'Text Field',

diff --git a/docs/src/pages/components/textareafield/TextAreaFieldPropControls.tsx b/docs/src/pages/components/textareafield/TextAreaFieldPropControls.tsx
@@ -0,0 +1,257 @@
+import * as React from 'react';
+import {
+  Flex,
+  TextField,
+  SelectField,
+  SwitchField,
+  TextAreaFieldProps,
+} from '@aws-amplify/ui-react';
+
+export interface TextAreaFieldControlsProps extends TextAreaFieldProps {
+  setAutoComplete: (
+    value: React.SetStateAction<TextAreaFieldProps['autoComplete']>
+  ) => void;
+  setDefaultValue: (
+    value: React.SetStateAction<TextAreaFieldProps['defaultValue']>
+  ) => void;
+  setDescriptiveText: (
+    value: React.SetStateAction<TextAreaFieldProps['descriptiveText']>
+  ) => void;
+  setErrorMessage: (
+    value: React.SetStateAction<TextAreaFieldProps['errorMessage']>
+  ) => void;
+  setHasError: (
+    value: React.SetStateAction<TextAreaFieldProps['hasError']>
+  ) => void;
+  setIsDisabled: (
+    value: React.SetStateAction<TextAreaFieldProps['isDisabled']>
+  ) => void;
+  setIsReadOnly: (
+    value: React.SetStateAction<TextAreaFieldProps['isReadOnly']>
+  ) => void;
+  setIsRequired: (
+    value: React.SetStateAction<TextAreaFieldProps['isRequired']>
+  ) => void;
+  setLabel: (value: React.SetStateAction<TextAreaFieldProps['label']>) => void;
+  setLabelHidden: (
+    value: React.SetStateAction<TextAreaFieldProps['labelHidden']>
+  ) => void;
+  setMaxLength: (
+    value: React.SetStateAction<TextAreaFieldProps['maxLength']>
+  ) => void;
+  setName: (value: React.SetStateAction<TextAreaFieldProps['name']>) => void;
+  setPlaceholder: (
+    value: React.SetStateAction<TextAreaFieldProps['placeholder']>
+  ) => void;
+  setSize: (value: React.SetStateAction<TextAreaFieldProps['size']>) => void;
+  setRows: (value: React.SetStateAction<TextAreaFieldProps['rows']>) => void;
+  setValue: (value: React.SetStateAction<TextAreaFieldProps['value']>) => void;
+  setVariation: (
+    value: React.SetStateAction<TextAreaFieldProps['variation']>
+  ) => void;
+}
+
+interface TextAreaFieldControlsInterface {
+  (props: TextAreaFieldControlsProps): JSX.Element;
+}
+
+export const TextAreaFieldPropControls: TextAreaFieldControlsInterface = ({
+  autoComplete,
+  defaultValue,
+  descriptiveText,
+  errorMessage,
+  hasError,
+  isDisabled,
+  isReadOnly,
+  isRequired,
+  label,
+  labelHidden,
+  maxLength,
+  name,
+  placeholder,
+  rows,
+  setAutoComplete,
+  setDefaultValue,
+  setDescriptiveText,
+  setErrorMessage,
+  setHasError,
+  setIsDisabled,
+  setIsReadOnly,
+  setIsRequired,
+  setLabel,
+  setLabelHidden,
+  setMaxLength,
+  setName,
+  setPlaceholder,
+  setRows,
+  setSize,
+  setValue,
+  setVariation,
+  size,
+  value,
+  variation,
+}) => {
+  return (
+    <Flex direction="column">
+      <TextField
+        placeholder="Set autocomplete"
+        name="autocomplete"
+        value={autoComplete}
+        onChange={(event: any) => {
+          setAutoComplete(event.target.value);
+        }}
+        label="autocomplete"
+      />
+      <TextField
+        placeholder="Set default value"
+        name="defaultValue"
+        value={defaultValue}
+        onChange={(event: any) => {
+          setDefaultValue(event.target.value);
+        }}
+        label="defaultValue"
+      />
+      <TextField
+        placeholder="Set label"
+        name="label"
+        value={label.toString()}
+        onChange={(event: any) => {
+          setLabel(event.target.value);
+        }}
+        label="label"
+      />
+      <TextField
+        placeholder="Set name"
+        name="name"
+        value={name}
+        onChange={(event: any) => {
+          setName(event.target.value);
+        }}
+        label="name"
+      />
+      <TextField
+        placeholder="Set placeholder"
+        name="placeholder"
+        value={placeholder}
+        onChange={(event: any) => {
+          setPlaceholder(event.target.value);
+        }}
+        label="placeholder"
+      />
+      <TextField
+        placeholder="Set rows"
+        name="rows"
+        value={rows}
+        onChange={(event: any) => {
+          setRows(event.target.value);
+        }}
+        label="rows"
+      />
+      <TextField
+        placeholder="Set maxLength"
+        name="maxLength"
+        value={maxLength}
+        onChange={(event: any) => {
+          setMaxLength(event.target.value);
+        }}
+        label="maxLength"
+      />
+      <TextField
+        placeholder="Set descriptive text"
+        name="descriptiveText"
+        value={descriptiveText.toString()}
+        onChange={(event: any) => {
+          setDescriptiveText(event.target.value);
+        }}
+        label="descriptiveText"
+      />
+      <TextField
+        placeholder="Set error message"
+        name="errorMessage"
+        value={errorMessage}
+        onChange={(event: any) => {
+          setErrorMessage(event.target.value);
+        }}
+        label="errorMessage"
+      />
+      <TextField
+        placeholder="Set value"
+        name="value"
+        value={value}
+        onChange={(event: any) => {
+          setValue(event.target.value);
+        }}
+        label="value"
+      />
+      <Flex wrap="wrap">
+        <SwitchField
+          placeholder="Set hasError"
+          name="hasError"
+          value="hasError"
+          checked={hasError}
+          onChange={() => {
+            setHasError(!hasError);
+          }}
+          label="hasError"
+        />
+        <SwitchField
+          checked={labelHidden}
+          name="labelHidden"
+          onChange={() => {
+            setLabelHidden(!labelHidden);
+          }}
+          label="labelHidden"
+        />
+        <SwitchField
+          checked={isDisabled}
+          name="isDisabled"
+          onChange={() => {
+            setIsDisabled(!isDisabled);
+          }}
+          label="isDisabled"
+        />
+        <SwitchField
+          checked={isReadOnly}
+          name="isReadOnly"
+          onChange={() => {
+            setIsReadOnly(!isReadOnly);
+          }}
+          label="isReadOnly"
+        />
+        <SwitchField
+          checked={isRequired}
+          name="isRequired"
+          onChange={() => {
+            setIsRequired(!isRequired);
+          }}
+          label="isRequired"
+        />
+      </Flex>
+
+      <SelectField
+        name="size"
+        value={size}
+        placeholder="default"
+        onChange={(event) =>
+          setSize(event.target.value as TextAreaFieldProps['size'])
+        }
+        label="size"
+      >
+        <option value="small">small</option>
+        <option value="large">large</option>
+      </SelectField>
+
+      <SelectField
+        name="variation"
+        value={variation}
+        placeholder="default"
+        onChange={(event) =>
+          setVariation(event.target.value as TextAreaFieldProps['variation'])
+        }
+        label="variation"
+      >
+        <option value="quiet">quiet</option>
+      </SelectField>
+    </Flex>
+  );
+};