1.2.0

Author: unknown

README.txt

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

app/package.json

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

app/src/components/Carousel/Carousel.tsx

@@ -5,6 +5,7 @@ import MDBCarouselControl from './CarouselControl/CarouselControl';
 import MDBCarouselIndicatorItem from './CarouselIndicatorItem/CarouselIndicatorItem';
 import { CarouselContext } from './CarouselContext';
 const MDBCarousel: React.FC<CarouselProps> = ({
+  asyncData,
   fade,
   className,
   dark,
@@ -120,10 +121,14 @@ const MDBCarousel: React.FC<CarouselProps> = ({
   }, [activeInterval, setNext, startInterval]);
 
   useEffect(() => {
-    const carouselImgList = carouselReference.current.querySelectorAll('.carousel-item-react img');
+    if (asyncData) {
+      setImagesCount(asyncData.length - 1);
+    } else {
+      const carouselImgList = carouselReference.current.querySelectorAll('.carousel-item-react img');
 
-    setImagesCount(carouselImgList.length - 1);
-  }, [carouselReference, showIndicators]);
+      setImagesCount(carouselImgList.length - 1);
+    }
+  }, [carouselReference, showIndicators, asyncData]);
 
   const startTouch = (e: TouchEvent) => {
     touch && setClientTouch({ initialX: e.touches[0].clientX, initialY: e.touches[0].clientY });

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 declare const MDBCarousel: React.FunctionComponent<{
+  asyncData?: any;
   activeItem?: number;
   className?: string;
   fade?: boolean;

app/src/components/Carousel/types.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 type CarouselProps = {
+  asyncData?: any;
   activeItem?: number;
   className?: string;
   fade?: boolean;

app/src/navigation/Scrollspy/Scrollspy.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React, { useEffect, useCallback } from 'react';
 import type { ScrollspyProps } from './types';
 

app/src/navigation/Scrollspy/ScrollspyNavList/ScrollspyNavList.tsx

@@ -3,11 +3,21 @@ import React from 'react';
 import type { ScrollspyNavListProps } from './types';
 
 const MDBScrollspyNavList: React.FC<ScrollspyNavListProps> = React.forwardRef<HTMLAllCollection, ScrollspyNavListProps>(
-  ({ className, tag: Tag, children, ...props }, ref) => {
+  ({ className, collapsible, active, tag: Tag, children, ...props }, ref) => {
     const classes = clsx('nav', className);
 
     return (
-      <Tag className={classes} ref={ref} {...props}>
+      <Tag
+        className={classes}
+        ref={ref}
+        {...props}
+        style={{
+          overflow: collapsible && 'hidden',
+          height: collapsible && (active ? '46px' : '0px'),
+          transition: collapsible && 'height .5s ease',
+          flexWrap: collapsible && 'nowrap',
+        }}
+      >
         {children}
       </Tag>
     );

app/src/navigation/Scrollspy/ScrollspyNavlink/ScrollspyNavlink.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import type { ScrollspyNavLinkProps } from './types';
 
 const MDBScrollspyNavLink: React.FC<ScrollspyNavLinkProps> = React.forwardRef<HTMLAllCollection, ScrollspyNavLinkProps>(
-  ({ className, scrollElement, active, tag: Tag, children, ...props }, ref) => {
-    const classes = clsx('nav-link', className, active && 'active');
+  ({ className, collapsible, scrollElement, active, tag: Tag, children, ...props }, ref) => {
+    const classes = clsx('nav-link', collapsible && 'collapsible-scrollspy', className, active && 'active');
 
     const handleClick = (element: any) => {
       element.scrollIntoView({ behavior: 'smooth' });
@@ -16,7 +16,9 @@ const MDBScrollspyNavLink: React.FC<ScrollspyNavLinkProps> = React.forwardRef<HT
         ref={ref}
         {...props}
         onClick={() => handleClick(scrollElement)}
-        style={{ cursor: 'pointer' }}
+        style={{
+          cursor: 'pointer',
+        }}
       >
         {children}
       </Tag>

dist/index.d.ts

@@ -819,6 +819,7 @@ declare const MDBTabsPane: React$1.FunctionComponent<{
 }>;
 
 declare const MDBCarousel: React$1.FunctionComponent<{
+  asyncData?: any;
   activeItem?: number;
   className?: string;
   fade?: boolean;

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

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