Skip to content

Commit 77fd8e1

Browse files
author
unknown
committed
1.0.0-beta4
1 parent 56f084c commit 77fd8e1

16 files changed

+140
-135
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 1.0.0-beta3
3+
Version: FREE 1.0.0-beta4
44

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

‎app/demo/App.tsx

+23-83
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,35 @@
1-
import React from "react";
2-
import { MDBBtn, MDBContainer, MDBTooltip, MDBIcon } from "mdb-react-ui-kit";
3-
1+
import React from 'react';
2+
import { MDBBtn, MDBContainer, MDBIcon } from 'mdb-react-ui-kit';
43
function App() {
5-
function Clipboard_CopyTo(value: any) {
6-
var tempInput = document.createElement("input");
7-
tempInput.value = value;
8-
document.body.appendChild(tempInput);
9-
tempInput.select();
10-
document.execCommand("copy");
11-
document.body.removeChild(tempInput);
12-
}
13-
14-
const handleClick = () => {
15-
Clipboard_CopyTo("T9TTVSQB");
16-
var div = document.getElementById("code-success");
17-
if (div) {
18-
div.style.display = "block";
19-
}
20-
setTimeout(function () {
21-
// @ts-ignore
22-
document.getElementById("code-success").style.display = "none";
23-
}, 900);
24-
};
254
return (
265
<MDBContainer fluid>
276
<div
28-
className="d-flex justify-content-center align-items-center"
29-
style={{ height: "100vh" }}
7+
className='d-flex justify-content-center align-items-center'
8+
style={{ height: '100vh' }}
309
>
31-
<div className="text-center">
32-
<h2>Release surprise!</h2>
33-
<p className="h4 fw-bold">50% OFF MDB PRO</p>
34-
<div className="row justify-content-center">
35-
<div className="col-md-6">
36-
<img
37-
src="https://mdbootstrap.com/img/Marketing/campaigns/50off-SJARV.png"
38-
className="img-fluid"
39-
alt=""
40-
/>
41-
</div>
42-
</div>
43-
44-
<h5 className="mb-3">
45-
Use this coupon code before it expires and claim the reward
10+
<div className='text-center'>
11+
<img
12+
className='mb-4'
13+
src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
14+
style={{ width: 250, height: 90 }}
15+
/>
16+
<h5 className='mb-3'>
17+
Thank you for using our product. We're glad you're with us.
4618
</h5>
47-
<p className="mb-3">
48-
The coupon code will be valid until the end of the week
49-
</p>
50-
51-
<div className="mt-2">
52-
<code className="h2 border rounded py-1 px-5 flex-item me-2">
53-
T9TTVSQB
54-
</code>
55-
<br />
56-
57-
<MDBBtn
58-
className="me-2"
59-
id="disc-50"
60-
href="#"
61-
size="lg"
62-
color="info"
63-
style={{ backgroundColor: "#009fe7" }}
64-
onClick={handleClick}
65-
>
66-
COPY TO CLIPBOARD <MDBIcon far icon="copy" />
67-
</MDBBtn>
68-
<MDBBtn
69-
outline
70-
className="mt-3"
71-
href="https://mdbootstrap.com/docs/standard/getting-started/"
72-
size="lg"
73-
target="_blank"
74-
style={{ borderColor: "#009fe7", color: "#009fe7" }}
75-
>
76-
MDB tutorial
77-
</MDBBtn>
78-
</div>
79-
<p>
80-
See <a href="https://mdbootstrap.com/pro/">prices</a>
81-
</p>
82-
<div
83-
className="my-2 me-2 alert alert-success"
84-
id="code-success"
85-
style={{ display: "none", position: 'fixed', width: '300px', top: '0', right: '0' }}
19+
<p className='mb-3'>MDB Team</p>
20+
<MDBBtn
21+
tag='a'
22+
href='https://mdbootstrap.com/docs/standard/getting-started/'
23+
target='_blank'
24+
role='button'
8625
>
87-
Copied
88-
</div>
26+
Start MDB tutorial
27+
</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>
8930
</div>
9031
</div>
9132
</MDBContainer>
9233
);
9334
}
94-
95-
export default App;
35+
export default App;

