Skip to content

Commit c9d6ae0

Browse files
author
Krzysztof Wilk
committed
Generate version 2.1.0
1 parent fd1932d commit c9d6ae0

Some content is hidden

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

66 files changed

+235
-592
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 2.0.0
3+
Version: FREE 2.1.0
44

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

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

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,24 @@ const MDBCollapse: React.FC<CollapseProps> = ({
1010
id,
1111
navbar,
1212
tag: Tag,
13+
collapseRef,
1314
style,
1415
...props
1516
}): JSX.Element => {
1617
const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false);
1718
const [showCollapseString, setShowCollapseString] = useState<string | undefined>('');
1819
const [statement, setStatement] = useState(false);
1920
const [collapseHeight, setCollapseHeight] = useState<string | number | undefined>(undefined);
20-
const [transition, setTransition] = useState(false);
21-
2221
const classes = clsx(
23-
transition ? 'collapsing' : 'collapse',
24-
!transition && (showCollapse || statement) && 'show',
22+
'collapsing',
23+
'collapse',
24+
(showCollapse || statement) && 'show',
2525
navbar && 'navbar-collapse',
2626
center && 'justify-content-center',
2727
className
2828
);
29-
const refCollapse = useRef<HTMLElement>(null);
29+
const collapseEl = useRef<HTMLElement>(null);
30+
const refCollapse = collapseRef ? collapseRef : collapseEl;
3031

3132
const handleResize = useCallback(() => {
3233
if (showCollapse || statement) {
@@ -38,7 +39,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
3839
if (collapseHeight === undefined && (showCollapse || statement)) {
3940
setCollapseHeight(refCollapse?.current?.scrollHeight);
4041
}
41-
}, [collapseHeight, showCollapse, statement]);
42+
}, [collapseHeight, showCollapse, statement, refCollapse]);
4243

