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