Chore: upgrade i18n

src/components/Tags/index.tsx

@@ -14,15 +14,15 @@ interface TagsProps extends BaseComponentProps, I18nProps {
 }
 
 export function Tags (props: TagsProps) {
-    const { className, data, onClick, select, canClick } = props
+    const { className, data, onClick, select, canClick, rowHeight: rawHeight } = props
 
     const { t } = useTranslation()
     const [expand, setExpand] = useState(false)
 
     const ulRef = useRef<HTMLUListElement>()
-    const showExtend = useMemo(() => ulRef.current.offsetHeight > 30, [ulRef])
+    const showExtend = useMemo(() => ulRef.current && ulRef.current.offsetHeight > 30, [ulRef.current])
 
-    const rowHeight = this.state.expand ? 'auto' : this.props.rowHeight
+    const rowHeight = expand ? 'auto' : rawHeight
     const handleClick = canClick ? onClick : noop
 
     function toggleExtend () {

src/containers/ExternalControllerDrawer/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { withTranslation } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
 import { inject, observer } from 'mobx-react'
 import { storeKeys } from '@lib/createStore'
 import { Modal, Input, Row, Col, Alert } from '@components'
-import { BaseProps, I18nProps } from '@models'
+import { BaseProps } from '@models'
 import './style.scss'
 
-interface ExternalControllerModalProps extends I18nProps, BaseProps {}
+interface ExternalControllerModalProps extends BaseProps, WithTranslation {}
 
 interface ExternalControllerModalState {
     hostname: string

src/containers/Logs/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import * as dayjs from 'dayjs'
+import dayjs from 'dayjs'
-import { translate } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
-import { I18nProps } from '@models'
 import { Card, Header } from '@components'
 import './style.scss'
 import { getLogsStreamReader } from '@lib/request'
@@ -12,7 +11,7 @@ interface Log {
     time: Date
 }
 
-interface LogsProps extends I18nProps {}
+interface LogsProps extends WithTranslation {}
 
 interface LogsState {
     logs: Log[]
@@ -64,4 +63,4 @@ class Logs extends React.Component<LogsProps, LogsState> {
     }
 }
 
-export default translate(['Logs'])(Logs)
+export default withTranslation(['Logs'])(Logs)

src/containers/Proxies/components/ModifyProxyDialog/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { translate } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
 import { Modal } from '@components'
 import { getLocalStorageItem, setLocalStorageItem } from '@lib/helper'
 import './style.scss'
@@ -8,7 +8,6 @@ import {
     BaseComponentProps,
     Proxy as IProxy,
     SsProxyConfigList, VmessProxyConfigList, Socks5ProxyConfigList,
-    I18nProps,
     TagColors,
     ProxyType,
     SsCipher, VmessCipher, pickCipherWithAlias
@@ -23,7 +22,7 @@ import {
     ProxyCipherSelector
 } from './FormItems'
 
-interface ModifyProxyDialogProps extends BaseComponentProps, I18nProps {
+interface ModifyProxyDialogProps extends BaseComponentProps, WithTranslation {
     config: IProxy
     onOk?: (config: IProxy) => void
     onCancel?: () => void
@@ -222,4 +221,4 @@ class RawDialog extends React.Component<ModifyProxyDialogProps, ModifyProxyDialo
     }
 }
 
-export const ModifyProxyDialog = translate(['Proxies'])(RawDialog)
+export const ModifyProxyDialog = withTranslation(['Proxies'])(RawDialog)

src/containers/Proxies/index.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
-import { translate } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
 import { inject, observer } from 'mobx-react'
 import { storeKeys } from '@lib/createStore'
 import EE from '@lib/event'
 import { Card, Header, Icon } from '@components'
-import { I18nProps, BaseRouterProps } from '@models'
+import { BaseRouterProps } from '@models'
 
 import { Proxy, Group } from './components'
 import './style.scss'
 
-interface ProxiesProps extends BaseRouterProps, I18nProps {}
+interface ProxiesProps extends BaseRouterProps, WithTranslation {}
 
 interface ProxiesState {
 }
@@ -64,4 +64,4 @@ class Proxies extends React.Component<ProxiesProps, ProxiesState> {
     }
 }
 
-export default translate(['Proxies'])(Proxies)
+export default withTranslation(['Proxies'])(Proxies)

src/containers/Rules/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
-import { translate } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
 import { Header, Card, Row, Col } from '@components'
-import { I18nProps, BaseRouterProps } from '@models'
+import { BaseRouterProps } from '@models'
 import './style.scss'
 import { storeKeys } from '@lib/createStore'
 import { inject, observer } from 'mobx-react'
 import { List, AutoSizer } from 'react-virtualized'
 
-interface RulesProps extends BaseRouterProps, I18nProps {}
+interface RulesProps extends BaseRouterProps, WithTranslation {}
 
 @inject(...storeKeys)
 @observer
@@ -64,4 +64,4 @@ class Rules extends React.Component<RulesProps, {}> {
     }
 }
 
-export default translate(['Rules'])(Rules)
+export default withTranslation(['Rules'])(Rules)

src/containers/Settings/index.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
-import { translate } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
-import { changeLanguage } from 'i18next'
+import i18next from 'i18next'
 import { inject, observer } from 'mobx-react'
 import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
-import { I18nProps, BaseRouterProps } from '@models'
+import { BaseRouterProps } from '@models'
 import { updateConfig } from '@lib/request'
 import { to } from '@lib/helper'
 import { rootStores, storeKeys } from '@lib/createStore'
 import './style.scss'
 import { isClashX, jsBridge } from '@lib/jsBridge'
 
-interface SettingProps extends BaseRouterProps, I18nProps {}
+interface SettingProps extends BaseRouterProps, WithTranslation {}
 
 @inject(...storeKeys)
 @observer
@@ -24,7 +24,7 @@ class Settings extends React.Component<SettingProps, {}> {
     languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh' }, { label: 'English', value: 'en' }]
 
     changeLanguage = (language: string) => {
-        changeLanguage(language)
+        i18next.changeLanguage(language)
     }
 
     handleProxyModeChange = async (mode: string) => {
@@ -84,7 +84,7 @@ class Settings extends React.Component<SettingProps, {}> {
     }
 
     render () {
-        const { t, lng, store } = this.props
+        const { t, i18n, store } = this.props
         const {
             isClashX,
             socks5ProxyPort,
@@ -125,7 +125,7 @@ class Settings extends React.Component<SettingProps, {}> {
                                 <span className="label">{t('labels.language')}</span>
                             </Col>
                             <Col span={14} className="value-column">
-                                <ButtonSelect options={this.languageOptions} value={lng.replace(/-.+$/, '')} onSelect={this.changeLanguage} />
+                                <ButtonSelect options={this.languageOptions} value={i18n.language.replace(/-.+$/, '')} onSelect={this.changeLanguage} />
                             </Col>
                         </Col>
                     </Row>
@@ -222,4 +222,4 @@ class Settings extends React.Component<SettingProps, {}> {
     }
 }
 
-export default translate(['Settings'])(Settings)
+export default withTranslation(['Settings'])(Settings)

src/containers/Sidebar/index.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
-import { translate } from 'react-i18next'
+import { withTranslation, WithTranslation } from 'react-i18next'
 import classnames from 'classnames'
-import { I18nProps } from '@models'
 
 import './style.scss'
 const logo = require('@assets/logo.png')
 
-interface SidebarProps extends I18nProps {
+interface SidebarProps extends WithTranslation {
     routes: {
         path: string
         name: string
@@ -38,4 +37,4 @@ class Sidebar extends React.Component<SidebarProps, {}> {
     }
 }
 
-export default translate(['SideBar'])(Sidebar)
+export default withTranslation(['SideBar'])(Sidebar)

src/i18n/index.ts

@@ -1,5 +1,5 @@
-import * as i18n from 'i18next'
+import i18n from 'i18next'
-import * as LanguageDetector from 'i18next-browser-languagedetector'
+import LanguageDetector from 'i18next-browser-languagedetector'
 
 // locales
 import en_US from './en_US'
@@ -24,4 +24,6 @@ const options = {
     }
 }
 
-export default i18n.use(LanguageDetector).init(options)
+i18n.use(LanguageDetector).init(options)
+
+export default i18n