Generate v. 3.0.0

Author: Krzysztof Wilk

README.txt

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

app/package.json

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

app/src/components/Accordion/Accordion.tsx

@@ -19,6 +19,6 @@ const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
-MDBAccordion.defaultProps = { tag: 'div', initialActive: '' };
+MDBAccordion.defaultProps = { tag: 'div', initialActive: 0 };
 
 export default MDBAccordion;

app/src/components/Accordion/AccordionContext.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 interface AccordionProps {
-  activeItem: string | undefined;
+  activeItem?: number;
   setActiveItem: React.SetStateAction<any>;
-  alwaysOpen: boolean | undefined;
-  initialActive: string | undefined;
+  alwaysOpen?: boolean;
+  initialActive?: number;
 }
 
 const AccordionContext = React.createContext<AccordionProps>({
-  activeItem: '',
+  activeItem: 0,
   setActiveItem: null,
   alwaysOpen: false,
-  initialActive: '',
+  initialActive: 0,
 });
 
 export { AccordionContext };

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

@@ -5,7 +5,21 @@ import type { AccordionItemProps } from './types';
 import MDBCollapse from '../../Collapse/Collapse';
 
 const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllCollection, AccordionItemProps>(
-  ({ className, bodyClassName, headerClassName, collapseId, headerTitle, tag: Tag, children, ...props }, ref) => {
+  (
+    {
+      className,
+      bodyClassName,
+      bodyStyle,
+      headerClassName,
+      collapseId,
+      headerTitle,
+      headerStyle,
+      tag: Tag,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const { activeItem, setActiveItem, alwaysOpen, initialActive } = useContext(AccordionContext);
 
     const [openState, setOpenState] = useState(initialActive);
@@ -18,23 +32,28 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
       alwaysOpen ? collapseId !== openState && 'collapsed' : collapseId !== activeItem && 'collapsed'
     );
 
-    const toggleAccordion = (value: string) => {
+    const toggleAccordion = (value: number) => {
       if (alwaysOpen) {
-        value !== openState ? setOpenState(value) : setOpenState('');
+        value !== openState ? setOpenState(value) : setOpenState(0);
       } else {
-        value !== activeItem ? setActiveItem(value) : setActiveItem('');
+        value !== activeItem ? setActiveItem(value) : setActiveItem(0);
       }
     };
 
     return (
       <Tag className={classes} ref={ref} {...props}>
-        <h2 className={headerClasses}>
+        <h2 className={headerClasses} style={headerStyle}>
           <button onClick={() => toggleAccordion(collapseId)} className={buttonClasses} type='button'>
             {headerTitle}
           </button>
         </h2>
-        <MDBCollapse id={collapseId} show={alwaysOpen ? openState : activeItem}>
-          <div className={bodyClasses}>{children}</div>
+        <MDBCollapse
+          id={collapseId.toString()}
+          show={alwaysOpen ? openState === collapseId : activeItem === collapseId}
+        >
+          <div className={bodyClasses} style={bodyStyle}>
+            {children}
+          </div>
         </MDBCollapse>
       </Tag>
     );

app/src/components/Accordion/AccordionItem/index.d.ts

@@ -1,13 +1,6 @@
 import * as React from 'react';
+import { AccordionItemProps } from './types';
 
-declare const MDBAccordionItem: React.FunctionComponent<{
-  className?: string;
-  bodyClassName?: string;
-  headerClassName?: string;
-  collapseId: string;
-  headerTitle?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBAccordionItem: React.FunctionComponent<AccordionItemProps>;
 
 export default MDBAccordionItem;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 
-type AccordionItemProps = {
-  className?: string;
+interface AccordionItemProps extends React.HTMLAttributes<HTMLElement> {
   bodyClassName?: string;
+  bodyStyle?: React.CSSProperties;
+  collapseId: number;
   headerClassName?: string;
-  collapseId: string;
-  headerTitle?: string;
+  headerStyle?: React.CSSProperties;
+  headerTitle?: React.ReactNode;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { AccordionItemProps };

app/src/components/Accordion/index.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
+import { AccordionProps } from './types';
 
-declare const MDBAccordion: React.FunctionComponent<{
-  alwaysOpen?: boolean;
-  className?: string;
-  flush?: boolean;
-  initialActive?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBAccordion: React.FunctionComponent<AccordionProps>;
 
 export default MDBAccordion;

app/src/components/Accordion/types.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-type AccordionProps = {
+interface AccordionProps extends React.HTMLAttributes<HTMLElement> {
   alwaysOpen?: boolean;
-  className?: string;
   flush?: boolean;
-  initialActive?: string;
+  initialActive?: number;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { AccordionProps };

app/src/components/Badge/index.d.ts

@@ -1,13 +1,6 @@
 import * as React from 'react';
+import { BadgeProps } from './types';
 
-declare const MDBBadge: React.FunctionComponent<{
-  className?: string;
-  pill?: boolean;
-  dot?: boolean;
-  notification?: boolean;
-  color?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBBadge: React.FunctionComponent<BadgeProps>;
 
 export default MDBBadge;