1.3.0

mdbootstrap · Aug 31, 2021 · ce3bf58 · ce3bf58
1 parent 102bc00
commit ce3bf58
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 69 deletions.
diff --git a/README.txt b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 1.2.0
+Version: FREE 1.3.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "index.js",
   "repository": {
     "type": "git",

diff --git a/app/src/components/Modal/Modal.tsx b/app/src/components/Modal/Modal.tsx
@@ -2,11 +2,13 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
 import clsx from 'clsx';
 import type { ModalProps } from './types';
 import ReactDOM from 'react-dom';
+
 const MDBModal: React.FC<ModalProps> = ({
   animationDirection,
   backdrop,
   children,
   className,
+  closeOnEsc,
   getOpenState,
   modalRef,
   show,
@@ -62,18 +64,20 @@ const MDBModal: React.FC<ModalProps> = ({
 
   const handleKeydown = useCallback(
     (event: KeyboardEvent) => {
-      if (isOpenModal && event.key === 'Escape') {
-        if (!staticBackdrop) {
-          closeModal();
-        } else {
-          setStaticModal(true);
-          setTimeout(() => {
-            setStaticModal(false);
-          }, 300);
+      if (closeOnEsc) {
+        if (isOpenModal && event.key === 'Escape') {
+          if (!staticBackdrop) {
+            closeModal();
+          } else {
+            setStaticModal(true);
+            setTimeout(() => {
+              setStaticModal(false);
+            }, 300);
+          }
         }
       }
     },
-    [closeModal, isOpenModal, staticBackdrop]
+    [closeModal, isOpenModal, staticBackdrop, closeOnEsc]
   );
 
   useEffect(() => {
@@ -123,17 +127,23 @@ const MDBModal: React.FC<ModalProps> = ({
 
   return (
     <>
-      <Tag
-        className={classes}
-        ref={modalReference}
-        style={{ display: innerShow || show ? 'block' : 'none' }}
-        {...props}
-      >
-        {children}
-      </Tag>
-      {ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
+      {(show || innerShow) &&
+        ReactDOM.createPortal(
+          <>
+            <Tag
+              className={classes}
+              ref={modalReference}
+              style={{ display: innerShow || show ? 'block' : 'none' }}
+              {...props}
+            >
+              {children}
+            </Tag>
+            {ReactDOM.createPortal(backdrop && innerShow && <div className={backdropClasses}></div>, document.body)}
+          </>,
+          document.body
+        )}
     </>
   );
 };
-MDBModal.defaultProps = { tag: 'div', backdrop: true };
+MDBModal.defaultProps = { tag: 'div', backdrop: true, closeOnEsc: true };
 export default MDBModal;
diff --git a/app/src/forms/Checkbox/Checkbox.tsx b/app/src/forms/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React from 'react';
 import type { CheckboxProps } from './types';
 
 const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection, CheckboxProps>(
@@ -20,6 +20,7 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
       validation,
       invalid,
       btnColor,
+      disableWrapper,
       toggleSwitch,
       ...props
     },
@@ -49,23 +50,45 @@ const MDBCheckbox: React.FC<CheckboxProps> = React.forwardRef<HTMLAllCollection,
     const validationClasses = clsx(validation && (invalid ? 'invalid-feedback' : 'valid-feedback'));
 
     return (
-      <WrapperTag className={wrapperClasses}>
-        <Tag
-          className={inputClasses}
-          type='checkbox'
-          defaultChecked={defaultChecked}
-          checked={checked}
-          id={id}
-          ref={ref}
-          {...props}
-        />
-        {label && (
-          <label className={labelClasses} id={labelId} htmlFor={id}>
-            {label}
-          </label>
+      <>
+        {disableWrapper ? (
+          <>
+            <Tag
+              className={inputClasses}
+              type='checkbox'
+              defaultChecked={defaultChecked}
+              checked={checked}
+              id={id}
+              ref={ref}
+              {...props}
+            />
+            {label && (
+              <label className={labelClasses} id={labelId} htmlFor={id}>
+                {label}
+              </label>
+            )}
+            {validation && <div className={validationClasses}>{validation}</div>}
+          </>
+        ) : (
+          <WrapperTag className={wrapperClasses}>
+            <Tag
+              className={inputClasses}
+              type='checkbox'
+              defaultChecked={defaultChecked}
+              checked={checked}
+              id={id}
+              ref={ref}
+              {...props}
+            />
+            {label && (
+              <label className={labelClasses} id={labelId} htmlFor={id}>
+                {label}
+              </label>
+            )}
+            {validation && <div className={validationClasses}>{validation}</div>}
+          </WrapperTag>
         )}
-        {validation && <div className={validationClasses}>{validation}</div>}
-      </WrapperTag>
+      </>
     );
   }
 );

diff --git a/app/src/forms/Checkbox/index.d.ts b/app/src/forms/Checkbox/index.d.ts
@@ -17,6 +17,7 @@ declare const MDBCheckbox: React.FunctionComponent<{
   invalid?: boolean;
   btn?: boolean;
   btnColor?: string;
+  disableWrapper?: boolean;
   [rest: string]: any;
 }>;
 

diff --git a/app/src/forms/Checkbox/types.tsx b/app/src/forms/Checkbox/types.tsx
@@ -17,6 +17,7 @@ type CheckboxProps = {
   checked?: boolean;
   btn?: boolean;
   btnColor?: string;
+  disableWrapper?: boolean;
   [rest: string]: any;
 };
 

diff --git a/app/src/forms/Input/Input.tsx b/app/src/forms/Input/Input.tsx
@@ -7,6 +7,7 @@ const MDBInput: React.FC<InputProps> = ({
   size,
   contrast,
   value,
+  defaultValue,
   id,
   labelId,
   labelClass,
@@ -27,6 +28,8 @@ const MDBInput: React.FC<InputProps> = ({
   btnOnClick,
   btnRef,
   btnChildren,
+  onBlur,
+  readonly,
   btn,
   ...props
 }) => {
@@ -41,7 +44,9 @@ const MDBInput: React.FC<InputProps> = ({
 
   const [oldValue, setNewValue] = useState(value);
   const [labelWidth, setLabelWidth] = useState(0);
-  const [active, setActive] = useState(value !== undefined && value.length > 0 ? true : false);
+  const [active, setActive] = useState(
+    (value !== undefined && value.length > 0) || (defaultValue !== undefined && defaultValue.length) > 0 ? true : false
+  );
 
   const wrapperClasses = clsx('form-outline', contrast && 'form-white', wrapperClass);
   const inputClasses = clsx('form-control', active && 'active', size && `form-control-${size}`, className);
@@ -70,39 +75,55 @@ const MDBInput: React.FC<InputProps> = ({
     value.length > 0 ? setActive(true) : setActive(false);
   }, [value]);
 
+  useEffect(() => {
+    if (defaultValue === undefined) return;
+    defaultValue.length > 0 ? setActive(true) : setActive(false);
+  }, [defaultValue]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setNewValue(e.currentTarget.value);
     onChange && onChange(e);
   };
 
-  const handleBlur = useCallback(() => {
-    if ((oldValue !== undefined && oldValue.length > 0) || (value !== undefined && value.length > 0)) {
-      setActive(true);
-    } else {
-      setActive(false);
-    }
-  }, [oldValue, value]);
+  const handleBlur = useCallback(
+    (e) => {
+      if (
+        (oldValue !== undefined && oldValue.length > 0) ||
+        (value !== undefined && value.length > 0 && defaultValue !== undefined && defaultValue.length > 0)
+      ) {
+        setActive(true);
+      } else {
+        setActive(false);
+      }
+      onBlur && onBlur(e);
+    },
+    [oldValue, value, defaultValue, onBlur]
+  );
 
   return (
     <WrapperTag className={wrapperClasses} style={{ ...wrapperStyle }}>
       {textarea ? (
         <textarea
+          readOnly={readonly}
           className={inputClasses}
           onBlur={handleBlur}
           onChange={handleChange}
           onFocus={setWidth}
+          defaultValue={defaultValue}
           value={value}
           id={id}
           ref={inputReference}
           {...props}
         />
       ) : (
         <input
+          readOnly={readonly}
           className={inputClasses}
           onBlur={handleBlur}
           onChange={handleChange}
           onFocus={setWidth}
           value={value}
+          defaultValue={defaultValue}
           id={id}
           ref={inputReference}
           {...props}
@@ -129,6 +150,6 @@ const MDBInput: React.FC<InputProps> = ({
   );
 };
 
-MDBInput.defaultProps = { wrapperTag: 'div' };
+MDBInput.defaultProps = { wrapperTag: 'div', readonly: false };
 
 export default MDBInput;
diff --git a/app/src/forms/Input/index.d.ts b/app/src/forms/Input/index.d.ts
@@ -16,6 +16,7 @@ declare const MDBInput: React.FunctionComponent<{
   readonly?: boolean;
   contrast?: boolean;
   value?: string;
+  defaultValue?: string;
   name?: string;
   validation?: string;
   invalid?: boolean;

diff --git a/app/src/forms/Input/types.tsx b/app/src/forms/Input/types.tsx
@@ -16,6 +16,7 @@ type InputProps = {
   readonly?: boolean;
   contrast?: boolean;
   value?: string;
+  defaultValue?: string;
   name?: string;
   validation?: string;
   invalid?: boolean;

diff --git a/app/src/navigation/Scrollspy/ScrollspyNavList/ScrollspyNavList.tsx b/app/src/navigation/Scrollspy/ScrollspyNavList/ScrollspyNavList.tsx
@@ -1,28 +1,43 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import type { ScrollspyNavListProps } from './types';
 
-const MDBScrollspyNavList: React.FC<ScrollspyNavListProps> = React.forwardRef<HTMLAllCollection, ScrollspyNavListProps>(
-  ({ className, collapsible, active, tag: Tag, children, ...props }, ref) => {
-    const classes = clsx('nav', className);
+const MDBScrollspyNavList: React.FC<ScrollspyNavListProps> = ({
+  className,
+  collapsible,
+  active,
+  tag: Tag,
+  children,
+  ...props
+}) => {
+  const classes = clsx('nav', className);
 
-    return (
-      <Tag
-        className={classes}
-        ref={ref}
-        {...props}
-        style={{
-          overflow: collapsible && 'hidden',
-          height: collapsible && (active ? '46px' : '0px'),
-          transition: collapsible && 'height .5s ease',
-          flexWrap: collapsible && 'nowrap',
-        }}
-      >
-        {children}
-      </Tag>
-    );
-  }
-);
+  const [listHeight, setListHeight] = useState(0);
+
+  const listReference = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (listReference.current) {
+      setListHeight(listReference.current?.scrollHeight);
+    }
+  }, [listReference]);
+
+  return (
+    <Tag
+      className={classes}
+      ref={listReference}
+      {...props}
+      style={{
+        overflow: collapsible && 'hidden',
+        height: collapsible && (active ? `${listHeight}px` : '0px'),
+        transition: collapsible && 'height .5s ease',
+        flexWrap: collapsible && 'nowrap',
+      }}
+    >
+      {children}
+    </Tag>
+  );
+};
 
 MDBScrollspyNavList.defaultProps = { tag: 'ul' };
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./dist/mdb-react-ui-kit.js",
   "module": "./dist/mdb-react-ui-kit.esm.js",
   "types": "./dist/index.d.ts",