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

84.48

/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 {	118✔
40	Enter,	118✔
41	Exit	118✔
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,	172✔
62	collapseDuration = Default.COLLAPSE_DURATION	172✔
63	}: CSSTransitionProps) {
64	return function ToastTransition({	344✔
65	children,
66	position,
67	preventExitTransition,
68	done,
69	nodeRef,
70	isIn,
71	playToast
72	}: ToastTransitionProps) {
73	const enterClassName = appendPosition ? `${enter}--${position}` : enter;	2,220!
74	const exitClassName = appendPosition ? `${exit}--${position}` : exit;	2,220!
75	const animationStep = useRef(AnimationStep.Enter);	2,220✔
76
77	useLayoutEffect(() => {	2,220✔
78	const node = nodeRef.current!;	1,200✔
79	const classToToken = enterClassName.split(' ');	1,200✔
80
81	const onEntered = (e: AnimationEvent) => {	1,200✔
82	if (e.target !== nodeRef.current) return;	1,200✔
83
84	playToast();	666✔
85	node.removeEventListener('animationend', onEntered);	666✔
86	node.removeEventListener('animationcancel', onEntered);	666✔
87	if (animationStep.current === AnimationStep.Enter && e.type !== 'animationcancel') {	666✔
88	node.classList.remove(...classToToken);	650✔
89	}
90	};
91
92	const onEnter = () => {	1,200✔
93	node.classList.add(...classToToken);	1,200✔
94	node.addEventListener('animationend', onEntered);	1,200✔
95	node.addEventListener('animationcancel', onEntered);	1,200✔
96	};
97
98	onEnter();	1,200✔
99	}, []);
100
101	useEffect(() => {	2,220✔
102	const node = nodeRef.current!;	1,216✔
103
104	const onExited = () => {	1,216✔
UNCOV 105	node.removeEventListener('animationend', onExited);	×
UNCOV 106	collapse ? collapseToast(node, done, collapseDuration) : done();	×
107	};
108
109	const onExit = () => {	1,216✔
110	animationStep.current = AnimationStep.Exit;	16✔
111	node.className += ` ${exitClassName}`;	16✔
112	node.addEventListener('animationend', onExited);	16✔
113	};
114
115	if (!isIn) preventExitTransition ? onExited() : onExit();	1,216!
116	}, [isIn]);
117
118	return <>{children}</>;	2,220✔
119	};
120	}

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