Skip to content

Commit 173315a

Browse files
mako3577mako3577
committed
release: 6.2.0
1 parent da743a6 commit 173315a

File tree

72 files changed

+1485
-1595
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+1485
-1595
lines changed

‎README.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 React
22

3-
Version: FREE 6.1.0
3+
Version: FREE 6.2.0
44

55
Documentation:
66
https://mdbootstrap.com/docs/b5/react/

‎app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-react-ui-kit-demo",
3-
"version": "6.1.0",
3+
"version": "6.2.0",
44
"main": "index.js",
55
"repository": {
66
"type": "git",

‎app/src/components/Accordion/Accordion.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import type { AccordionProps } from './types';
44
import { AccordionContext } from './AccordionContext';
55

66
const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollection, AccordionProps>(
7-
({ alwaysOpen, borderless, className, flush, initialActive, tag: Tag, children, onChange, ...props }, ref) => {
7+
(
8+
{ alwaysOpen, borderless, className, flush, initialActive = 0, tag: Tag = 'div', children, onChange, ...props },
9+
ref
10+
) => {
811
const classes = clsx('accordion', flush && 'accordion-flush', borderless && 'accordion-borderless', className);
912

1013
const [activeItem, setActiveItem] = useState(initialActive);
@@ -25,6 +28,4 @@ const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollectio
2528
}
2629
);
2730

28-
MDBAccordion.defaultProps = { tag: 'div', initialActive: 0 };
29-
3031
export default MDBAccordion;

‎app/src/components/Accordion/AccordionItem/AccordionItem.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
1515
headerTitle,
1616
headerStyle,
1717
btnClassName,
18-
tag: Tag,
18+
tag: Tag = 'div',
1919
children,
2020
...props
2121
},
@@ -62,6 +62,4 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
6262
}
6363
);
6464

65-
MDBAccordionItem.defaultProps = { tag: 'div' };
66-
6765
export default MDBAccordionItem;

‎app/src/components/Badge/Badge.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import type { BadgeProps } from './types';
44

