zhengxinqi/add pic preview feature

app/components/EditorWrapper/index.jsx

@@ -1,61 +1,73 @@
 import React, { PropTypes } from 'react';
 import AceEditor from '../AceEditor';
-import { markdown } from 'markdown';
-import { connect } from 'react-redux';
-import cx from 'classnames';
-import { bindActionCreators } from 'redux';
-import * as ResizeActions from './actions';
 import MarkdownEditor from '../MarkdownEditor';
+import PictureEditor from '../PictureEditor';
+
 
 
 const editors = {
   AceEditor,
   MarkdownEditor,
+  PictureEditor,
 };
 
 
 const getEditorByName = ({
-  type = 'default', 
-  tab, 
-  body, 
+  type = 'default',
+  tab,
+  body,
+  path
 }) => {
   if (type === 'default') {
     return React.createElement(editors.AceEditor, { tab });
-  } else if(type === 'editorWithPreview') {
+  } else if (type === 'editorWithPreview') {
     return React.createElement(editors.MarkdownEditor, { content: body, tab });
+  } else if (type === 'pictureEditor') {
+    return React.createElement(editors.PictureEditor, { path });
   }
 };
 
+const typeDetect = (title, types) => {
+  // title is the filename
+  // typeArray is the suffix
+  if (!Array.isArray(types)) return title.endsWith(`.${types}`);
+  return types.reduce((p, v) => p || title.endsWith(`.${v}`), false);
+};
+
 
 const EditorWrapper = ({
   tab,
-  actions
 }) => {
-  const { 
-    title, 
-    content: { body = '' } = {},
+  const {
+    title,
+    content: { body = '', path = '' } = {},
   } = tab;
   let type = 'default';
-  if (title.endsWith('.md')) {
-    type = 'editorWithPreview'
+  if (typeDetect(title, 'md')) {
+    type = 'editorWithPreview';
+  }
+  if (typeDetect(title, ['png', 'jpg', 'jpeg', 'gif'])) {
+    type = 'pictureEditor';
   }
   return getEditorByName({
     type,
     tab,
     body,
+    path
   });
 };
 
-EditorWrapper.PropTypes = {
+EditorWrapper.propTypes = {
   name: PropTypes.string,
   tab: PropTypes.object,
-}
+};
 
-export default EditorWrapper;
+getEditorByName.propTypes = {
+  type: PropTypes.string,
+  tab: PropTypes.object,
+  body: PropTypes.object,
+  path: PropTypes.string,
+};
 
-// export default connect(
-//   mapStateToProps,
-//   dispatch => ({
-//     actions: bindActionCreators(ResizeActions, dispatch)
-//   })
-// )(EditorWrapper)
+
+export default EditorWrapper;

app/components/PictureEditor/index.jsx

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import config from '../../config';
+
+const previewPic = 'https://dn-coding-net-production-static.qbox.me/static/5d487aa5c207cf1ca5a36524acb953f1.gif';
+const PictureEditor = ({ path = '' }) => {
+  const { baseURL, spaceKey } = config;
+  const backgroundImageUrl =
+   `${baseURL}/workspaces/${spaceKey}/raw?path=${encodeURIComponent(path)}`;
+  return (
+    <div style={{ textAlign: 'center', height: '100%' }}>
+      <img
+        alt="preview"
+        style={{
+          background: `url("${previewPic}") right bottom #eee`,
+          testAlign: 'center',
+          height: '100%'
+        }}
+        src={backgroundImageUrl}
+      />
+    </div>);
+};
+
+
+
+PictureEditor.propTypes = {
+  path: PropTypes.string
+};
+
+
+export default PictureEditor;