12001201729

Committed 25 Nov 2024 12:54AM UTC coverage: 42.537% (-46.5%) from 88.998%

Build # 12001201729

Build Type

Pull #1178

github

Committed by

fkhadra

Commit Message

bump coverall action

Pull Request Pull Request #1178: [WIP] V11

Run Details

141 of 375 branches covered (37.6%)

Branch coverage included in aggregate %.

3 of 5 new or added lines in 3 files covered. (60.0%)

214 existing lines in 9 files now uncovered.

201 of 429 relevant lines covered (46.85%)

176.21 hits per line

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

1.56

/src/components/ToastContainer.tsx

import cx from 'clsx';
import React, { useRef, useState } from 'react';

import { toast } from '../core';
import { useToastContainer } from '../hooks/useToastContainer';
import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
import { ToastContainerProps, ToastPosition } from '../types';
import { Default, Direction, isFn, parseClassName } from '../utils';
import { Toast } from './Toast';
import { Bounce } from './Transitions';

export const defaultProps: ToastContainerProps = {
  position: 'top-right',
  transition: Bounce,
  autoClose: 5000,
  closeButton: true,
  pauseOnHover: true,
  pauseOnFocusLoss: true,
  draggable: 'touch',
  draggablePercent: Default.DRAGGABLE_PERCENT as number,
  draggableDirection: Direction.X,
  role: 'alert',
  theme: 'light'
};

