Merge pull request #462 from Coding/registerEditorView

registerEditorViewByContentType API 改成 registerEditorView，拦截类型从 conte…

Author: 马蹄疾

app/components/MonacoEditor/Editors/index.js

@@ -31,18 +31,24 @@ export const editorSet = [
   },
 ];
 
-function matchEditorByContentType(editorType, contentType) {
+// 插件形式的编辑器视图会 unshift 到 editorSet 中
+function matchEditorByContentType(editorType, contentType, extension) {
   for (let i = 0, n = editorSet.length; i < n; i++) {
     const set = editorSet[i];
     if (set.editorType) {
       if (set.editorType === editorType) {
         return set.editor;
       }
     } else if (set.contentTypes && Array.isArray(set.contentTypes)) {
-      // 插件形式的编辑器视图会 unshift 到 editorSet 中。通过 contentTypes 拦截。
+      // 通过 contentTypes 拦截。优先级更高
       if (set.contentTypes.includes(contentType)) {
         return set.editor;
       }
+    } else if (set.extensions && Array.isArray(set.extensions)) {
+      // 通过 extensions 拦截。优先级更低
+      if (set.extensions.includes(extension)) {
+        return set.editor;
+      }
     }
   }
   return UnknownEditor;
@@ -62,7 +68,7 @@ const EditorWrapper = observer(({ tab, active }) => {
   // key is crutial here, it decides whether the component should re-construct
   // or keep using the existing instance.
   const key = `editor_${file.path}`;
-  const editorElement = matchEditorByContentType(editor.editorType, editor.contentType);
+  const editorElement = matchEditorByContentType(editor.editorType, editor.contentType, editor.filePath.split('.').pop());
   return React.createElement(editorElement, { editorInfo, key, tab, active, language: config.mainLanguage, path: file.path, size: file.size });
 })
 

app/components/Panel/SideBar/SideBar.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import cx from 'classnames'
 import PluginArea from 'components/Plugins/component'
 import { SIDEBAR } from 'components/Plugins/constants'
 import { observer } from 'mobx-react'
@@ -16,22 +15,51 @@ label = {
 }
 */
 
+class SideBarLabel extends Component {
+  state = {
+    originWidth: 0,
+    width: 'auto',
+  }
+  textRef = null;
 
-const SideBarLabel = ({ label, isActive, onClick }) => (
-  <div className={
-      cx('side-bar-label', {
-        active: isActive
-      })}
-    onClick={onClick}
-  >
-    <div className='side-bar-label-container'>
-      <div className='side-bar-label-content'>
-        <i className={cx('icon', label.icon)} />
-        {!label.onlyIcon && <span>{label.text}</span>}
+  render() {
+    const { width } = this.state;
+    const { label, isActive, onClick } = this.props;
+    return (
+      <div className={`side-bar-label${isActive ? ' active' : ''}`} onClick={onClick}>
+        <div className='side-bar-label-container'>
+          <div className="side-bar-label-content" onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
+            <i className={`icon${label.icon ? ` ${label.icon}` : ''}`} />
+            <span className="text" ref={this.handleTextRef} style={{ width }}>{label.text}</span>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  )
+    );
+  }
+
+  componentDidMount() {
+    if (this.props.label.onlyIcon) {
+      const originWidth = this.textRef.getBoundingClientRect().height;
+      this.setState({ originWidth, width: 0 });
+    }
+  }
+
+  handleTextRef = (ref) => {
+    this.textRef = ref;
+  }
+
+  mouseEnter = () => {
+    if (this.props.label.onlyIcon) {
+      this.setState({ width: this.state.originWidth });
+    }
+  }
+
+  mouseLeave = () => {
+    if (this.props.label.onlyIcon) {
+      this.setState({ width: 0 });
+    }
+  }
+}
 
 SideBarLabel.propTypes = {
   isActive: PropTypes.bool,

app/containers/IDE.jsx

@@ -8,6 +8,8 @@ import emitter, { STORAGE_CHANGE } from 'utils/emitter'
 import { notify, NOTIFY_TYPE } from '../components/Notification/actions'
 import i18n from 'utils/createI18n'
 import GlobalPrompt from './GlobalPrompt'
+import config from 'config';
+import { autorun } from 'mobx';
 
 const Bulletin = ({ close }) => {
   return (
@@ -23,7 +25,7 @@ const Bulletin = ({ close }) => {
 class IDE extends Component {
   constructor (props) {
     super(props)
-    this.state = { isReady: false, isBulletinOn: true }
+    this.state = { isReady: false, isBulletinOn: false }
   }
 
   componentWillMount () {  // initLifecycle_3: IDE specific init
@@ -39,6 +41,11 @@ class IDE extends Component {
         dismissAfter: 12000
       })
     }
+    autorun(() => {
+      if (config.__PLUGIN_DEV__) {
+        this.setState({ isBulletinOn: true });
+      }
+    });
   }
 
   render () {

app/extensions/Editor.ext.js

@@ -9,7 +9,7 @@ import Color from 'color'
 import { monacoThemeOptions } from '../settings'
 import { editorSet } from 'components/MonacoEditor/Editors';
 
-export function getActiveEditor () {
+export function getActiveEditor() {
   const { EditorTabState } = mobxStore
   const activeTab = EditorTabState.activeTab
   return activeTab
@@ -20,7 +20,7 @@ export function getActiveEditor () {
     : null
 }
 
-export function openNewEditor (config) {
+export function openNewEditor(config) {
   const { path, contentType, ...other } = config
   TabActions.createTab({
     icon: icons.getClassWithColor(path.split('/').pop()) || 'fa fa-file-text-o',
@@ -32,7 +32,7 @@ export function openNewEditor (config) {
   })
 }
 
-export function registerLanguage (languageConf) {
+export function registerLanguage(languageConf) {
   const { contribution } = languageConf
   monaco.languages.register(contribution)
   monaco.languages.onLanguage(contribution.id, () => contribution.loader().then((mod) => {
@@ -45,16 +45,20 @@ export function registerFormattingEditProvider (languageId, provider) {
   // todo
 }
 
-export function registerEditorViewByContentTypes(editor, contentTypes) {
+export function registerEditorView(editor, { contentTypes, extensions }) {
   // 注册编辑器
-  editorSet.unshift({ editor, contentTypes });
+  editorSet.unshift({ editor, contentTypes, extensions });
   // dispose
   return () => {
-    editorSet = editorSet.filter(editor => String(editor.contentTypes) !== String(contentTypes));
+    if (contentTypes && Array.isArray(contentTypes)) {
+      editorSet = editorSet.filter(editor => String(editor.contentTypes) !== String(contentTypes));
+    } else {
+      editorSet = editorSet.filter(editor => String(editor.extensions) !== String(extensions));
+    }
   }
 }
 
-export function registerContentProvider (component, conf) {
+export function registerContentProvider(component, conf) {
   const { name } = conf
   const type = `CUSTOM_EDITOR_VIEW_${name}`
   const activate = (editorType, title, props) => {

app/styles/core-ui/Bar.styl

@@ -72,10 +72,13 @@ $bar-size= 25px
     align-items: center;
     .icon {margin-right: 4px}
   }
+  .side-bar-label-content .text {
+    overflow: hidden;
+    transition: width .2s ease;
+  }
 
   &.left .side-bar-label-content {
     transform: rotate(180deg);
   }
 
 }
-