11374286912

Committed 16 Oct 2024 09:38PM UTC coverage: 95.896% (+0.001%) from 95.895%

Build # 11374286912

Build Type

push

github

Committed by

web-flow

Commit Message

refactor(forms): use transient props where appropriate (#1952)

Run Details

3325 of 3689 branches covered (90.13%)

Branch coverage included in aggregate %.

94 of 104 new or added lines in 21 files covered. (90.38%)

4 existing lines in 1 file now uncovered.

9901 of 10103 relevant lines covered (98.0%)

242.83 hits per line

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

65.15

/packages/forms/src/elements/common/Label.tsx

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { composeEventHandlers } from '@zendeskgarden/container-utilities';
import useFieldContext from '../../utils/useFieldContext';
import useFieldsetContext from '../../utils/useFieldsetContext';
import useInputContext from '../../utils/useInputContext';
import {
  StyledLabel,
  StyledCheckLabel,
  StyledCheckSvg,
  StyledDashSvg,
  StyledRadioLabel,
  StyledRadioSvg,
  StyledToggleLabel,
  StyledToggleSvg
} from '../../styled';
import { ILabelProps } from '../../types';

/**
 * @deprecated use `Field.Label` instead
 *
 * @extends LabelHTMLAttributes<HTMLLabelElement>
 */
export const Label = React.forwardRef<HTMLLabelElement, ILabelProps>(
  ({ children, isRegular, ...other }, ref) => {
    const fieldContext = useFieldContext();
    const fieldsetContext = useFieldsetContext();
    const type = useInputContext();

    const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular;
    let combinedProps = other;

    if (fieldContext) {
      combinedProps = fieldContext.getLabelProps(combinedProps);

      if (type === undefined) {
        const { setIsLabelActive, setIsLabelHovered } = fieldContext;

        combinedProps.onMouseUp = composeEventHandlers(other.onMouseUp, () => {
          setIsLabelActive(false);
        });
        combinedProps.onMouseDown = composeEventHandlers(other.onMouseDown, () => {
          setIsLabelActive(true);
        });
        combinedProps.onMouseEnter = composeEventHandlers(other.onMouseEnter, () => {
          setIsLabelHovered(true);
        });
        combinedProps.onMouseLeave = composeEventHandlers(other.onMouseLeave, () => {
          setIsLabelHovered(false);
        });
      }
    }

    if (type === 'radio') {
      return (
        <StyledRadioLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
          <StyledRadioSvg />
          {children}
        </StyledRadioLabel>
      );
    } else if (type === 'checkbox') {
      /**
       * `onLabelSelect` is a workaround for checkbox label `shift + click` bug in Firefox
       * See: https://bugzilla.mozilla.org/show_bug.cgi?id=559506
       */
      const onLabelSelect = (e: React.KeyboardEvent<HTMLInputElement>) => {
        // eslint-disable-next-line n/no-unsupported-features/node-builtins
        const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;

        if (fieldContext && isFirefox && e.target instanceof Element) {
          const inputId = e.target.getAttribute('for');

          if (!inputId) return;

          const input = document.getElementById(inputId) as HTMLInputElement | null;

          if (input && input.type === 'checkbox') {
            if (e.shiftKey) {
              input.click();
              input.checked = true;
            }
            input.focus();
          }
        }
      };

      combinedProps.onClick = composeEventHandlers(combinedProps.onClick, onLabelSelect);

      return (
        <StyledCheckLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
          <StyledCheckSvg />
          <StyledDashSvg />
          {children}
        </StyledCheckLabel>
      );
    } else if (type === 'toggle') {
      return (
        <StyledToggleLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
          <StyledToggleSvg />
          {children}
        </StyledToggleLabel>
      );
    }

    return (
      <StyledLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
        {children}
      </StyledLabel>
    );
  }
);

Label.displayName = 'Field.Label';

Label.propTypes = {
  isRegular: PropTypes.bool
};

1	/**
2	* Copyright Zendesk, Inc.
3	*
4	* Use of this source code is governed under the Apache License, Version 2.0
5	* found at http://www.apache.org/licenses/LICENSE-2.0.
6	*/
7
8	import React from 'react';	15✔
9	import PropTypes from 'prop-types';	15✔
10	import { composeEventHandlers } from '@zendeskgarden/container-utilities';	15✔
11	import useFieldContext from '../../utils/useFieldContext';	15✔
12	import useFieldsetContext from '../../utils/useFieldsetContext';	15✔
13	import useInputContext from '../../utils/useInputContext';	15✔
14	import {
15	StyledLabel,
16	StyledCheckLabel,
17	StyledCheckSvg,
18	StyledDashSvg,
19	StyledRadioLabel,
20	StyledRadioSvg,
21	StyledToggleLabel,
22	StyledToggleSvg
23	} from '../../styled';	15✔
24	import { ILabelProps } from '../../types';
25
26	/**
27	* @deprecated use `Field.Label` instead
28	*
29	* @extends LabelHTMLAttributes<HTMLLabelElement>
30	*/
31	export const Label = React.forwardRef<HTMLLabelElement, ILabelProps>(	26✔
32	({ children, isRegular, ...other }, ref) => {
33	const fieldContext = useFieldContext();	20✔
34	const fieldsetContext = useFieldsetContext();	20✔
35	const type = useInputContext();	20✔
36
37	const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular;	20✔
38	let combinedProps = other;	20✔
39
40	if (fieldContext) {	20✔
41	combinedProps = fieldContext.getLabelProps(combinedProps);	20✔
42
43	if (type === undefined) {	20✔
44	const { setIsLabelActive, setIsLabelHovered } = fieldContext;	16✔
45
46	combinedProps.onMouseUp = composeEventHandlers(other.onMouseUp, () => {	16✔
UNCOV 47	setIsLabelActive(false);	×
48	});
49	combinedProps.onMouseDown = composeEventHandlers(other.onMouseDown, () => {	16✔
UNCOV 50	setIsLabelActive(true);	×
51	});
52	combinedProps.onMouseEnter = composeEventHandlers(other.onMouseEnter, () => {	16✔
UNCOV 53	setIsLabelHovered(true);	×
54	});
55	combinedProps.onMouseLeave = composeEventHandlers(other.onMouseLeave, () => {	16✔
UNCOV 56	setIsLabelHovered(false);	×
57	});
58	}
59	}
60
61	if (type === 'radio') {	20✔
62	return (	2✔
63	<StyledRadioLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
64	<StyledRadioSvg />
65	{children}
66	</StyledRadioLabel>
67	);
68	} else if (type === 'checkbox') {	18✔
69	/**
70	* `onLabelSelect` is a workaround for checkbox label `shift + click` bug in Firefox
71	* See: https://bugzilla.mozilla.org/show_bug.cgi?id=559506
72	*/
73	const onLabelSelect = (e: React.KeyboardEvent<HTMLInputElement>) => {	1✔
74	// eslint-disable-next-line n/no-unsupported-features/node-builtins
NEW 75	const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1;	×
76
NEW 77	if (fieldContext && isFirefox && e.target instanceof Element) {	×
NEW 78	const inputId = e.target.getAttribute('for');	×
79
NEW 80	if (!inputId) return;	×
81
NEW 82	const input = document.getElementById(inputId) as HTMLInputElement \| null;	×
83
NEW 84	if (input && input.type === 'checkbox') {	×
NEW 85	if (e.shiftKey) {	×
NEW 86	input.click();	×
NEW 87	input.checked = true;	×
88	}
NEW 89	input.focus();	×
90	}
91	}
92	};
93
94	combinedProps.onClick = composeEventHandlers(combinedProps.onClick, onLabelSelect);	1✔
95
96	return (	1✔
97	<StyledCheckLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
98	<StyledCheckSvg />
99	<StyledDashSvg />
100	{children}
101	</StyledCheckLabel>
102	);
103	} else if (type === 'toggle') {	17✔
104	return (	1✔
105	<StyledToggleLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
106	<StyledToggleSvg />
107	{children}
108	</StyledToggleLabel>
109	);
110	}
111
112	return (	16✔
113	<StyledLabel ref={ref} {...combinedProps} $isRegular={$isRegular}>
114	{children}
115	</StyledLabel>
116	);
117	}
118	);
119
120	Label.displayName = 'Field.Label';	15✔
121
122	Label.propTypes = {	15✔
123	isRegular: PropTypes.bool
124	};

zendeskgarden / react-components / 11374286912

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