55
const MDBBadge: React.FC<BadgeProps> = React.forwardRef<HTMLAllCollection, BadgeProps>(
6-
({ className, color, pill, light, dot, tag: Tag, children, notification, ...props }, ref) => {
6+
({ className, color = 'primary', pill, light, dot, tag: Tag = 'span', children, notification, ...props }, ref) => {
77
const classes = clsx(
88
'badge',
99
light ? color && `badge-${color}` : color && `bg-${color}`,
@@ -21,6 +21,4 @@ const MDBBadge: React.FC<BadgeProps> = React.forwardRef<HTMLAllCollection, Badge
2121
}
2222
);
2323

24-
MDBBadge.defaultProps = { tag: 'span', color: 'primary' };
25-
2624
export default MDBBadge;

‎app/src/components/Button/Button.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
77
(
88
{
99
className,
10-
color,
10+
color = 'primary',
1111
outline,
1212
children,
1313
rounded,
@@ -19,7 +19,8 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
1919
active,
2020
toggle,
2121
noRipple,
22-
tag: Tag,
22+
tag: Tag = 'button',
23+
role = 'button',
2324
...props
2425
},
2526
ref
@@ -74,6 +75,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
7475
disabled={disabled && Tag === 'button' ? true : undefined}
7576
href={href}
7677
ref={ref}
78+
role={role}
7779
{...props}
7880
>
7981
{children}
@@ -93,6 +95,7 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
9395
disabled={disabled && Tag === 'button' ? true : undefined}
9496
href={href}
9597
ref={ref}
98+
role={role}
9699
{...props}
97100
>
98101
{children}
@@ -101,6 +104,4 @@ const MDBBtn: React.FC<ButtonProps> = React.forwardRef<HTMLAllCollection, Button
101104
}
102105
);
103106

104-
MDBBtn.defaultProps = { tag: 'button', role: 'button', color: 'primary' };
105-
106107
export default MDBBtn;

‎app/src/components/ButtonGroup/ButtonGroup.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { ButtonGroupProps } from './types';
44

55
const MDBBtnGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLAllCollection, ButtonGroupProps>(
6-
({ className, children, shadow, toolbar, size, vertical, tag: Tag, ...props }, ref) => {
6+
({ className, children, shadow, toolbar, size, vertical, tag: Tag = 'div', role = 'group', ...props }, ref) => {
77
let type;
88

99
if (toolbar) {
@@ -16,13 +16,11 @@ const MDBBtnGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLAllCollecti
1616
const classes = clsx(type, shadow && `shadow-${shadow}`, size && `btn-group-${size}`, className);
1717

1818
return (
19-
<Tag className={classes} ref={ref} {...props}>
19+
<Tag className={classes} ref={ref} role={role} {...props}>
2020
{children}
2121
</Tag>
2222
);
2323
}
2424
);
2525

26-
MDBBtnGroup.defaultProps = { tag: 'div', role: 'group' };
27-
2826
export default MDBBtnGroup;

‎app/src/components/Card/Card.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardProps } from './types';
44

55
const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardProps>(
6-
({ className, children, border, background, tag: Tag, shadow, alignment, ...props }, ref) => {
6+
({ className, children, border, background, tag: Tag = 'div', shadow, alignment, ...props }, ref) => {
77
const classes = clsx(
88
'card',
99
border && `border border-${border}`,
@@ -21,6 +21,4 @@ const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardPro
2121
}
2222
);
2323

24-
MDBCard.defaultProps = { tag: 'div' };
25-
2624
export default MDBCard;

‎app/src/components/Card/CardBody/CardBody.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardBodyProps } from './types';
44

55
const MDBCardBody: React.FC<CardBodyProps> = React.forwardRef<HTMLAllCollection, CardBodyProps>(
6-
({ className, children, tag: Tag, ...props }, ref) => {
6+
({ className, children, tag: Tag = 'div', ...props }, ref) => {
77
const classes = clsx('card-body', className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardBody: React.FC<CardBodyProps> = React.forwardRef<HTMLAllCollection,
1414
}
1515
);
1616

17-
MDBCardBody.defaultProps = { tag: 'div' };
18-
1917
export default MDBCardBody;

‎app/src/components/Card/CardFooter/CardFooter.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardFooterProps } from './types';
44

55
const MDBCardFooter: React.FC<CardFooterProps> = React.forwardRef<HTMLAllCollection, CardFooterProps>(
6-
({ className, children, border, background, tag: Tag, ...props }, ref) => {
6+
({ className, children, border, background, tag: Tag = 'div', ...props }, ref) => {
77
const classes = clsx('card-footer', border && `border-${border}`, background && `bg-${background}`, className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardFooter: React.FC<CardFooterProps> = React.forwardRef<HTMLAllCollect
1414
}
1515
);
1616

17-
MDBCardFooter.defaultProps = { tag: 'div' };
18-
1917
export default MDBCardFooter;

‎app/src/components/Card/CardGroup/CardGroup.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardGroupProps } from './types';
44

55
const MDBCardGroup: React.FC<CardGroupProps> = React.forwardRef<HTMLAllCollection, CardGroupProps>(
6-
({ className, children, tag: Tag, ...props }, ref) => {
6+
({ className, children, tag: Tag = 'div', ...props }, ref) => {
77
const classes = clsx('card-group', className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardGroup: React.FC<CardGroupProps> = React.forwardRef<HTMLAllCollectio
1414
}
1515
);
1616

17-
MDBCardGroup.defaultProps = { tag: 'div' };
18-
1917
export default MDBCardGroup;

‎app/src/components/Card/CardHeader/CardHeader.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardHeaderProps } from './types';
44

55
const MDBCardHeader: React.FC<CardHeaderProps> = React.forwardRef<HTMLAllCollection, CardHeaderProps>(
6-
({ className, children, border, background, tag: Tag, ...props }, ref) => {
6+
({ className, children, border, background, tag: Tag = 'div', ...props }, ref) => {
77
const classes = clsx('card-header', border && `border-${border}`, background && `bg-${background}`, className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardHeader: React.FC<CardHeaderProps> = React.forwardRef<HTMLAllCollect
1414
}
1515
);
1616

17-
MDBCardHeader.defaultProps = { tag: 'div' };
18-
1917
export default MDBCardHeader;

‎app/src/components/Card/CardOverlay/CardOverlay.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardOverlayProps } from './types';
44

55
const MDBCardOverlay: React.FC<CardOverlayProps> = React.forwardRef<HTMLAllCollection, CardOverlayProps>(
6-
({ className, children, tag: Tag, ...props }, ref) => {
6+
({ className, children, tag: Tag = 'div', ...props }, ref) => {
77
const classes = clsx('card-img-overlay', className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardOverlay: React.FC<CardOverlayProps> = React.forwardRef<HTMLAllColle
1414
}
1515
);
1616

17-
MDBCardOverlay.defaultProps = { tag: 'div' };
18-
1917
export default MDBCardOverlay;

‎app/src/components/Card/CardSubTitle/CardSubTitle.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardSubTitleProps } from './types';
44

55
const MDBCardSubTitle: React.FC<CardSubTitleProps> = React.forwardRef<HTMLAllCollection, CardSubTitleProps>(
6-
({ className, children, tag: Tag, ...props }, ref) => {
6+
({ className, children, tag: Tag = 'p', ...props }, ref) => {
77
const classes = clsx('card-subtitle', className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardSubTitle: React.FC<CardSubTitleProps> = React.forwardRef<HTMLAllCol
1414
}
1515
);
1616

17-
MDBCardSubTitle.defaultProps = { tag: 'p' };
18-
1917
export default MDBCardSubTitle;

‎app/src/components/Card/CardText/CardText.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardTextProps } from './types';
44

55
const MDBCardText: React.FC<CardTextProps> = React.forwardRef<HTMLAllCollection, CardTextProps>(
6-
({ className, children, tag: Tag, ...props }, ref) => {
6+
({ className, children, tag: Tag = 'p', ...props }, ref) => {
77
const classes = clsx('card-text', className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardText: React.FC<CardTextProps> = React.forwardRef<HTMLAllCollection,
1414
}
1515
);
1616

17-
MDBCardText.defaultProps = { tag: 'p' };
18-
1917
export default MDBCardText;

‎app/src/components/Card/CardTitle/CardTitle.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import clsx from 'clsx';
33
import type { CardTitleProps } from './types';
44

55
const MDBCardTitle: React.FC<CardTitleProps> = React.forwardRef<HTMLAllCollection, CardTitleProps>(
6-
({ className, children, tag: Tag, ...props }, ref) => {
6+
({ className, children, tag: Tag = 'h5', ...props }, ref) => {
77
const classes = clsx('card-title', className);
88

99
return (
@@ -14,6 +14,4 @@ const MDBCardTitle: React.FC<CardTitleProps> = React.forwardRef<HTMLAllCollectio
1414
}
1515
);
1616

17-
MDBCardTitle.defaultProps = { tag: 'h5' };
18-
1917
export default MDBCardTitle;

‎app/src/components/Carousel/Carousel.tsx

+27-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import clsx from 'clsx';
2-
import React, { useCallback, useEffect, useRef, useState } from 'react';
2+
import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
33
import type { CarouselProps } from './types';
44

55
import CarouselIndicators from './CarouselIndicators/CarouselIndicators';
@@ -8,13 +8,14 @@ import { CarouselContext } from './utils/CarouselContext';
88
import { getCarouselItems, isVisible, queueCallback, reflow } from './utils/utils';
99

1010
const MDBCarousel: React.FC<CarouselProps> = ({
11-
fade,
11+
fade = false,
1212
className,
13+
carouselInnerClassName,
1314
dark,
1415
children,
15-
interval,
16-
keyboard,
17-
touch,
16+
interval = 5000,
17+
keyboard = false,
18+
touch = true,
1819
showControls,
1920
showIndicators,
2021
onSlide,
@@ -34,14 +35,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
3435
const carouselRef = useRef<HTMLDivElement>(null);
3536

3637
const classes = clsx('carousel', 'slide', fade && 'carousel-fade', dark && 'carousel-dark', className);
37-
38-
const pauseInterval = () => {
39-
if (carouselInterval.current) {
40-
clearInterval(carouselInterval.current);
41-
42-
carouselInterval.current = null;
43-
}
44-
};
38+
const carouselInnerClasses = clsx('carousel-inner', carouselInnerClassName);
4539

4640
const setElementActive = useCallback(
4741
(direction: string, newIndex?: number) => {
@@ -59,8 +53,17 @@ const MDBCarousel: React.FC<CarouselProps> = ({
5953
[active, itemsLength]
6054
);
6155

56+
const pauseInterval = useCallback(() => {
57+
if (carouselInterval.current) {
58+
clearInterval(carouselInterval.current);
59+
60+
carouselInterval.current = null;
61+
}
62+
}, []);
63+
6264
const slide = useCallback(
6365
(direction: string, nextElement: HTMLDivElement, index?: number) => {
66+
if (!items.current || items.current.length < 2) return;
6467
setIsTransitioning(true);
6568
const carouselElements = items.current as HTMLDivElement[];
6669
const activeElement = carouselElements[active];
@@ -114,7 +117,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
114117
}
115118
},
116119

117-
[carouselRef, active, setElementActive]
120+
[carouselRef, active, setElementActive, pauseInterval]
118121
);
119122

120123
const block = (timer: number) => {
@@ -194,14 +197,15 @@ const MDBCarousel: React.FC<CarouselProps> = ({
194197
}, [carouselRef, changeStep]);
195198

196199
const startInterval = useCallback(() => {
200+
const individualInterval = (children as ReactElement[])?.[active]?.props?.interval;
197201
if (carouselInterval.current) {
198202
clearInterval(carouselInterval.current);
199203

200204
carouselInterval.current = null;
201205
}
202206

203-
carouselInterval.current = setInterval(changeNext, interval);
204-
}, [changeNext, interval]);
207+
carouselInterval.current = setInterval(changeNext, individualInterval || interval);
208+
}, [changeNext, interval, children, active]);
205209

206210
const startTouch = (e: React.TouchEvent<HTMLDivElement>) => {
207211
if (!touch) return;
@@ -277,12 +281,16 @@ const MDBCarousel: React.FC<CarouselProps> = ({
277281
}, [carouselRef]);
278282

279283
useEffect(() => {
280-
onSlide?.();
284+
isTransitioning && onSlide?.();
281285
}, [isTransitioning, onSlide]);
282286

283287
useEffect(() => {
284288
startInterval();
285-
}, [startInterval]);
289+
290+
return () => {
291+
pauseInterval();
292+
};
293+
}, [startInterval, pauseInterval]);
286294

287295
return (
288296
<div
@@ -295,7 +303,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
295303
ref={carouselRef}
296304
{...props}
297305
>
298-
<div className='carousel-inner'>
306+
<div className={carouselInnerClasses}>
299307
<CarouselContext.Provider value={{ active }}>
300308
{showIndicators && <CarouselIndicators to={changeTo} imagesCount={itemsLength} />}
301309
{children}
@@ -306,6 +314,4 @@ const MDBCarousel: React.FC<CarouselProps> = ({
306314
);
307315
};
308316

309-
MDBCarousel.defaultProps = { fade: false, interval: 5000, touch: true, keyboard: false };
310-
311317
export default MDBCarousel;

0 commit comments

Comments
 (0)