@devseed-ui/form/src/group/form-group-structure.js

devseed UI Kit Form

import React from 'react';
import { PropTypes as T } from 'prop-types';

import { FormGroup, FormGroupHeader, FormGroupBody, FormGroupFooter } from '.';
import { FormLabel, FormHelper } from '../';

/**
 * From group structure.
 *
 */
export function FormGroupStructure(props) {
  const {
    id,
    label,
    optional,
    required,
    hint,
    hideHeader,
    className,
    toolbar,
    helper,
    children,
    footerContent
  } = props;

  return (
    <FormGroup className={className}>
      <FormGroupHeader isHidden={hideHeader}>
        <FormLabel
          htmlFor={id}
          optional={optional}
          required={required}
          hint={hint}
        >
          {label}
        </FormLabel>
        {toolbar}
      </FormGroupHeader>
      <FormGroupBody>
        {children}
        {helper && <FormHelper>{helper}</FormHelper>}
      </FormGroupBody>
      {footerContent && <FormGroupFooter>{footerContent}</FormGroupFooter>}
    </FormGroup>
  );
}

FormGroupStructure.propTypes = {
  id: T.string.isRequired,
  label: T.node.isRequired,
  optional: T.bool,
  required: T.bool,
  hint: T.node,
  hideHeader: T.bool,
  className: T.string,
  description: T.string,
  toolbar: T.node,
  helper: T.element,
  footerContent: T.node,
  children: T.node
};