Skip to content

Commit 3b2a1d5

Browse files
author
unknown
committed
1.0.0-alpha4
1 parent 3dd237b commit 3b2a1d5

Some content is hidden

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

61 files changed

+1027
-116
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-alpha3
3+
Version: FREE 1.0.0-alpha4
44

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

‎app/demo/App.tsx

+80-20
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,91 @@
1-
import React from 'react';
2-
import { MDBBtn, MDBContainer } from 'mdb-react-ui-kit';
1+
import React from "react";
2+
import { MDBBtn, MDBContainer, MDBTooltip, MDBIcon } from "mdb-react-ui-kit";
33

44
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+
};
525
return (
626
<MDBContainer fluid>
727
<div
8-
className='d-flex justify-content-center align-items-center'
9-
style={{ height: '100vh' }}
28+
className="d-flex justify-content-center align-items-center"
29+
style={{ height: "100vh" }}
1030
>
11-
<div className='text-center'>
12-
<img
13-
className='mb-4'
14-
src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
15-
style={{ width: 250, height: 90 }}
16-
/>
17-
<h5 className='mb-3'>
18-
Thank you for using our product. We're glad you're with us.
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
1946
</h5>
20-
<p className='mb-3'>MDB Team</p>
21-
<MDBBtn
22-
tag='a'
23-
href='https://mdbootstrap.com/docs/standard/getting-started/'
24-
target='_blank'
25-
role='button'
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' }}
2686
>
27-
Start MDB tutorial
28-
</MDBBtn>
87+
Copied
88+
</div>
2989
</div>
3090
</div>
3191
</MDBContainer>

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

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const MDBCard: React.FC<CardProps> = React.forwardRef<HTMLAllCollection, CardPro
1414
);
1515

1616
return (
17-
<Tag className={classes} {...props}>
17+
<Tag className={classes} ref={ref} {...props}>
1818
{children}
1919
</Tag>
2020
);

‎app/src/components/Collapse/Collapse.tsx

+20-9
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,36 @@ const MDBCollapse: React.FC<CollapseProps> = ({
77
center,
88
children,
99
show,
10+
id,
1011
navbar,
12+
tag: Tag,
1113
style,
1214
...props
1315
}): JSX.Element => {
1416
const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
17+
const [showCollapseString, setShowCollapseString] = useState<string | undefined>('');
18+
const [statement, setStatement] = useState(false);
1519
const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
1620
const [transition, setTransition] = useState(false);
1721

1822
const classes = clsx(
1923
transition ? 'collapsing' : 'collapse',
20-
!transition && showCollapse && 'show',
24+
!transition && (showCollapse || statement) && 'show',
2125
navbar && 'navbar-collapse',
2226
center && 'justify-content-center',
2327
className
2428
);
25-
const refCollapse = useRef<HTMLDivElement>(null);
29+
const refCollapse = useRef<HTMLElement>(null);
2630

2731
useEffect(() => {
28-
setShowCollapse(show);
32+
if (typeof show === 'string') {
33+
setShowCollapseString(show);
34+
setStatement(showCollapseString === id);
35+
} else {
36+
setShowCollapse(show);
37+
}
2938

30-
if (showCollapse) {
39+
if (statement || showCollapse) {
3140
setTransition(true);
3241
}
3342

@@ -38,21 +47,23 @@ const MDBCollapse: React.FC<CollapseProps> = ({
3847
return () => {
3948
clearTimeout(timer);
4049
};
41-
}, [collapseHeight, show, showCollapse]);
50+
}, [collapseHeight, show, showCollapse, id, showCollapseString, statement]);
4251

4352
useEffect(() => {
44-
if (showCollapse) {
53+
if (showCollapse || statement) {
4554
setCollapseHeight(refCollapse?.current?.scrollHeight);
4655
} else {
4756
setCollapseHeight(0);
4857
}
49-
}, [showCollapse]);
58+
}, [showCollapse, statement]);
5059

5160
return (
52-
<div style={{ height: collapseHeight, ...style }} className={classes} {...props} ref={refCollapse}>
61+
<Tag style={{ height: collapseHeight, ...style }} id={id} className={classes} {...props} ref={refCollapse}>
5362
{children}
54-
</div>
63+
</Tag>
5564
);
5665
};
5766

