11074479132

Committed 27 Sep 2024 04:44PM UTC coverage: 44.982% (+26.5%) from 18.435%

Build # 11074479132

Build Type

Pull #479

github

Committed by

web-flow

Commit Message

Merge a0867d25a into 3d8b55818

Pull Request Pull Request #479: 3.0.0 Release

Run Details

1727 of 4418 branches covered (39.09%)

Branch coverage included in aggregate %.

2612 of 5228 relevant lines covered (49.96%)

128.96 hits per line

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

22.22

/src/components/Questionnaire/TransitionGroupWrapper.tsx

import { Collapse, Grid, styled } from "@mui/material";
import { TransitionGroup } from "react-transition-group";

const StyledGridWrapper = styled(Grid)(() => ({
  marginBottom: "24px",
}));

type WithKey = { key: string };

type Props<T extends WithKey> = {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
};

/**
 * Creates a TransitionGroup and adds a Collapse transition
 * when an item is added or removed.
 *
 * NOTE:
 * - This component was created to be directly used within
 *   the SectionGroup component.
 *
 * @param {Props} props
 * @returns {JSX.Element}
 */
const TransitionGroupWrapper = <T extends WithKey>({ items, renderItem }: Props<T>) => {
  if (!items?.length) {
    return null;
  }

  return (
    <StyledGridWrapper item xs={12}>
      <Grid container rowSpacing={1.5} columnSpacing={0}>
        <TransitionGroup component={null} style={{ width: "100%" }}>
          {items?.map((item: T, idx: number) => (
            <Grid key={item.key} item xs={12} component={Collapse}>
              {renderItem(item, idx)}
            </Grid>
          ))}
        </TransitionGroup>
      </Grid>
    </StyledGridWrapper>
  );
};

export default TransitionGroupWrapper;

1	import { Collapse, Grid, styled } from "@mui/material";
2	import { TransitionGroup } from "react-transition-group";
3
4	const StyledGridWrapper = styled(Grid)(() => ({	2✔
5	marginBottom: "24px",
6	}));
7
8	type WithKey = { key: string };
9
10	type Props<T extends WithKey> = {
11	items: T[];
12	renderItem: (item: T, index: number) => React.ReactNode;
13	};
14
15	/**
16	* Creates a TransitionGroup and adds a Collapse transition
17	* when an item is added or removed.
18	*
19	* NOTE:
20	* - This component was created to be directly used within
21	* the SectionGroup component.
22	*
23	* @param {Props} props
24	* @returns {JSX.Element}
25	*/
26	const TransitionGroupWrapper = <T extends WithKey>({ items, renderItem }: Props<T>) => {	2✔
27	if (!items?.length) {	×
28	return null;	×
29	}
30
31	return (	×
32	<StyledGridWrapper item xs={12}>
33	<Grid container rowSpacing={1.5} columnSpacing={0}>
34	<TransitionGroup component={null} style={{ width: "100%" }}>
35	{items?.map((item: T, idx: number) => (
36	<Grid key={item.key} item xs={12} component={Collapse}>	×
37	{renderItem(item, idx)}
38	</Grid>
39	))}
40	</TransitionGroup>
41	</Grid>
42	</StyledGridWrapper>
43	);
44	};
45
46	export default TransitionGroupWrapper;

CBIIT / crdc-datahub-ui / 11074479132

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