fix(container): remove sortlist

configs/webpack/common.js

@@ -63,10 +63,10 @@ module.exports = {
             ],
         }),
     ],
-    externals: {
+    // externals: {
-        react: 'React',
+    //     react: 'React',
-        'react-dom': 'ReactDOM',
+    //     'react-dom': 'ReactDOM',
-    },
+    // },
     performance: {
         hints: false,
     },

src/components/Select/index.tsx

@@ -19,7 +19,8 @@ interface SelectProps extends BaseComponentProps {
 
 interface SelectState {
     dropdownListStyles: React.CSSProperties
-    showDropDownList: boolean
+    showDropDownList: boolean,
+    hasCreateDropList: boolean
 }
 
 export class Select extends React.Component<SelectProps, SelectState> {
@@ -35,21 +36,25 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     state = {
         dropdownListStyles: {},
-        showDropDownList: false
+        showDropDownList: false,
+        hasCreateDropList: false
     }
 
     constructor (props) {
         super(props)
+    }
 
+    componentDidUpdate() {
+        console.log('update')
+    }
+
+    componentDidMount () {
         // create container element
         const container = document.createElement('div')
         document.body.appendChild(container)
         this.$container = container
 
         document.addEventListener('click', this.handleGlobalClick, true)
-    }
-
-    componentDidMount () {
         this.setState({ dropdownListStyles: this.calculateAttachmentPosition() })
     }
 
@@ -57,6 +62,23 @@ export class Select extends React.Component<SelectProps, SelectState> {
         document.body.removeChild(this.$container)
         document.removeEventListener('click', this.handleGlobalClick, true)
     }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.value === this.props.value && nextState.showDropDownList === this.state.showDropDownList) {
+            return false
+        }
+        return true
+    }
+
+    handleShowDropList = () => {
+        if (!this.state.hasCreateDropList) {
+            this.setState({
+                hasCreateDropList: true,
+            })
+        }
+        this.setState({
+            showDropDownList: true
+        })
+    }
 
     private handleGlobalClick = (e) => {
         const el = this.$attachment.current
@@ -118,7 +140,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     render () {
         const { value, onSelect, children, className: cn, style } = this.props
-        const { dropdownListStyles, showDropDownList } = this.state
+        const { dropdownListStyles, showDropDownList, hasCreateDropList } = this.state
         const matchChild = this.getSelectedOption(value, children)
         const dropDownList = (
             <div
@@ -137,12 +159,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 className={classnames('select', cn)}
                 style={style}
                 ref={this.$target}
-                onClick={() => this.setState({ showDropDownList: !showDropDownList })}
+                onClick={this.handleShowDropList}
             >
                 {matchChild.props.children}
                 <Icon type="triangle-down" />
             </div>
-            {createPortal(dropDownList, this.$container)}
+            {hasCreateDropList && createPortal(dropDownList, this.$container)}
         </>
     }
 }

src/components/Select/style.scss

@@ -16,7 +16,7 @@
 }
 
 .select-list {
-    position: fixed;
+    position: absolute;
     max-width: 170px;
     border-radius: 4px;
     overflow: hidden;

src/containers/App.tsx

@@ -33,7 +33,7 @@ export default class App extends React.Component<AppProps, {}> {
                 <div className="page-container">
                     {
                         routes.map(
-                            route => <Route exact={!!route.exact} path={route.path} component={route.component}/>
+                            route => <Route exact={!!route.exact} path={route.path} key={route.path} component={route.component}/>
                         )
                     }
                 </div>

src/containers/Rules/index.tsx

@@ -25,7 +25,48 @@ class Rules extends React.Component<I18nProps, RulesState> {
             { type: RuleType['DOMAIN-SUFFIX'], payload: 'google.com.hk', proxy: 'HK' },
             { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
             { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
-            { type: RuleType['FINAL'], payload: '', proxy: 'DIRECT' }
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN-SUFFIX'], payload: 'twitter.com', proxy: 'HKG' },
+            { type: RuleType['DOMAIN'], payload: 'pornhub.com', proxy: 'HKG' },
         ],
         proxies: {
             DIRECT: { type: 'Direct' },
@@ -115,7 +156,6 @@ class Rules extends React.Component<I18nProps, RulesState> {
         const { modifiedIndex, proxies } = this.state
         const isFinal = rule.type === 'FINAL'
         const DragHandle = SortableHandle(() => <Icon type="drag" size={16} />)
-
         return (
             <li className="rule-item" key={index}>
                 <Row className="rule-item-row" gutter={24} align="middle">
@@ -127,7 +167,7 @@ class Rules extends React.Component<I18nProps, RulesState> {
                             isFinal
                                 ? rule.type
                                 : (
-                                    <Select value={rule.type} onSelect={type => this.handleModifyType(index, type)}>
+                                    <Select key={index} value={rule.type} onSelect={type => this.handleModifyType(index, type)}>
                                         {
                                             Object.keys(RuleType)
                                                 .filter(type => type !== 'FINAL')
@@ -162,7 +202,7 @@ class Rules extends React.Component<I18nProps, RulesState> {
                         }
                     </Col>
                     <Col className="rule-proxy" span={5}>
-                        <Select className="rule-proxy-option" value={rule.proxy} onSelect={proxy => this.handleModifyProxy(index, proxy)}>
+                        <Select className="rule-proxy-option" key={index} value={rule.proxy} onSelect={proxy => this.handleModifyProxy(index, proxy)}>
                             {
                                 Object.keys(proxies).map(proxyName => {
                                     const proxy = proxies[proxyName]
@@ -188,7 +228,6 @@ class Rules extends React.Component<I18nProps, RulesState> {
         const { t } = this.props
         const { rules } = this.state
         const SortableList = SortableContainer<{ rules: Rule[] }>(this.renderRules)
-
         return (
             <div className="page">
                 <Header title={t('title')} >
@@ -197,7 +236,10 @@ class Rules extends React.Component<I18nProps, RulesState> {
 
                 <Card className="rules-card">
                     <div className="rules">
-                        <SortableList rules={rules} onSortEnd={this.onSortEnd} useDragHandle={true} />
+                        {
+                            rules.map((rule: Rule, index )=> this.renderRuleItem(rule, index))
+                        }
+                        {/* <SortableList rules={rules} onSortEnd={this.onSortEnd} useDragHandle={true} /> */}
                     </div>
                 </Card>
             </div>

src/containers/Sidebar/index.tsx

@@ -24,7 +24,7 @@ class Sidebar extends React.Component<SidebarProps, {}> {
                     {
                         routes.map(
                             ({ path, name, exact }) => (
-                                <li className="item">
+                                <li className="item" key={name}>
                                     <NavLink to={path} activeClassName="active" exact={!!exact}>{ t(name) }</NavLink>
                                 </li>
                             )

src/index.html.ejs

@@ -9,7 +9,7 @@
         <div id="root"></div>
 
         <!-- Dependencies -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script>
+        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script> -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script>
+        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script> -->
     </body>
 </html>