67+
MDBCollapse.defaultProps = { tag: 'div' };
68+
5869
export default MDBCollapse;

‎app/src/components/Collapse/index.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import * as React from 'react';
33
declare const MDBCollapse: React.FunctionComponent<{
44
className?: string;
55
navbar?: boolean;
6-
show?: boolean;
6+
show?: boolean | string;
77
center?: boolean;
88
style?: Record<string, unknown>;
9+
tag?: React.ComponentProps<any>;
910
[rest: string]: any;
1011
}>;
1112

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
type CollapseProps = {
22
className?: string;
33
navbar?: boolean;
4-
show?: boolean;
4+
show?: boolean | string;
55
center?: boolean;
66
style?: Record<string, unknown>;
7+
tag?: React.ComponentProps<any>;
78
[rest: string]: any;
89
};
910

‎app/src/components/Dropdown/Dropdown.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import clsx from 'clsx';
2-
import React, { useEffect, useCallback, useState, useMemo } from 'react';
2+
import React, { useEffect, useCallback, useState } from 'react';
33
import type { DropdownProps } from './types';
44
import { DropdownContext } from './context';
55
import { usePopper } from 'react-popper';
6+
import { flip } from '@popperjs/core';
67

78
const MDBDropdown: React.FC<DropdownProps> = ({
89
className,
@@ -42,6 +43,7 @@ const MDBDropdown: React.FC<DropdownProps> = ({
4243

4344
const { styles, attributes } = usePopper(referenceElement, popperElement, {
4445
placement: isPlacement,
46+
modifiers: [flip],
4547
...options,
4648
});
4749

@@ -68,6 +70,11 @@ const MDBDropdown: React.FC<DropdownProps> = ({
6870
[isOpenState, popperElement, referenceElement]
6971
);
7072

73+
useEffect(() => {
74+
const wo = document.body.scrollTop;
75+
console.log(wo);
76+
});
77+
7178
useEffect(() => {
7279
document.addEventListener('mousedown', handleClickOutside);
7380
return () => {
@@ -81,7 +88,7 @@ const MDBDropdown: React.FC<DropdownProps> = ({
8188
}
8289
}, [countLength, isOpenState]);
8390

84-
useMemo(() => {
91+
useEffect(() => {
8592
let timer: ReturnType<typeof setTimeout>;
8693
let secondTimer: ReturnType<typeof setTimeout>;
8794

‎app/src/components/Dropdown/DropdownLink/DropdownLink.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ const MDBDropdownLink: React.FC<DropdownLinkProps> = ({
1414

1515
const { handleClose } = useContext(DropdownContext);
1616

17-
const handleClickItem = (e: React.MouseEvent) => {
17+
const handleClickItem = (e: React.MouseEvent<HTMLAnchorElement>) => {
1818
handleClose();
19+
1920
onClick && onClick(e);
2021
};
2122

‎app/src/components/Dropdown/DropdownMenu/DropdownMenu.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
2525
animatedFadeOut,
2626
animation,
2727
getCount,
28+
handleOpenClose,
2829
} = useContext(DropdownContext);
2930

3031
const classes = clsx(
@@ -77,9 +78,13 @@ const MDBDropdownMenu: React.FC<DropdownMenuProps> = ({
7778
setCount(0);
7879
}
7980
}
81+
if (e.key === 'Escape' || e.key === 'Enter') {
82+
setAttachELements(false);
83+
handleOpenClose();
84+
}
8085
}
8186
},
82-
[attachELements, childrenLength, count]
87+
[attachELements, childrenLength, handleOpenClose, count]
8388
);
8489

8590
useEffect(() => {

‎app/src/components/Dropdown/DropdownMenu/style.css

+4
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,7 @@
1515
color: #fff;
1616
background-color: #1266f1;
1717
}
18+
19+
.btn-group.dropstart > .dropdown-menu {
20+
right: 0 !important;
21+
}

0 commit comments

Comments
 (0)