‎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": "1.0.0-beta3",
3+
"version": "1.0.0-beta4",
44
"main": "index.js",
55
"repository": {
66
"type": "git",

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

+27-16
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ const MDBCarousel: React.FC<CarouselProps> = ({
1010
dark,
1111
children,
1212
carouselRef,
13-
interval,
1413
keyboard,
1514
pause,
1615
touch,
@@ -23,8 +22,10 @@ const MDBCarousel: React.FC<CarouselProps> = ({
2322
const [imagesCount, setImagesCount] = useState(0);
2423
const [activeItem, setActiveItem] = useState(0);
2524
const [prevState, setPrevState] = useState(0);
25+
const [clicked, setClicked] = useState('');
2626
const [startInterval, setStartInterval] = useState(true);
2727
const [clientTouch, setClientTouch] = useState({ initialX: 0, initialY: 0 });
28+
const [activeInterval, setActiveInterval] = useState(5000);
2829

2930
const carouselInnerRef = useRef<HTMLElement>(null);
3031
const carouselReference = carouselRef ? carouselRef : carouselInnerRef;
@@ -34,18 +35,19 @@ const MDBCarousel: React.FC<CarouselProps> = ({
3435
const setPrev = useCallback(() => {
3536
const prevIndex = activeItem === 0 ? imagesCount : activeItem - 1;
3637

38+
setClicked('prev');
3739
setActiveItem(prevIndex);
3840
}, [activeItem, imagesCount]);
3941

4042
const setNext = useCallback(() => {
4143
const nextIndex = activeItem === imagesCount ? 0 : activeItem + 1;
4244

4345
setActiveItem(nextIndex);
46+
setClicked('next');
4447
}, [activeItem, imagesCount]);
4548

4649
const handleKeydown = useCallback(
4750
(event: KeyboardEvent) => {
48-
console.log(event.key);
4951
switch (event.key) {
5052
case 'ArrowLeft':
5153
event.preventDefault();
@@ -70,27 +72,30 @@ const MDBCarousel: React.FC<CarouselProps> = ({
7072

7173
setTimeout(() => {
7274
setIsChanging(false);
73-
}, 700);
75+
}, 900);
7476
} else if (!isChanging && isNext) {
7577
setNext();
7678
setIsChanging(true);
7779

7880
setTimeout(() => {
7981
setIsChanging(false);
80-
}, 700);
82+
}, 900);
8183
} else {
8284
return;
8385
}
8486
};
8587

86-
const handleIndicatorClick = (i: number) => {
87-
if (!isChanging) {
88-
setActiveItem(i);
89-
setIsChanging(true);
88+
const handleIndicatorClick = (i: number, e: any) => {
89+
if (e.target) {
90+
if (!isChanging && !e.target.classList.contains('active')) {
91+
setClicked('indicator');
92+
setActiveItem(i);
93+
setIsChanging(true);
9094

91-
setTimeout(() => {
92-
setIsChanging(false);
93-
}, 700);
95+
setTimeout(() => {
96+
setIsChanging(false);
97+
}, 700);
98+
}
9499
}
95100
};
96101

@@ -105,14 +110,14 @@ const MDBCarousel: React.FC<CarouselProps> = ({
105110
}, [handleKeydown, keyboard]);
106111

107112
useEffect(() => {
108-
if (interval && startInterval) {
109-
const cycleInterval = setInterval(setNext, interval);
113+
if (activeInterval && startInterval) {
114+
const cycleInterval = setInterval(setNext, activeInterval);
110115

111116
return () => {
112117
clearInterval(cycleInterval);
113118
};
114119
}
115-
}, [interval, setNext, startInterval]);
120+
}, [activeInterval, setNext, startInterval]);
116121

117122
useEffect(() => {
118123
const carouselImgList = carouselReference.current.querySelectorAll('.carousel-item-react img');
@@ -159,6 +164,8 @@ const MDBCarousel: React.FC<CarouselProps> = ({
159164
fade: fade ? true : false,
160165
prev: prevState,
161166
setPrev: setPrevState,
167+
clicked: clicked,
168+
setActiveInterval: setActiveInterval,
162169
}}
163170
>
164171
<Tag
@@ -174,7 +181,11 @@ const MDBCarousel: React.FC<CarouselProps> = ({
174181
{showIndicators && (
175182
<ol className='carousel-indicators'>
176183
{Array.from(Array(imagesCount + 1)).map((item, i) => (
177-
<MDBCarouselIndicatorItem key={i} active={activeItem === i} onClick={() => handleIndicatorClick(i)} />
184+
<MDBCarouselIndicatorItem
185+
key={i}
186+
active={activeItem === i}
187+
onClick={(e: MouseEvent) => handleIndicatorClick(i, e)}
188+
/>
178189
))}
179190
</ol>
180191
)}
@@ -189,5 +200,5 @@ const MDBCarousel: React.FC<CarouselProps> = ({
189200
</CarouselContext.Provider>
190201
);
191202
};
192-
MDBCarousel.defaultProps = { tag: 'div', interval: 5000, fade: false, pause: true, touch: true, keyboard: false };
203+
MDBCarousel.defaultProps = { tag: 'div', fade: false, pause: true, touch: true, keyboard: false };
193204
export default MDBCarousel;

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

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ interface CarouselProps {
66
fade: boolean;
77
prev: number;
88
setPrev: React.SetStateAction<any>;
9+
clicked: string;
10+
setActiveInterval: React.SetStateAction<any>;
911
}
1012

1113
const CarouselContext = React.createContext<CarouselProps>({
@@ -14,6 +16,8 @@ const CarouselContext = React.createContext<CarouselProps>({
1416
fade: false,
1517
prev: 0,
1618
setPrev: null,
19+
clicked: '',
20+
setActiveInterval: null,
1721
});
1822

1923
export { CarouselContext };

0 commit comments

Comments
 (0)