12949049361

Committed 24 Jan 2025 11:49AM UTC coverage: 57.421% (+0.2%) from 57.197%

Build # 12949049361

Build Type

Pull #4070

github

Committed by

web-flow

Commit Message

Merge 0cd21609d into 91a1ab539

Pull Request Pull Request #4070: chore(eslint): upgrade to v9 and fix resulting lint errors / issues

Run Details

484 of 969 branches covered (49.95%)

Branch coverage included in aggregate %.

16 of 21 new or added lines in 14 files covered. (76.19%)

1 existing line in 1 file now uncovered.

1021 of 1652 relevant lines covered (61.8%)

11.24 hits per line

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

73.91

/src/Button/ToggleGroup/ToggleGroup.tsx

import './ToggleGroup.less';

import React, {
  isValidElement,
  MouseEvent,
  ReactElement
} from 'react';

import { CSS_PREFIX } from '../../constants';
import { ToggleButtonProps } from '../ToggleButton/ToggleButton';

export type ToggleGroupProps<T extends ToggleButtonProps = ToggleButtonProps> = {
  /**
   * The orientation of the children. Default is to 'vertical'.
   */
  orientation?: 'vertical' | 'horizontal';

  /**
   * The className which should be added.
   */
  className?: string;

  /**
   * The value fo the `value` attribute of the children to select/press
   * initially. If not given, no child is set as selected.
   * Note: This prop will have full control over the pressed prop on its children. Setting select/pressed on the
   * children props directly will have no effect.
   */
  selected?: string;

  /**
   * Callback function for onChange.
   */
  onChange?: (evt: MouseEvent<HTMLButtonElement>, value?: string) => void;

  /**
   * The children of this group. Typically, a set of `ToggleButton`s.
   */
  children?: ReactElement<T>[];
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;

export const ToggleGroupContext = React.createContext<boolean>(false);

export const ToggleGroup: React.FC<ToggleGroupProps> = ({
  orientation = 'vertical',
  className,
  selected,
  onChange = () => undefined,
  children,
  ...passThroughProps
}) => {

  const internalClassName = `${CSS_PREFIX}togglegroup`;

  const finalClassName = className
    ? `${className} ${internalClassName}`
    : internalClassName;

  const orientationClass = (orientation === 'vertical')
    ? 'vertical-toggle-group'
    : 'horizontal-toggle-group';

  const handleChange = (evt: MouseEvent<HTMLButtonElement>, buttonValue?: string) => {
    onChange(evt, selected === buttonValue ? undefined : buttonValue);
  };

  return (
    <div
      className={`${finalClassName} ${orientationClass}`}
      {...passThroughProps}
    >
      {
        children
          ?.map(child => {
            if (!isValidElement(child)) {
              return null;
            }

            return React.cloneElement<ToggleButtonProps>(child, {
              key: child.props.value,
              onChange: handleChange,
              pressed: selected === child.props.value
            });
          })
          .filter(child => child !== null)
      }
    </div>
  );
};

export default ToggleGroup;

1	import './ToggleGroup.less';
2
3	import React, {
4	isValidElement,
5	MouseEvent,
6	ReactElement
7	} from 'react';
8
9	import { CSS_PREFIX } from '../../constants';
10	import { ToggleButtonProps } from '../ToggleButton/ToggleButton';
11
12	export type ToggleGroupProps<T extends ToggleButtonProps = ToggleButtonProps> = {
13	/**
14	* The orientation of the children. Default is to 'vertical'.
15	*/
16	orientation?: 'vertical' \| 'horizontal';
17
18	/**
19	* The className which should be added.
20	*/
21	className?: string;
22
23	/**
24	* The value fo the `value` attribute of the children to select/press
25	* initially. If not given, no child is set as selected.
26	* Note: This prop will have full control over the pressed prop on its children. Setting select/pressed on the
27	* children props directly will have no effect.
28	*/
29	selected?: string;
30
31	/**
32	* Callback function for onChange.
33	*/
34	onChange?: (evt: MouseEvent<HTMLButtonElement>, value?: string) => void;
35
36	/**
37	* The children of this group. Typically, a set of `ToggleButton`s.
38	*/
39	children?: ReactElement<T>[];
40	} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
41
42	export const ToggleGroupContext = React.createContext<boolean>(false);	1✔
43
44	export const ToggleGroup: React.FC<ToggleGroupProps> = ({	1✔
45	orientation = 'vertical',	5✔
46	className,
47	selected,
NEW 48	onChange = () => undefined,	✔
49	children,
50	...passThroughProps
51	}) => {
52
53	const internalClassName = `${CSS_PREFIX}togglegroup`;	7✔
54
55	const finalClassName = className	7!
56	? `${className} ${internalClassName}`
57	: internalClassName;
58
59	const orientationClass = (orientation === 'vertical')	7!
60	? 'vertical-toggle-group'
61	: 'horizontal-toggle-group';
62
63	const handleChange = (evt: MouseEvent<HTMLButtonElement>, buttonValue?: string) => {	7✔
64	onChange(evt, selected === buttonValue ? undefined : buttonValue);	1!
65	};
66
67	return (	7✔
68	<div
69	className={`${finalClassName} ${orientationClass}`}
70	{...passThroughProps}
71	>
72	{
73	children
74	?.map(child => {
75	if (!isValidElement(child)) {	18!
76	return null;	×
77	}
78
79	return React.cloneElement<ToggleButtonProps>(child, {	18✔
80	key: child.props.value,
81	onChange: handleChange,
82	pressed: selected === child.props.value
83	});
84	})
85	.filter(child => child !== null)	18✔
86	}
87	</div>
88	);
89	};
90
91	export default ToggleGroup;

terrestris / react-geo / 12949049361

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