m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

fix(mme-14830): fix consistent tab when switching languages (#17155)

Browse Source
This commit is contained in:
Danica Shen 2023-01-19 15:05:42 +00:00 committed by GitHub
parent c90d389b84
commit 8f915807e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -101,11 +101,16 @@ export default class ConfirmPageContainerContent extends Component {
<Tab <Tab
className="confirm-page-container-content__tab" className="confirm-page-container-content__tab"
name={t('details')} name={t('details')}
tabKey="details"
> >
{detailsComponent} {detailsComponent}
</Tab> </Tab>
{dataComponent && ( {dataComponent && (
<Tab className="confirm-page-container-content__tab" name={t('data')}> <Tab
className="confirm-page-container-content__tab"
name={t('data')}
tabKey="data"
>
{dataComponent} {dataComponent}
</Tab> </Tab>
)} )}
@ -113,6 +118,7 @@ export default class ConfirmPageContainerContent extends Component {
<Tab <Tab
className="confirm-page-container-content__tab" className="confirm-page-container-content__tab"
name={t('dataHex')} name={t('dataHex')}
tabKey="dataHex"
> >
{dataHexComponent} {dataHexComponent}
</Tab> </Tab>

3
ui/components/ui/tabs/tab/tab.component.js
View File

@ -11,6 +11,7 @@ const Tab = (props) => {
name, name,
onClick, onClick,
tabIndex, tabIndex,
tabKey,
} = props; } = props;
return ( return (
@ -24,6 +25,7 @@ const Tab = (props) => {
event.preventDefault(); event.preventDefault();
onClick(tabIndex); onClick(tabIndex);
}} }}
key={tabKey}
> >
<button>{name}</button> <button>{name}</button>
</li> </li>
@ -36,6 +38,7 @@ Tab.propTypes = {
'data-testid': PropTypes.string, 'data-testid': PropTypes.string,
isActive: PropTypes.bool, // required, but added using React.cloneElement isActive: PropTypes.bool, // required, but added using React.cloneElement
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
tabKey: PropTypes.string.isRequired, // for Tabs selection purpose
onClick: PropTypes.func, onClick: PropTypes.func,
tabIndex: PropTypes.number, // required, but added using React.cloneElement tabIndex: PropTypes.number, // required, but added using React.cloneElement
}; };

24
ui/components/ui/tabs/tabs.component.js
View File

