Form

import React from 'react';

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

export function Example() {
  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();

    if (!state.firstName) {
      setErrors(prevErrors => ({ ...prevErrors, firstName: true }));
    }

    if (!state.lastName) {
      setErrors(prevErrors => ({ ...prevErrors, lastName: true }));
    }

    if (!state.email) {
      setErrors(prevErrors => ({ ...prevErrors, email: true }));
    }
  };

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

  const errorMessage = React.useMemo(() => {
    let message = '';

    if (Object.values(errors).some(error => error)) {
      message += 'Please fix the following errors:\n';
    }

    for (const error in errors) {
      if (errors[error]) {
        switch (error) {
          case 'firstName':
            message += '· First Name is required\n';
            break;
          case 'lastName':
            message += '· Last Name is required\n';
            break;
          case 'email':
            message += '· Email is required\n';
            break;
          default:
            return;
        }
      }
    }

    return message;
  }, [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'}
        />
        <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'}
        />
        <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'}
        />
        <Spacer size="24" />
      </>
    </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" />
            <Spacer size="12" />
            <Input labelText="Email" />
            <Spacer size="24" />
          </>
        </Form>
      </CardBody>
    </Card>
  );
}