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: '',
};