Generate version 2.1.0

Author: Krzysztof Wilk

README.txt

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

app/package.json

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

app/src/components/Collapse/Collapse.tsx

@@ -10,23 +10,24 @@ const MDBCollapse: React.FC<CollapseProps> = ({
   id,
   navbar,
   tag: Tag,
+  collapseRef,
   style,
   ...props
 }): JSX.Element => {
   const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
   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(
-    transition ? 'collapsing' : 'collapse',
-    !transition && (showCollapse || statement) && 'show',
+    'collapsing',
+    'collapse',
+    (showCollapse || statement) && 'show',
     navbar && 'navbar-collapse',
     center && 'justify-content-center',
     className
   );
-  const refCollapse = useRef<HTMLElement>(null);
+  const collapseEl = useRef<HTMLElement>(null);
+  const refCollapse = collapseRef ? collapseRef : collapseEl;
 
   const handleResize = useCallback(() => {
     if (showCollapse || statement) {
@@ -38,7 +39,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     if (collapseHeight === undefined && (showCollapse || statement)) {
       setCollapseHeight(refCollapse?.current?.scrollHeight);
     }
-  }, [collapseHeight, showCollapse, statement]);
+  }, [collapseHeight, showCollapse, statement, refCollapse]);
 
   useEffect(() => {
     if (typeof show === 'string') {
@@ -48,17 +49,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(() => {
@@ -67,7 +68,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
     } else {
       setCollapseHeight(0);
     }
-  }, [showCollapse, statement]);
+  }, [showCollapse, statement, refCollapse]);
 
   useEffect(() => {
     window.addEventListener('resize', handleResize);

app/src/forms/Input/Input.tsx

@@ -27,6 +27,7 @@ const MDBInput: React.FC<InputProps> = ({
   btnClasses,
   btnOnClick,
   btnRef,
+  type,
   onBlur,
   readonly,
   btn,
@@ -49,7 +50,13 @@ const MDBInput: React.FC<InputProps> = ({
   );
 
   const wrapperClasses = clsx('form-outline', contrast && 'form-white', wrapperClass);
-  const inputClasses = clsx('form-control', active && 'active', size && `form-control-${size}`, className);
+  const inputClasses = clsx(
+    'form-control',
+    active && 'active',
+    type === 'date' && 'active',
+    size && `form-control-${size}`,
+    className
+  );
   const labelClasses = clsx('form-label', labelClass);
   const validationClasses = clsx(
     validation &&
@@ -114,6 +121,7 @@ const MDBInput: React.FC<InputProps> = ({
         />
       ) : (
         <input
+          type={type}
           readOnly={readonly}
           className={inputClasses}
           onBlur={handleBlur}

app/src/layout/Column/Column.tsx

@@ -20,6 +20,7 @@ const MDBCol: React.FC<ColumnProps> = React.forwardRef<HTMLAllCollection, Column
       start,
       tag: Tag,
       xl,
+      xxl,
       xs,
       ...props
     },
@@ -32,7 +33,8 @@ const MDBCol: React.FC<ColumnProps> = React.forwardRef<HTMLAllCollection, Column
       md && `col-md-${md}`,
       lg && `col-lg-${lg}`,
       xl && `col-xl-${xl}`,
-      !size && !xs && !sm && !md && !lg && !xl ? 'col' : '',
+      xxl && `col-xxl-${xxl}`,
+      !size && !xs && !sm && !md && !lg && !xl && !xxl ? 'col' : '',
       order && `order-${order}`,
       start && 'align-self-start',
       center && 'align-self-center',

app/src/layout/Column/index.d.ts

@@ -15,6 +15,7 @@ declare const MDBCol: React.FunctionComponent<{
   start?: string | boolean;
   tag?: React.ElementType;
   xl?: string;
+  xxl?: string;
   xs?: string;
   [rest: string]: any;
 }>;

app/src/layout/Column/types.tsx

@@ -15,6 +15,7 @@ type ColumnProps = {
   start?: string | boolean;
   tag?: React.ComponentProps<any>;
   xl?: string;
+  xxl?: string;
   xs?: string;
   [rest: string]: any;
 };

app/src/methods/Ripple/Ripple.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import type { RippleProps } from './types';
 import MDBBtn from '../../components/Button/Button';
 import MDBRippleWave from './RippleWave/RippleWave';
 
-const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, RippleProps>(
+const MDBRipple: React.FC<RippleProps> = 
   (
     {
       className,
@@ -16,10 +16,12 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
       rippleColor,
       children,
       onClick,
+      rippleRef,
       ...props
-    },
-    ref
+    }
   ) => {
+    const rippleEl = useRef(null);
+    const rippleReference = rippleRef ? rippleRef : rippleEl;
     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%';
 
@@ -159,7 +161,7 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
     };
 
     const getStyles = (e: any) => {
-      const itemRect = e.target.getBoundingClientRect();
+      const itemRect = rippleReference.current.getBoundingClientRect();
 
       const offsetX = e.clientX - itemRect.left;
       const offsetY = e.clientY - itemRect.top;
@@ -219,15 +221,14 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
     }, [rippleDuration, rippleStyles]);
 
     return (
-      <Tag className={classes} onClick={(e: any) => handleClick(e)} ref={ref} {...props}>
+      <Tag className={classes} onClick={(e: any) => handleClick(e)} ref={rippleReference} {...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

@@ -23,6 +23,7 @@ declare const MDBCol: React$1.FunctionComponent<{
   start?: string | boolean;
   tag?: React$1.ElementType;
   xl?: string;
+  xxl?: string;
   xs?: string;
   [rest: string]: any;
 }>;