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

Aizad/Fix Derived toggle click on reload #7293

Merged
merged 5 commits into from
Jan 30, 2023
Merged

Aizad/Fix Derived toggle click on reload #7293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf84b68
task: fix derived toggle click on reload
aizad-deriv Nov 24, 2022
530d445
fix: active icon behavior
aizad-deriv Nov 24, 2022
5a42727
resolved: replace with classNames function
aizad-deriv Nov 24, 2022
a892d3d
Merge branch 'master' into aizad/8168/fix-derived-toggle
matin-deriv Jan 30, 2023
79ee919
Merge branch 'master' into aizad/8168/fix-derived-toggle
matin-deriv Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 40 additions & 13 deletions src/javascript/app/pages/trade/markets.jsx
View file
Open in desktop
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
Open in desktop
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