Update AvatarEditor

src/views/avatar-editor/AvatarEditorView.tsx

@@ -1,11 +1,12 @@
 import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetAvatarRenderManager, GetClubMemberLevel, GetSessionDataManager, LocalizeText } from '../../api';
+import { Column } from '../../common/Column';
+import { Grid } from '../../common/Grid';
 import { AvatarEditorEvent } from '../../events/avatar-editor';
 import { CreateMessageHook, SendMessageHook } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
-import { AvatarEditorViewProps } from './AvatarEditorView.types';
 import { AvatarEditorAction } from './common/AvatarEditorAction';
 import { AvatarEditorUtilities } from './common/AvatarEditorUtilities';
 import { BodyModel } from './common/BodyModel';
@@ -28,7 +29,7 @@ const ACTION_RESET = 'action_reset';
 const ACTION_RANDOMIZE = 'action_randomize';
 const ACTION_SAVE = 'action_save';
 
-export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
+export const AvatarEditorView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ figures, setFigures ] = useState<Map<string, FigureData>>(null);
@@ -285,18 +286,18 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
                 </NitroCardTabsItemView>
             </NitroCardTabsView>
             <NitroCardContentView>
-                <NitroLayoutGrid>
+                <Grid>
-                    <NitroLayoutGridColumn size={ 9 }>
+                    <Column size={ 9 } overflow="hidden">
                         { (activeCategory && !isWardrobeVisible) &&
                             <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> }
                         { isWardrobeVisible &&
                             <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } /> }
-                    </NitroLayoutGridColumn>
+                    </Column>
-                    <NitroLayoutGridColumn overflow="hidden" size={ 3 }>
+                    <Column size={ 3 } overflow="hidden">
                         <AvatarEditorFigurePreviewView figureData={ figureData } />
                         <AvatarEditorFigureActionsView processAction={ processAction } />
-                    </NitroLayoutGridColumn>
+                    </Column>
-                </NitroLayoutGrid>
+                </Grid>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/avatar-editor/AvatarEditorView.types.ts

@@ -1,4 +0,0 @@
-export interface AvatarEditorViewProps
-{
-    
-}

src/views/avatar-editor/views/AvatarEditorIcon.tsx

@@ -0,0 +1,30 @@
+import { FC, useMemo } from 'react';
+import { Base, BaseProps } from '../../../common/Base';
+
+type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable' | string;
+
+export interface AvatarEditorIconProps extends BaseProps<HTMLDivElement>
+{
+    icon: AvatarIconType;
+    selected?: boolean;
+}
+
+export const AvatarEditorIcon: FC<AvatarEditorIconProps> = props =>
+{
+    const { icon = null, selected = false, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'nitro-avatar-editor-spritesheet' ];
+
+        if(icon && icon.length) newClassNames.push(icon + '-icon');
+
+        if(selected) newClassNames.push('selected');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ icon, selected, classNames ]);
+
+    return <Base classNames={ getClassNames } { ...rest } />
+}

src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.types.ts

@@ -1,7 +0,0 @@
-import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
-
-export interface AvatarEditorFigureSetItemViewProps
-{
-    partItem: AvatarEditorGridPartItem;
-    onClick: (item: AvatarEditorGridPartItem) => void;
-}

src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx

@@ -1,11 +1,18 @@
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardGridItemViewProps } from '../../../../layout';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
-import { AvatarEditorFigureSetItemViewProps } from './AvatarEditorFigureSetItemView.types';
+import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
+import { AvatarEditorIcon } from '../AvatarEditorIcon';
+
+export interface AvatarEditorFigureSetItemViewProps extends NitroCardGridItemViewProps
+{
+    partItem: AvatarEditorGridPartItem;
+}
 
 export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProps> = props =>
 {
-    const { partItem = null, onClick = null } = props;
+    const { partItem = null, children = null, ...rest } = props;
     const [ updateId, setUpdateId ] = useState(-1);
 
     const rerender = useCallback(() =>
@@ -24,10 +31,11 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
     })
 
     return (
-        <NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ event => onClick(partItem) }>
+        <NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } { ...rest }>
             { partItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
-            { partItem.isClear && <div className="nitro-avatar-editor-spritesheet clear-icon" /> }
+            { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
-            { partItem.isSellable && <div className="position-absolute nitro-avatar-editor-spritesheet sellable-icon end-1 bottom-1" /> }
+            { partItem.isSellable && <AvatarEditorIcon icon="sellable" position="absolute" className="end-1 bottom-1" /> }
+            { children }
         </NitroCardGridItemView>
     );
 }

src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx

@@ -1,8 +1,16 @@
-import { FC, useCallback } from 'react';
+import { Dispatch, FC, SetStateAction, useCallback } from 'react';
-import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
+import { Grid } from '../../../../common/Grid';
 import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
