Chore: hidden uncompleted feature

package-lock.json

@@ -963,6 +963,12 @@
       "integrity": "sha1-mgb08TfuhNffBGDB/bETX/psUP0=",
       "dev": true
     },
+    "@types/classnames": {
+      "version": "2.2.6",
+      "resolved": "http://registry.npm.taobao.org/@types/classnames/download/@types/classnames-2.2.6.tgz",
+      "integrity": "sha1-2+imZhVtVW7QGOFaTGXwiTfD9ig=",
+      "dev": true
+    },
     "@types/history": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.0.tgz",

package.json

@@ -32,6 +32,7 @@
         "@babel/core": "^7.2.0",
         "@babel/preset-env": "^7.2.0",
         "@babel/preset-react": "^7.0.0",
+        "@types/classnames": "^2.2.6",
         "@types/node": "^10.12.12",
         "@types/react": "^16.7.6",
         "@types/react-dom": "^16.0.11",

src/components/Tags/index.tsx

@@ -1,30 +1,33 @@
 import * as React from 'react'
-import { BaseComponentProps } from '@models/BaseProps'
+import { translate } from 'react-i18next'
+import { BaseComponentProps, I18nProps } from '@models'
+import { noop } from '@lib/helper'
 import classnames from 'classnames'
 import './style.scss'
 
-interface TagsProps extends BaseComponentProps {
+interface TagsProps extends BaseComponentProps, I18nProps {
     data: Set<string>
     onClick: (name: string) => void
     select: string
     rowHeight: number
+    canClick: boolean
 }
 
 interface TagsState {
-    extend: boolean
+    expand: boolean
     showExtend: boolean
     ulRef: React.RefObject<HTMLUListElement>
 }
 
-export class Tags extends React.Component<TagsProps, TagsState> {
+class TagsClass extends React.Component<TagsProps, TagsState> {
     state: TagsState = {
-        extend: false,
+        expand: false,
         showExtend: true,
         ulRef: React.createRef<HTMLUListElement>()
     }
 
     toggleExtend = () => {
-        this.setState({ extend: !this.state.extend })
+        this.setState({ expand: !this.state.expand })
     }
 
     componentDidMount () {
@@ -32,16 +35,17 @@ export class Tags extends React.Component<TagsProps, TagsState> {
     }
 
     render () {
-        const { className, data, onClick, select } = this.props
+        const { t, className, data, onClick, select, canClick } = this.props
-        const { extend } = this.state
+        const { expand } = this.state
-        const rowHeight = this.state.extend ? 'auto' : this.props.rowHeight
+        const rowHeight = this.state.expand ? 'auto' : this.props.rowHeight
+        const handleClick = canClick ? onClick : noop
 
         const tags = [...data]
             .sort()
             .map(t => {
-                const tagClass = classnames({ 'tags-selected': select === t })
+                const tagClass = classnames({ 'tags-selected': select === t, 'can-click': canClick })
                 return (
-                    <li className={tagClass} key={t} onClick={() => onClick(t)}>
+                    <li className={tagClass} key={t} onClick={() => handleClick(t)}>
                         { t }
                     </li>
                 )
@@ -49,14 +53,16 @@ export class Tags extends React.Component<TagsProps, TagsState> {
 
         return (
             <div className={classnames('tags-container', className)} style={{ height: rowHeight }}>
-                <ul ref={this.state.ulRef} className={classnames('tags', { extend })}>
+                <ul ref={this.state.ulRef} className={classnames('tags', { expand })}>
                     { tags }
                 </ul>
                 {
                     this.state.showExtend &&
-                    <span className="tags-entend" onClick={this.toggleExtend}>{ this.state.extend ? '收起' : '展开' }</span>
+                    <span className="tags-expand" onClick={this.toggleExtend}>{ this.state.expand ? t('collapseText') : t('expandText') }</span>
                 }
             </div>
         )
     }
 }
+
+export const Tags = translate(['Proxies'])(TagsClass)

src/components/Tags/style.scss

@@ -30,6 +30,10 @@ $delete-height: 22px;
         padding: 0 6px;
         margin: 3px 4px;
         font-size: 10px;
+        cursor: default;
+    }
+
+    li.can-click {
         cursor: pointer;
     }
 
@@ -39,7 +43,7 @@ $delete-height: 22px;
     }
 }
 
-.tags-entend {
+.tags-expand {
     height: 30px;
     line-height: 30px;
     padding: 0 10px;

src/containers/App.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { Route } from 'react-router-dom'
+import { Route, Redirect } from 'react-router-dom'
 import { hot } from 'react-hot-loader'
 import classnames from 'classnames'
 import { I18nProps } from '@models'
 import { isClashX } from '@lib/jsBridge'
 import './App.scss'
 
-import Overview from '@containers/Overview'
+// import Overview from '@containers/Overview'
 import Proxies from '@containers/Proxies'
 import Logs from '@containers/Logs'
 import Rules from '@containers/Rules'
@@ -24,7 +24,7 @@ export default class App extends React.Component<AppProps, {}> {
     }
     render () {
         const routes = [
-            { path: '/', name: 'Overview', component: Overview, exact: true },
+            // { path: '/', name: 'Overview', component: Overview, exact: true },
             { path: '/proxies', name: 'Proxies', component: Proxies },
             { path: '/logs', name: 'Logs', component: Logs },
             { path: '/rules', name: 'Rules', component: Rules },
@@ -35,9 +35,10 @@ export default class App extends React.Component<AppProps, {}> {
             <div className={classnames('app', { 'clash-x': !isClashX() })}>
                 <SlideBar routes={routes} />
                 <div className="page-container">
+                    <Route exact path="/" component={() => <Redirect to="/proxies"/>}/>
                     {
                         routes.map(
-                            route => <Route exact={!!route.exact} path={route.path} key={route.path} component={route.component}/>
+                            route => <Route exact={false} path={route.path} key={route.path} component={route.component}/>
                         )
                     }
                 </div>

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

@@ -22,6 +22,7 @@ export class Group extends React.Component<GroupProps, {}> {
     render () {
         const { config } = this.props
         const proxies = new Set(config.all)
+        const canClick = config.type === 'Selector'
         return (
             <div className="proxy-group">
                 <div className="proxy-group-part">
@@ -34,6 +35,7 @@ export class Group extends React.Component<GroupProps, {}> {
                         data={proxies}
                         onClick={this.handleChangeProxySelected}
                         select={config.now}
+                        canClick={canClick}
                         rowHeight={30} />
                 </div>
             </div>

src/i18n/en_US.ts

@@ -58,6 +58,8 @@ export default {
             alterId: 'AlterId',
             tls: 'TLS'
         },
-        groupTitle: 'Policy Group'
+        groupTitle: 'Policy Group',
+        expandText: 'Expand',
+        collapseText: 'Collapse'
     }
 }

src/i18n/zh_CN.ts

@@ -58,6 +58,8 @@ export default {
             alterId: 'AlterId',
             tls: 'TLS'
         },
-        groupTitle: '策略组'
+        groupTitle: '策略组',
+        expandText: '展开',
+        collapseText: '收起'
     }
 }