You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.8 KiB
137 lines
3.8 KiB
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Switch, Route, matchPath } from 'react-router-dom'
|
|
import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
|
|
import { getEnvironmentType } from '../../../../app/scripts/lib/util'
|
|
import TabBar from '../../components/app/tab-bar'
|
|
import c from 'classnames'
|
|
import SettingsTab from './settings-tab'
|
|
import AdvancedTab from './advanced-tab'
|
|
import InfoTab from './info-tab'
|
|
import SecurityTab from './security-tab'
|
|
import {
|
|
DEFAULT_ROUTE,
|
|
ADVANCED_ROUTE,
|
|
SECURITY_ROUTE,
|
|
GENERAL_ROUTE,
|
|
ABOUT_US_ROUTE,
|
|
SETTINGS_ROUTE,
|
|
} from '../../helpers/constants/routes'
|
|
|
|
const ROUTES_TO_I18N_KEYS = {
|
|
[GENERAL_ROUTE]: 'general',
|
|
[ADVANCED_ROUTE]: 'advanced',
|
|
[SECURITY_ROUTE]: 'securityAndPrivacy',
|
|
[ABOUT_US_ROUTE]: 'about',
|
|
}
|
|
|
|
export default class SettingsPage extends PureComponent {
|
|
static propTypes = {
|
|
location: PropTypes.object,
|
|
history: PropTypes.object,
|
|
t: PropTypes.func,
|
|
}
|
|
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
}
|
|
|
|
isCurrentPath (pathname) {
|
|
return this.props.location.pathname === pathname
|
|
}
|
|
|
|
render () {
|
|
const { t } = this.context
|
|
const { history, location } = this.props
|
|
|
|
const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname]
|
|
const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP
|
|
|
|
return (
|
|
<div
|
|
className={c('main-container settings-page', {
|
|
'settings-page--selected': !this.isCurrentPath(SETTINGS_ROUTE),
|
|
})}
|
|
>
|
|
<div className="settings-page__header">
|
|
{
|
|
!this.isCurrentPath(SETTINGS_ROUTE) && (
|
|
<div
|
|
className="settings-page__back-button"
|
|
onClick={() => history.push(SETTINGS_ROUTE)}
|
|
/>
|
|
)
|
|
}
|
|
<div className="settings-page__header__title">
|
|
{t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')}
|
|
</div>
|
|
<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.renderContent() }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
renderTabs () {
|
|
const { history, location } = 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('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
|
|
{ content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE },
|
|
]}
|
|
isActive={key => {
|
|
if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) {
|
|
return true
|
|
}
|
|
return matchPath(location.pathname, { 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={SECURITY_ROUTE}
|
|
component={SecurityTab}
|
|
/>
|
|
<Route
|
|
component={SettingsTab}
|
|
/>
|
|
</Switch>
|
|
)
|
|
}
|
|
}
|
|
|