Generate version 2.2.0

Author: Krzysztof Wilk

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 2.1.0
+Version: FREE 2.2.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/demo/App.tsx

@@ -1,26 +1,35 @@
-import React from "react";
-import { MDBBtn, MDBContainer, MDBIcon } from "mdb-react-ui-kit";
-
+import React from 'react';
+import { MDBBtn, MDBContainer, MDBIcon } from 'mdb-react-ui-kit';
 function App() {
   return (
-    <MDBContainer>
-      <div style={{ height: '100vh' }} className='d-flex justify-content-center align-items-center'>
-        <div className="text-center">
-          <img className='mb-2' src='https://bf-sale.mdbgo.io/bf.png' width='800' height='450' />
-          <h2 className='fw-bold'>Black Friday Sale</h2>
+    <MDBContainer fluid>
+      <div
+        className='d-flex justify-content-center align-items-center'
+        style={{ height: '100vh' }}
+      >
+        <div className='text-center'>
+          <img
+            className='mb-4'
+            src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
+            style={{ width: 250, height: 90 }}
+          />
           <h5 className='mb-3'>
-            Get MDB Pro with discounts{" "}
-            <span className='text-danger'>up to 95%</span>
+            Thank you for using our product. We're glad you're with us.
           </h5>
-          <p className="mb-3 fw-bold">Hurry up the offer is limited!</p>
-          <a className='btn btn-black btn-lg mt-2' target='_blank' role='button' href="https://mdbootstrap.com/bf/sale/">
-            {" "}
-            <MDBIcon fas icon='shopping-cart' /> Get the offer
-          </a>
+          <p className='mb-3'>MDB Team</p>
+          <MDBBtn
+            tag='a'
+            href='https://mdbootstrap.com/docs/standard/getting-started/'
+            target='_blank'
+            role='button'
+          >
+            Start MDB tutorial
+          </MDBBtn>
+          <p className="mt-4"><a href="https://mdbootstrap.com/sale/free/"><MDBIcon far icon='surprise' size='lg' /> Free users
+            buy cheaper .. </a></p>
         </div>
       </div>
     </MDBContainer>
   );
 }
-
-export default App;
+export default App;

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "index.js",
   "repository": {
     "type": "git",

app/src/components/Collapse/Collapse.tsx

@@ -18,10 +18,11 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   const [showCollapseString, setShowCollapseString] = useState<string | undefined>('');
   const [statement, setStatement] = useState(false);
   const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
+  const [transition, setTransition] = useState(false);
+
   const classes = clsx(
-    'collapsing',
-    'collapse',
-    (showCollapse || statement) && 'show',
+    transition ? 'collapsing' : 'collapse',
+    !transition && (showCollapse || statement) && 'show',
     navbar && 'navbar-collapse',
     center && 'justify-content-center',
     className
@@ -49,17 +50,17 @@ const MDBCollapse: React.FC<CollapseProps> = ({
       setShowCollapse(show);
     }
 
-    // if (statement || showCollapse) {
-    //   setTransition(true);
-    // }
+    if (statement || showCollapse) {
+      setTransition(true);
+    }
 
-    // const timer = setTimeout(() => {
-    //   setTransition(false);
-    // }, 350);
+    const timer = setTimeout(() => {
+      setTransition(false);
+    }, 350);
 
-    // return () => {
-    //   clearTimeout(timer);
-    // };
+    return () => {
+      clearTimeout(timer);
+    };
   }, [show, showCollapse, id, showCollapseString, statement]);
 
   useEffect(() => {

app/src/components/Modal/index.d.ts

@@ -9,6 +9,7 @@ declare const MDBModal: React.FunctionComponent<{
   appendToBody?: boolean;
   tabIndex?: string;
   show?: boolean;
+  setShow?: React.SetStateAction<any>;
   staticBackdrop?: boolean;
   tag?: React.ComponentProps<any>;
   modalRef?: React.RefObject<HTMLElement>;

app/src/components/Modal/types.tsx

@@ -7,6 +7,7 @@ type ModalProps = {
   appendToBody?: boolean;
   tabIndex?: string;
   show?: boolean;
+  setShow?: React.SetStateAction<any>;
   staticBackdrop?: boolean;
   tag?: React.ComponentProps<any>;
   modalRef?: React.RefObject<HTMLElement>;

app/src/methods/Ripple/Ripple.tsx

@@ -4,7 +4,25 @@ import type { RippleProps } from './types';
 import MDBBtn from '../../components/Button/Button';
 import MDBRippleWave from './RippleWave/RippleWave';
 
-const MDBRipple: React.FC<RippleProps> = 
+const useCombinedRefs = (...refs: any) => {
+  const targetRef = React.useRef()
+
+  React.useEffect(() => {
+    refs.forEach((ref: any) => {
+      if (!ref) return
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current)
+      } else {
+        ref.current = targetRef.current
+      }
+    })
+  }, [refs])
+
+  return targetRef
+}
+
+const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, RippleProps>(
   (
     {
       className,
@@ -16,12 +34,13 @@ const MDBRipple: React.FC<RippleProps> =
       rippleColor,
       children,
       onClick,
-      rippleRef,
       ...props
-    }
+    },
+    ref
   ) => {
-    const rippleEl = useRef(null);
-    const rippleReference = rippleRef ? rippleRef : rippleEl;
+    const rippleRef = useRef(null);
+    const combinedRef = useCombinedRefs(ref, rippleRef);
+
     const GRADIENT =
       'rgba({{color}}, 0.2) 0, rgba({{color}}, 0.3) 40%, rgba({{color}}, 0.4) 50%, rgba({{color}}, 0.5) 60%, rgba({{color}}, 0) 70%';
 
@@ -161,7 +180,9 @@ const MDBRipple: React.FC<RippleProps> =
     };
 
     const getStyles = (e: any) => {
-      const itemRect = rippleReference.current.getBoundingClientRect();
+      // eslint-disable-next-line
+      // @ts-ignore
+      const itemRect = combinedRef.current?.getBoundingClientRect();
 
       const offsetX = e.clientX - itemRect.left;
       const offsetY = e.clientY - itemRect.top;
@@ -221,14 +242,15 @@ const MDBRipple: React.FC<RippleProps> =
     }, [rippleDuration, rippleStyles]);
 
     return (
-      <Tag className={classes} onClick={(e: any) => handleClick(e)} ref={rippleReference} {...props}>
+      <Tag className={classes} onClick={(e: any) => handleClick(e)} ref={combinedRef} {...props}>
         {children}
         {rippleStyles.map((item, i) => (
           <MDBRippleWave key={i} style={item}></MDBRippleWave>
         ))}
       </Tag>
     );
-  };
+  }
+);
 
 MDBRipple.defaultProps = { rippleTag: 'div', rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
 

dist/index.d.ts

@@ -646,6 +646,7 @@ declare const MDBModal: React$1.FunctionComponent<{
   appendToBody?: boolean;
   tabIndex?: string;
   show?: boolean;
+  setShow?: React$1.SetStateAction<any>;
   staticBackdrop?: boolean;
   tag?: React$1.ComponentProps<any>;
   modalRef?: React$1.RefObject<HTMLElement>;

dist/mdb-react-ui-kit.esm.js

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "./dist/mdb-react-ui-kit.js",
   "module": "./dist/mdb-react-ui-kit.esm.js",
   "types": "./dist/index.d.ts",