14924998981

Committed 09 May 2025 08:39AM UTC coverage: 60.27%. First build

Build # 14924998981

Build Type

Pull #613

github

Committed by

web-flow

Commit Message

Merge af0cc3338 into 6b1c4e759

Pull Request Pull Request #613: Add `writing-tests-guidelines.md` (#612)

Run Details

413 of 897 branches covered (46.04%)

Branch coverage included in aggregate %.

614 of 807 relevant lines covered (76.08%)

29.31 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

11.63

/src/components/FormLayout/FormLayout.jsx

import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import { withGlobalProps } from '../../providers/globalProps';
import { classNames } from '../../helpers/classNames/classNames';
import { transferProps } from '../../helpers/transferProps';
import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
import { FormLayoutContext } from './FormLayoutContext';
import styles from './FormLayout.module.scss';

const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];

export const FormLayout = ({
  autoWidth,
  children,
  fieldLayout,
  labelWidth,
  ...restProps
}) => {
  const childProps = useMemo(() => ({ layout: fieldLayout }), [fieldLayout]);

  if (isChildrenEmpty(children)) {
    return null;
  }

  const hasCustomLabelWidth = !PREDEFINED_LABEL_WIDTH_VALUES.includes(labelWidth);

  const fieldLayoutClass = (layout) => {
    if (layout === 'horizontal') {
      return styles.isRootFieldLayoutHorizontal;
    }

    return styles.isRootFieldLayoutVertical;
  };

  const labelWidthClass = (width) => {
    if (hasCustomLabelWidth) {
      return styles.hasRootLabelWidthCustom;
    }

    if (width === 'auto') {
      return styles.hasRootLabelWidthAuto;
    }

    if (width === 'limited') {
      return styles.hasRootLabelWidthLimited;
    }

    return styles.hasRootLabelWidthDefault;
  };

  return (
    <div
      {...transferProps(restProps)}
      className={classNames(
        styles.root,
        fieldLayoutClass(fieldLayout),
        autoWidth && styles.isRootAutoWidth,
        fieldLayout === 'horizontal' && labelWidthClass(labelWidth),
      )}
      {...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}
    >
      <FormLayoutContext.Provider value={childProps}>
        {children}
      </FormLayoutContext.Provider>
    </div>
  );
};

FormLayout.defaultProps = {
  autoWidth: false,
  children: null,
  fieldLayout: 'vertical',
  labelWidth: 'default',
};

FormLayout.propTypes = {
  /**
   * If `true`, FormLayout will take up only as much horizontal space as necessary.
   */
  autoWidth: PropTypes.bool,
  /**
   * Supported form field components:
   * * `CheckboxField`
   * * `FileInputField`
   * * `FormLayoutCustomField`
   * * `Radio`
   * * `SelectField`
   * * `TextArea`
   * * `TextField`
   * * `Toggle`
   *
   * If none are provided nothing is rendered.
   */
  children: PropTypes.node,
  /**
   * Layout that is forced on children form fields.
   */
  fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
  /**
   * Width of the column with form field labels. Only available if the `fieldLayout` is set to
   * `horizontal`.
   */
  labelWidth: PropTypes.oneOfType([
    PropTypes.oneOf(PREDEFINED_LABEL_WIDTH_VALUES),
    PropTypes.string,
  ]),
};

export const FormLayoutWithGlobalProps = withGlobalProps(FormLayout, 'FormLayout');

export default FormLayoutWithGlobalProps;

1	import PropTypes from 'prop-types';
2	import React, { useMemo } from 'react';
3	import { withGlobalProps } from '../../providers/globalProps';
4	import { classNames } from '../../helpers/classNames/classNames';
5	import { transferProps } from '../../helpers/transferProps';
6	import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
7	import { FormLayoutContext } from './FormLayoutContext';
8	import styles from './FormLayout.module.scss';
9
10	const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];	4✔
11
12	export const FormLayout = ({	4✔
13	autoWidth,
14	children,
15	fieldLayout,
16	labelWidth,
17	...restProps
18	}) => {
19	const childProps = useMemo(() => ({ layout: fieldLayout }), [fieldLayout]);	×
20
21	if (isChildrenEmpty(children)) {	×
22	return null;	×
23	}
24
25	const hasCustomLabelWidth = !PREDEFINED_LABEL_WIDTH_VALUES.includes(labelWidth);	×
26
27	const fieldLayoutClass = (layout) => {	×
28	if (layout === 'horizontal') {	×
29	return styles.isRootFieldLayoutHorizontal;	×
30	}
31
32	return styles.isRootFieldLayoutVertical;	×
33	};
34
35	const labelWidthClass = (width) => {	×
36	if (hasCustomLabelWidth) {	×
37	return styles.hasRootLabelWidthCustom;	×
38	}
39
40	if (width === 'auto') {	×
41	return styles.hasRootLabelWidthAuto;	×
42	}
43
44	if (width === 'limited') {	×
45	return styles.hasRootLabelWidthLimited;	×
46	}
47
48	return styles.hasRootLabelWidthDefault;	×
49	};
50
51	return (	×
52	<div
53	{...transferProps(restProps)}
54	className={classNames(
55	styles.root,
56	fieldLayoutClass(fieldLayout),
57	autoWidth && styles.isRootAutoWidth,	×
58	fieldLayout === 'horizontal' && labelWidthClass(labelWidth),	×
59	)}
60	{...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}	×
61	>
62	<FormLayoutContext.Provider value={childProps}>
63	{children}
64	</FormLayoutContext.Provider>
65	</div>
66	);
67	};
68
69	FormLayout.defaultProps = {	4✔
70	autoWidth: false,
71	children: null,
72	fieldLayout: 'vertical',
73	labelWidth: 'default',
74	};
75
76	FormLayout.propTypes = {	4✔
77	/**
78	* If `true`, FormLayout will take up only as much horizontal space as necessary.
79	*/
80	autoWidth: PropTypes.bool,
81	/**
82	* Supported form field components:
83	* * `CheckboxField`
84	* * `FileInputField`
85	* * `FormLayoutCustomField`
86	* * `Radio`
87	* * `SelectField`
88	* * `TextArea`
89	* * `TextField`
90	* * `Toggle`
91	*
92	* If none are provided nothing is rendered.
93	*/
94	children: PropTypes.node,
95	/**
96	* Layout that is forced on children form fields.
97	*/
98	fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
99	/**
100	* Width of the column with form field labels. Only available if the `fieldLayout` is set to
101	* `horizontal`.
102	*/
103	labelWidth: PropTypes.oneOfType([
104	PropTypes.oneOf(PREDEFINED_LABEL_WIDTH_VALUES),
105	PropTypes.string,
106	]),
107	};
108
109	export const FormLayoutWithGlobalProps = withGlobalProps(FormLayout, 'FormLayout');	4✔
110
111	export default FormLayoutWithGlobalProps;

react-ui-org / react-ui / 14924998981

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous