Merge d1a0e2f into eac7f7b

fkhadra · Jan 8, 2021 · 4e94644 · 4e94644
2 parents eac7f7b + d1a0e2f
commit 4e94644
Show file tree

Hide file tree

Showing 25 changed files with 1,469 additions and 1,095 deletions.
diff --git a/package.json b/package.json
@@ -31,10 +31,12 @@
     "sass-minimal": "sass scss/minimal.scss dist/ReactToastify.minimal.css",
     "postsass": "postcss dist/ReactToastify.css --use autoprefixer -m -o dist/ReactToastify.css",
     "postsass-minimal": "cssnano dist/ReactToastify.minimal.css dist/ReactToastify.minimal.css --no-zindex --no-reduceIdents",
-    "style": "npm run sass && npm run sass-minimal && cssnano dist/ReactToastify.css dist/ReactToastify.min.css --no-zindex --no-reduceIdents"
+    "style": "npm run sass && npm run sass-minimal && cssnano dist/ReactToastify.css dist/ReactToastify.min.css --no-zindex --no-reduceIdents && npm run style-injector",
+    "style-injector": "style2js --out-dir dist dist/ReactToastify.min.css"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "husky": {
     "hooks": {
@@ -48,7 +50,7 @@
   },
   "eslint": {
     "rules": {
-      "react-hooks/exhaustive-deps": "off"
+      "react-hooks/exhaustive-deps": "warn"
     }
   },
   "jest": {
@@ -77,23 +79,21 @@
     "@types/jest": "^24.9.0",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
-    "@types/react-transition-group": "^4.2.4",
     "coveralls": "^3.0.9",
     "cssnano": "^4.1.10",
     "cssnano-cli": "^1.0.5",
     "husky": "^4.2.0",
     "postcss": "^7.0.27",
     "postcss-cli": "^7.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "sass": "^1.26.0",
+    "style2js": "^1.0.0",
     "tsdx": "^0.12.3",
     "tslib": "^1.10.0",
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "clsx": "^1.1.1",
-    "prop-types": "^15.7.2",
-    "react-transition-group": "^4.4.1"
+    "clsx": "^1.1.1"
   }
-}
+}
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -82,7 +82,7 @@ export function ProgressBar({
   };
 
   if (controlledProgress) style.transform = `scaleX(${progress})`;
-  const defaultClassArr = [
+  const defaultClassName = cx(
     `${DEFAULT.CSS_NAMESPACE}__progress-bar`,
     controlledProgress
       ? `${DEFAULT.CSS_NAMESPACE}__progress-bar--controlled`
@@ -91,14 +91,14 @@ export function ProgressBar({
     {
       [`${DEFAULT.CSS_NAMESPACE}__progress-bar--rtl`]: rtl
     }
-  ];
+  );
   const classNames = isFn(className)
     ? className({
         rtl,
         type,
-        defaultClassName: cx(...defaultClassArr)
+        defaultClassName
       })
-    : cx(...[...defaultClassArr, className]);
+    : cx(defaultClassName, className);
 
   // 🧐 controlledProgress is derived from progress
   // so if controlledProgress is set
@@ -114,7 +114,16 @@ export function ProgressBar({
           }
   };
 
-  return <div className={classNames} style={style} {...animationEvent} />;
+  // TODO: add aria-valuenow, aria-valuemax, aria-valuemin
+
+  return (
+    <div
+      role="progressbar"
+      className={classNames}
+      style={style}
+      {...animationEvent}
+    />
+  );
 }
 
 ProgressBar.defaultProps = {

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -34,38 +34,40 @@ export const Toast: React.FC<ToastProps> = props => {
     progress,
     rtl,
     toastId,
-    deleteToast
+    deleteToast,
+    isIn
   } = props;
-  const defaultClassArr = [
+  const defaultClassName = cx(
     `${DEFAULT.CSS_NAMESPACE}__toast`,
     `${DEFAULT.CSS_NAMESPACE}__toast--${type}`,
     {
       [`${DEFAULT.CSS_NAMESPACE}__toast--rtl`]: rtl
     }
-  ];
+  );
   const cssClasses = isFn(className)
     ? className({
         rtl,
         position,
         type,
-        defaultClassName: cx(...defaultClassArr)
+        defaultClassName
       })
-    : cx(...[...defaultClassArr, className]);
-  const controlledProgress = !!progress;
+    : cx(defaultClassName, className);
+  const isProgressControlled = !!progress;
 
   function renderCloseButton(closeButton: any) {
     if (!closeButton) return;
 
     const props = { closeToast, type };
+
     if (isFn(closeButton)) return closeButton(props);
+
     if (React.isValidElement(closeButton))
       return React.cloneElement(closeButton, props);
   }
 
   return (
     <Transition
-      in={props.in!}
-      appear
+      isIn={isIn}
       done={deleteToast}
       position={position}
       preventExitTransition={preventExitTransition}
@@ -74,13 +76,13 @@ export const Toast: React.FC<ToastProps> = props => {
       <div
         id={toastId as string}
         onClick={onClick}
-        className={cssClasses || undefined}
+        className={cssClasses}
         {...eventHandlers}
         style={style}
         ref={toastRef}
       >
         <div
-          {...(props.in && { role: role })}
+          {...(isIn && { role: role })}
           className={
             isFn(bodyClassName)
               ? bodyClassName({ type })
@@ -91,21 +93,21 @@ export const Toast: React.FC<ToastProps> = props => {
           {children}
         </div>
         {renderCloseButton(closeButton)}
-        {(autoClose || controlledProgress) && (
+        {(autoClose || isProgressControlled) && (
           <ProgressBar
-            {...(updateId && !controlledProgress
+            {...(updateId && !isProgressControlled
               ? { key: `pb-${updateId}` }
               : {})}
             rtl={rtl}
             delay={autoClose as number}
             isRunning={isRunning}
-            isIn={props.in}
+            isIn={isIn}
             closeToast={closeToast}
             hide={hideProgressBar}
             type={type}
             style={progressStyle}
             className={progressClassName}
-            controlledProgress={controlledProgress}
+            controlledProgress={isProgressControlled}
             progress={progress}
           />
         )}

diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
@@ -1,63 +1,57 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'clsx';
 
 import { Toast } from './Toast';
 import { CloseButton } from './CloseButton';
 import { Bounce } from './Transitions';
-import {
-  POSITION,
-  DEFAULT,
-  parseClassName,
-  objectValues,
-  isFn
-} from '../utils';
+import { POSITION, DIRECTION, DEFAULT, parseClassName, isFn } from '../utils';
 import { useToastContainer } from '../hooks';
 import { ToastContainerProps, ToastPosition } from '../types';
-import { ToastPositioner } from './ToastPositioner';
 
 export const ToastContainer: React.FC<ToastContainerProps> = props => {
   const { getToastToRender, containerRef, isToastActive } = useToastContainer(
     props
   );
   const { className, style, rtl, containerId } = props;
 
+  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));
+  }
+
   return (
     <div
       ref={containerRef}
       className={DEFAULT.CSS_NAMESPACE as string}
       id={containerId as string}
     >
       {getToastToRender((position, toastList) => {
-        const swag = {
-          className: isFn(className)
-            ? className({
-                position,
-                rtl,
-                defaultClassName: cx(
-                  `${DEFAULT.CSS_NAMESPACE}__toast-container`,
-                  `${DEFAULT.CSS_NAMESPACE}__toast-container--${position}`,
-                  { [`${DEFAULT.CSS_NAMESPACE}__toast-container--rtl`]: rtl }
-                )
-              })
-            : cx(
-                `${DEFAULT.CSS_NAMESPACE}__toast-container`,
-                `${DEFAULT.CSS_NAMESPACE}__toast-container--${position}`,
-                { [`${DEFAULT.CSS_NAMESPACE}__toast-container--rtl`]: rtl },
-                parseClassName(className)
-              ),
-          style:
-            toastList.length === 0
-              ? { ...style, pointerEvents: 'none' }
-              : { ...style }
-        } as any;
+        const containerStyle: React.CSSProperties =
+          toastList.length === 0
+            ? { ...style, pointerEvents: 'none' }
+            : { ...style };
+
         return (
-          <ToastPositioner {...swag} key={`container-${position}`}>
+          <div
+            className={getClassName(position)}
+            style={containerStyle}
+            key={`container-${position}`}
+          >
             {toastList.map(({ content, props: toastProps }) => {
               return (
                 <Toast
                   {...toastProps}
-                  in={isToastActive(toastProps.toastId)}
+                  isIn={isToastActive(toastProps.toastId)}
                   key={`toast-${toastProps.key}`}
                   closeButton={
                     toastProps.closeButton === true
@@ -69,50 +63,13 @@ export const ToastContainer: React.FC<ToastContainerProps> = props => {
                 </Toast>
               );
             })}
-          </ToastPositioner>
+          </div>
         );
       })}
     </div>
   );
 };
 
-if (process.env.NODE_ENV !== 'production') {
-  // @ts-ignore
-  ToastContainer.propTypes = {
-    // @ts-ignore
-    position: PropTypes.oneOf(objectValues(POSITION)),
-
-    // @ts-ignore
-    autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-
-    // @ts-ignore
-    closeButton: PropTypes.oneOfType([
-      PropTypes.node,
-      PropTypes.bool,
-      PropTypes.func
-    ]),
-    hideProgressBar: PropTypes.bool,
-    pauseOnHover: PropTypes.bool,
-    closeOnClick: PropTypes.bool,
-    newestOnTop: PropTypes.bool,
-    className: PropTypes.any, //oneOfType([PropTypes.func, PropTypes.string]),
-    style: PropTypes.object,
-    toastClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    bodyClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    progressClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    progressStyle: PropTypes.object,
-    transition: PropTypes.func,
-    rtl: PropTypes.bool,
-    draggable: PropTypes.bool,
-    draggablePercent: PropTypes.number,
-    pauseOnFocusLoss: PropTypes.bool,
-    enableMultiContainer: PropTypes.bool,
-    containerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    role: PropTypes.string,
-    onClick: PropTypes.func
-  };
-}
-
 ToastContainer.defaultProps = {
   position: POSITION.TOP_RIGHT as ToastPosition,
   transition: Bounce,
@@ -126,5 +83,6 @@ ToastContainer.defaultProps = {
   newestOnTop: false,
   draggable: true,
   draggablePercent: 80,
+  draggableDirection: DIRECTION.X,
   role: 'alert'
 };
diff --git a/src/components/ToastPositioner.tsx b/src/components/ToastPositioner.tsx
diff --git a/src/core/toast.tsx b/src/core/toast.tsx
@@ -57,7 +57,9 @@ function getToast(toastId: Id, { containerId }: ToastOptions) {
  * Generate a random toastId
  */
 function generateToastId() {
-  return (Math.random().toString(36) + Date.now().toString(36)).substr(2, 10);
+  return Math.random()
+    .toString(36)
+    .substr(2, 9);
 }
 
 /**