-import { AvatarEditorFigureSetItemView } from '../figure-set-item/AvatarEditorFigureSetItemView';
+import { CategoryData } from '../../common/CategoryData';
-import { AvatarEditorFigureSetViewProps } from './AvatarEditorFigureSetView.types';
+import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
+import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
+
+export interface AvatarEditorFigureSetViewProps
+{
+    model: IAvatarEditorCategoryModel;
+    category: CategoryData;
+    setMaxPaletteCount: Dispatch<SetStateAction<number>>;
+}
 
 export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = props =>
 {
@@ -22,11 +30,9 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <NitroCardGridView>
+        <Grid grow columnCount={ 3 } overflow="auto">
             { (category.parts.length > 0) && category.parts.map((item, index) =>
-                {
+                <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
-                    return <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ selectPart } />;
+        </Grid>
-                }) }
-        </NitroCardGridView>
     );
 }

src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.types.ts

@@ -1,10 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { CategoryData } from '../../common/CategoryData';
-import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
-
-export interface AvatarEditorFigureSetViewProps
-{
-    model: IAvatarEditorCategoryModel;
-    category: CategoryData;
-    setMaxPaletteCount: Dispatch<SetStateAction<number>>;
-}

src/views/avatar-editor/views/model/AvatarEditorModelView.tsx

@@ -1,10 +1,19 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
-import { NitroLayoutFlex, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Grid } from '../../../../common/Grid';
 import { CategoryData } from '../../common/CategoryData';
 import { FigureData } from '../../common/FigureData';
+import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
+import { AvatarEditorIcon } from '../AvatarEditorIcon';
 import { AvatarEditorFigureSetView } from '../figure-set/AvatarEditorFigureSetView';
 import { AvatarEditorPaletteSetView } from '../palette-set/AvatarEditorPaletteSetView';
-import { AvatarEditorModelViewProps } from './AvatarEditorModelView.types';
+export interface AvatarEditorModelViewProps
+{
+    model: IAvatarEditorCategoryModel;
+    gender: string;
+    setGender: Dispatch<SetStateAction<string>>;
+}
 
 export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
 {
@@ -47,37 +56,37 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
     if(!model || !activeCategory) return null;
 
     return (
-        <NitroLayoutGrid>
+        <Grid>
-            <NitroLayoutGridColumn size={ 2 }>
+            <Column size={ 2 }>
                 { model.canSetGender &&
                     <>
-                        <NitroLayoutFlex className="justify-content-center align-items-center category-item cursor-pointer" onClick={ event => setGender(FigureData.MALE) }>
+                        <Flex center pointer className="category-item" onClick={ event => setGender(FigureData.MALE) }>
-                            <div className={ `nitro-avatar-editor-spritesheet male-icon ${ (gender === FigureData.MALE) ? ' selected' : ''}` } />
+                            <AvatarEditorIcon icon="male" selected={ (gender === FigureData.MALE) } />
-                        </NitroLayoutFlex>
+                        </Flex>
-                        <NitroLayoutFlex className="justify-content-center align-items-center category-item cursor-pointer" onClick={ event => setGender(FigureData.FEMALE) }>
+                        <Flex center pointer className="category-item" onClick={ event => setGender(FigureData.FEMALE) }>
-                            <div className={ `nitro-avatar-editor-spritesheet female-icon ${ (gender === FigureData.FEMALE) ? ' selected' : ''}` } />
+                            <AvatarEditorIcon icon="female" selected={ (gender === FigureData.FEMALE) } />
-                        </NitroLayoutFlex>
+                        </Flex>
                     </> }
                 { !model.canSetGender && model.categories &&  (model.categories.size > 0) && Array.from(model.categories.keys()).map(name =>
                     {
                         const category = model.categories.get(name);
 
                         return (
-                            <NitroLayoutFlex key={ name } className="justify-content-center align-items-center category-item cursor-pointer" onClick={ event => selectCategory(name) }>
+                            <Flex center pointer key={ name } className="category-item" onClick={ event => selectCategory(name) }>
-                                <div className={ `nitro-avatar-editor-spritesheet ${ category.name }-icon ${ (activeCategory === category) ? ' selected' : ''}` } />
+                                <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
-                            </NitroLayoutFlex>
+                            </Flex>
                         );
                     })}
-            </NitroLayoutGridColumn>
+            </Column>
-            <NitroLayoutGridColumn size={ 5 }>
+            <Column size={ 5 } overflow="hidden">
                 <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
-            </NitroLayoutGridColumn>
+            </Column>
-            <NitroLayoutGridColumn size={ 5 }>
+            <Column size={ 5 } overflow="hidden">
                 { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                 { (maxPaletteCount === 2) &&
-                    <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(1) } paletteIndex={ 1 } className="mt-1" /> }
+                    <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(1) } paletteIndex={ 1 } /> }
-            </NitroLayoutGridColumn>
+            </Column>
-        </NitroLayoutGrid>
+        </Grid>
     );
 }

src/views/avatar-editor/views/model/AvatarEditorModelView.types.ts

@@ -1,9 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
-
-export interface AvatarEditorModelViewProps
-{
-    model: IAvatarEditorCategoryModel;
-    gender: string;
-    setGender: Dispatch<SetStateAction<string>>;
-}

src/views/avatar-editor/views/palette-set-item/AvatarEditorPaletteSetItem.types.ts

