Merge pull request #95 from Coding/zhengxinqi/plugin_lists_view

fixes coding/WebIDE#155

Author: hackape

app/commands/commandBindings/misc.js

@@ -19,9 +19,6 @@ export default {
   'global:show_settings': c => {
     $d(Modal.showModal({type: 'Settings', position: 'center'}))
   },
-  'global:show_packages': c => {
-    $d(Modal.showModal({type: 'Packages', position: 'center'}))
-  },
   'global:show_branches': () => {
     getComponentByName('GitBranchWidget').openGitBranches()
   },

app/commands/keymaps.js

@@ -16,7 +16,6 @@ export default {
   'cmd+alt+shift+3': 'editor:split_pane_horizontal_3',
   'cmd+alt+4':       'editor:split_pane_vertical_4',
   'cmd+comma': 'global:show_settings',
-  'cmd+0': 'global:show_packages',
   'alt+b': 'global:show_branches',
 }
 

app/components/Modal/index.jsx

@@ -23,7 +23,6 @@ import {
   GitRebaseInput,
   GitCommitDiffView,
   GitCheckoutView,
-  PackageControlView
 } from './modals'
 
 var ModalContainer = (props) => {
@@ -117,9 +116,6 @@ class Modal extends Component {
         case 'Settings':
           return <SettingsView {...this.props} />
 
-        case 'Packages':
-          return <PackageControlView {...this.props} />
-
         default:
           return content
       }

app/components/Package/PackageControlView.js

@@ -42,7 +42,7 @@ export const togglePackage = createAction(PACKAGE_TOGGLE, (pkgId, shouldEnable)
   })
 })
 
