12246748306

Committed 10 Dec 2024 12:09AM UTC coverage: 81.078% (-7.9%) from 88.998%

Build # 12246748306

Build Type

Pull #1178

github

Committed by

fkhadra

Commit Message

chore: remove scss reference

Pull Request Pull Request #1178: [WIP] V11

Run Details

313 of 414 branches covered (75.6%)

Branch coverage included in aggregate %.

55 of 63 new or added lines in 14 files covered. (87.3%)

38 existing lines in 6 files now uncovered.

424 of 495 relevant lines covered (85.66%)

563.04 hits per line

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

73.44

/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 = {	86✔
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) {
27	let containerProps: ToastContainerProps = {	1,134✔
28	...defaultProps,
29	...props
30	};
31	const stacked = props.stacked;	1,134✔
32	const [collapsed, setIsCollapsed] = useState(true);	1,134✔
33	const containerRef = useRef<HTMLDivElement>(null);	1,134✔
34	const { getToastToRender, isToastActive, count } = useToastContainer(containerProps);	1,134✔
35	const { className, style, rtl, containerId } = containerProps;	1,134✔
36
37	function getClassName(position: ToastPosition) {
38	const defaultClassName = cx(	556✔
39	`${Default.CSS_NAMESPACE}__toast-container`,
40	`${Default.CSS_NAMESPACE}__toast-container--${position}`,
41	{ [`${Default.CSS_NAMESPACE}__toast-container--rtl`]: rtl }
42	);
43	return isFn(className)	556!
44	? className({
45	position,
46	rtl,
47	defaultClassName
48	})
49	: cx(defaultClassName, parseClassName(className));
50	}
51
52	function collapseAll() {
53	if (stacked) {	×
54	setIsCollapsed(true);	×
55	toast.play();	×
56	}
57	}
58
59	useIsomorphicLayoutEffect(() => {	1,134✔
60	if (stacked) {	988✔
61	const nodes = containerRef.current!.querySelectorAll('[data-in="true"]');	8✔
62	const gap = 12;	8✔
63	const isTop = containerProps.position?.includes('top');	8✔
64	let usedHeight = 0;	8✔
65	let prevS = 0;	8✔
66
67	Array.from(nodes)	8✔
68	.reverse()
69	.forEach((n, i) => {
70	const node = n as HTMLElement;	12✔
71	node.classList.add(`${Default.CSS_NAMESPACE}__toast--stacked`);	12✔
72
73	if (i > 0) node.dataset.collapsed = `${collapsed}`;	12✔
74
75	if (!node.dataset.pos) node.dataset.pos = isTop ? 'top' : 'bot';	12!
76
77	const y = usedHeight * (collapsed ? 0.2 : 1) + (collapsed ? 0 : gap * i);	12!
78
79	node.style.setProperty('--y', `${isTop ? y : y * -1}px`);	12!
80	node.style.setProperty('--g', `${gap}`);	12✔
81	node.style.setProperty('--s', `${1 - (collapsed ? prevS : 0)}`);	12!
82
83	usedHeight += node.offsetHeight;	12✔
84	prevS += 0.025;	12✔
85	});
86	}
87	}, [collapsed, count, stacked]);
88
89	return (	1,134✔
90	<div
91	ref={containerRef}
92	className={Default.CSS_NAMESPACE as string}
93	id={containerId as string}
94	onMouseEnter={() => {
UNCOV 95	if (stacked) {	×
96	setIsCollapsed(false);	×
97	toast.pause();	×
98	}
99	}}
100	onMouseLeave={collapseAll}
101	>
102	{getToastToRender((position, toastList) => {
103	const containerStyle: React.CSSProperties = !toastList.length	556!
104	? { ...style, pointerEvents: 'none' }
105	: { ...style };
106
107	return (	556✔
108	<div className={getClassName(position)} style={containerStyle} key={`container-${position}`}>
109	{toastList.map(({ content, props: toastProps }) => {
110	return (	782✔
111	<Toast
112	{...toastProps}
113	stacked={stacked}
114	collapseAll={collapseAll}
115	isIn={isToastActive(toastProps.toastId, toastProps.containerId)}
116	style={toastProps.style}
117	key={`toast-${toastProps.key}`}
118	>
119	{content}
120	</Toast>
121	);
122	})}
123	</div>
124	);
125	})}
126	</div>
127	);
128	}

fkhadra / react-toastify / 12246748306

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