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

74.14

/src/utils/cssTransition.tsx

import React, { useEffect, useLayoutEffect, useRef } from 'react';
import { collapseToast } from './collapseToast';
import { Default } from './constant';

import { ToastTransitionProps } from '../types';

export interface CSSTransitionProps {
  /**
   * Css class to apply when toast enter
   */
  enter: string;

  /**
   * Css class to apply when toast leave
   */
  exit: string;

  /**
   * Append current toast position to the classname.
   * If multiple classes are provided, only the last one will get the position
   * For instance `myclass--top-center`...
   * `Default: false`
   */
  appendPosition?: boolean;

  /**
   * Collapse toast smoothly when exit animation end
   * `Default: true`
   */
  collapse?: boolean;

  /**
   * Collapse transition duration
   * `Default: 300`
   */
  collapseDuration?: number;
}

const enum AnimationStep {
  Enter,
  Exit
}

/**
 * Css animation that just work.
 * You could use animate.css for instance
 *
 *
 * ```
 * cssTransition({
 *   enter: "animate__animated animate__bounceIn",
 *   exit: "animate__animated animate__bounceOut"
 * })
 * ```
 *
 */
export function cssTransition({
  enter,
  exit,
  appendPosition = false,
  collapse = true,
  collapseDuration = Default.COLLAPSE_DURATION
}: CSSTransitionProps) {
  return function ToastTransition({
    children,
    position,
    preventExitTransition,
    done,
    nodeRef,
    isIn,
    playToast
  }: ToastTransitionProps) {
    const enterClassName = appendPosition ? `${enter}--${position}` : enter;
    const exitClassName = appendPosition ? `${exit}--${position}` : exit;
    const animationStep = useRef(AnimationStep.Enter);

    useLayoutEffect(() => {
      const node = nodeRef.current!;
      const classToToken = enterClassName.split(' ');

      const onEntered = (e: AnimationEvent) => {
        if (e.target !== nodeRef.current) return;

        playToast();
        node.removeEventListener('animationend', onEntered);
        node.removeEventListener('animationcancel', onEntered);
        if (
          animationStep.current === AnimationStep.Enter &&
          e.type !== 'animationcancel'
        ) {
          node.classList.remove(...classToToken);
        }
      };

      const onEnter = () => {
        node.classList.add(...classToToken);
        node.addEventListener('animationend', onEntered);
        node.addEventListener('animationcancel', onEntered);
      };

      onEnter();
    }, []);

    useEffect(() => {
      const node = nodeRef.current!;

      const onExited = () => {
        node.removeEventListener('animationend', onExited);
        collapse ? collapseToast(node, done, collapseDuration) : done();
      };

      const onExit = () => {
        animationStep.current = AnimationStep.Exit;
        node.className += ` ${exitClassName}`;
        node.addEventListener('animationend', onExited);
      };

      if (!isIn) preventExitTransition ? onExited() : onExit();
    }, [isIn]);

    return <>{children}</>;
  };
}

1	import React, { useEffect, useLayoutEffect, useRef } from 'react';
2	import { collapseToast } from './collapseToast';
3	import { Default } from './constant';
4
5	import { ToastTransitionProps } from '../types';
6
7	export interface CSSTransitionProps {
8	/**
9	* Css class to apply when toast enter
10	*/
11	enter: string;
12
13	/**
14	* Css class to apply when toast leave
15	*/
16	exit: string;
17
18	/**
19	* Append current toast position to the classname.
20	* If multiple classes are provided, only the last one will get the position
21	* For instance `myclass--top-center`...
22	* `Default: false`
23	*/
24	appendPosition?: boolean;
25
26	/**
27	* Collapse toast smoothly when exit animation end
28	* `Default: true`
29	*/
30	collapse?: boolean;
31
32	/**
33	* Collapse transition duration
34	* `Default: 300`
35	*/
36	collapseDuration?: number;
37	}
38
39	const enum AnimationStep {	78✔
40	Enter,	78✔
41	Exit	78✔
42	}
43
44	/**
45	* Css animation that just work.
46	* You could use animate.css for instance
47	*
48	*
49	* ```
50	* cssTransition({
51	* enter: "animate__animated animate__bounceIn",
52	* exit: "animate__animated animate__bounceOut"
53	* })
54	* ```
55	*
56	*/
57	export function cssTransition({
58	enter,
59	exit,
60	appendPosition = false,	×
61	collapse = true,	92✔
62	collapseDuration = Default.COLLAPSE_DURATION	92✔
63	}: CSSTransitionProps) {
64	return function ToastTransition({	184✔
65	children,
66	position,
67	preventExitTransition,
68	done,
69	nodeRef,
70	isIn,
71	playToast
72	}: ToastTransitionProps) {
73	const enterClassName = appendPosition ? `${enter}--${position}` : enter;	1,006!
74	const exitClassName = appendPosition ? `${exit}--${position}` : exit;	1,006!
75	const animationStep = useRef(AnimationStep.Enter);	1,006✔
76
77	useLayoutEffect(() => {	1,006✔
78	const node = nodeRef.current!;	564✔
79	const classToToken = enterClassName.split(' ');	564✔
80
81	const onEntered = (e: AnimationEvent) => {	564✔
82	if (e.target !== nodeRef.current) return;	370✔
83
84	playToast();	262✔
85	node.removeEventListener('animationend', onEntered);	262✔
86	node.removeEventListener('animationcancel', onEntered);	262✔
87	if (	262✔
88	animationStep.current === AnimationStep.Enter &&	262✔
89	e.type !== 'animationcancel'
90	) {
91	node.classList.remove(...classToToken);	262✔
92	}
93	};
94
95	const onEnter = () => {	564✔
96	node.classList.add(...classToToken);	564✔
97	node.addEventListener('animationend', onEntered);	564✔
98	node.addEventListener('animationcancel', onEntered);	564✔
99	};
100
101	onEnter();	564✔
102	}, []);
103
104	useEffect(() => {	1,006✔
105	const node = nodeRef.current!;	564✔
106
107	const onExited = () => {	564✔
UNCOV 108	node.removeEventListener('animationend', onExited);	×
UNCOV 109	collapse ? collapseToast(node, done, collapseDuration) : done();	×
110	};
111
112	const onExit = () => {	564✔
UNCOV 113	animationStep.current = AnimationStep.Exit;	×
UNCOV 114	node.className += ` ${exitClassName}`;	×
UNCOV 115	node.addEventListener('animationend', onExited);	×
116	};
117
118	if (!isIn) preventExitTransition ? onExited() : onExit();	564!
119	}, [isIn]);
120
121	return <>{children}</>;	1,006✔
122	};
123	}

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