Skip to content
This repository has been archived by the owner on Feb 22, 2024. It is now read-only.

Commit

Permalink
Aizad/Fix Derived toggle click on reload (#7293)
Browse files Browse the repository at this point in the history 
* task: fix derived toggle click on reload

* fix: active icon behavior

* resolved: replace with classNames function

---------

Co-authored-by: Matin shafiei <matin@deriv.com>
  • Loading branch information
@aizad-deriv @matin-deriv
aizad-deriv and matin-deriv authored Jan 30, 2023
1 parent 8b9d036 commit e80f1d5
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 13 deletions.
53 changes: 40 additions & 13 deletions src/javascript/app/pages/trade/markets.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,10 @@ class Markets extends React.Component {
};

toggleAccordion = () => {
this.setState({ open_accordion: !this.state.open_accordion });
this.setState((prevState) => ({
...prevState,
open_accordion: !prevState.open_accordion,
}));
}

getCurrentUnderlying = () => {
Expand Down Expand Up @@ -228,7 +231,6 @@ class Markets extends React.Component {
} else {
this.setState({
subgroup_active: false,
open_accordion : false,
});
}
}
Expand Down Expand Up @@ -523,11 +525,16 @@ class Markets extends React.Component {
<div>
{group_markets[item].markets.map((m) => (
<div
className={`market ${active_market === m.key ? 'active' : ''}`}
className={classNames('market', {
'active': active_market === m.key,
})}
key={m.key}
onClick={scrollToMarket.bind(null, `${m.key}`)}
>
<span className={`icon ${m.key} ${active_market === m.key ? 'active' : ''}`} />
<span className={classNames(`icon ${m.key}`, {
'active': active_market === m.key,
})}
/>
<span>{m.name}</span>
</div>))}
</div>
Expand All @@ -538,18 +545,30 @@ class Markets extends React.Component {
>
<div
className={classNames('market', {
'active': subgroup_active,
'active' : subgroup_active,
'accordion-label': !!open_accordion,
})}
onClick={toggleAccordion || (subgroup_active ? toggleAccordion : '')}
onClick={toggleAccordion}
>
<span className={`icon synthetic_index ${open_accordion ? 'active' : ''}`} />
<span className={classNames('icon synthetic_index', {
'active': subgroup_active,
})}
/>
<span>{group_markets[item].markets[0].subgroup_name}</span>
<span className={`accordion-icon icon ${open_accordion ? 'active' : ''}`} />
<span className={classNames('accordion-icon icon', {
'active': open_accordion,
})}
/>
</div>
<div className={`${open_accordion ? 'accordion-content--active' : 'accordion-content'}`}>
<div className={classNames('accordion-content', {
'accordion-content--active': open_accordion,
})}
>
{group_markets[item].markets.map((m) => (
<div
className={`subgroup market ${active_market === m.key ? 'subgroup-active' : ''}`}
className={classNames('subgroup market', {
'subgroup-active': active_market === m.key,
})}
key={m.key}
onClick={scrollToMarket.bind(null, `${m.key}`)}
>
Expand All @@ -576,9 +595,14 @@ class Markets extends React.Component {
onClick = {scrollToMarket.bind(null, m.key)}
key = {m.key}
data-market = {m.key}
className={active_market === m.key ? 'active' : ''}
className={classNames('', {
'active': active_market === m.key,
})}
>
<span className={`icon ${m.key} ${active_market === m.key ? 'active' : ''}`} />
<span className={classNames(`icon ${m.key}`, {
'active': active_market === m.key,
})}
/>
</li>
))}
</React.Fragment>
Expand All @@ -591,7 +615,10 @@ class Markets extends React.Component {
'active': (active_market === derived_category || subgroup_active),
})}
>
<span className={`icon synthetic_index ${(active_market === derived_category || subgroup_active) ? 'active' : ''}`} />
<span className={classNames('icon synthetic_index', {
'active': active_market === derived_category || subgroup_active,
})}
/>
</li>
)
);
Expand Down
5 changes: 5 additions & 0 deletions src/sass/app/components/market.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,11 @@
display: flex;
flex-direction: column;

.accordion-label {
&:hover {
text-decoration: none;
}
}
.accordion-content {
flex-direction: column;
display: none;
Expand Down

1 comment on commit e80f1d5

@vercel
Copy link

@vercel vercel bot commented on e80f1d5 Jan 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

binary-static – ./

binary-static-git-master.binary.sx
binary-static.binary.sx

Please sign in to comment.