@@ -1,7 +0,0 @@
-import { DetailsHTMLAttributes } from 'react';
-import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
-
-export interface AvatarEditorPaletteSetItemProps extends DetailsHTMLAttributes<HTMLDivElement>
-{
-    colorItem: AvatarEditorGridColorItem;
-}

src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx

@@ -1,11 +1,17 @@
 import { FC, useCallback, useEffect, useState } from 'react';
+import { NitroCardGridItemViewProps } from '../../../../layout';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
-import { AvatarEditorPaletteSetItemProps } from './AvatarEditorPaletteSetItem.types';
+import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
+
+export interface AvatarEditorPaletteSetItemProps extends NitroCardGridItemViewProps
+{
+    colorItem: AvatarEditorGridColorItem;
+}
 
 export const AvatarEditorPaletteSetItem: FC<AvatarEditorPaletteSetItemProps> = props =>
 {
-    const { colorItem = null, ...rest } = props;
+    const { colorItem = null, children = null, ...rest } = props;
     const [ updateId, setUpdateId ] = useState(-1);
 
     const rerender = useCallback(() =>
@@ -17,15 +23,13 @@ export const AvatarEditorPaletteSetItem: FC<AvatarEditorPaletteSetItemProps> = p
     {
         colorItem.notify = rerender;
 
-        return () =>
+        return () => colorItem.notify = null;
-        {
-            colorItem.notify = null;
-        }
     });
 
     return (
         <NitroCardGridItemView itemColor={ colorItem.color } itemActive={ colorItem.isSelected } { ...rest }>
             { colorItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
+            { children }
         </NitroCardGridItemView>
     );
 }

src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx

@@ -1,12 +1,21 @@
 import { FC, useCallback } from 'react';
-import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
+import { Grid } from '../../../../common/Grid';
 import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
-import { AvatarEditorPaletteSetItem } from '../palette-set-item/AvatarEditorPaletteSetItem';
+import { CategoryData } from '../../common/CategoryData';
-import { AvatarEditorPaletteSetViewProps } from './AvatarEditorPaletteSetView.types';
+import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
+import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
+
+export interface AvatarEditorPaletteSetViewProps
+{
+    model: IAvatarEditorCategoryModel;
+    category: CategoryData;
+    paletteSet: AvatarEditorGridColorItem[];
+    paletteIndex: number;
+}
 
 export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = props =>
 {
-    const { model = null, category = null, paletteSet = [], paletteIndex = -1, ...rest } = props;
+    const { model = null, category = null, paletteSet = [], paletteIndex = -1 } = props;
 
     const selectColor = useCallback((item: AvatarEditorGridColorItem) =>
     {
@@ -18,11 +27,9 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <NitroCardGridView { ...rest }>
+        <Grid grow columnCount={ 3 } overflow="auto">
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
-                {
+                <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
-                    return <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />;
+        </Grid>
-                }) }
-        </NitroCardGridView>
     );
 }

src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.types.ts

@@ -1,12 +0,0 @@
-import { DetailsHTMLAttributes } from 'react';
-import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
-import { CategoryData } from '../../common/CategoryData';
-import { IAvatarEditorCategoryModel } from '../../common/IAvatarEditorCategoryModel';
-
-export interface AvatarEditorPaletteSetViewProps extends DetailsHTMLAttributes<HTMLDivElement>
-{
-    model: IAvatarEditorCategoryModel;
-    category: CategoryData;
-    paletteSet: AvatarEditorGridColorItem[];
-    paletteIndex: number;
-}

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx

@@ -1,13 +1,21 @@
-import { SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
+import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo } from 'react';
+import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
 import { Button } from 'react-bootstrap';
 import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
+import { Grid } from '../../../../common/Grid';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
-import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
-import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types';
+import { FigureData } from '../../common/FigureData';
+
+export interface AvatarEditorWardrobeViewProps
+{
+    figureData: FigureData;
+    savedFigures: [ IAvatarFigureContainer, string ][];
+    setSavedFigures: Dispatch<SetStateAction<[ IAvatarFigureContainer, string][]>>;
+    loadAvatarInEditor: (figure: string, gender: string, reset?: boolean) => void;
+}
 
 export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props =>
 {
@@ -65,8 +73,8 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     }, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
 
     return (
-        <NitroCardGridView className="nitro-wardrobe-grid">
+        <Grid grow columnCount={ 5 } overflow="auto" columnMinWidth={ 80 }>
             { figures }
-        </NitroCardGridView>
+        </Grid>
     );
 }

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.types.ts

@@ -1,11 +0,0 @@
-import { IAvatarFigureContainer } from '@nitrots/nitro-renderer';
-import { Dispatch, SetStateAction } from 'react';
-import { FigureData } from '../../common/FigureData';
-
-export interface AvatarEditorWardrobeViewProps
-{
-    figureData: FigureData;
-    savedFigures: [ IAvatarFigureContainer, string ][];
-    setSavedFigures: Dispatch<SetStateAction<[ IAvatarFigureContainer, string][]>>;
-    loadAvatarInEditor: (figure: string, gender: string, reset?: boolean) => void;
-}