4.26.0

unknown · unknown · commit 301eda5e9e54 · 2021-08-31T17:02:18.000+02:00
diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ All fully responsive. All compatible with different browsers.
 
 # Version:
 
-- MDBReact 4.25.6
+- MDBReact 4.26.0
 - React 16.12.0
 
 # Quick start
diff --git a/README.txt b/README.txt
@@ -1,6 +1,6 @@
 Material Design for Bootstrap
 
-Version: MDB React Pro 4.25.6
+Version: MDB React Pro 4.26.0
 
 Documentation:
 https://mdbootstrap.com/docs/react/
diff --git a/dist/css/mdb.css b/dist/css/mdb.css
diff --git a/dist/mdbreact.esm.js b/dist/mdbreact.esm.js
diff --git a/dist/mdbreact.js b/dist/mdbreact.js
diff --git a/dist/scss/mdb-free.scss b/dist/scss/mdb-free.scss
@@ -40,7 +40,9 @@
 @import "free/treeview";
 // Free addons
 @import "addons/datatables";
+@import "addons/rating";
 @import "addons/datatables-select";
+@import "addons/rating";
 @import "addons/directives";
 @import "addons/hierarchical-display";
 @import "addons/flag";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdbreact",
-  "version": "4.25.6",
+  "version": "4.26.0",
   "author": "MDBootstrap",
   "repository": "https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design",
   "main": "dist/mdbreact.js",
diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
@@ -19,33 +19,29 @@ class Carousel extends Component {
   carouselRef = React.createRef();
 
   componentDidMount() {
-    const { interval, thumbnails } = this.props;
+    const { interval, thumbnails, length } = this.props;
     if (interval === false) {
       return;
     }
     this.cycleInterval = setInterval(this.next, interval);
 
     // get images src atr
     if (thumbnails) {
-      const CarouselItemsArray = this.carouselRef.current.querySelectorAll(
-        '.carousel-item img'
-      );
+      const CarouselItemsArray = this.carouselRef.current.querySelectorAll('.carousel-item img');
 
-      const srcArray = Array.prototype.map.call(
-        CarouselItemsArray,
-        item => item.src
-      );
+      const srcArray = Array.prototype.map.call(CarouselItemsArray, item => item.src);
       this.setState({ ...this.state, srcArray });
     }
+
+    this.setState({ initialLength: length });
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState) {
     const { length } = this.props;
-    const { InitialLength } = this.state;
-    if (InitialLength !== length) {
-      this.setState({
-        InitialLength: length
-      });
+    const initialLength = length;
+
+    if (prevState.initialLength !== length) {
+      this.setState({ initialLength });
     }
   }
 
@@ -246,9 +242,7 @@ class Carousel extends Component {
             />
           </>
         )}
-        {showIndicators && (
-          <CarouselIndicators>{CarouselIndicatorsArray}</CarouselIndicators>
-        )}
+        {showIndicators && <CarouselIndicators>{CarouselIndicatorsArray}</CarouselIndicators>}
       </Tag>
     );
   }