export function ToastContainer(props: ToastContainerProps) {
  let containerProps: ToastContainerProps = {
    ...defaultProps,
    ...props
  };
  const stacked = props.stacked;
  const [collapsed, setIsCollapsed] = useState(true);
  const containerRef = useRef<HTMLDivElement>(null);
  const { getToastToRender, isToastActive, count } =
    useToastContainer(containerProps);
  const { className, style, rtl, containerId } = containerProps;

  function getClassName(position: ToastPosition) {
    const defaultClassName = cx(
      `${Default.CSS_NAMESPACE}__toast-container`,
      `${Default.CSS_NAMESPACE}__toast-container--${position}`,
      { [`${Default.CSS_NAMESPACE}__toast-container--rtl`]: rtl }
    );
    return isFn(className)
      ? className({
          position,
          rtl,
          defaultClassName
        })
      : cx(defaultClassName, parseClassName(className));
  }

  function collapseAll() {
    if (stacked) {
      setIsCollapsed(true);
      toast.play();
    }
  }

  useIsomorphicLayoutEffect(() => {
    if (stacked) {
      const nodes = containerRef.current!.querySelectorAll('[data-in="true"]');
      const gap = 12;
      const isTop = containerProps.position?.includes('top');
      let usedHeight = 0;
      let prevS = 0;

      Array.from(nodes)
        .reverse()
        .forEach((n, i) => {
          const node = n as HTMLElement;
          node.classList.add(`${Default.CSS_NAMESPACE}__toast--stacked`);

          if (i > 0) node.dataset.collapsed = `${collapsed}`;

          if (!node.dataset.pos) node.dataset.pos = isTop ? 'top' : 'bot';

          const y =
            usedHeight * (collapsed ? 0.2 : 1) + (collapsed ? 0 : gap * i);

          node.style.setProperty('--y', `${isTop ? y : y * -1}px`);
          node.style.setProperty('--g', `${gap}`);
          node.style.setProperty('--s', `${1 - (collapsed ? prevS : 0)}`);

          usedHeight += node.offsetHeight;
          prevS += 0.025;
        });
    }
  }, [collapsed, count, stacked]);

  return (
    <div
      ref={containerRef}
      className={Default.CSS_NAMESPACE as string}
      id={containerId as string}
      onMouseEnter={() => {
        if (stacked) {
          setIsCollapsed(false);
          toast.pause();
        }
      }}
      onMouseLeave={collapseAll}
    >
      {getToastToRender((position, toastList) => {
        const containerStyle: React.CSSProperties = !toastList.length
          ? { ...style, pointerEvents: 'none' }
          : { ...style };

        return (
          <div
            className={getClassName(position)}
            style={containerStyle}
            key={`container-${position}`}
          >
            {toastList.map(({ content, props: toastProps }) => {
              return (
                <Toast
                  {...toastProps}
                  stacked={stacked}
                  collapseAll={collapseAll}
                  isIn={isToastActive(
                    toastProps.toastId,
                    toastProps.containerId
                  )}
                  style={toastProps.style}
                  key={`toast-${toastProps.key}`}
                >
                  {content}
                </Toast>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

1	import cx from 'clsx';
2	import React, { useRef, useState } from 'react';
3
4	import { toast } from '../core';
5	import { useToastContainer } from '../hooks/useToastContainer';
6	import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
7	import { ToastContainerProps, ToastPosition } from '../types';
8	import { Default, Direction, isFn, parseClassName } from '../utils';
9	import { Toast } from './Toast';
10	import { Bounce } from './Transitions';
11
12	export const defaultProps: ToastContainerProps = {	46✔
13	position: 'top-right',
14	transition: Bounce,
15	autoClose: 5000,
16	closeButton: true,
17	pauseOnHover: true,
18	pauseOnFocusLoss: true,
19	draggable: 'touch',
20	draggablePercent: Default.DRAGGABLE_PERCENT as number,
21	draggableDirection: Direction.X,
22	role: 'alert',
23	theme: 'light'
24	};
25
26	export function ToastContainer(props: ToastContainerProps) {
UNCOV 27	let containerProps: ToastContainerProps = {	×
28	...defaultProps,
29	...props
30	};
UNCOV 31	const stacked = props.stacked;	×
UNCOV 32	const [collapsed, setIsCollapsed] = useState(true);	×
UNCOV 33	const containerRef = useRef<HTMLDivElement>(null);	×
34	const { getToastToRender, isToastActive, count } =
UNCOV 35	useToastContainer(containerProps);	×
UNCOV 36	const { className, style, rtl, containerId } = containerProps;	×
37
38	function getClassName(position: ToastPosition) {
UNCOV 39	const defaultClassName = cx(	×
40	`${Default.CSS_NAMESPACE}__toast-container`,
41	`${Default.CSS_NAMESPACE}__toast-container--${position}`,
42	{ [`${Default.CSS_NAMESPACE}__toast-container--rtl`]: rtl }
43	);
UNCOV 44	return isFn(className)	×
45	? className({
46	position,
47	rtl,
48	defaultClassName
49	})
50	: cx(defaultClassName, parseClassName(className));
51	}
52
53	function collapseAll() {
54	if (stacked) {	×
55	setIsCollapsed(true);	×
56	toast.play();	×
57	}
58	}
59
UNCOV 60	useIsomorphicLayoutEffect(() => {	×
UNCOV 61	if (stacked) {	×
UNCOV 62	const nodes = containerRef.current!.querySelectorAll('[data-in="true"]');	×
UNCOV 63	const gap = 12;	×
UNCOV 64	const isTop = containerProps.position?.includes('top');	×
UNCOV 65	let usedHeight = 0;	×
UNCOV 66	let prevS = 0;	×
67
UNCOV 68	Array.from(nodes)	×
69	.reverse()
70	.forEach((n, i) => {
UNCOV 71	const node = n as HTMLElement;	×
UNCOV 72	node.classList.add(`${Default.CSS_NAMESPACE}__toast--stacked`);	×
73
UNCOV 74	if (i > 0) node.dataset.collapsed = `${collapsed}`;	×
75
UNCOV 76	if (!node.dataset.pos) node.dataset.pos = isTop ? 'top' : 'bot';	×
77
78	const y =
UNCOV 79	usedHeight * (collapsed ? 0.2 : 1) + (collapsed ? 0 : gap * i);	×
80
UNCOV 81	node.style.setProperty('--y', `${isTop ? y : y * -1}px`);	×
UNCOV 82	node.style.setProperty('--g', `${gap}`);	×
UNCOV 83	node.style.setProperty('--s', `${1 - (collapsed ? prevS : 0)}`);	×
84
UNCOV 85	usedHeight += node.offsetHeight;	×
UNCOV 86	prevS += 0.025;	×
87	});
88	}
89	}, [collapsed, count, stacked]);
90
UNCOV 91	return (	×
92	<div
93	ref={containerRef}
94	className={Default.CSS_NAMESPACE as string}
95	id={containerId as string}
96	onMouseEnter={() => {
UNCOV 97	if (stacked) {	×
98	setIsCollapsed(false);	×
99	toast.pause();	×
100	}
101	}}
102	onMouseLeave={collapseAll}
103	>
104	{getToastToRender((position, toastList) => {
UNCOV 105	const containerStyle: React.CSSProperties = !toastList.length	×
106	? { ...style, pointerEvents: 'none' }
107	: { ...style };
108
UNCOV 109	return (	×
110	<div
111	className={getClassName(position)}
112	style={containerStyle}
113	key={`container-${position}`}
114	>
115	{toastList.map(({ content, props: toastProps }) => {
UNCOV 116	return (	×
117	<Toast
118	{...toastProps}
119	stacked={stacked}
120	collapseAll={collapseAll}
121	isIn={isToastActive(
122	toastProps.toastId,
123	toastProps.containerId
124	)}
125	style={toastProps.style}
126	key={`toast-${toastProps.key}`}
127	>
128	{content}
129	</Toast>
130	);
131	})}
132	</div>
133	);
134	})}
135	</div>
136	);
137	}

fkhadra / react-toastify / 12001201729

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