Skip to content

Commit 71be472

Browse files
author
Krzysztof Wilk
committed
Generate v. 4.0.0
1 parent 0508ac6 commit 71be472

File tree

122 files changed

+989
-1012
lines changed

Some content is hidden

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

122 files changed

+989
-1012
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 3.0.0
3+
Version: FREE 4.0.0
44

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

‎app/demo/App.tsx

+20-16
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
1-
import React from 'react';
2-
import { MDBBtn, MDBContainer, MDBIcon } from 'mdb-react-ui-kit';
1+
import React from "react";
2+
import { MDBBtn, MDBContainer, MDBIcon } from "mdb-react-ui-kit";
33
function App() {
44
return (
55
<MDBContainer fluid>
66
<div
7-
className='d-flex justify-content-center align-items-center'
8-
style={{ height: '100vh' }}
7+
className="d-flex justify-content-center align-items-center"
8+
style={{ height: "100vh" }}
99
>
10-
<div className='text-center'>
10+
<div className="text-center">
1111
<img
12-
className='mb-4'
13-
src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
12+
className="mb-4"
13+
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
1414
style={{ width: 250, height: 90 }}
1515
/>
16-
<h5 className='mb-3'>
16+
<h5 className="mb-3">
1717
Thank you for using our product. We're glad you're with us.
1818
</h5>
19-
<p className='mb-3'>MDB Team</p>
19+
<p className="mb-3">MDB Team</p>
2020
<MDBBtn
21-
tag='a'
22-
href='https://mdbootstrap.com/docs/standard/getting-started/'
23-
target='_blank'
24-
role='button'
21+
tag="a"
22+
href="https://mdbootstrap.com/docs/standard/getting-started/"
23+
target="_blank"
24+
role="button"
2525
>
2626
Start MDB tutorial
2727
</MDBBtn>
28-
<p className="mt-4"><a href="https://mdbootstrap.com/sale/free/"><MDBIcon far icon='surprise' size='lg' /> Free users
29-
buy cheaper .. </a></p>
28+
<p className="mt-4">
29+
<a href="https://mdbootstrap.com/sale/free/">
30+
<MDBIcon far icon="surprise" size="lg" /> Free users buy cheaper
31+
..{" "}
32+
</a>
33+
</p>
3034
</div>
3135
</div>
3236
</MDBContainer>
3337
);
3438
}
35-
export default App;
39+
export default App;

‎app/demo/index.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import '../../dist/css/mdb.min.css';
44
import App from './App';
55