diff --git a/src/components/Dropdown/DropdownItem/DropdownItem.js b/src/components/Dropdown/DropdownItem/DropdownItem.js
@@ -33,16 +33,7 @@ class DropdownItem extends Component {
 
   render() {
     const tabIndex = this.getTabIndex();
-    let {
-      className,
-      divider,
-      tag: Tag,
-      header,
-      href,
-      active,
-      disabled,
-      ...props
-    } = omit(this.props, ['toggle']);
+    let { className, divider, tag: Tag, header, href, active, disabled, ...props } = omit(this.props, ['toggle']);
 
     const { toggle } = this.props;
 
@@ -67,8 +58,7 @@ class DropdownItem extends Component {
       }
     }
 
-    const type =
-      Tag === 'button' && (props.onClick || toggle) ? 'button' : undefined;
+    const type = Tag === 'button' && (props.onClick || toggle) ? 'button' : undefined;
 
     return (
       <Tag
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
@@ -37,6 +37,16 @@ class Input extends React.Component {
     return null;
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const { focused } = this.props;
+
+    if (prevProps.focused !== focused) {
+      this.setState({ isFocused: focused }, () => {
+        this.setFocus();
+      });
+    }
+  }
+
   onBlur = event => {
     event.stopPropagation();
     const { onBlur } = this.props;
@@ -122,6 +132,7 @@ class Input extends React.Component {
       validate,
       value,
       valueDefault,
+      iconStyle,
       ...attributes
     } = this.props;
 
@@ -189,6 +200,7 @@ class Input extends React.Component {
             onClick={onIconClick || this.setFocus}
             onMouseEnter={onIconMouseEnter}
             onMouseLeave={onIconMouseLeave}
+            style={iconStyle}
           />
         )}
         <TagInput
@@ -245,6 +257,7 @@ Input.propTypes = {
   iconLight: PropTypes.bool,
   iconRegular: PropTypes.bool,
   iconSize: PropTypes.string,
+  iconStyle: PropTypes.object,
   id: PropTypes.string,
   indeterminate: PropTypes.bool,
   inputRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
diff --git a/src/components/utils.js b/src/components/utils.js
@@ -1,3 +1,8 @@
+import moment from 'moment';
+// import variables from '../../dist/scss/core/_colors.scss';
+
+// const { danger, warning, success, primary, info, secondary, light, dark } = variables;
+
 export function getTetherAttachments(placement) {
   let attachments = {};
   switch (placement) {
@@ -130,31 +135,24 @@ export function isBodyOverflowing() {
 }
 
 export function getOriginalBodyPadding() {
-  return parseInt(
-    window
-    .getComputedStyle(document.body, null)
-    .getPropertyValue('padding-right') || 0,
-    10
-  );
+  return parseInt(window.getComputedStyle(document.body, null).getPropertyValue('padding-right') || 0, 10);
 }
 
 export function conditionallyUpdateScrollbar() {
   const scrollbarWidth = getScrollbarWidth();
   // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L420
-  const fixedContent = document.querySelectorAll(
-    '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
-  )[0];
-  const bodyPadding = fixedContent ?
-    parseInt(fixedContent.style.paddingRight || 0, 10) :
-    0;
+  const fixedContent = document.querySelectorAll('.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed')[0];
+  const bodyPadding = fixedContent ? parseInt(fixedContent.style.paddingRight || 0, 10) : 0;
 
   if (isBodyOverflowing()) {
     setScrollbarWidth(bodyPadding + scrollbarWidth);
   }
 }
 
 export function mapToCssModules(className, cssModule) {
-  if (!cssModule) {return className;}
+  if (!cssModule) {
+    return className;
+  }
   return className
     .split(' ')
     .map(c => cssModule[c] || c)
@@ -182,20 +180,31 @@ export const keyCodes = {
 };
 
 export const returnAttributes = attributes => {
-  const newAttributesObject = Object.keys(attributes).reduce(
-    (previousValue, currentElement) => {
-      if (attributes[currentElement])
-        {previousValue[currentElement] = attributes[currentElement];}
-      return previousValue;
-    }, {}
-  );
+  const newAttributesObject = Object.keys(attributes).reduce((previousValue, currentElement) => {
+    if (attributes[currentElement]) {
+      previousValue[currentElement] = attributes[currentElement];
+    }
+    return previousValue;
+  }, {});
 
   return newAttributesObject;
 };
 
 export const getColorClass = color => {
   const colorArray = color.split(' ');
-  const specialColors = ['danger', 'warning', 'success', 'info', 'default', 'primary', 'secondary', 'elegant', 'stylish', 'unique', 'special'];
+  const specialColors = [
+    'danger',
+    'warning',
+    'success',
+    'info',
+    'default',
+    'primary',
+    'secondary',
+    'elegant',
+    'stylish',
+    'unique',
+    'special'
+  ];
   let colorClasses = '';
 
   colorArray.forEach(color => {
@@ -212,7 +221,7 @@ export const getColorClass = color => {
   });
 
   return colorClasses;
-}
+};
 
 export function debounce(fn, time = 166) {
   let timeout;
@@ -232,3 +241,45 @@ export function debounce(fn, time = 166) {
 
   return debounced;
 }
+
+export const makeFirstLetterUpper = element => {
+  return element.charAt(0).toUpperCase() + element.slice(1);
+};
+
+export const makeRandomID = (id = '1') => {
+  return Array(id.length)
+    .fill(null)
+    .map(() =>
+      Math.random()
+        .toString(16)
+        .substr(2)
+    )
+    .join('');
+};
+
+const themeColors = {
+  danger: 'rgba(255, 53, 71)',
+  warning: 'rgba(255, 187, 51)',
+  success: 'rgba(0, 200, 81)',
+  primary: 'rgba(66, 133, 244)',
+  info: 'rgba(51, 181, 229)',
+  secondary: 'rgba(170, 102, 204)',
+  light: 'rgba(224, 224, 224)',
+  dark: 'rgba(33, 33, 33)'
+};
+
+const themeColorsOpacity = {
+  danger: 'rgba(255, 53, 71, .2)',
+  warning: 'rgba(255, 187, 51, .2)',
+  success: 'rgba(0, 200, 81, .2)',
+  primary: 'rgba(66, 133, 244, .2)',
+  info: 'rgba(51, 181, 229, .2)',
+  secondary: 'rgba(170, 102, 204, .2)',
+  light: 'rgba(224, 224, 224, 1) ',
+  dark: 'rgba(33, 33, 33, .2)'
+};
+
+export const takeThemeColor = theme => themeColors[theme];
+export const takeThemeColorOpacity = theme => themeColorsOpacity[theme];
+
+export const takeAcutalDate = date => moment(date || new Date());
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -86,6 +86,7 @@ import MDBWaves from './components/Waves';
 
 
 
+
  //! Free components
 import MDBBtn from './components/Button';
 import MDBInput from './components/Input';
diff --git a/src/index.js b/src/index.js
@@ -86,6 +86,7 @@ import Waves from './components/Waves';
 
 
 
+
  //! Free components
 import Button from './components/Button';
 import Input from './components/Input';

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mdbreact",`
`3`		`- "version": "4.25.6",`
	`3`	`+ "version": "4.26.0",`
`4`	`4`	`"author": "MDBootstrap",`
`5`	`5`	`"repository": "https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design",`
`6`	`6`	`"main": "dist/mdbreact.js",`