# All files / elements/forms/Form component.js

100% Statements 17/17
100% Branches 7/7
100% Functions 3/3
100% Lines 16/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

    6x

    6x
    6x

    6x
    2x

    4x

    6x

    6x
    80x
    80x
    76x

    6x
    4x

    80x

    6x

    6x

     import React from 'react';
    import PropTypes from 'prop-types';
    import { removeSomeProps } from 'src/utils/componentHelpers';
    import propTypes from '@styled-system/prop-types';

    const formComponentPropsToRemove = {
      ...propTypes.flexbox,
      ...propTypes.layout,
      ...propTypes.position,
      ...propTypes.space,
      formInline: false,
    };

    export const applyFormStyleToChild = (child, formStyleFromParent) => {
      const { formStyle } = child.props;
      let output;
      // Only TextField will try to apply form style
      if (formStyle || (child.type.name !== 'TextField' && child.type.name !== 'SelectField')) {
        output = child;
      } else {
        output = React.cloneElement(child, { formStyle: formStyleFromParent });
      }
      return output;
    };

    export const FormComponent = ({ children, formStyle, ...props }) => {
      let output = null;
      if (!formStyle) {
        output = (
          <form {...removeSomeProps(props, Object.keys(formComponentPropsToRemove))}>
            {children}
          </form>
        );
      } else {
        const childrenWithProps = React.Children.map(children, child => applyFormStyleToChild(child, formStyle));
        output = (
          <form {...removeSomeProps(props, Object.keys(formComponentPropsToRemove))}>
            {childrenWithProps}
          </form>
        );
      }
      return output;
    };
    FormComponent.propTypes = {
      children: PropTypes.any,
      formStyle: PropTypes.string,
    };

    FormComponent.defaultProps = {
      children: null,
      formStyle: '',
    };