fix(model&component): fixed proxy model & refactor select component

src/components/Select/index.tsx

@@ -49,17 +49,15 @@ export class Select extends React.Component<SelectProps, SelectState> {
     }
 
     componentDidMount () {
-        // create container element
-        const container = document.createElement('div')
-        document.body.appendChild(container)
-        this.$container = container
 
         document.addEventListener('click', this.handleGlobalClick, true)
         this.setState({ dropdownListStyles: this.calculateAttachmentPosition() })
     }
 
     componentWillUnmount () {
+        if (this.state.hasCreateDropList) {
             document.body.removeChild(this.$container)
+        }
         document.removeEventListener('click', this.handleGlobalClick, true)
     }
     shouldComponentUpdate (nextProps, nextState) {
@@ -71,6 +69,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     handleShowDropList = () => {
         if (!this.state.hasCreateDropList) {
+            // create container element
+            const container = document.createElement('div')
+            document.body.appendChild(container)
+            this.$container = container
             this.setState({
                 hasCreateDropList: true
             })

src/lib/jsBridge.ts

@@ -140,6 +140,10 @@ export class JsBridge {
     public setPasteboard (data: string) {
         return this.callHandler('setPasteboard', data)
     }
+
+    public writeConfigWithString (data: string) {
+        return this.callHandler('writeConfigWithString', data)
+    }
 }
 
 export function setupJsBridge (callback) {

src/models/Proxy.ts

@@ -8,21 +8,10 @@ export enum ProxyType {
     Socks5 = 'Socks5'
 }
 
-export interface Proxy {
-
-    /**
-     * proxy name
-     */
-    name?: string
-
-    /**
-     * configs of proxy server
-     * now support shadowsocks, v2ray and socks5
-     */
-    config?: ShadowsocksProxy | VmessProxy | Socks5Proxy
-}
+export type Proxy = ShadowsocksProxy | VmessProxy | Socks5Proxy
 
 export interface ShadowsocksProxy {
+    name?: string
 
     type?: 'ss'
 
@@ -41,6 +30,7 @@ export interface ShadowsocksProxy {
 }
 
 export interface VmessProxy {
+    name?: string
 
     type?: 'vmess'
 
@@ -59,6 +49,7 @@ export interface VmessProxy {
 }
 
 export interface Socks5Proxy {
+    name?: string
 
     type?: 'socks5'
 

src/models/Rule.ts

@@ -13,5 +13,6 @@ export enum RuleType {
     'DOMAIN-SUFFIX' = 'DOMAIN-SUFFIX',
     'DOMAIN-KEYWORD' = 'DOMAIN-KEYWORD',
     'GEOIP' = 'GEOIP',
-    'FINAL' = 'FINAL'
+    'FINAL' = 'FINAL',
+    'IP-CIDR' = 'IP-CIDR'
 }

src/stores/ConfigStore.ts

@@ -4,6 +4,7 @@ import * as Models from '@models'
 import { jsBridge } from '@lib/jsBridge'
 import { getConfig } from '@lib/request'
 import { getLocalStorageItem } from '@lib/helper'
+import { Rule, RuleType } from '@models';
 
 export class ConfigStore {
 
@@ -36,13 +37,17 @@ export class ConfigStore {
             const proxies = config.Proxy as any[] || []
             const proxy: Models.Proxy[] = proxies
                 .filter(p => ['vmess', 'ss', 'socks5'].includes(p.type))
-                .map(p => ({ name: p.name, config: p }))
 
             const proxyGroups = config['Proxy Group'] as any[] || []
             const proxyGroup: Models.ProxyGroup[] = proxyGroups
                 .filter(p => ['url-test', 'select', 'fallback'].includes(p.type))
                 .map(p => ({ name: p.name, config: p }))
-
+            const rules = config['Rule'] as any[] || []
+            const rule: Rule[] = rules.map(r => r.split(',')).filter(r => r.length !== 3).map(r => ({
+                type: RuleType[r[0] as string],
+                payload: r[1],
+                proxy: r[2]
+            }))
             this.config = {
                 general: {
                     port: config.port || 0,
@@ -57,7 +62,7 @@ export class ConfigStore {
                 },
                 proxy,
                 proxyGroup,
-                rules: config['Rule'] || []
+                rules: rule || []
             }
             this.state = 'ok'
         })
@@ -79,5 +84,29 @@ export class ConfigStore {
             }
         }
     }
-
+    @action
+    async updateConfig () {
+        const { general, proxy, proxyGroup, rules } = this.config
+        const externalController = `${general.externalControllerAddr}:${general.externalControllerPort}`
+        const proxyGroups = proxyGroup.map(p => ({
+            name: p.name,
+            ...p.config
+        }))
+        const config = {
+            'external-controller': externalController,
+            port: general.port,
+            'socks-port': general.socksPort,
+            'redir-port': general.redirPort,
+            'allow-lan': general.allowLan,
+            secret: general.secret,
+            'log-level': general.logLevel,
+            mode: general.mode,
+            Proxy: proxy,
+            'Proxy Group': proxyGroups,
+            Rule: rules
+        }
+        const data = yaml.stringify(config)
+        console.log(data)
+        // jsBridge.writeConfigWithString(data)
+    }
 }