Skip to content

Commit ce3bf58

Browse files
author
unknown
committed
1.3.0
1 parent 102bc00 commit ce3bf58

File tree

11 files changed

+142
-69
lines changed

11 files changed

+142
-69
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.2.0
3+
Version: FREE 1.3.0
44

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

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

‎app/src/components/Modal/Modal.tsx

+29-19
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
22
import clsx from 'clsx';
33
import type { ModalProps } from './types';
44
import ReactDOM from 'react-dom';
5+
56
const MDBModal: React.FC<ModalProps> = ({
67
animationDirection,
78
backdrop,
89
children,
910
className,
11+
closeOnEsc,
1012
getOpenState,
1113
modalRef,
1214
show,
@@ -62,18 +64,20 @@ const MDBModal: React.FC<ModalProps> = ({
6264

6365
const handleKeydown = useCallback(
6466
(event: KeyboardEvent) => {
65-
if (isOpenModal && event.key === 'Escape') {
66-
if (!staticBackdrop) {
67-
closeModal();
68-
} else {
69-
setStaticModal(true);
70-
setTimeout(() => {
71-
setStaticModal(false);
72-
}, 300);
67+
if (closeOnEsc) {
68+
if (isOpenModal && event.key === 'Escape') {
69+
if (!staticBackdrop) {
70+
closeModal();
71+
} else {
72+
setStaticModal(true);
73+
setTimeout(() => {
74+
setStaticModal(false);
75+
}, 300);
76+
}
7377
}
7478
}
7579
},
76-
[closeModal, isOpenModal, staticBackdrop]
80+
[closeModal, isOpenModal, staticBackdrop, closeOnEsc]
7781
);
7882

7983
useEffect(() => {
@@ -123,17 +127,23 @@ const MDBModal: React.FC<ModalProps> = ({
123127

124128
return (
125129
<>
126-
<Tag
127-
className={classes}
128-
ref={modalReference}
129-
style={{ display: innerShow || show ? 'block' : 'none' }}
130-
{...props}
131-
>
132-
{children}
133-
</Tag>
134-
{ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
130+
{(show || innerShow) &&
131+
ReactDOM.createPortal(
132+
<>
133+
<Tag
134+
className={classes}
135+
ref={modalReference}
136+
style={{ display: innerShow || show ? 'block' : 'none' }}
137+
{...props}
138+
>
139+
{children}
140+
</Tag>
141+
{ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
142+
</>,
143+
document.body
144+
)}
135145
</>
136146
);
137147
};
138-
MDBModal.defaultProps = { tag: 'div', backdrop: true };
148+
MDBModal.defaultProps = { tag: 'div', backdrop: true, closeOnEsc: true };
139149
export default MDBModal;

‎app/src/forms/Checkbox/Checkbox.tsx

+40-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import clsx from 'clsx';
2-
import React, { useState } from 'react';
2+
import React from 'react';
33
import type { CheckboxProps } from './types';
44

55
const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection, CheckboxProps>(
@@ -20,6 +20,7 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
2020
validation,
2121
invalid,
2222
btnColor,
23+
disableWrapper,
2324
toggleSwitch,
2425
...props
2526
},
@@ -49,23 +50,45 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
4950
const validationClasses = clsx(validation && (invalid ? 'invalid-feedback' : 'valid-feedback'));
5051

5152
return (
52-
<WrapperTag className={wrapperClasses}>
53-
<Tag
54-
className={inputClasses}
55-
type='checkbox'
56-
defaultChecked={defaultChecked}
57-
checked={checked}
58-
id={id}
59-
ref={ref}
60-
{...props}
61-
/>
62-
{label && (
63-
<label className={labelClasses} id={labelId} htmlFor={id}>
64-
{label}
65-
</label>
53+
<>
54+
{disableWrapper ? (
55+
<>
56+
<Tag
57+
className={inputClasses}
58+
type='checkbox'
59+
defaultChecked={defaultChecked}
60+
checked={checked}
61+
id={id}
62+
ref={ref}
63+
{...props}
64+
/>
65+
{label && (
66+
<label className={labelClasses} id={labelId} htmlFor={id}>
67+
{label}
68+
</label>
69+
)}
70+
{validation && <div className={validationClasses}>{validation}</div>}
71+
</>
72+
) : (
73+
<WrapperTag className={wrapperClasses}>
74+
<Tag
75+
className={inputClasses}
76+
type='checkbox'
77+
defaultChecked={defaultChecked}
78+
checked={checked}
79+
id={id}
80+
ref={ref}
81+
{...props}
82+
/>
83+
{label && (
84+
<label className={labelClasses} id={labelId} htmlFor={id}>
85+
{label}
86+
</label>
87+
)}
88+
{validation && <div className={validationClasses}>{validation}</div>}
89+
</WrapperTag>
6690
)}
67-
{validation && <div className={validationClasses}>{validation}</div>}
68-
</WrapperTag>
91+
</>
6992
);
7093
}
7194
);

‎app/src/forms/Checkbox/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ declare const MDBCheckbox: React.FunctionComponent<{
1717
invalid?: boolean;
1818
btn?: boolean;
1919
btnColor?: string;
20+
disableWrapper?: boolean;
2021
[rest: string]: any;
2122
}>;
2223

‎app/src/forms/Checkbox/types.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ type CheckboxProps = {
1717
checked?: boolean;
1818
btn?: boolean;
1919
btnColor?: string;
20+
disableWrapper?: boolean;
2021
[rest: string]: any;
2122
};
2223

‎app/src/forms/Input/Input.tsx

+30-9
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const MDBInput: React.FC<InputProps> = ({
77
size,
88
contrast,
99
value,
10+
defaultValue,
1011
id,
1112
labelId,
1213
labelClass,
@@ -27,6 +28,8 @@ const MDBInput: React.FC<InputProps> = ({
2728
btnOnClick,
2829
btnRef,
2930
btnChildren,
31+
onBlur,
32+
readonly,
3033
btn,
3134
...props
3235
}) => {
@@ -41,7 +44,9 @@ const MDBInput: React.FC<InputProps> = ({
4144

4245
const [oldValue, setNewValue] = useState(value);
4346
const [labelWidth, setLabelWidth] = useState(0);
44-
const [active, setActive] = useState(value !== undefined && value.length > 0 ? true : false);
47+
const [active, setActive] = useState(
48+
(value !== undefined && value.length > 0) || (defaultValue !== undefined && defaultValue.length) > 0 ? true : false
49+
);
4550

4651
const wrapperClasses = clsx('form-outline', contrast && 'form-white', wrapperClass);
4752
const inputClasses = clsx('form-control', active && 'active', size && `form-control-${size}`, className);
@@ -70,39 +75,55 @@ const MDBInput: React.FC<InputProps> = ({
7075
value.length > 0 ? setActive(true) : setActive(false);
7176
}, [value]);
7277

78+
useEffect(() => {
79+
if (defaultValue === undefined) return;
80+
defaultValue.length > 0 ? setActive(true) : setActive(false);
81+
}, [defaultValue]);
82+
7383
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
7484
setNewValue(e.currentTarget.value);
7585
onChange && onChange(e);
7686
};
7787

78-
const handleBlur = useCallback(() => {
79-
if ((oldValue !== undefined && oldValue.length > 0) || (value !== undefined && value.length > 0)) {
80-
setActive(true);
81-
} else {
82-
setActive(false);
83-
}
84-
}, [oldValue, value]);
88+
const handleBlur = useCallback(
89+
(e) => {
90+
if (
91+
(oldValue !== undefined && oldValue.length > 0) ||
92+
(value !== undefined && value.length > 0 && defaultValue !== undefined && defaultValue.length > 0)
93+
) {
94+
setActive(true);
95+
} else {
96+
setActive(false);
97+
}
98+
onBlur && onBlur(e);
99+
},
100+
[oldValue, value, defaultValue, onBlur]
101+
);
85102

86103
return (
87104
<WrapperTag className={wrapperClasses} style={{ ...wrapperStyle }}>
88105
{textarea ? (
89106
<textarea
107+
readOnly={readonly}
90108
className={inputClasses}
91109
onBlur={handleBlur}
92110
onChange={handleChange}
93111
onFocus={setWidth}
112+
defaultValue={defaultValue}
94113
value={value}
95114
id={id}
96115
ref={inputReference}
97116
{...props}
98117
/>
99118
) : (
100119
<input
120+
readOnly={readonly}
101121
className={inputClasses}
102122
onBlur={handleBlur}
103123
onChange={handleChange}
104124
onFocus={setWidth}
105125
value={value}
126+
defaultValue={defaultValue}
106127
id={id}
107128
ref={inputReference}
108129
{...props}
@@ -129,6 +150,6 @@ const MDBInput: React.FC<InputProps> = ({
129150
);
130151
};
131152

132-
MDBInput.defaultProps = { wrapperTag: 'div' };
153+
MDBInput.defaultProps = { wrapperTag: 'div', readonly: false };
133154

134155
export default MDBInput;

‎app/src/forms/Input/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ declare const MDBInput: React.FunctionComponent<{
1616
readonly?: boolean;
1717
contrast?: boolean;
1818
value?: string;
19+
defaultValue?: string;
1920
name?: string;
2021
validation?: string;
2122
invalid?: boolean;

‎app/src/forms/Input/types.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ type InputProps = {
1616
readonly?: boolean;
1717
contrast?: boolean;
1818
value?: string;
19+
defaultValue?: string;
1920
name?: string;
2021
validation?: string;
2122
invalid?: boolean;

‎app/src/navigation/Scrollspy/ScrollspyNavList/ScrollspyNavList.tsx

+36-21
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,43 @@
11
import clsx from 'clsx';
2-
import React from 'react';
2+
import React, { useEffect, useRef, useState } from 'react';
33
import type { ScrollspyNavListProps } from './types';
44

5-
const MDBScrollspyNavList: React.FC<ScrollspyNavListProps> = React.forwardRef<HTMLAllCollection, ScrollspyNavListProps>(
6-
({ className, collapsible, active, tag: Tag, children, ...props }, ref) => {
7-
const classes = clsx('nav', className);
5+
const MDBScrollspyNavList: React.FC<ScrollspyNavListProps> = ({
6+
className,
7+
collapsible,
8+
active,
9+
tag: Tag,
10+
children,
11+
...props
12+
}) => {
13+
const classes = clsx('nav', className);
814

9-
return (
10-
<Tag
11-
className={classes}
12-
ref={ref}
13-
{...props}
14-
style={{
15-
overflow: collapsible && 'hidden',
16-
height: collapsible && (active ? '46px' : '0px'),
17-
transition: collapsible && 'height .5s ease',
18-
flexWrap: collapsible && 'nowrap',
19-
}}
20-
>
21-
{children}
22-
</Tag>
23-
);
24-
}
25-
);
15+
const [listHeight, setListHeight] = useState(0);
16+
17+
const listReference = useRef<HTMLElement>(null);
18+
19+
useEffect(() => {
20+
if (listReference.current) {
21+
setListHeight(listReference.current?.scrollHeight);
22+
}
23+
}, [listReference]);
24+
25+
return (
26+
<Tag
27+
className={classes}
28+
ref={listReference}
29+
{...props}
30+
style={{
31+
overflow: collapsible && 'hidden',
32+
height: collapsible && (active ? `${listHeight}px` : '0px'),
33+
transition: collapsible && 'height .5s ease',
34+
flexWrap: collapsible && 'nowrap',
35+
}}
36+
>
37+
{children}
38+
</Tag>
39+
);
40+
};
2641

2742
MDBScrollspyNavList.defaultProps = { tag: 'ul' };
2843

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-react-ui-kit",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"main": "./dist/mdb-react-ui-kit.js",
55
"module": "./dist/mdb-react-ui-kit.esm.js",
66
"types": "./dist/index.d.ts",

0 commit comments

Comments
 (0)