fix(OnboardingMenu): bad useMemo Icon, took out the expand state

gravity-ui · Mar 28, 2024 · 5267db4 · 5267db4
1 parent 6e2debb
commit 5267db4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 17 deletions.
diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -70,7 +70,7 @@ $block: '.#{variables.$ns}onboarding-menu';
 
     &__lining {
         overflow-y: auto;
-        max-height: 684px;
+        max-height: 530px;
 
         box-sizing: border-box;
 

diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -18,7 +18,7 @@ export type OnboardingMenuProps = {
     progress: number;
     icon?: IconData;
 
-    defaultExpanded: boolean;
+    expand: boolean;
     children?: React.ReactNode;
 
     collapseButtonText?: string;
@@ -34,7 +34,7 @@ const OnboardingMenuParent = ({
     title,
     progress,
     icon,
-    defaultExpanded,
+    expand,
     onExpand,
     onCollapseClick,
     onCompleteClick,
@@ -43,12 +43,9 @@ const OnboardingMenuParent = ({
     className,
     children,
 }: OnboardingMenuProps) => {
-    const [expand, setExpand] = React.useState(defaultExpanded);
-
     const onExpandCallback = () => {
         const newExpand = !expand;
 
-        setExpand(newExpand);
         if (onExpand) {
             onExpand(newExpand);
         }
@@ -57,7 +54,6 @@ const OnboardingMenuParent = ({
     const onCollapseClickCallback = (event: React.MouseEvent) => {
         const newExpand = !expand;
 
-        setExpand(newExpand);
         if (onCollapseClick) {
             onCollapseClick(event);
         }

diff --git a/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx
@@ -7,7 +7,6 @@ import type {Meta, Story} from '@storybook/react';
 
 import type {OnboardingMenuProps} from '../OnboardingMenu';
 import {OnboardingMenu} from '../OnboardingMenu';
-// import {OnboardingMenu.ItemImage} from '../OnboardingMenu.ItemImage';
 
 export default {
     title: 'Components/OnboardingMenu',
@@ -18,14 +17,18 @@ const actionsButtonHandlers = () => actions('onClick').onClick('Click on the but
 const actionsButtonComplete = () => actions('onClick').onClick('Click on the end button');
 
 const DefaultTemplate: Story<OnboardingMenuProps> = (args) => {
-    const actionsOnboardingMenuHandlers = () => {
+    const actionsOnboardingMenuHandlers = (expanded: boolean) => {
         actions('onHeaderClick').onHeaderClick('Click on the header');
+        setExpand(expanded);
     };
 
+    const [expand, setExpand] = React.useState(false);
+
     return (
         <div style={{margin: '20px'}}>
             <OnboardingMenu
                 {...args}
+                expand={expand}
                 icon={GraduationCap}
                 onExpand={actionsOnboardingMenuHandlers}
                 onCompleteClick={actionsButtonComplete}
@@ -57,7 +60,6 @@ LongHeader.args = {
 WithLoader.args = {
     title: 'Header text',
     progress: 30,
-    defaultExpanded: true,
     children: [
         <OnboardingMenu.Item
             key={'testItem'}
@@ -96,7 +98,6 @@ WithLoader.args = {
 WithItems.args = {
     title: 'Header text',
     progress: 30,
-    defaultExpanded: true,
     children: [
         <OnboardingMenu.Item
             key={'testItem'}
@@ -160,7 +161,6 @@ WithItems.args = {
 WithManyItems.args = {
     title: 'Header text',
     progress: 30,
-    defaultExpanded: true,
     children: [
         <OnboardingMenu.Item
             key={'testItem'}
@@ -568,7 +568,6 @@ WithManyItems.args = {
 SomeIcons.args = {
     title: 'Header text',
     progress: 30,
-    defaultExpanded: true,
     children: [
         <OnboardingMenu.Item status="completed" key={'testItem'} title="finished">
             {[<OnboardingMenu.ItemText text={'Test text'} key={'testItem'} />]}
@@ -585,22 +584,19 @@ SomeIcons.args = {
 WithoutArrow.args = {
     title: 'Header text',
     progress: 30,
-    defaultExpanded: true,
     children: [<OnboardingMenu.Item status="completed" key={'testItem'} title="finished" />],
 };
 
 CustomButtonText.args = {
     title: 'Header text',
     progress: 30,
-    defaultExpanded: true,
     collapseButtonText: 'left button',
     completeButtonText: 'right button',
 };
 
 Custom.args = {
     title: 'Different icons',
     progress: 30,
-    defaultExpanded: true,
     className: 'testName',
     children: [
         'Custom reaction node',

diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItem.tsx
@@ -56,7 +56,7 @@ export const OnboardingMenuItem = ({
                 className={cnOnboardingMenuItem('status-icon_disabled')}
             />
         );
-    }, []);
+    }, [status]);
 
     const summary = (
         <div className={cnOnboardingMenuItem('collapse-header')}>