5319029243

pending completion

Build # 5319029243

Build Type

Pull #4766

github

Committed by

web-flow

Commit Message

Merge 245793a0f into eba80f3be

Pull Request Pull Request #4766: chore(deps): update dependency @vitejs/plugin-react to v4.0.1

Run Details

2566 of 3540 branches covered (72.49%)

4880 of 5679 relevant lines covered (85.93%)

15353.58 hits per line

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

12.0

/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx

import { clsx } from 'clsx';
import type { CSSProperties, ReactElement } from 'react';
import React, { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
import { createUseStyles } from 'react-jss';
import { AvatarSize } from '../../enums/index.js';

const styles = {
  base: {
    alignSelf: 'center',
    opacity: 0,
    paddingInlineEnd: '1rem'
  },
  hidden: {
    opacity: 0
  },
  visible: {
    transition: 'opacity 0.5s',
    opacity: 1
  },
  imageContainer: {
    display: 'inline-block',
    verticalAlign: 'middle',
    maxHeight: '3rem',
    width: '3rem',
    maxWidth: '3rem'
  },
  image: {
    width: '100%',
    height: '100%'
  }
};

const useStyles = createUseStyles(styles, {
  name: 'CollapsedAvatar'
});

export interface CollapsedAvatarPropTypes {
  image?: string | ReactElement;
  imageShapeCircle?: boolean;
  style?: CSSProperties;
}

export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
  const { image, imageShapeCircle, style } = props;
  const classes = useStyles();
  const [isMounted, setIsMounted] = useState(false);
  const domRef = useRef(null);

  const avatarContent = useMemo(() => {
    if (!image) return null;

    if (typeof image === 'string') {
      return (
        <span
          className={classes.imageContainer}
          style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
        >
          <img className={classes.image} src={image} alt="Object Page Image" />
        </span>
      );
    } else {
      return cloneElement(image, {
        size: AvatarSize.S,
        className: image.props?.className
          ? `${classes.imageContainer} ${image.props?.className}`
          : classes.imageContainer
      } as unknown);
    }
  }, [image, imageShapeCircle]);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const containerClasses = clsx(classes.base, isMounted ? classes.visible : classes.hidden);

  return (
    <div ref={domRef} className={containerClasses} style={style} data-component-name="ObjectPageCollapsedAvatar">
      {avatarContent}
    </div>
  );
};

1	import { clsx } from 'clsx';
2	import type { CSSProperties, ReactElement } from 'react';
3	import React, { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
4	import { createUseStyles } from 'react-jss';
5	import { AvatarSize } from '../../enums/index.js';
6
7	const styles = {	48✔
8	base: {
9	alignSelf: 'center',
10	opacity: 0,
11	paddingInlineEnd: '1rem'
12	},
13	hidden: {
14	opacity: 0
15	},
16	visible: {
17	transition: 'opacity 0.5s',
18	opacity: 1
19	},
20	imageContainer: {
21	display: 'inline-block',
22	verticalAlign: 'middle',
23	maxHeight: '3rem',
24	width: '3rem',
25	maxWidth: '3rem'
26	},
27	image: {
28	width: '100%',
29	height: '100%'
30	}
31	};
32
33	const useStyles = createUseStyles(styles, {	48✔
34	name: 'CollapsedAvatar'
35	});
36
37	export interface CollapsedAvatarPropTypes {
38	image?: string \| ReactElement;
39	imageShapeCircle?: boolean;
40	style?: CSSProperties;
41	}
42
43	export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {	48✔
44	const { image, imageShapeCircle, style } = props;	×
45	const classes = useStyles();	×
46	const [isMounted, setIsMounted] = useState(false);	×
47	const domRef = useRef(null);	×
48
49	const avatarContent = useMemo(() => {	×
50	if (!image) return null;	×
51
52	if (typeof image === 'string') {	×
53	return (	×
54	<span
55	className={classes.imageContainer}
56	style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}	×
57	>
58	<img className={classes.image} src={image} alt="Object Page Image" />
59	</span>
60	);
61	} else {
62	return cloneElement(image, {	×
63	size: AvatarSize.S,
64	className: image.props?.className	×
65	? `${classes.imageContainer} ${image.props?.className}`
66	: classes.imageContainer
67	} as unknown);
68	}
69	}, [image, imageShapeCircle]);
70
71	useEffect(() => {	×
72	setIsMounted(true);	×
73	}, []);
74
75	const containerClasses = clsx(classes.base, isMounted ? classes.visible : classes.hidden);	×
76
77	return (	×
78	<div ref={domRef} className={containerClasses} style={style} data-component-name="ObjectPageCollapsedAvatar">
79	{avatarContent}
80	</div>
81	);
82	};

SAP / ui5-webcomponents-react / 5319029243

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