Skip to content

Commit aca39ab

Browse files
author
unknown
committed
1.0.0-alpha2
1 parent 908ed01 commit aca39ab

File tree

156 files changed

+9950
-273
lines changed

Some content is hidden

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

156 files changed

+9950
-273
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 Alpha 1
3+
Version: FREE 1.0.0 Alpha 2
44

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

‎app/demo/App.tsx

+20-51
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import React from 'react';
2-
import {
3-
MDBBadge,
4-
MDBBtn,
5-
MDBCol,
6-
MDBRow,
7-
MDBContainer,
8-
MDBCard,
9-
MDBCardBody,
10-
} from 'mdb-react-ui-kit';
2+
import { MDBBtn, MDBContainer } from 'mdb-react-ui-kit';
113

124
function App() {
135
return (
@@ -16,48 +8,25 @@ function App() {
168
className='d-flex justify-content-center align-items-center'
179
style={{ height: '100vh' }}
1810
>
19-
<MDBCard style={{ padding: 20 }}>
20-
<MDBCardBody>
21-
<div className='text-center'>
22-
<img
23-
className='mb-4 img-fluid'
24-
src='https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'
25-
/>
26-
<h5 className='mb-3'>
27-
Thank you for using our product. We're glad you're with us.
28-
</h5>
29-
<p className='mb-3'>
30-
<MDBBadge className='ms-2'>MDB TEAM</MDBBadge>
31-
</p>
32-
33-
<MDBRow className='justify-content-center'>
34-
<MDBCol md='5' style={{ padding: 5 }}>
35-
<MDBBtn
36-
tag='a'
37-
href='https://mdbootstrap.com/docs/standard/getting-started/'
38-
target='_blank'
39-
size='sm'
40-
outline
41-
>
42-
Start MDB tutorial
43-
</MDBBtn>
44-
</MDBCol>
45-
<MDBCol md='5' style={{ padding: 5 }}>
46-
<MDBBtn
47-
tag='a'
48-
href='https://mdbootstrap.com/docs/b5/react/'
49-
target='_blank'
50-
size='sm'
51-
outline
52-
color='secondary'
53-
>
54-
mdb-react-ui-kit docs
55-
</MDBBtn>
56-
</MDBCol>
57-
</MDBRow>
58-
</div>
59-
</MDBCardBody>
60-
</MDBCard>
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.
19+
</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'
26+
>
27+
Start MDB tutorial
28+
</MDBBtn>
29+
</div>
6130
</div>
6231
</MDBContainer>
6332
);

‎app/package.json

+4-2
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-alpha1",
3+
"version": "1.0.0-alpha2",
44
"main": "index.js",
55
"repository": {
66
"type": "git",
@@ -14,7 +14,9 @@
1414
"@types/react-dom": "^17.0.0",
1515
"clsx": "1.1.1",
1616
"react": "^17.0.1",
17-
"react-dom": "^17.0.1"
17+
"react-dom": "^17.0.1",
18+
"react-popper": "2.2.4",
19+
"@popperjs/core": "2.6.0"
1820
},
1921
"devDependencies": {
2022
"@babel/core": "^7.12.9",

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

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import clsx from 'clsx';
2+
import React, { useEffect, useRef, useState } from 'react';
3+
import type { CollapseProps } from './types';
4+
5+
const MDBCollapse: React.FC<CollapseProps> = ({
6+
className,
7+
center,
8+
children,
9+
show,
10+
navbar,
11+
style,
12+
...props
13+
}): JSX.Element => {
14+
const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
15+
const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
16+
const [transition, setTransition] = useState(false);
17+
18+
const classes = clsx(
19+
transition ? 'collapsing' : 'collapse',
20+
!transition && showCollapse && 'show',
21+
navbar && 'navbar-collapse',
22+
center && 'justify-content-center',
23+
className
24+
);
25+
const refCollapse = useRef<HTMLDivElement>(null);
26+
27+
useEffect(() => {
28+
setShowCollapse(show);
29+
30+
if (showCollapse) {
31+
setTransition(true);
32+
}
33+
34+
const timer = setTimeout(() => {
35+
setTransition(false);
36+
}, 350);
37+
38+
return () => {
39+
clearTimeout(timer);
40+
};
41+
}, [collapseHeight, show, showCollapse]);
42+
43+
useEffect(() => {
44+
if (showCollapse) {
45+
setCollapseHeight(refCollapse?.current?.scrollHeight);
46+
} else {
47+
setCollapseHeight(0);
48+
}
49+
}, [showCollapse]);
50+
51+
return (
52+
<div style={{ height: collapseHeight, ...style }} className={classes} {...props} ref={refCollapse}>
53+
{children}
54+
</div>
55+
);
56+
};
57+
58+
export default MDBCollapse;

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
3+
declare const MDBCollapse: React.FunctionComponent<{
4+
className?: string;
5+
navbar?: boolean;
6+
show?: boolean;
7+
center?: boolean;
8+
style?: Record<string, unknown>;
9+
[rest: string]: any;
10+
}>;
11+
12+
export default MDBCollapse;

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
type CollapseProps = {
2+
className?: string;
3+
navbar?: boolean;
4+
show?: boolean;
5+
center?: boolean;
6+
style?: Record<string, unknown>;
7+
[rest: string]: any;
8+
};
9+
10+
export { CollapseProps };

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

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import clsx from 'clsx';
2+
import React, { useEffect, useCallback, useState, useMemo } from 'react';
3+
import type { DropdownProps } from './types';
4+
import { DropdownContext } from './context';
5+
import { usePopper } from 'react-popper';
6+
7+
const MDBDropdown: React.FC<DropdownProps> = ({
8+
className,
9+
tag: Tag,
10+
group,
11+
isOpen,
12+
children,
13+
dropup,
14+
dropright,
15+
dropleft,
16+
options,
17+
animation,
18+
placement,
19+
...props
20+
}): JSX.Element => {
21+
const [isOpenState, setIsOpenState] = useState<undefined | boolean | any>(isOpen);
22+
const [isFadeIn, setIsFadeIn] = useState(false);
23+
const [isFadeOut, setIsFadeOut] = useState(false);
24+
const [referenceElement, setReferenceElement] = useState<HTMLElement>();
25+
const [popperElement, setPopperElement] = useState<HTMLElement>();
26+
const [isPlacement, setIsPlacement] = useState(placement);
27+
// eslint-disable-next-line prefer-const
28+
let [activeIndex, setActiveIndex] = useState<number>(-1);
29+
const [countLength, setCountLength] = useState<number>(-1);
30+
31+
useEffect(() => {
32+
if (dropup) {
33+
setIsPlacement('top-start');
34+
} else if (dropright) {
35+
setIsPlacement('right-start');
36+
} else if (dropleft) {
37+
setIsPlacement('left-start');
38+
} else {
39+
setIsPlacement('bottom-start');
40+
}
41+
}, [dropleft, dropright, dropup]);
42+
43+
const { styles, attributes } = usePopper(referenceElement, popperElement, {
44+
placement: isPlacement,
45+
...options,
46+
});
47+
48+
const classes = clsx(
49+
group ? 'btn-group' : 'dropdown',
50+
dropup && 'dropup',
51+
dropright && 'dropend',
52+
dropleft && 'dropstart',
53+
className
54+
);
55+
56+
const handleOpenClose = (): void => setIsOpenState(!isOpenState);
57+
const handleClose = (): void => setIsOpenState(false);
58+
const getCounter = (el: any): void => setCountLength(el);
59+
60+
const handleClickOutside = useCallback(
61+
(event: MouseEvent) => {
62+
if (popperElement && popperElement !== null && isOpenState && referenceElement && referenceElement !== null) {
63+
if (!popperElement.contains(event.target as Node) && !referenceElement.contains(event.target as Node)) {
64+
setIsOpenState(false);
65+
}
66+
}
67+
},
68+
[isOpenState, popperElement, referenceElement]
69+
);
70+
71+
useEffect(() => {
72+
document.addEventListener('mousedown', handleClickOutside);
73+
return () => {
74+
document.removeEventListener('mousedown', handleClickOutside);
75+
};
76+
}, [handleClickOutside]);
77+
78+
useEffect(() => {
79+
if (isOpenState) {
80+
setActiveIndex(countLength);
81+
}
82+
}, [countLength, isOpenState]);
83+
84+
useMemo(() => {
85+
let timer: ReturnType<typeof setTimeout>;
86+
let secondTimer: ReturnType<typeof setTimeout>;
87+
88+
if (isOpenState) {
89+
setIsFadeIn(true);
90+
91+
timer = setTimeout(() => {
92+
setIsFadeIn(false);
93+
}, 300);
94+
} else {
95+
setIsFadeOut(true);
96+
97+
secondTimer = setTimeout(() => {
98+
setIsFadeOut(false);
99+
}, 300);
100+
}
101+
return () => {
102+
clearTimeout(timer);
103+
clearTimeout(secondTimer);
104+
};
105+
}, [isOpenState]);
106+
107+
return (
108+
<DropdownContext.Provider
109+
value={{
110+
animation,
111+
activeIndex,
112+
handleClose,
113+
handleOpenClose,
114+
isOpenState,
115+
setReferenceElement,
116+
setPopperElement,
117+
styles,
118+
attributes,
119+
animatedFadeIn: isFadeIn,
120+
animatedFadeOut: isFadeOut,
121+
getCount: (el) => getCounter(el),
122+
}}
123+
>
124+
<Tag className={classes} {...props}>
125+
{children}
126+
</Tag>
127+
</DropdownContext.Provider>
128+
);
129+
};
130+
131+
MDBDropdown.defaultProps = {
132+
tag: 'div',
133+
animation: true,
134+
};
135+
136+
export default MDBDropdown;

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import type { DropdownDividerProps } from './types';
3+
4+
const MDBDropdownDivider: React.FC<DropdownDividerProps> = ({ tag: Tag, ...props }): JSX.Element => {
5+
return <Tag {...props} className='dropdown-divider' />;
6+
};
7+
8+
MDBDropdownDivider.defaultProps = {
9+
tag: 'div',
10+
};
11+
12+
export default MDBDropdownDivider;

‎app/src/components/Dropdown/DropdownDivider/index.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
3+
declare const MDBDropdownDivider: React.FunctionComponent<{
4+
className?: string;
5+
tag?: React.ComponentProps<any>;
6+
[rest: string]: any;
7+
}>;
8+
9+
export default MDBDropdownDivider;

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
type DropdownDividerProps = {
2+
className?: string;
3+
tag?: React.ComponentProps<any>;
4+
[rest: string]: any;
5+
};
6+
7+
export { DropdownDividerProps };

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import clsx from 'clsx';
2+
import React from 'react';
3+
import type { DropdownHeaderProps } from './types';
4+
5+
const MDBDropdownHeader: React.FC<DropdownHeaderProps> = ({ tag: Tag, children, className, ...props }): JSX.Element => {
6+
return (
7+
<Tag {...props} className={clsx('dropdown-header', className)}>
8+
{children}
9+
</Tag>
10+
);
11+
};
12+
13+
MDBDropdownHeader.defaultProps = {
14+
tag: 'h6',
15+
};
16+
17+
export default MDBDropdownHeader;

‎app/src/components/Dropdown/DropdownHeader/index.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
3+
declare const MDBDropdownHeader: React.FunctionComponent<{
4+
className?: string;
5+
tag?: React.ComponentProps<any>;
6+
[rest: string]: any;
7+
}>;
8+
9+
export default MDBDropdownHeader;

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
type DropdownHeaderProps = {
2+
className?: string;
3+
tag?: React.ComponentProps<any>;
4+
[rest: string]: any;
5+
};
6+
7+
export { DropdownHeaderProps };

0 commit comments

Comments
 (0)