6-
ReactDOM.render(
6+
const container = document.getElementById("root");
7+
const root = createRoot(container!);
8+
9+
root.render(
710
<React.StrictMode>
811
<App />
9-
</React.StrictMode>,
10-
document.getElementById('root')
12+
</React.StrictMode>
1113
);

‎app/package.json

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
{
22
"name": "mdb-react-ui-kit-demo",
3-
"version": "3.0.0",
3+
"version": "4.0.0",
44
"main": "index.js",
55
"repository": {
66
"type": "git",
77
"url": "git+https://github.com/mdbootstrap/mdb-react-ui-kit.git"
88
},
99
"scripts": {
10-
"start": "webpack-dev-server --watch --config webpack.config.js --hot"
10+
"start": "webpack-dev-server --config webpack.config.js --hot"
1111
},
1212
"dependencies": {
13-
"@types/react": "^17.0.0",
14-
"@types/react-dom": "^17.0.0",
13+
"@types/react": "^18.0.9",
14+
"@types/react-dom": "^18.0.3",
1515
"clsx": "1.1.1",
16-
"react": "^17.0.1",
17-
"react-dom": "^17.0.1",
18-
"react-popper": "2.2.4",
19-
"@popperjs/core": "2.6.0"
16+
"react": "^18.1.0",
17+
"react-dom": "^18.1.0",
18+
"react-popper": "2.3.0",
19+
"@popperjs/core": "2.11.5"
2020
},
2121
"devDependencies": {
2222
"@babel/core": "^7.12.9",
@@ -31,17 +31,16 @@
3131
"file-loader": "6.2.0",
3232
"html-loader": "^1.3.2",
3333
"html-webpack-plugin": "4.5.0",
34-
"node-sass": "^5.0.0",
3534
"prettier": "^2.2.1",
3635
"sass": "^1.29.0",
3736
"sass-loader": "^10.1.0",
3837
"style-loader": "2.0.0",
3938
"ts-loader": "^8.0.11",
4039
"typescript": "^4.1.3",
4140
"url-loader": "4.1.1",
42-
"webpack": "4.41.5",
43-
"webpack-cli": "3.3.10",
44-
"webpack-dev-server": "3.10.1"
41+
"webpack": "5.1.0",
42+
"webpack-cli": "4.9.2",
43+
"webpack-dev-server": "4.9.1"
4544
},
4645
"keywords": [
4746
"react",

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

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
import clsx from 'clsx';
2-
import React, { useState } from 'react';
2+
import React, { useEffect, useState } from 'react';
33
import type { AccordionProps } from './types';
44
import { AccordionContext } from './AccordionContext';
55

66
const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollection, AccordionProps>(
7-
({ alwaysOpen, className, flush, initialActive, tag: Tag, children, ...props }, ref) => {
7+
({ alwaysOpen, className, flush, initialActive, tag: Tag, children, onChange, ...props }, ref) => {
88
const classes = clsx('accordion', flush && 'accordion-flush', className);
99

1010
const [activeItem, setActiveItem] = useState(initialActive);
1111

12+
useEffect(() => {
13+
if (!activeItem) return;
14+
15+
onChange && onChange(activeItem);
16+
}, [onChange, activeItem]);
17+
1218
return (
13-
<AccordionContext.Provider value={{ activeItem, setActiveItem, alwaysOpen, initialActive }}>
14-
<Tag className={classes} ref={ref} {...props}>
19+
<Tag className={classes} ref={ref} {...props}>
20+
<AccordionContext.Provider value={{ activeItem, setActiveItem, alwaysOpen, initialActive }}>
1521
{children}
16-
</Tag>
17-
</AccordionContext.Provider>
22+
</AccordionContext.Provider>
23+
</Tag>
1824
);
1925
}
2026
);

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2+
import { BaseComponent } from 'src/types/baseComponent';
23

3-
interface AccordionItemProps extends React.HTMLAttributes<HTMLElement> {
4+
interface AccordionItemProps extends BaseComponent {
45
bodyClassName?: string;
56
bodyStyle?: React.CSSProperties;
67
collapseId: number;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2+
import { BaseComponent } from 'src/types/baseComponent';
23

3-
interface AccordionProps extends React.HTMLAttributes<HTMLElement> {
4+
interface AccordionProps extends BaseComponent {
45
alwaysOpen?: boolean;
56
flush?: boolean;
67
initialActive?: number;
8+
onChange?: (id: number) => void;
79
ref?: React.ForwardedRef<HTMLAllCollection>;
810
tag?: React.ComponentProps<any>;
911
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ 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, dot, tag: Tag, children, notification, ...props }, ref) => {
6+
({ className, color, pill, light, dot, tag: Tag, children, notification, ...props }, ref) => {
77
const classes = clsx(
88
'badge',
9-
`${color ? 'bg-' + color : 'bg-primary'}`,
9+
light ? color && `badge-${color}` : color && `bg-${color}`,
1010
dot && 'badge-dot',
1111
pill && 'rounded-pill',
1212
notification && 'badge-notification',
@@ -21,6 +21,6 @@ const MDBBadge: React.FC<BadgeProps> = React.forwardRef<HTMLAllCollection, Badge
2121
}
2222
);
2323

24-
MDBBadge.defaultProps = { tag: 'span' };
24+
MDBBadge.defaultProps = { tag: 'span', color: 'primary' };
2525

2626
export default MDBBadge;

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
2+
import { BaseComponent } from 'src/types/baseComponent';
3+
import { backgroundColor } from 'src/types/colors';
24

3-
interface BadgeProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'color'> {
4-
color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'muted' | 'white' | 'info';
5+
interface BadgeProps extends BaseComponent {
6+
color?: backgroundColor;
57
dot?: boolean;
68
notification?: boolean;
79
pill?: boolean;

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'size'> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
import { size } from 'src/types/size';
3+
4+
interface ButtonGroupProps extends BaseComponent {
25
ref?: React.ForwardedRef<HTMLAllCollection>;
3-
size?: 'sm' | 'lg';
6+
size?: size;
47
shadow?: '0' | '1' | '2' | '3' | '4' | '5';
58
toolbar?: boolean;
69
vertical?: boolean;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
3+
interface CardBodyProps extends BaseComponent {
24
tag?: React.ComponentProps<any>;
35
ref?: React.ForwardedRef<HTMLAllCollection>;
46
}

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

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
interface CardFooterProps extends React.HTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
import { backgroundColor } from 'src/types/colors';
3+
4+
interface CardFooterProps extends BaseComponent {
25
border?: string;
3-
background?:
4-
| 'primary'
5-
| 'secondary'
6-
| 'success'
7-
| 'danger'
8-
| 'warning'
9-
| 'light'
10-
| 'dark'
11-
| 'white'
12-
| 'info'
13-
| 'transparent';
6+
background?: backgroundColor;
147
ref?: React.ForwardedRef<HTMLAllCollection>;
158
tag?: React.ComponentProps<any>;
169
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
3+
interface CardGroupProps extends BaseComponent {
24
tag?: React.ComponentProps<any>;
35
ref?: React.ForwardedRef<HTMLAllCollection>;
46
}

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

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
interface CardHeaderProps extends React.HTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
import { backgroundColor } from 'src/types/colors';
3+
4+
interface CardHeaderProps extends BaseComponent {
25
border?: string;
3-
background?:
4-
| 'primary'
5-
| 'secondary'
6-
| 'success'
7-
| 'danger'
8-
| 'warning'
9-
| 'light'
10-
| 'dark'
11-
| 'white'
12-
| 'info'
13-
| 'transparent';
6+
background?: backgroundColor;
147
ref?: React.ForwardedRef<HTMLAllCollection>;
158
tag?: React.ComponentProps<any>;
169
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
interface CardOverlayProps extends React.HTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
3+
interface CardOverlayProps extends BaseComponent {
24
tag?: React.ComponentProps<any>;
35
ref?: React.ForwardedRef<HTMLAllCollection>;
46
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
interface CardSubTitleProps extends React.AllHTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
3+
interface CardSubTitleProps extends BaseComponent {
24
tag?: React.ComponentProps<any>;
35
ref?: React.ForwardedRef<HTMLAllCollection>;
46
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
interface CardTextProps extends React.AllHTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
3+
interface CardTextProps extends BaseComponent {
24
tag?: React.ComponentProps<any>;
35
ref?: React.ForwardedRef<HTMLAllCollection>;
46
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
interface CardTitleProps extends React.AllHTMLAttributes<HTMLElement> {
1+
import { BaseComponent } from 'src/types/baseComponent';
2+
3+
interface CardTitleProps extends BaseComponent {
24
tag?: React.ComponentProps<any>;
35
ref?: React.ForwardedRef<HTMLAllCollection>;
46
}

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

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
1-
interface CardProps extends React.HTMLAttributes<HTMLElement> {
1+
import { backgroundColor } from 'src/types/colors';
2+
import { BaseComponent } from 'src/types/baseComponent';
3+
4+
interface CardProps extends BaseComponent {
25
alignment?: string;
36
border?: string;
4-
background?:
5-
| 'primary'
6-
| 'secondary'
7-
| 'success'
8-
| 'danger'
9-
| 'warning'
10-
| 'light'
11-
| 'dark'
12-
| 'white'
13-
| 'info'
14-
| 'transparent';
7+
background?: backgroundColor;
158
shadow?: '0' | '1' | '2' | '3' | '4' | '5';
169
ref?: React.ForwardedRef<HTMLAllCollection>;
1710
tag?: React.ComponentProps<any>;

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

+8
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
1818
tag: Tag,
1919
showControls,
2020
showIndicators,
21+
onSlide,
2122
...props
2223
}) => {
2324
const items = useRef<Array<HTMLElement> | null>(null);
@@ -31,6 +32,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
3132
const [active, setActive] = useState(0);
3233
const [imagesCount, setImagesCount] = useState(0);
3334
const [clientTouch, setClientTouch] = useState({ initialX: 0, initialY: 0 });
35+
const [isTransitioning, setIsTransitioning] = useState(false)
3436

3537
const carouselInnerRef = useRef<HTMLElement>(null);
3638
const carouselReference = carouselRef ? carouselRef : carouselInnerRef;
@@ -118,6 +120,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
118120

119121
const slide = useCallback(
120122
(directionOrOrder: string, element: any) => {
123+
setIsTransitioning(true);
121124
const order = directionToOrder(directionOrOrder);
122125
const activeElement = carouselReference.current.querySelector('.active.carousel-item');
123126
const nextElement = element || getItemByOrder(order, activeElement);
@@ -159,6 +162,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
159162
nextElement.classList.add(directionalClassName);
160163

161164
const completeCallBack = () => {
165+
setIsTransitioning(false)
162166
nextElement.classList.remove(directionalClassName, orderClassName);
163167
nextElement.classList.add('active');
164168

@@ -282,6 +286,10 @@ const MDBCarousel: React.FC<CarouselProps> = ({
282286
setImagesCount(imgLength);
283287
}, [carouselReference]);
284288

289+
useEffect(()=>{
290+
onSlide?.()
291+
},[isTransitioning, onSlide])
292+
285293
useEffect(() => {
286294
if (keyboard) {
287295
document.addEventListener('keydown', handleKeydown);

0 commit comments

Comments
 (0)