Skip to content

Commit bdfefbd

Browse files
author
Krzysztof Wilk
committed
Generate version 2.0.0
1 parent c335e27 commit bdfefbd

File tree

122 files changed

+2148
-776
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

+2148
-776
lines changed

‎README.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 React
22

3-
Version: FREE 1.6.0
3+
Version: FREE 2.0.0
44

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

‎app/demo/App.tsx‎

Lines changed: 16 additions & 282 deletions
Original file line numberDiff line numberDiff line change
@@ -1,290 +1,24 @@
11
import React from "react";
2-
import { MDBBtn, MDBContainer } from "mdb-react-ui-kit";
2+
import { MDBBtn, MDBContainer, MDBIcon } from "mdb-react-ui-kit";
33

44
function App() {
55
return (
6-
<MDBContainer className="my-5 py-5">
7-
<section className="text-center">
8-
<h1 className="mb-0 text-black">
9-
Black November{" "}
10-
<span className="text-danger fw-bold">Waiting List</span>
11-
</h1>
12-
<hr className="my-5" />
13-
<p className="text-black lead">
14-
All offers will be{" "}
15-
<span className="text-danger fw-bold">limited</span>. Don't lose your
16-
chance, be the <span className="text-danger fw-bold">first</span> to
17-
get notified.
18-
</p>
19-
</section>
20-
21-
<section className="my-5">
22-
<div className="bg-dark text-white text-center text-xl-start rounded-6">
23-
<div
24-
className="container px-4"
25-
style={{ paddingTop: "5rem", paddingBottom: "5rem" }}
26-
>
27-
<div className="row mx-xl-1 d-flex justify-content-center justify-xl-content-start align-items-center">
28-
<div className="col-md-10 col-lg-7 col-xl-7">
29-
<h2 className="fs-1" style={{ fontWeight: 900 }}>
30-
Join the waiting list{" "}
31-
<span className="text-danger fw-bold">NOW</span>
32-
</h2>
33-
<p className="lead fw-normal mb-4 pb-md-1 pb-xl-0 mb-xl-0">
34-
You will only receive emails related to the Black November
35-
promotions and after the promotion is over, you will be
36-
unsubscribed. We won't spam you.
37-
</p>
38-
</div>
39-
<div className="col-md-10 col-lg-7 col-xl-5">
40-
<div className="d-md-flex mb-3 mb-md-2 ms-xl-4">
41-
<div className="flex-fill me-md-1 mb-3 mb-md-0">
42-
<form
43-
action="https://app.convertkit.com/forms/2663020/subscriptions"
44-
className="seva-form formkit-form"
45-
method="post"
46-
data-sv-form="2663020"
47-
data-uid="30443eba65"
48-
data-format="inline"
49-
data-version="5"
50-
data-options='{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Now check your email to confirm your subscription.","redirect_url":"https://mdbootstrap.com/confirm/"},"analytics":{"google":null,"facebook":null,"segment":null,"pinterest":null,"sparkloop":null,"googletagmanager":null},"modal":{"trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"powered_by":{"show":false,"url":"https://convertkit.com?utm_campaign=poweredby&amp;utm_content=form&amp;utm_medium=referral&amp;utm_source=dynamic"},"recaptcha":{"enabled":true},"return_visitor":{"action":"show","custom_content":""},"slide_in":{"display_in":"bottom_right","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"sticky_bar":{"display_in":"top","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15}},"version":"5"}'
51-
>
52-
<ul
53-
className="text-danger fw-bold"
54-
data-element="errors"
55-
data-group="alert"
56-
></ul>
57-
58-
<div
59-
data-element="fields"
60-
data-stacked="false"
61-
className="d-flex d-inline-block justify-content-center"
62-
>
63-
<div className="form-outline form-white w-100">
64-
<input
65-
type="text"
66-
id="form1"
67-
name="email_address"
68-
required=""
69-
className="form-control form-control-lg"
70-
/>
71-
<label
72-
className="form-label"
73-
htmlFor="form1"
74-
style={{ marginLeft: "0px" }}
75-
>
76-
Your email address
77-
</label>
78-
<div className="form-notch">
79-
<div
80-
className="form-notch-leading"
81-
style={{ width: "9px" }}
82-
></div>
83-
<div
84-
className="form-notch-middle"
85-
style={{ width: "116.8px" }}
86-
></div>
87-
<div className="form-notch-trailing"></div>
88-
</div>
89-
</div>
90-
91-
<button
92-
className="btn btn-danger ms-2"
93-
data-element="submit"
94-
>
95-
JOIN
96-
</button>
97-
</div>
98-
</form>
99-
</div>
100-
</div>
101-
</div>
102-
</div>
103-
</div>
104-
</div>
105-
<p className="text-muted text-center">
106-
<small>
107-
By subscribing you agree to receive Black November notifications
108-
from the data administrator StartupFlow s.c. Kijowska 7, Warsaw.
109-
<a
110-
href="https://mdbootstrap.com/general/privacy-policy/"
111-
className="text-decoration-underline text-reset"
112-
>
113-
Privacy Policy
114-
</a>
115-
.
116-
</small>
117-
</p>
118-
</section>
119-
120-
<section className="my-5 pt-5">
121-
<p className="lead text-center">
122-
Explore products that will be discounted:
123-
</p>
124-
125-
<div className="row">
126-
<div className="col-md-3">
127-
<div className="card shadow-2-strong">
128-
<div
129-
className="bg-image hover-overlay ripple"
130-
data-mdb-ripple-color="light"
131-
>
132-
<img
133-
src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/bootstrap-standard.webp"
134-
className="img-fluid"
135-
/>
136-
<a
137-
href="https://mdbootstrap.com/docs/standard/pro/"
138-
target="_blank"
139-
>
140-
<div
141-
className="mask"
142-
style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
143-
></div>
144-
</a>
145-
</div>
146-
147-
<div className="card-body">
148-
<h5 className="card-title">MDB Standard PRO</h5>
149-
<p className="card-text">
150-
Components, templates, plugins, premium support and much more
151-
for the <strong>latest Bootstrap v5 as well as v4</strong>.
152-
</p>
153-
<div className="text-end">
154-
<a
155-
href="https://mdbootstrap.com/docs/standard/pro/"
156-
type="button"
157-
className="btn btn-sm btn-link text-muted"
158-
target="_blank"
159-
>
160-
View product <i className="fas fa-external-link-alt"></i>
161-
</a>
162-
</div>
163-
</div>
164-
</div>
165-
</div>
166-
167-
<div className="col-md-3">
168-
<div className="card shadow-2-strong">
169-
<div
170-
className="bg-image hover-overlay ripple"
171-
data-mdb-ripple-color="light"
172-
>
173-
<img
174-
src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/angular.webp"
175-
className="img-fluid"
176-
/>
177-
<a
178-
href="https://mdbootstrap.com/docs/b5/angular/pro/"
179-
target="_blank"
180-
>
181-
<div
182-
className="mask"
183-
style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
184-
></div>
185-
</a>
186-
</div>
187-
188-
<div className="card-body">
189-
<h5 className="card-title">MDB Angular PRO</h5>
190-
<p className="card-text">
191-
Components, templates, plugins, premium support and much more
192-
for the <strong>latest Bootstrap v5 as well as v4</strong>.
193-
</p>
194-
<div className="text-end">
195-
<a
196-
href="https://mdbootstrap.com/docs/b5/angular/pro/"
197-
type="button"
198-
className="btn btn-sm btn-link text-muted"
199-
target="_blank"
200-
>
201-
View product <i className="fas fa-external-link-alt"></i>
202-
</a>
203-
</div>
204-
</div>
205-
</div>
206-
</div>
207-
208-
<div className="col-md-3">
209-
<div className="card shadow-2-strong">
210-
<div
211-
className="bg-image hover-overlay ripple"
212-
data-mdb-ripple-color="light"
213-
>
214-
<img
215-
src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/react.webp"
216-
className="img-fluid"
217-
/>
218-
<a
219-
href="https://mdbootstrap.com/docs/b5/react/pro/"
220-
target="_blank"
221-
>
222-
<div
223-
className="mask"
224-
style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
225-
></div>
226-
</a>
227-
</div>
228-
229-
<div className="card-body">
230-
<h5 className="card-title">MDB React PRO</h5>
231-
<p className="card-text">
232-
Components, templates, plugins, premium support and much more
233-
for the <strong>latest Bootstrap v5 as well as v4</strong>.
234-
</p>
235-
<div className="text-end">
236-
<a
237-
href="https://mdbootstrap.com/docs/b5/react/pro/"
238-
type="button"
239-
className="btn btn-sm btn-link text-muted"
240-
target="_blank"
241-
>
242-
View product <i className="fas fa-external-link-alt"></i>
243-
</a>
244-
</div>
245-
</div>
246-
</div>
247-
</div>
248-
249-
<div className="col-md-3">
250-
<div className="card shadow-2-strong">
251-
<div
252-
className="bg-image hover-overlay ripple"
253-
data-mdb-ripple-color="light"
254-
>
255-
<img
256-
src="https://v1.mdbootstrap.com/wp-content/uploads/2021/10/vue.webp"
257-
className="img-fluid"
258-
/>
259-
<a href="https://mdbootstrap.com/docs/b5/vue/pro/" target="_blank">
260-
<div
261-
className="mask"
262-
style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
263-
></div>
264-
</a>
265-
</div>
266-
267-
<div className="card-body">
268-
<h5 className="card-title">MDB Vue PRO</h5>
269-
<p className="card-text">
270-
Components, templates, plugins, premium support and much more
271-
for the <strong>latest Bootstrap v5 as well as v4</strong>.
272-
</p>
273-
<div className="text-end">
274-
<a
275-
href="https://mdbootstrap.com/docs/b5/vue/pro/"
276-
type="button"
277-
className="btn btn-sm btn-link text-muted"
278-
target="_blank"
279-
>
280-
View product <i className="fas fa-external-link-alt"></i>
281-
</a>
282-
</div>
283-
</div>
284-
</div>
285-
</div>
6+
<MDBContainer>
7+
<div style={{ height: '100vh' }} className='d-flex justify-content-center align-items-center'>
8+
<div className="text-center">
9+
<img className='mb-2' src='https://bf-sale.mdbgo.io/bf.png' width='800' height='450' />
10+
<h2 className='fw-bold'>Black Friday Sale</h2>
11+
<h5 className='mb-3'>
12+
Get MDB Pro with discounts{" "}
13+
<span className='text-danger'>up to 95%</span>
14+
</h5>
15+
<p className="mb-3 fw-bold">Hurry up the offer is limited!</p>
16+
<a className='btn btn-black btn-lg mt-2' target='_blank' role='button' href="https://mdbootstrap.com/bf/sale/">
17+
{" "}
18+
<MDBIcon fas icon='shopping-cart' /> Get the offer
19+
</a>
28620
</div>
287-
</section>
21+
</div>
28822
</MDBContainer>
28923
);
29024
}