@ -4,14 +4,14 @@ import classnames from 'classnames';
export default class Tabs extends Component { export default class Tabs extends Component {
static defaultProps = { static defaultProps = {
defaultActiveTabName: null, defaultActiveTabKey: null,
onTabClick: null, onTabClick: null,
tabsClassName: undefined, tabsClassName: undefined,
subHeader: null, subHeader: null,
}; };
static propTypes = { static propTypes = {
defaultActiveTabName: PropTypes.string, defaultActiveTabKey: PropTypes.string,
onTabClick: PropTypes.func, onTabClick: PropTypes.func,
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
tabsClassName: PropTypes.string, tabsClassName: PropTypes.string,
@ -20,12 +20,12 @@ export default class Tabs extends Component {
state = { state = {
activeTabIndex: Math.max( activeTabIndex: Math.max(
this._findChildByName(this.props.defaultActiveTabName), this._findChildByKey(this.props.defaultActiveTabKey),
0, 0,
), ),
}; };
handleTabClick(tabIndex, tabName) { handleTabClick(tabIndex, tabKey) {
const { onTabClick } = this.props; const { onTabClick } = this.props;
const { activeTabIndex } = this.state; const { activeTabIndex } = this.state;
@ -36,7 +36,7 @@ export default class Tabs extends Component {
}, },
() => { () => {
if (onTabClick) { if (onTabClick) {
onTabClick(tabName); onTabClick(tabKey);
} }
}, },
); );
@ -47,11 +47,11 @@ export default class Tabs extends Component {
const numberOfTabs = React.Children.count(this._getValidChildren()); const numberOfTabs = React.Children.count(this._getValidChildren());
return React.Children.map(this._getValidChildren(), (child, index) => { return React.Children.map(this._getValidChildren(), (child, index) => {
const tabName = child?.props.name; const tabKey = child?.props.tabKey;
return ( return (
child && child &&
React.cloneElement(child, { React.cloneElement(child, {
onClick: (idx) => this.handleTabClick(idx, tabName), onClick: (idx) => this.handleTabClick(idx, tabKey),
tabIndex: index, tabIndex: index,
isActive: numberOfTabs > 1 && index === this.state.activeTabIndex, isActive: numberOfTabs > 1 && index === this.state.activeTabIndex,
}) })
@ -89,14 +89,16 @@ export default class Tabs extends Component {
} }
/** /**
* Returns the index of the child with the given name * Returns the index of the child with the given key
* *
* @param {string} name - the name to search for * @param {string} tabKey - the name to search for
* @returns {number} the index of the child with the given name * @returns {number} the index of the child with the given name
* @private * @private
*/ */
_findChildByName(name) { _findChildByKey(tabKey) {
return this._getValidChildren().findIndex((c) => c?.props.name === name); return this._getValidChildren().findIndex(
(c) => c?.props.tabKey === tabKey,
);
} }
// This ignores any 'null' child elements that are a result of a conditional // This ignores any 'null' child elements that are a result of a conditional

8
ui/components/ui/tabs/tabs.stories.js
View File

@ -11,7 +11,7 @@ export default {
control: 'object', control: 'object',
name: 'Tabs', name: 'Tabs',
}, },
defaultActiveTabName: { defaultActiveTabKey: {
control: { control: {
type: 'text', type: 'text',
}, },
@ -29,7 +29,7 @@ export default {
function renderTab({ name, content }, index) { function renderTab({ name, content }, index) {
return ( return (
<Tab name={name} key={name + index}> <Tab tabKey={name} key={name + index} name={name}>
{content} {content}
</Tab> </Tab>
); );
@ -38,10 +38,10 @@ function renderTab({ name, content }, index) {
export const DefaultStory = (args) => { export const DefaultStory = (args) => {
return ( return (
<Tabs <Tabs
defaultActiveTabName={args.defaultActiveTabName} defaultActiveTabKey={args.defaultActiveTabKey}
onTabClick={args.onTabClick} onTabClick={args.onTabClick}
> >
{args.tabs.map((tabProps, i) => renderTab(tabProps, i))} {args.tabs.map((tabProps, i) => renderTab(tabProps, i, args.t))}
<DropdownTab <DropdownTab
options={[ options={[
{ name: 'Insight Snap', value: 'Insight Snap' }, { name: 'Insight Snap', value: 'Insight Snap' },

2
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -218,7 +218,7 @@ export default class ConfirmTransactionBase extends Component {
showTransactionConfirmedModal({ showTransactionConfirmedModal({
onSubmit: () => { onSubmit: () => {
clearConfirmTransaction(); clearConfirmTransaction();
setDefaultHomeActiveTabName('Activity').then(() => { setDefaultHomeActiveTabName('activity').then(() => {
history.push(DEFAULT_ROUTE); history.push(DEFAULT_ROUTE);
}); });
}, },

2
ui/pages/confirm-transaction/confirm-transaction.component.js
View File

@ -135,7 +135,7 @@ export default class ConfirmTransaction extends Component {
!transactionId && !transactionId &&
!totalUnapprovedCount !totalUnapprovedCount
) { ) {
setDefaultHomeActiveTabName('Activity').then(() => { setDefaultHomeActiveTabName('activity').then(() => {
history.replace(DEFAULT_ROUTE); history.replace(DEFAULT_ROUTE);
}); });
} else if ( } else if (

13
ui/pages/home/home.component.js
View File

@ -549,6 +549,7 @@ export default class Home extends PureComponent {
render() { render() {
const { t } = this.context; const { t } = this.context;
const { const {
defaultHomeActiveTabName, defaultHomeActiveTabName,
onTabClick, onTabClick,
@ -610,7 +611,8 @@ export default class Home extends PureComponent {
<EthOverview /> <EthOverview />
</div> </div>
<Tabs <Tabs
defaultActiveTabName={defaultHomeActiveTabName} t={this.context.t}
defaultActiveTabKey={defaultHomeActiveTabName}
onTabClick={onTabClick} onTabClick={onTabClick}
tabsClassName="home__tabs" tabsClassName="home__tabs"
subHeader={ subHeader={
@ -687,7 +689,8 @@ export default class Home extends PureComponent {
activeClassName="home__tab--active" activeClassName="home__tab--active"
className="home__tab" className="home__tab"
data-testid="home__asset-tab" data-testid="home__asset-tab"
name={t('assets')} name={this.context.t('assets')}
tabKey="assets"
> >
<AssetList <AssetList
onClickAsset={(asset) => onClickAsset={(asset) =>
@ -700,7 +703,8 @@ export default class Home extends PureComponent {
activeClassName="home__tab--active" activeClassName="home__tab--active"
className="home__tab" className="home__tab"
data-testid="home__nfts-tab" data-testid="home__nfts-tab"
name={t('nfts')} name={this.context.t('nfts')}
tabKey="nfts"
> >
<CollectiblesTab <CollectiblesTab
onAddNFT={() => { onAddNFT={() => {
@ -713,7 +717,8 @@ export default class Home extends PureComponent {
activeClassName="home__tab--active" activeClassName="home__tab--active"
className="home__tab" className="home__tab"
data-testid="home__activity-tab" data-testid="home__activity-tab"
name={t('activity')} name={this.context.t('activity')}
tabKey="activity"
> >
<TransactionList /> <TransactionList />
</Tab> </Tab>

4
ui/pages/import-token/import-token.component.js
View File

@ -625,13 +625,13 @@ class ImportToken extends Component {
if (showSearchTab) { if (showSearchTab) {
tabs.push( tabs.push(
<Tab name={t('search')} key="search-tab"> <Tab name={t('search')} key="search-tab" tabKey="search">
{this.renderSearchToken()} {this.renderSearchToken()}
</Tab>, </Tab>,
); );
} }
tabs.push( tabs.push(
<Tab name={t('customToken')} key="custom-tab"> <Tab name={t('customToken')} key="custom-tab" tabKey="customToken">
{this.renderCustomTokenForm()} {this.renderCustomTokenForm()}
</Tab>, </Tab>,
); );

2
ui/pages/swaps/awaiting-swap/awaiting-swap.js
View File

@ -307,7 +307,7 @@ export default function AwaitingSwap({
) { ) {
history.push(DEFAULT_ROUTE); history.push(DEFAULT_ROUTE);
} else { } else {
await dispatch(setDefaultHomeActiveTabName('Activity')); await dispatch(setDefaultHomeActiveTabName('activity'));
history.push(DEFAULT_ROUTE); history.push(DEFAULT_ROUTE);
} }
}} }}