nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-19 05:46:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update common components

Browse Source
This commit is contained in:
Bill 2022-03-11 00:08:17 -05:00
parent 7999be5046
commit 3a491fedde
7 changed files with 46 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/Base.tsx
View File

@ -1,10 +1,10 @@
import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, LegacyRef, useMemo } from 'react'; 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> export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T>
{ {
innerRef?: LegacyRef<T>; innerRef?: LegacyRef<T>;
display?: string; display?: DisplayType;
fit?: boolean; fit?: boolean;
grow?: boolean; grow?: boolean;
shrink?: boolean; shrink?: boolean;

6
src/common/card/NitroCardView.scss
View File

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

18
src/common/card/accordion/NitroCardAccordionItemView.tsx
View File

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

68
src/common/card/accordion/NitroCardAccordionSetView.tsx
View File

@ -1,9 +1,9 @@
import classNames from 'classnames'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Base, BaseProps, Flex } from '../..'; import { Column, ColumnProps, Flex, Text } from '../..';
import { useNitroCardAccordionContext } from './NitroCardAccordionContext'; import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
interface NitroCardAccordionSetViewProps extends BaseProps<HTMLDivElement> export interface NitroCardAccordionSetViewProps extends ColumnProps
{ {
headerText: string; headerText: string;
isExpanded?: boolean; isExpanded?: boolean;
@ -11,44 +11,29 @@ interface NitroCardAccordionSetViewProps extends BaseProps<HTMLDivElement>
export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props => 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 [ isOpen, setIsOpen ] = useState(false);
const { setClosers = null, closeAll = null } = useNitroCardAccordionContext(); 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(); closeAll();
setIsOpen(prevValue => !prevValue); 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(() => useEffect(() =>
{ {
@ -84,18 +69,15 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
}, [ close, setClosers ]); }, [ close, setClosers ]);
return ( 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> </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 } { children }
</Base> </Column> }
</Base> </Column>
); );
} }

17
src/common/card/accordion/NitroCardAccordionView.tsx
View File

@ -1,4 +1,4 @@
import { FC, useCallback, useMemo, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { Column, ColumnProps } from '../..'; import { Column, ColumnProps } from '../..';
import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext'; import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext';
@ -9,18 +9,9 @@ interface NitroCardAccordionViewProps extends ColumnProps
export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props => export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
{ {
const { className = '', children = null, ...rest } = props; const { ...rest } = props;
const [ closers, setClosers ] = useState<Function[]>([]); 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(() => const closeAll = useCallback(() =>
{ {
for(const closer of closers) closer(); for(const closer of closers) closer();
@ -28,9 +19,7 @@ export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
return ( return (
<NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }> <NitroCardAccordionContextProvider value={ { closers, setClosers, closeAll } }>
<Column className={ getClassName } { ...rest }> <Column gap={ 0 } { ...rest } />
{ children }
</Column>
</NitroCardAccordionContextProvider> </NitroCardAccordionContextProvider>
); );
} }

9
src/common/index.scss
View File

@ -209,12 +209,9 @@
font-size: $font-size-sm; font-size: $font-size-sm;
margin-bottom: 5px; 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;
} }
} }

8
src/common/layout/LayoutNotificationBubbleView.tsx
View File

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