diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx index 8df5b95d..fd28dc55 100644 --- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx +++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx @@ -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('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 ( diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx index 8a813a03..3755731c 100644 --- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx +++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx @@ -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 = props => { const { model = null, category = null, setMaxPaletteCount = null } = props; + const elementRef = useRef(null); const selectPart = useCallback((item: AvatarEditorGridPartItem) => { @@ -27,8 +28,15 @@ export const AvatarEditorFigureSetView: FC = pro setMaxPaletteCount(partItem.maxColorIndex || 1); }, [ model, category, setMaxPaletteCount ]); + useEffect(() => + { + if(!model || !category || !elementRef || !elementRef.current) return; + + elementRef.current.scrollTop = 0; + }, [ model, category ]); + return ( - + { (category.parts.length > 0) && category.parts.map((item, index) => selectPart(item) } />) } diff --git a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx index 8138e951..638a9d18 100644 --- a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx +++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx @@ -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 = p const hcDisabled = GetConfiguration('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 ( diff --git a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx index 4ed984be..c55dcb47 100644 --- a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx +++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx @@ -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 = props => { const { model = null, category = null, paletteSet = [], paletteIndex = -1 } = props; + const elementRef = useRef(null); const selectColor = useCallback((item: AvatarEditorGridColorItem) => { @@ -24,8 +25,15 @@ export const AvatarEditorPaletteSetView: FC = 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 ( - + { (paletteSet.length > 0) && paletteSet.map((item, index) => selectColor(item) } />) }