render extracted image

packages/growi-plugin-attachment-refs/src/client/js/components/AttachmentExtracted.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Attachment from '@client/js/components/PageAttachment/Attachment';
+
+const AttachmentLink = Attachment;
+
+/**
+ *  1. when 'fileFormat' is image, render Attachment as an image
+ *  2. when 'fileFormat' is not image, render Attachment as an Attachment component
+ */
+export default class AttachmentExtracted extends React.PureComponent {
+
+  render() {
+    const { attachment } = this.props;
+
+    const isImage = attachment.fileFormat.startsWith('image/');
+
+    return (isImage)
+      ? <div><a href="#"><img src={attachment.filePathProxied} alt={attachment.originalName} /></a></div>
+      : <AttachmentLink key={attachment._id} attachment={attachment} />;
+  }
+
+}
+
+AttachmentExtracted.propTypes = {
+  attachment: PropTypes.object.isRequired,
+};

packages/growi-plugin-attachment-refs/src/client/js/components/AttachmentList.jsx

@@ -12,6 +12,9 @@ import TagCacheManagerFactory from '../util/TagCacheManagerFactory';
 // eslint-disable-next-line no-unused-vars
 import styles from '../../css/index.css';
 
+import AttachmentExtracted from './AttachmentExtracted';
+
+const AttachmentLink = Attachment;
 
 export default class AttachmentList extends React.Component {
 
@@ -72,33 +75,29 @@ export default class AttachmentList extends React.Component {
     try {
       this.setState({ isLoading: true });
 
-      switch (refsContext.method) {
-        case 'ref':
-          res = await axios.get('/_api/plugin/ref', {
-            params: {
-              pagePath: refsContext.pagePath,
-              fileName: refsContext.fileName,
-              options: refsContext.options,
-            },
-          });
-          this.setState({
-            attachments: [res.data.attachment],
-          });
-          break;
-        case 'refs':
-          res = await axios.get('/_api/plugin/refs', {
-            params: {
-              prefix: refsContext.prefix,
-              pagePath: refsContext.pagePath,
-              options: refsContext.options,
-            },
-          });
-          this.setState({
-            attachments: res.data.attachments,
-          });
-          break;
-        default:
-          throw new Error('this component should be used for method \'ref\' or \'refs\'');
+      if (refsContext.isSingle) {
+        res = await axios.get('/_api/plugin/ref', {
+          params: {
+            pagePath: refsContext.pagePath,
+            fileName: refsContext.fileName,
+            options: refsContext.options,
+          },
+        });
+        this.setState({
+          attachments: [res.data.attachment],
+        });
+      }
+      else {
+        res = await axios.get('/_api/plugin/refs', {
+          params: {
+            prefix: refsContext.prefix,
+            pagePath: refsContext.pagePath,
+            options: refsContext.options,
+          },
+        });
+        this.setState({
+          attachments: res.data.attachments,
+        });
       }
 
       this.setState({
@@ -122,6 +121,14 @@ export default class AttachmentList extends React.Component {
 
   }
 
+  renderElement(attachment) {
+    const { refsContext } = this.props;
+
+    const AttachmentElementClass = (refsContext.isExtractImg) ? AttachmentExtracted : AttachmentLink;
+
+    return <AttachmentElementClass key={attachment._id} attachment={attachment} />;
+  }
+
   renderContents() {
     const { refsContext } = this.props;
 
@@ -142,11 +149,7 @@ export default class AttachmentList extends React.Component {
       );
     }
     if (this.state.isLoaded) {
-      return (
-        this.state.attachments.map((attachment) => {
-          return <Attachment key={attachment._id} attachment={attachment} />;
-        })
-      );
+      return this.state.attachments.map(attachment => this.renderElement(attachment));
     }
   }
 

packages/growi-plugin-attachment-refs/src/client/js/util/Interceptor/RefsPostRenderInterceptor.js

@@ -43,34 +43,18 @@ export default class RefsPostRenderInterceptor extends BasicInterceptor {
         const refsContext = new RefsContext(context.refsContextMap[domId] || {});
         refsContext.fromPagePath = context.currentPagePath;
 
-        switch (refsContext.method) {
-          case 'ref':
-          case 'refs':
-            this.renderReactDomForRefs(refsContext, elem);
-            break;
-          case 'refimg':
-          case 'refsimg':
-            this.renderReactDomForRefsimg(refsContext, elem);
-            break;
-        }
+        this.renderReactDom(refsContext, elem);
       }
     });
 
     return Promise.resolve();
   }
 
-  renderReactDomForRefs(refsContext, elem) {
+  renderReactDom(refsContext, elem) {
     ReactDOM.render(
       <AttachmentList appContainer={this.appContainer} refsContext={refsContext} />,
       elem,
     );
   }
 
-  renderReactDomForRefsimg(refsContext, elem) {
-    ReactDOM.render(
-      <span>refimg, refsimg</span>,
-      elem,
-    );
-  }
-
 }

packages/growi-plugin-attachment-refs/src/client/js/util/RefsContext.js

@@ -23,6 +23,14 @@ export default class RefsContext extends TagContext {
     this.options = {};
   }
 
+  get isSingle() {
+    return this.method.match(/^(ref|refimg)$/);
+  }
+
+  get isExtractImg() {
+    return this.method.match(/^(refimg|refsimg)$/);
+  }
+
   parse() {
     if (this.isParsed) {
       return;
@@ -31,10 +39,10 @@ export default class RefsContext extends TagContext {
     const parsedArgs = ArgsParser.parse(this.args);
     this.options = parsedArgs.options;
 
-    if (this.method.match(/^(ref|refimg)$/)) {
+    if (this.isSingle) {
       this.parseForSingle(parsedArgs);
     }
-    else if (this.method.match(/^(refs|refsimg)$/)) {
+    else {
       this.parseForMulti(parsedArgs);
     }