4344
useEffect(() => {
4445
if (typeof show === 'string') {
@@ -48,17 +49,17 @@ const MDBCollapse: React.FC<CollapseProps> = ({
4849
setShowCollapse(show);
4950
}
5051

51-
if (statement || showCollapse) {
52-
setTransition(true);
53-
}
52+
// if (statement || showCollapse) {
53+
// setTransition(true);
54+
// }
5455

55-
const timer = setTimeout(() => {
56-
setTransition(false);
57-
}, 350);
56+
// const timer = setTimeout(() => {
57+
// setTransition(false);
58+
// }, 350);
5859

59-
return () => {
60-
clearTimeout(timer);
61-
};
60+
// return () => {
61+
// clearTimeout(timer);
62+
// };
6263
}, [show, showCollapse, id, showCollapseString, statement]);
6364

6465
useEffect(() => {
@@ -67,7 +68,7 @@ const MDBCollapse: React.FC<CollapseProps> = ({
6768
} else {
6869
setCollapseHeight(0);
6970
}
70-
}, [showCollapse, statement]);
71+
}, [showCollapse, statement, refCollapse]);
7172

7273
useEffect(() => {
7374
window.addEventListener('resize', handleResize);

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const MDBInput: React.FC<InputProps> = ({
2727
btnClasses,
2828
btnOnClick,
2929
btnRef,
30+
type,
3031
onBlur,
3132
readonly,
3233
btn,
@@ -49,7 +50,13 @@ const MDBInput: React.FC<InputProps> = ({
4950
);
5051

5152
const wrapperClasses = clsx('form-outline', contrast && 'form-white', wrapperClass);
52-
const inputClasses = clsx('form-control', active && 'active', size && `form-control-${size}`, className);
53+
const inputClasses = clsx(
54+
'form-control',
55+
active && 'active',
56+
type === 'date' && 'active',
57+
size && `form-control-${size}`,
58+
className
59+
);
5360
const labelClasses = clsx('form-label', labelClass);
5461
const validationClasses = clsx(
5562
validation &&
@@ -114,6 +121,7 @@ const MDBInput: React.FC<InputProps> = ({
114121
/>
115122
) : (
116123
<input
124+
type={type}
117125
readOnly={readonly}
118126
className={inputClasses}
119127
onBlur={handleBlur}

‎app/src/layout/Column/Column.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const MDBCol: React.FC<ColumnProps> = React.forwardRef<HTMLAllCollection, Column
2020
start,
2121
tag: Tag,
2222
xl,
23+
xxl,
2324
xs,
2425
...props
2526
},
@@ -32,7 +33,8 @@ const MDBCol: React.FC<ColumnProps> = React.forwardRef<HTMLAllCollection, Column
3233
md && `col-md-${md}`,
3334
lg && `col-lg-${lg}`,
3435
xl && `col-xl-${xl}`,
35-
!size && !xs && !sm && !md && !lg && !xl ? 'col' : '',
36+
xxl && `col-xxl-${xxl}`,
37+
!size && !xs && !sm && !md && !lg && !xl && !xxl ? 'col' : '',
3638
order && `order-${order}`,
3739
start && 'align-self-start',
3840
center && 'align-self-center',

‎app/src/layout/Column/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ declare const MDBCol: React.FunctionComponent<{
1515
start?: string | boolean;
1616
tag?: React.ElementType;
1717
xl?: string;
18+
xxl?: string;
1819
xs?: string;
1920
[rest: string]: any;
2021
}>;

‎app/src/layout/Column/types.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ type ColumnProps = {
1515
start?: string | boolean;
1616
tag?: React.ComponentProps<any>;
1717
xl?: string;
18+
xxl?: string;
1819
xs?: string;
1920
[rest: string]: any;
2021
};

‎app/src/methods/Ripple/Ripple.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import clsx from 'clsx';
2-
import React, { useState, useEffect } from 'react';
2+
import React, { useState, useEffect, useRef } from 'react';
33
import type { RippleProps } from './types';
44
import MDBBtn from '../../components/Button/Button';
55
import MDBRippleWave from './RippleWave/RippleWave';
66

7-
const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, RippleProps>(
7+
const MDBRipple: React.FC<RippleProps> =
88
(
99
{
1010
className,
@@ -16,10 +16,12 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
1616
rippleColor,
1717
children,
1818
onClick,
19+
rippleRef,
1920
...props
20-
},
21-
ref
21+
}
2222
) => {
23+
const rippleEl = useRef(null);
24+
const rippleReference = rippleRef ? rippleRef : rippleEl;
2325
const GRADIENT =
2426
'rgba({{color}}, 0.2) 0, rgba({{color}}, 0.3) 40%, rgba({{color}}, 0.4) 50%, rgba({{color}}, 0.5) 60%, rgba({{color}}, 0) 70%';
2527

@@ -159,7 +161,7 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
159161
};
160162

161163
const getStyles = (e: any) => {
162-
const itemRect = e.target.getBoundingClientRect();
164+
const itemRect = rippleReference.current.getBoundingClientRect();
163165

164166
const offsetX = e.clientX - itemRect.left;
165167
const offsetY = e.clientY - itemRect.top;
@@ -219,15 +221,14 @@ const MDBRipple: React.FC<RippleProps> = React.forwardRef<HTMLAllCollection, Rip
219221
}, [rippleDuration, rippleStyles]);
220222

221223
return (
222-
<Tag className={classes} onClick={(e: any) => handleClick(e)} ref={ref} {...props}>
224+
<Tag className={classes} onClick={(e: any) => handleClick(e)} ref={rippleReference} {...props}>
223225
{children}
224226
{rippleStyles.map((item, i) => (
225227
<MDBRippleWave key={i} style={item}></MDBRippleWave>
226228
))}
227229
</Tag>
228230
);
229-
}
230-
);
231+
};
231232

232233
MDBRipple.defaultProps = { rippleTag: 'div', rippleDuration: 500, rippleRadius: 0, rippleColor: 'dark' };
233234

‎dist/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ declare const MDBCol: React$1.FunctionComponent<{
2323
start?: string | boolean;
2424
tag?: React$1.ElementType;
2525
xl?: string;
26+
xxl?: string;
2627
xs?: string;
2728
[rest: string]: any;
2829
}>;

‎dist/mdb-react-ui-kit.esm.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mdb-react-ui-kit.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/scss/bootstrap-rtl-fix/_breadcrumb.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
float: left; // Suppress inline spacings and underlining of the separator
1919
padding-right: $breadcrumb-item-padding-x;
2020
color: $breadcrumb-divider-color;
21-
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/*!rtl:'}
22-
var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{'*/'};
21+
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/*!rtl:'} var(
22+
--#{$variable-prefix}breadcrumb-divider,
23+
escape-svg($breadcrumb-divider-flipped)
24+
) #{'*/'};
2325
}
2426
}
2527

‎dist/scss/bootstrap-rtl-fix/_buttons.scss

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -100,19 +100,9 @@
100100
//
101101

102102
.btn-lg {
103-
@include button-size(
104-
$btn-padding-y-lg,
105-
$btn-padding-x-lg,
106-
$btn-font-size-lg,
107-
$btn-border-radius-lg
108-
);
103+
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
109104
}
110105

111106
.btn-sm {
112-
@include button-size(
113-
$btn-padding-y-sm,
114-
$btn-padding-x-sm,
115-
$btn-font-size-sm,
116-
$btn-border-radius-sm
117-
);
107+
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
118108
}

‎dist/scss/bootstrap-rtl-fix/_carousel.scss

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -115,19 +115,11 @@
115115
}
116116
.carousel-control-prev {
117117
left: 0;
118-
background-image: if(
119-
$enable-gradients,
120-
linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)),
121-
null
122-
);
118+
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)), null);
123119
}
124120
.carousel-control-next {
125121
right: 0;
126-
background-image: if(
127-
$enable-gradients,
128-
linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)),
129-
null
130-
);
122+
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)), null);
131123
}
132124

