release: 6.3.0

Author: mako3577

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 6.2.0
+Version: FREE 6.3.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/package.json

@@ -1,6 +1,6 @@
 {
  "name": "mdb-react-ui-kit-demo",
- "version": "6.2.0",
+ "version": "6.3.0",
  "main": "index.js",
  "repository": {
  "type": "git",

app/src/components/Accordion/Accordion.tsx

@@ -1,26 +1,34 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { AccordionProps } from './types';
 import { AccordionContext } from './AccordionContext';
 
 const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollection, AccordionProps>(
  (
- { alwaysOpen, borderless, className, flush, initialActive = 0, tag: Tag = 'div', children, onChange, ...props },
+ {
+ alwaysOpen,
+ borderless,
+ className,
+ flush,
+ active,
+ initialActive = 0,
+ tag: Tag = 'div',
+ children,
+ onChange,
+ ...props
+ },
  ref
  ) => {
+ const isControlled = useMemo(() => typeof active !== 'undefined', [active]);
  const classes = clsx('accordion', flush && 'accordion-flush', borderless && 'accordion-borderless', className);
 
  const [activeItem, setActiveItem] = useState(initialActive);
 
- useEffect(() => {
- if (!activeItem) return;
-
- onChange && onChange(activeItem);
- }, [onChange, activeItem]);
-
  return (
  <Tag className={classes} ref={ref} {...props}>
- <AccordionContext.Provider value={{ activeItem, setActiveItem, alwaysOpen, initialActive }}>
+ <AccordionContext.Provider
+ value={{ activeItem: isControlled ? active : activeItem, setActiveItem, alwaysOpen, initialActive, onChange }}
+ >
  {children}
  </AccordionContext.Provider>
  </Tag>

app/src/components/Accordion/AccordionContext.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 interface AccordionProps {
- activeItem?: number;
+ activeItem?: number | number[];
  setActiveItem: React.SetStateAction<any>;
  alwaysOpen?: boolean;
- initialActive?: number;
+ initialActive?: number | number[];
+ onChange?: (id: number | number[]) => void;
 }
 
 const AccordionContext = React.createContext<AccordionProps>({

app/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useMemo, useCallback } from 'react';
 import { AccordionContext } from '../AccordionContext';
 import type { AccordionItemProps } from './types';
 import MDBCollapse from '../../Collapse/Collapse';
@@ -21,26 +21,42 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
  },
  ref
  ) => {
- const { activeItem, setActiveItem, alwaysOpen, initialActive } = useContext(AccordionContext);
+ const { activeItem, setActiveItem, alwaysOpen, onChange } = useContext(AccordionContext);
 
- const [openState, setOpenState] = useState(initialActive);
+ const isCollapsed: boolean = useMemo(() => {
+ const isArray = Array.isArray(activeItem);
+ if (isArray) {
+ return activeItem.includes(collapseId);
+ }
+ return activeItem === collapseId;
+ }, [activeItem, collapseId]);
 
  const classes = clsx('accordion-item', className);
  const headerClasses = clsx('accordion-header', headerClassName);
  const bodyClasses = clsx('accordion-body', bodyClassName);
- const buttonClasses = clsx(
- 'accordion-button',
- alwaysOpen ? collapseId !== openState && 'collapsed' : collapseId !== activeItem && 'collapsed',
- btnClassName
- );
+ const buttonClasses = clsx('accordion-button', !isCollapsed && 'collapsed', btnClassName);
 
- const toggleAccordion = (value: number) => {
- if (alwaysOpen) {
- value !== openState ? setOpenState(value) : setOpenState(0);
- } else {
- value !== activeItem ? setActiveItem(value) : setActiveItem(0);
- }
- };
+ const toggleAccordion = useCallback(
+ (itemId: number) => {
+ let newValue: number | number[] = itemId;
+ const isArray = Array.isArray(activeItem);
+
+ if (isArray) {
+ activeItem.includes(itemId)
+ ? (newValue = activeItem.filter((item) => item !== itemId))
+ : (newValue = alwaysOpen ? [...activeItem, itemId] : [itemId]);
+ } else {
+ newValue = activeItem === itemId ? 0 : itemId;
+
+ // if alwaysOpen is true, we must convert newValue to array
+ alwaysOpen && (newValue = [newValue]);
+ }
+
+ onChange?.(newValue);
+ setActiveItem(newValue);
+ },
+ [onChange, activeItem, setActiveItem, alwaysOpen]
+ );
 
  return (
  <Tag className={classes} ref={ref} {...props}>
@@ -49,10 +65,7 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
  {headerTitle}
  </button>
  </h2>
- <MDBCollapse
- id={collapseId.toString()}
- show={alwaysOpen ? openState === collapseId : activeItem === collapseId}
- >
+ <MDBCollapse id={collapseId.toString()} show={isCollapsed}>
  <div className={bodyClasses} style={bodyStyle}>
  {children}
  </div>

app/src/components/Accordion/types.tsx

@@ -5,8 +5,9 @@ interface AccordionProps extends BaseComponent {
  alwaysOpen?: boolean;
  borderless?: boolean;
  flush?: boolean;
- initialActive?: number;
- onChange?: (id: number) => void;
+ active?: number | number[];
+ initialActive?: number | number[];
+ onChange?: (id: number | number[]) => void;
  ref?: React.ForwardedRef<HTMLAllCollection>;
  tag?: React.ComponentProps<any>;
 }

app/src/forms/Validation/Validation.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import type { ValidationProps } from './types';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const MDBValidation: React.FC<ValidationProps> = React.forwardRef<HTMLFormElement, ValidationProps>(
- ({ className, children, isValidated, onReset, onSubmit, noValidate = true, ...props }, ref) => {
+ ({ className, children, isValidated = false, onReset, onSubmit, noValidate = true, ...props }, ref) => {
  const [validated, setValidated] = useState(isValidated);
 
  const classes = clsx('needs-validation', validated && 'was-validated', className);
@@ -22,6 +22,10 @@ const MDBValidation: React.FC<ValidationProps> = React.forwardRef<HTMLFormElemen
  onReset && onReset(e);
  };
 
+ useEffect(() => {
+ setValidated(isValidated);
+ }, [isValidated]);
+
  return (
  <form
  className={classes}

app/src/utils/hooks.tsx

@@ -17,4 +17,15 @@ const useOnScreen = (ref: RefObject<HTMLElement>) => {
  return isIntersecting;
 };
 
-export { useOnScreen };
+const useOpenStatus = (openState: boolean, openProp?: boolean) => {
+ const isOpen = useMemo(() => {
+ if (openProp !== undefined) {
+ return openProp;
+ }
+ return openState;
+ }, [openProp, openState]);
+
+ return isOpen;
+};
+
+export { useOnScreen, useOpenStatus };