1.0.0-beta7

Author: unknown

README.txt

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

app/package.json

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

app/src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import type { ButtonProps } from './types';
+import MDBRipple from '../../methods/Ripple/Ripple';
 
 const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, ButtonProps>(
  (
@@ -17,6 +18,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
  block,
  active,
  toggle,
+ noRipple,
  tag: Tag,
  ...props
  },
@@ -25,6 +27,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
  const [isActive, setActive] = useState(active ? active : false);
 
  let btnColor;
+ const waveColor = (color && ['light', 'link'].includes(color as string)) || outline ? 'dark' : 'light';
 
  if (color !== 'none') {
  if (outline) {
@@ -58,7 +61,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
  Tag = 'a';
  }
 
- return (
+ return ['hr', 'img', 'input'].includes(Tag) || noRipple ? (
  <Tag
  className={classes}
  onClick={
@@ -75,10 +78,29 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
  >
  {children}
  </Tag>
+ ) : (
+ <MDBRipple
+ rippleTag={Tag}
+ rippleColor={waveColor}
+ className={classes}
+ onClick={
+ toggle
+ ? () => {
+ setActive(!isActive);
+ }
+ : undefined
+ }
+ disabled={disabled && Tag === 'button' ? true : undefined}
+ href={href}
+ ref={ref}
+ {...props}
+ >
+ {children}
+ </MDBRipple>
  );
  }
 );
 
-MDBBtn.defaultProps = { tag: 'button', type: 'button', role: 'button' };
+MDBBtn.defaultProps = { tag: 'button', type: 'button', role: 'button', color: 'primary' };
 
 export default MDBBtn;

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

@@ -16,6 +16,7 @@ declare const MDBBtn: React.FunctionComponent<{
  toggle?: boolean;
  target?: string;
  value?: string | number;
+ noRipple?: boolean;
  tag?: React.ComponentProps<any>;
  [rest: string]: any;
 }>;

app/src/components/Button/types.tsx

@@ -14,6 +14,7 @@ type ButtonProps = {
  toggle?: boolean;
  target?: string;
  value?: string | number;
+ noRipple?: boolean;
  tag?: React.ComponentProps<any>;
  [rest: string]: any;
 };

app/src/components/Popover/Popover.tsx

@@ -120,7 +120,7 @@ const MDBPopover: React.FC<PopoverProps> = ({
 MDBPopover.defaultProps = {
  tag: MDBBtn,
  popperTag: 'div',
- placement: 'top',
+ placement: 'bottom',
 };
 
 export default MDBPopover;

app/src/methods/Ripple/Ripple.tsx

@@ -229,6 +229,6 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
  }
 );
 
-MDBRipple.defaultProps = { rippleTag: MDBBtn, rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
+MDBRipple.defaultProps = { rippleTag: 'div', rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
 
 export default MDBRipple;

dist/css/mdb.min.css

@@ -53,6 +53,7 @@ declare const MDBBtn: React$1.FunctionComponent<{
  toggle?: boolean;
  target?: string;
  value?: string | number;
+ noRipple?: boolean;
  tag?: React$1.ComponentProps<any>;
  [rest: string]: any;
 }>;