1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/pages/settings/settings.component.js
Mark Stacey 47a7176e71
Use consistent variable name for classnames import (#8143)
The variable name `classnames` is generally what we use for this
module, and single-letter variable names are generally frowned upon.
2020-03-01 06:14:16 -04:00

248 lines
6.6 KiB
JavaScript

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Switch, Route, matchPath } from 'react-router-dom'
import TabBar from '../../components/app/tab-bar'
import classnames from 'classnames'
import SettingsTab from './settings-tab'
import NetworksTab from './networks-tab'
import AdvancedTab from './advanced-tab'
import InfoTab from './info-tab'
import SecurityTab from './security-tab'
import ContactListTab from './contact-list-tab'
import {
DEFAULT_ROUTE,
ADVANCED_ROUTE,
SECURITY_ROUTE,
GENERAL_ROUTE,
ABOUT_US_ROUTE,
SETTINGS_ROUTE,
NETWORKS_ROUTE,
CONTACT_LIST_ROUTE,
CONTACT_ADD_ROUTE,
CONTACT_EDIT_ROUTE,
CONTACT_VIEW_ROUTE,
CONTACT_MY_ACCOUNTS_ROUTE,
CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
} from '../../helpers/constants/routes'
class SettingsPage extends PureComponent {
static propTypes = {
addressName: PropTypes.string,
backRoute: PropTypes.string,
currentPath: PropTypes.string,
history: PropTypes.object,
isAddressEntryPage: PropTypes.bool,
isPopupView: PropTypes.bool,
pathnameI18nKey: PropTypes.string,
initialBreadCrumbRoute: PropTypes.string,
breadCrumbTextKey: PropTypes.string,
initialBreadCrumbKey: PropTypes.string,
}
static contextTypes = {
t: PropTypes.func,
}
render () {
const { history, backRoute, currentPath } = this.props
return (
<div
className={classnames('main-container settings-page', {
'settings-page--selected': currentPath !== SETTINGS_ROUTE,
})}
>
<div className="settings-page__header">
{
currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
<div
className="settings-page__back-button"
onClick={() => history.push(backRoute)}
/>
)
}
{ this.renderTitle() }
<div
className="settings-page__close-button"
onClick={() => history.push(DEFAULT_ROUTE)}
/>
</div>
<div className="settings-page__content">
<div className="settings-page__content__tabs">
{ this.renderTabs() }
</div>
<div className="settings-page__content__modules">
{ this.renderSubHeader() }
{ this.renderContent() }
</div>
</div>
</div>
)
}
renderTitle () {
const { t } = this.context
const { isPopupView, pathnameI18nKey, addressName } = this.props
let titleText
if (isPopupView && addressName) {
titleText = addressName
} else if (pathnameI18nKey && isPopupView) {
titleText = t(pathnameI18nKey)
} else {
titleText = t('settings')
}
return (
<div className="settings-page__header__title">
{titleText}
</div>
)
}
renderSubHeader () {
const { t } = this.context
const {
currentPath,
isPopupView,
isAddressEntryPage,
pathnameI18nKey,
addressName,
initialBreadCrumbRoute,
breadCrumbTextKey,
history,
initialBreadCrumbKey,
} = this.props
let subheaderText
if (isPopupView && isAddressEntryPage) {
subheaderText = t('settings')
} else if (initialBreadCrumbKey) {
subheaderText = t(initialBreadCrumbKey)
} else {
subheaderText = t(pathnameI18nKey || 'general')
}
return currentPath !== NETWORKS_ROUTE && (
<div className="settings-page__subheader">
<div
className={classnames({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)}
>
{subheaderText}
</div>
{breadCrumbTextKey && (
<div className="settings-page__subheader--break">
<span>{' > '}</span>{t(breadCrumbTextKey)}
</div>
)}
{isAddressEntryPage && (
<div className="settings-page__subheader--break">
<span>{' > '}</span>{addressName}
</div>
)}
</div>
)
}
renderTabs () {
const { history, currentPath } = this.props
const { t } = this.context
return (
<TabBar
tabs={[
{ content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE },
{ content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE },
{ content: t('contacts'), description: t('contactsSettingsDescription'), key: CONTACT_LIST_ROUTE },
{ content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
{ content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE },
{ content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE },
]}
isActive={(key) => {
if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
return true
}
return matchPath(currentPath, { path: key, exact: true })
}}
onSelect={(key) => history.push(key)}
/>
)
}
renderContent () {
return (
<Switch>
<Route
exact
path={GENERAL_ROUTE}
component={SettingsTab}
/>
<Route
exact
path={ABOUT_US_ROUTE}
component={InfoTab}
/>
<Route
exact
path={ADVANCED_ROUTE}
component={AdvancedTab}
/>
<Route
exact
path={NETWORKS_ROUTE}
component={NetworksTab}
/>
<Route
exact
path={SECURITY_ROUTE}
component={SecurityTab}
/>
<Route
exact
path={CONTACT_LIST_ROUTE}
component={ContactListTab}
/>
<Route
exact
path={CONTACT_ADD_ROUTE}
component={ContactListTab}
/>
<Route
exact
path={CONTACT_MY_ACCOUNTS_ROUTE}
component={ContactListTab}
/>
<Route
exact
path={`${CONTACT_EDIT_ROUTE}/:id`}
component={ContactListTab}
/>
<Route
exact
path={`${CONTACT_VIEW_ROUTE}/:id`}
component={ContactListTab}
/>
<Route
exact
path={`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/:id`}
component={ContactListTab}
/>
<Route
exact
path={`${CONTACT_MY_ACCOUNTS_EDIT_ROUTE}/:id`}
component={ContactListTab}
/>
<Route
component={SettingsTab}
/>
</Switch>
)
}
}
export default SettingsPage