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

gravity-ui · Mar 29, 2024 · 32bd68d · 32bd68d
1 parent 6e2debb
commit 32bd68d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 24 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;
+    expanded: boolean;
     children?: React.ReactNode;
 
     collapseButtonText?: string;
@@ -34,7 +34,7 @@ const OnboardingMenuParent = ({
     title,
     progress,
     icon,
-    defaultExpanded,
+    expanded,
     onExpand,
     onCollapseClick,
     onCompleteClick,
@@ -43,21 +43,17 @@ const OnboardingMenuParent = ({
     className,
     children,
 }: OnboardingMenuProps) => {
-    const [expand, setExpand] = React.useState(defaultExpanded);
-
     const onExpandCallback = () => {
-        const newExpand = !expand;
+        const newExpand = !expanded;
 
-        setExpand(newExpand);
         if (onExpand) {
             onExpand(newExpand);
         }
     };
 
     const onCollapseClickCallback = (event: React.MouseEvent) => {
-        const newExpand = !expand;
+        const newExpand = !expanded;
 
-        setExpand(newExpand);
         if (onCollapseClick) {
             onCollapseClick(event);
         }
@@ -68,10 +64,10 @@ const OnboardingMenuParent = ({
 
     return (
         <div className={cnOnboardingMenu(null, className)}>
-            <div className={cnOnboardingMenu('content', {expand: expand})}>
-                <div className={cnOnboardingMenu('header', {expand: expand})}>
+            <div className={cnOnboardingMenu('content', {expand: expanded})}>
+                <div className={cnOnboardingMenu('header', {expand: expanded})}>
                     <button
-                        className={cnOnboardingMenu('title', {expand: expand})}
+                        className={cnOnboardingMenu('title', {expand: expanded})}
                         onClick={onExpandCallback}
                         tabIndex={0}
                     >
@@ -86,7 +82,7 @@ const OnboardingMenuParent = ({
                         {title}
                     </button>
                     <Progress
-                        size={expand ? 's' : 'xs'}
+                        size={expanded ? 's' : 'xs'}
                         stack={[
                             {
                                 value: progress,
@@ -100,7 +96,7 @@ const OnboardingMenuParent = ({
                     />
                 </div>
 
-                {expand && (
+                {expanded && (
                     <React.Fragment>
                         <div className={cnOnboardingMenu('lining')}>{children}</div>
                         <div className={cnOnboardingMenu('buttons')}>

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 [expanded, setExpanded] = React.useState(false);
+
+    const actionsOnboardingMenuHandlers = (expanded: boolean) => {
         actions('onHeaderClick').onHeaderClick('Click on the header');
+        setExpanded(expanded);
     };
 
     return (
         <div style={{margin: '20px'}}>
             <OnboardingMenu
                 {...args}
+                expanded={expanded}
                 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')}>