‎app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-react-ui-kit-demo",
3-
"version": "1.6.0",
3+
"version": "2.0.0",
44
"main": "index.js",
55
"repository": {
66
"type": "git",

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const MDBCarousel: React.FC<CarouselProps> = ({
2323
const items = useRef<Array<HTMLElement> | null>(null);
2424
const carouselInterval = useRef<ReturnType<typeof setTimeout> | null>(null);
2525
const activeElement = useRef<HTMLElement | null>(null);
26+
const isBlocked = useRef(false);
2627

2728
const isSliding = useRef(false);
2829
const isChanging = useRef(false);
@@ -191,6 +192,15 @@ const MDBCarousel: React.FC<CarouselProps> = ({
191192
}, [next, carouselReference]);
192193

193194
const to = (index: number) => {
195+
if (isBlocked.current) {
196+
return;
197+
}
198+
199+
isBlocked.current = true;
200+
setTimeout(() => {
201+
isBlocked.current = false;
202+
}, 700);
203+
194204
activeElement.current = carouselReference.current.querySelector('.active.carousel-item');
195205
const activeIndex = getItemIndex(activeElement.current as HTMLElement);
196206

@@ -286,6 +296,19 @@ const MDBCarousel: React.FC<CarouselProps> = ({
286296
cycle();
287297
}, [cycle]);
288298

299+
const move = (direction: string) => {
300+
if (isBlocked.current) {
301+
return;
302+
}
303+
304+
isBlocked.current = true;
305+
setTimeout(() => {
306+
isBlocked.current = false;
307+
}, 600);
308+
309+
slide(direction, null);
310+
};
311+
289312
return (
290313
<Tag
291314
onTouchStart={startTouch}
@@ -308,8 +331,8 @@ const MDBCarousel: React.FC<CarouselProps> = ({
308331
{children}
309332
{showControls && (
310333
<>
311-
<MDBCarouselControl direction='prev' onClick={() => slide('right', null)} />
312-
<MDBCarouselControl direction='next' onClick={() => slide('left', null)} />
334+
<MDBCarouselControl direction='prev' onClick={() => move('right')} />
335+
<MDBCarouselControl direction='next' onClick={() => move('left')} />
313336
</>
314337
)}
315338
</Tag>

0 commit comments

Comments
 (0)