nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-22 19:13:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix avatar editor scrolling

Browse Source
This commit is contained in:
Bill 2022-08-09 11:53:50 -04:00
parent 70f66a8ec5
commit e1bf00472a
4 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
View File

@ -1,4 +1,4 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { AvatarEditorGridPartItem, GetConfiguration } from '../../../../api';
import { LayoutCurrencyIcon, LayoutGridItem, LayoutGridItemProps } from '../../../../common';
import { AvatarEditorIcon } from '../AvatarEditorIcon';
@ -15,20 +15,14 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
const hcDisabled = GetConfiguration<boolean>('hc.disabled', false);
const rerender = useCallback(() =>
{
setUpdateId(prevValue => (prevValue + 1));
}, []);
useEffect(() =>
{
const rerender = () => setUpdateId(prevValue => (prevValue + 1));
partItem.notify = rerender;
return () =>
{
partItem.notify = null;
}
}, [ partItem, rerender ]);
return () => partItem.notify = null;
}, [ partItem ]);
return (
<LayoutGridItem itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } { ...rest }>

12
src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
View File

@ -1,4 +1,4 @@
import { Dispatch, FC, SetStateAction, useCallback } from 'react';
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
import { AvatarEditorGridPartItem, CategoryData, IAvatarEditorCategoryModel } from '../../../../api';
import { AutoGrid } from '../../../../common';
import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
@ -13,6 +13,7 @@ export interface AvatarEditorFigureSetViewProps
export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = props =>
{
const { model = null, category = null, setMaxPaletteCount = null } = props;
const elementRef = useRef<HTMLDivElement>(null);
const selectPart = useCallback((item: AvatarEditorGridPartItem) =>
{
@ -27,8 +28,15 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
setMaxPaletteCount(partItem.maxColorIndex || 1);
}, [ model, category, setMaxPaletteCount ]);
useEffect(() =>
{
if(!model || !category || !elementRef || !elementRef.current) return;
elementRef.current.scrollTop = 0;
}, [ model, category ]);
return (
<AutoGrid columnCount={ 3 } columnMinHeight={ 50 }>
<AutoGrid innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
{ (category.parts.length > 0) && category.parts.map((item, index) =>
<AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
</AutoGrid>

11
src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx
View File

@ -1,4 +1,4 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { FC, useEffect, useState } from 'react';
import { AvatarEditorGridColorItem, GetConfiguration } from '../../../../api';
import { LayoutCurrencyIcon, LayoutGridItem, LayoutGridItemProps } from '../../../../common';
@ -14,17 +14,14 @@ export const AvatarEditorPaletteSetItem: FC<AvatarEditorPaletteSetItemProps> = p
const hcDisabled = GetConfiguration<boolean>('hc.disabled', false);
const rerender = useCallback(() =>
{
setUpdateId(prevValue => (prevValue + 1));
}, []);
useEffect(() =>
{
const rerender = () => setUpdateId(prevValue => (prevValue + 1));
colorItem.notify = rerender;
return () => colorItem.notify = null;
});
}, [ colorItem ]);
return (
<LayoutGridItem itemHighlight itemColor={ colorItem.color } itemActive={ colorItem.isSelected } className="clear-bg" { ...rest }>

12
src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
View File

@ -1,4 +1,4 @@
import { FC, useCallback } from 'react';
import { FC, useCallback, useEffect, useRef } from 'react';
import { AvatarEditorGridColorItem, CategoryData, IAvatarEditorCategoryModel } from '../../../../api';
import { AutoGrid } from '../../../../common';
import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
@ -14,6 +14,7 @@ export interface AvatarEditorPaletteSetViewProps
export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = props =>
{
const { model = null, category = null, paletteSet = [], paletteIndex = -1 } = props;
const elementRef = useRef<HTMLDivElement>(null);
const selectColor = useCallback((item: AvatarEditorGridColorItem) =>
{
@ -24,8 +25,15 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
model.selectColor(category.name, index, paletteIndex);
}, [ model, category, paletteSet, paletteIndex ]);
useEffect(() =>
{
if(!model || !category || !elementRef || !elementRef.current) return;
elementRef.current.scrollTop = 0;
}, [ model, category ]);
return (
<AutoGrid gap={ 1 } columnCount={ 5 } columnMinWidth={ 30 }>
<AutoGrid innerRef={ elementRef } gap={ 1 } columnCount={ 5 } columnMinWidth={ 30 }>
{ (paletteSet.length > 0) && paletteSet.map((item, index) =>
<AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
</AutoGrid>