Form

import React from 'react';

import {
  Button,
  ButtonType,
  ButtonColor,
  ButtonGroup,
  Form,
  Input,
  Spacer,
  Announce,
  VisuallyHidden,
} from 'react-magma-dom';

export function Example() {
  const [announcement, setAnnouncement] = React.useState('');
  const firstNameRef = React.useRef<any>();
  const lastNameRef = React.useRef<any>();
  const emailRef = React.useRef<any>();

  const [state, setState] = React.useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  const [errors, setErrors] = React.useState({
    firstName: false,
    lastName: false,
    email: false,
  });

  const resetErrors = () => {
    setErrors({
      firstName: false,
      lastName: false,
      email: false,
    });
  };

  const onSubmit = event => {
    event.preventDefault();
    resetErrors();

    const errors = {
      firstName: !state.firstName,
      lastName: !state.lastName,
      email: !state.email,
    };

    setErrors(errors);

    if (errors.firstName && firstNameRef.current) {
      firstNameRef.current.focus();

      return;
    }

    if (errors.lastName && lastNameRef.current) {
      lastNameRef.current.focus();

      return;
    }

    if (errors.email && emailRef.current) {
      emailRef.current.focus();
    }
  };

  const cancel = () => {
    setState({
      firstName: '',
      lastName: '',
      email: '',
    });
    setErrors({
      firstName: false,
      lastName: false,
      email: false,
    });

    setAnnouncement('');

    setTimeout(() => {
      setAnnouncement(
        'Changes discarded. Form inputs have been reset to default.'
      );
    }, 10);
  };

  const errorMessage = React.useMemo(() => {
    const errorCount = Object.values(errors).filter(Boolean).length;

    if (!errorCount) {
      return '';
    }

    if (errorCount === 1) {
      return 'There is 1 error in the form. Please review the field below.';
    }

    return `There are ${errorCount} errors in the form. Please review the fields below.`;
  }, [errors]);

  return (
    <Form
      onSubmit={onSubmit}
      header="Form Heading"
      description="Some Form Description"
      errorMessage={errorMessage}
      actions={
        <ButtonGroup>
          <Button color={ButtonColor.secondary} onClick={cancel}>
            Cancel
          </Button>
          <Button type={ButtonType.submit}>Submit</Button>
        </ButtonGroup>
      }
    >
      <>
        <Input
          labelText="First Name (required)"
          value={state.firstName}
          onChange={event =>
            setState(prevState => ({
              ...prevState,
              firstName: event.target.value,
            }))
          }
          errorMessage={errors.firstName && 'First Name is required'}
          autoComplete="given-name"
          ref={firstNameRef}
        />
        <Spacer size="12" />
        <Input
          labelText="Last Name (required)"
          value={state.lastName}
          onChange={event =>
            setState(prevState => ({
              ...prevState,
              lastName: event.target.value,
            }))
          }
          errorMessage={errors.lastName && 'Last Name is required'}
          autoComplete="family-name"
          ref={lastNameRef}
        />
        <Spacer size="12" />
        <Input
          labelText="Email (required)"
          value={state.email}
          onChange={event =>
            setState(prevState => ({
              ...prevState,
              email: event.target.value,
            }))
          }
          errorMessage={errors.email && 'Email is required'}
          autoComplete="email"
          ref={emailRef}
        />
        <Spacer size="24" />
        <Announce>
          <VisuallyHidden>{announcement}</VisuallyHidden>
        </Announce>
      </>
    </Form>
  );
}

import React from 'react';

import {
  Button,
  ButtonType,
  ButtonColor,
  ButtonGroup,
  Form,
  Input,
  Spacer,
  Card,
  CardBody,
  TypographyVisualStyle,
  TypographyContextVariant,
} from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Form
          onSubmit={() => alert('form submitted')}
          header="Form Heading"
          description="Some Form Description"
          errorMessage="Some Form Error"
          headingVisualStyle={TypographyVisualStyle.headingLarge}
          headingContextVariant={TypographyContextVariant.expressive}
          isInverse
          actions={
            <ButtonGroup>
              <Button color={ButtonColor.secondary}>Cancel</Button>
              <Button type={ButtonType.submit}>Submit</Button>
            </ButtonGroup>
          }
        >
          <>
            <Input labelText="Name" autoComplete="given-name" />
            <Spacer size="12" />
            <Input labelText="Email" autoComplete="email" />
            <Spacer size="24" />
          </>
        </Form>
      </CardBody>
    </Card>
  );
}