133125
// Icons for within

‎dist/scss/bootstrap-rtl-fix/_functions.scss

Lines changed: 23 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -40,21 +40,12 @@
4040
// stylelint-disable scss/dollar-variable-pattern
4141
@function rgba-css-var($identifier, $target) {
4242
@if $identifier == 'body' and $target == 'bg' {
43-
@return rgba(
44-
var(--#{$variable-prefix}#{$identifier}-bg-rgb),
45-
var(--#{$variable-prefix}#{$target}-opacity)
46-
);
43+
@return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
4744
}
4845
@if $identifier == 'body' and $target == 'text' {
49-
@return rgba(
50-
var(--#{$variable-prefix}#{$identifier}-color-rgb),
51-
var(--#{$variable-prefix}#{$target}-opacity)
52-
);
46+
@return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
5347
} @else {
54-
@return rgba(
55-
var(--#{$variable-prefix}#{$identifier}-rgb),
56-
var(--#{$variable-prefix}#{$target}-opacity)
57-
);
48+
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
5849
}
5950
}
6051

@@ -169,25 +160,22 @@
169160

170161
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
171162
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
172-
$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033
173-
0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097
174-
0.0103 0.011 0.0116 0.0123 0.013 0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203
175-
0.0212 0.0222 0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343 0.0356
176-
0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529 0.0545 0.0561
177-
0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823
178-
0.0844 0.0865 0.0887 0.0908 0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144
179-
0.117 0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529
180-
0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981
181-
0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346 0.2384 0.2423 0.2462 0.2502
182-
0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095
183-
0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763
184-
0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508
185-
0.4564 0.4621 0.4678 0.4735 0.4793 0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333
186-
0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172 0.624
187-
0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011 0.7084 0.7157 0.7231
188-
0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308
189-
0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473
190-
0.956 0.9647 0.9734 0.9823 0.9911 1;
163+
$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033 0.0037 0.004 0.0044
164+
0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013 0.0137
165+
0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222 0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296
166+
0.0307 0.0319 0.0331 0.0343 0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529
167+
0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844
168+
0.0865 0.0887 0.0908 0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117 0.1195 0.1221 0.1248
169+
0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746
170+
0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346
171+
0.2384 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305
172+
0.3095 0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763 0.3813 0.3864
173+
0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564 0.4621 0.4678 0.4735 0.4793
174+
0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841
175+
0.5906 0.5972 0.6038 0.6105 0.6172 0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011
176+
0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308
177+
0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956 0.9647 0.9734
178+
0.9823 0.9911 1;
191179

192180
@function color-contrast(
193181
$background,
@@ -232,11 +220,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
232220
);
233221

234222
@each $name, $value in $rgb {
235-
$value: if(
236-
divide($value, 255) < 0.03928,
237-
divide(divide($value, 255), 12.92),
238-
nth($_luminance-list, $value + 1)
239-
);
223+
$value: if(divide($value, 255) < 0.03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
240224
$rgb: map-merge(
241225
$rgb,
242226
(
@@ -245,8 +229,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
245229
);
246230
}
247231

248-
@return (map-get($rgb, 'r') * 0.2126) + (map-get($rgb, 'g') * 0.7152) +
249-
(map-get($rgb, 'b') * 0.0722);
232+
@return (map-get($rgb, 'r') * 0.2126) + (map-get($rgb, 'g') * 0.7152) + (map-get($rgb, 'b') * 0.0722);
250233
}
251234

252235
// Return opaque color
@@ -286,11 +269,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
286269
@return $value1 + $value2;
287270
}
288271

289-
@return if(
290-
$return-calc == true,
291-
calc(#{$value1} + #{$value2}),
292-
$value1 + unquote(' + ') + $value2
293-
);
272+
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(' + ') + $value2);
294273
}
295274

296275
@function subtract($value1, $value2, $return-calc: true) {
@@ -314,11 +293,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
314293
$value2: unquote('(') + $value2 + unquote(')');
315294
}
316295

317-
@return if(
318-
$return-calc == true,
319-
calc(#{$value1} - #{$value2}),
320-
$value1 + unquote(' - ') + $value2
321-
);
296+
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(' - ') + $value2);
322297
}
323298

324299
@function divide($dividend, $divisor, $precision: 10) {

0 commit comments

Comments
 (0)