Update common components

src/common/Base.tsx

@@ -1,10 +1,10 @@
 import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, LegacyRef, useMemo } from 'react';
-import { ColorVariantType, FloatType, OverflowType, PositionType } from './types';
+import { ColorVariantType, DisplayType, FloatType, OverflowType, PositionType } from './types';
 
 export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T>
 {
     innerRef?: LegacyRef<T>;
-    display?: string;
+    display?: DisplayType;
     fit?: boolean;
     grow?: boolean;
     shrink?: boolean;

src/common/card/NitroCardView.scss

@@ -150,15 +150,11 @@ $nitro-card-tabs-height: 33px;
     border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 }
 
-.nitro-card-accordion {
-    display: flex;
-    height: 100%;
-}
-
 .nitro-card-accordion-set {
 
     &.active {
         height: 100%;
+        overflow: hidden;
         background: rgba($white, 0.5);
         border-bottom: 1px solid rgba($black, 0.2);
     }

src/common/card/accordion/NitroCardAccordionItemView.tsx

@@ -1,21 +1,17 @@
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 import { Flex, FlexProps } from '../..';
 
-export const NitroCardAccordionItemView: FC<FlexProps> = props =>
+export interface NitroCardAccordionItemViewProps extends FlexProps
 {
-    const { alignItems = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
 
-    const getClassNames = useMemo(() =>
+}
+
+export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
 {
-        const newClassNames: string[] = [ 'px-2, py-1' ];
+    const { alignItems = 'center', gap = 1, children = null, ...rest } = props;
-
-        if(classNames.length) newClassNames.push(...classNames);
-
-        return newClassNames;
-    }, [ classNames ]);
 
     return (
-        <Flex alignItems={ alignItems } gap={ gap } classNames={ getClassNames } { ...rest }>
+        <Flex alignItems={ alignItems } gap={ gap } { ...rest }>
             { children }
         </Flex>
     );

src/common/card/accordion/NitroCardAccordionSetView.tsx

@@ -1,9 +1,9 @@
-import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Base, BaseProps, Flex } from '../..';
+import { Column, ColumnProps, Flex, Text } from '../..';
 import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
 
-interface NitroCardAccordionSetViewProps extends BaseProps<HTMLDivElement>
+export interface NitroCardAccordionSetViewProps extends ColumnProps
 {
     headerText: string;
     isExpanded?: boolean;
@@ -11,44 +11,29 @@ interface NitroCardAccordionSetViewProps extends BaseProps<HTMLDivElement>
 
 export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
 {
-    const { headerText = '', isExpanded = false, className = '', children = null, ...rest } = props;
+    const { headerText = '', isExpanded = false, gap = 0, classNames = [], children = null, ...rest } = props;
     const [ isOpen, setIsOpen ] = useState(false);
     const { setClosers = null, closeAll = null } = useNitroCardAccordionContext();
 
-    const getClassName = useMemo(() =>
+    const onClick = () =>
-    {
-        let newClassName = 'nitro-card-accordion-set';
-
-        if(isOpen) newClassName += ' active';
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className, isOpen ]);
-
-    const onClick = useCallback(() =>
     {
         closeAll();
         
         setIsOpen(prevValue => !prevValue);
-        // if(isOpen)
+    }
-        // {
-        //     closeAll();
-        // }
-        // else
-        // {
-        //     BatchUpdates(() =>
-        //     {
-        //         closeAll();
-        //         setIsOpen(true);
-        //     });
-        // }
-    }, [ closeAll ]);
 
-    const close = useCallback(() =>
+    const close = useCallback(() => setIsOpen(false), []);
+
+    const getClassNames = useMemo(() =>
     {
-        setIsOpen(false);
+        const newClassNames = [ 'nitro-card-accordion-set' ];
-    }, []);
+
+        if(isOpen) newClassNames.push('active');
+
+        if(classNames && classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ isOpen, classNames ]);
 
     useEffect(() =>
     {
@@ -84,18 +69,15 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
     }, [ close, setClosers ]);
 
     return (
-        <Base className={ getClassName } { ...rest }>
+        <Column classNames={ getClassNames } gap={ gap } { ...rest }>
-            <Flex className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
+            <Flex pointer justifyContent="between" className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
-                <div className="w-100">
+                <Text>{ headerText }</Text>
-                    { headerText }
+                <FontAwesomeIcon icon={ isOpen ? 'caret-up' : 'caret-down' } />
-                </div>
-                <div className="justify-self-center">
-                    <i className={ 'fas fa-caret-' + (isOpen ? 'up' : 'down') } />
-                </div>
             </Flex>
-            <Base className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
+            { isOpen &&
+                <Column fullHeight overflow="auto" gap={ 0 } className="nitro-card-accordion-set-content">
                     { children }
-            </Base>
+                </Column> }
-        </Base>
+        </Column>
     );
 }

src/common/card/accordion/NitroCardAccordionView.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { Column, ColumnProps } from '../..';
 import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext';
 
@@ -9,18 +9,9 @@ interface NitroCardAccordionViewProps extends ColumnProps
 
 export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
 {
-    const { className = '', children = null, ...rest } = props;
+    const { ...rest } = props;
     const [ closers, setClosers ] = useState<Function[]>([]);
 
-    const getClassName = useMemo(() =>
-    {
-        let newClassName = 'nitro-card-accordion text-black';
-
-        if(className && className.length) newClassName += ` ${ className }`;
-
-        return newClassName;
-    }, [ className ]);
-
     const closeAll = useCallback(() =>
     {
         for(const closer of closers) closer();
@@ -28,9 +19,7 @@ export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
 
     return (
         <NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }>
-            <Column className={ getClassName } { ...rest }>
+            <Column gap={ 0 } { ...rest } />
-                { children }
-            </Column>
         </NitroCardAccordionContextProvider>
     );
 }

src/common/index.scss

@@ -209,12 +209,9 @@
     font-size: $font-size-sm;
     margin-bottom: 5px;
 
-    .bubble-image {
+    .bubble-image-container {
-        width: 30px;
+        min-width: 50px;
-        height: 30px;
+        min-height: 50px;
-        overflow: hidden;
-        object-fit: none;
-        margin-right: 5px;
     }
 }
 

src/common/layout/LayoutNotificationBubbleView.tsx

@@ -1,8 +1,8 @@
 import { FC, useEffect, useMemo, useState } from 'react';
-import { Base, BaseProps } from '..';
+import { Flex, FlexProps } from '..';
 import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';
 
-interface LayoutNotificationBubbleViewProps extends BaseProps<HTMLDivElement>
+interface LayoutNotificationBubbleViewProps extends FlexProps
 {
     fadesOut?: boolean;
     timeoutMs?: number;
@@ -11,7 +11,7 @@ interface LayoutNotificationBubbleViewProps extends BaseProps<HTMLDivElement>
 
 export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps> = props =>
 {
-    const { fadesOut = true, timeoutMs = 8000, close = null, classNames = [], ...rest } = props;
+    const { fadesOut = false, timeoutMs = 8000, close = null, overflow='hidden', classNames = [], ...rest } = props;
     const [ isVisible, setIsVisible ] = useState(false);
 
     const getClassNames = useMemo(() =>
@@ -46,7 +46,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
 
     return (
         <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isVisible } timeout={ 300 }>
-            <Base classNames={ getClassNames } onClick={ close } { ...rest } />
+            <Flex overflow={ overflow } classNames={ getClassNames } onClick={ close } { ...rest } />
         </TransitionAnimation>
     );
 }