-export const fetchPackage = (pkgId, pkgVersion) => (dispatch) => {
+export const fetchPackage = (pkgId, pkgVersion, others) => (dispatch) => {
   const pkgInfo = api.fetchPackageInfo(pkgId, pkgVersion).then(pkg => pkg.codingIdePackage)
   const pkgScript = api.fetchPackageScript(pkgId, pkgVersion)
     .then(script => {
@@ -52,8 +52,10 @@ export const fetchPackage = (pkgId, pkgVersion) => (dispatch) => {
 
   if (window.extensions[pkgId]) dispatch(togglePackage(pkgId, false))
   Promise.all([pkgInfo, pkgScript]).then(([pkg, id]) => {
+    console.log('pkg', pkg);
     dispatch(updateLocalPackage({
       ...pkg,
+      ...others,
       enabled: Boolean(window.extensions[pkgId]),
       id
     }))
@@ -68,6 +70,6 @@ export const preloadRequirePackages = () => dispatch => {
   api.fetchPackageList()
     .then(list => list.filter(pkg => pkg.requirement === 'Required'))
     .then(list => list.forEach(pkg => {
-      dispatch(fetchPackage(pkg.name, pkg.version))
+      dispatch(fetchPackage(pkg.name, pkg.version, pkg))
     }))
 }

app/components/Package/actions.js

@@ -0,0 +1,95 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { togglePackage, fetchPackageList } from './actions';
+const Card = (props) => {
+    return (
+        <div className="card">
+            <div className="title">
+                {props.name}
+                <span>{props.version}</span>
+            </div>
+            <div className="desc">
+                {props.desc}
+            </div>
+            <div className="author">
+                <div className="icon"/>
+                <div className="text">
+                    {props.author}
+                </div>
+            </div>
+            <div className="buttons">
+                <div className="label">
+                    {/*<button>settings</button>*/}
+                    {/*<button>uninstall</button>*/}
+                    {props.requirement !== 'Required' ? (
+                        <button
+                            onClick={e => props.dispatch(togglePackage(props.name, !props.enabled))}>
+                            {props.enabled
+                                ? 'disable'
+                                : 'enable'}
+                        </button>
+                        ) : null}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+class ExtensionList extends Component {
+    state = {
+        searchKey: ''
+    }
+    componentWillMount() {
+        this.props.dispatch(fetchPackageList());
+    }
+    render() {
+        const {data, dispatch} = this.props;
+        return (
+            <div className="settings-extension-container">
+                <div>
+                    <input
+                        type="text"
+                        className="search"
+                        value={this.state.searchKey}
+                        placeholder="filter extension by name"
+                        onChange={(e) => {
+                        this.setState({searchKey: e.target.value});
+                    }}/>
+                </div>
+                <div className="lists">
+                    {data
+                    .filter((card) => {
+                        if (this.state.searchKey) {
+                            if (card.name.includes(this.state.searchKey)) {
+                                return true;
+                            }
+                            return false;
+                        }
+                        return true;
+                    })
+                    .map((card, idx) => (<Card {...card} dispatch={dispatch}/>))
+}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connect((state) => {
+    const {
+        PackageState: {
+            localPackages = {}
+        }
+    } = state;
+    const data = Object
+        .keys(localPackages)
+        .map((key) => ({
+            name: localPackages[key].name,
+            desc: localPackages[key].description,
+            author: localPackages[key].author,
+            version: localPackages[key].version,
+            enabled: localPackages[key].enabled,
+            requirement: localPackages[key].requirement
+        }))
+    return ({data})
+})(ExtensionList)

app/components/Package/extensionList.js

@@ -1,2 +1,2 @@
 /* @flow weak */
-export PackageControlView from './PackageControlView'
+export ExtensionList from './extensionList'

app/components/Package/index.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import cx from 'classnames'
 import _ from 'lodash'
+import ExtensionList from '../Package/extensionList.js';
 
 import * as SettingActions from './actions'
 
@@ -94,6 +95,7 @@ const EditorSettings = (props) => (
       )}
     </div>
   )
+
 const ThemeSettings = (props) => (
     <div>
       <h2 className='settings-content-header'>Theme Settings</h2>
@@ -106,6 +108,14 @@ const ThemeSettings = (props) => (
     </div>
   )
 
+const ExtensionSettings = () => (
+    <div>
+      <h2 className='settings-content-header'>Extension Settings</h2>
+      <ExtensionList />
+    </div>
+)
+
+
 const SettingsContent = ({ content }) => {
   switch (content.id) {
     case 'GENERAL':
@@ -115,6 +125,8 @@ const SettingsContent = ({ content }) => {
       return <EditorSettings {...content} />
     case 'THEME':
       return <ThemeSettings {...content} />
+    case 'EXTENSIONS':
+      return <ExtensionSettings />
   }
 }
 

app/components/Setting/index.jsx

@@ -39,7 +39,7 @@ export const SyntaxThemeOptions = ['default', 'neo', 'eclipse', 'monokai', 'mate
 
 const SettingState = {
   activeTabId: 'GENERAL',
-  tabIds: ['GENERAL', 'THEME', 'EDITOR'],
+  tabIds: ['GENERAL', 'THEME', 'EDITOR', 'EXTENSIONS'],
   tabs: {
     THEME: {
       id: 'THEME',
@@ -53,6 +53,9 @@ const SettingState = {
         options: SyntaxThemeOptions
       }]
     },
+    EXTENSIONS: {
+      id: 'EXTENSIONS'
+    },
     GENERAL: {
       id: 'GENERAL',
       items: [{

app/components/Setting/reducer.js

@@ -55,3 +55,51 @@
   }
 }
 
+.settings-extension-container {
+  width: 80%;
+  .search {
+    width: 100%;
+    border: 1px solid grey;
+    height: 30px;
+    padding-left: 5px;
+  }
+  .lists {
+    margin-top: 20px;
+    .card {
+      width: 100%;
+      height: 8em;
+      padding: 10px;
+      border: 1px solid grey;
+      margin-bottom: 10px;
+      position: relative;
+      .title {
+        font-size: 1.5em;
+        > span {
+          font-size: 0.8em;
+          margin-left: 10px;
+        }
+      }
+      .desc {
+        font-size: 1em;
+        margin-top: 10px;
+        font-weight: 10;
+      }
+      .author {
+        margin-top: 10px;
+        .icon {
+          width: 10px;
+        }
+        .text {
+          margin-right: 10px;
+        }
+      }
+      .buttons {
+        position: absolute;
+        display: flex;
+        padding: 10px;
+        right: 0px;
+        bottom: 0px;
+      }
+    }
+  }
+}