refactor AttachmentList

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

@@ -12,7 +12,7 @@ import TagCacheManagerFactory from '../util/TagCacheManagerFactory';
 // eslint-disable-next-line no-unused-vars
 import styles from '../../css/index.css';
 
-import AttachmentExtracted from './AttachmentExtracted';
+import ExtractedAttachments from './ExtractedAttachments';
 
 const AttachmentLink = Attachment;
 
@@ -121,14 +121,6 @@ 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} refsContext={refsContext} />;
-  }
-
   renderContents() {
     const { refsContext } = this.props;
 
@@ -148,8 +140,15 @@ export default class AttachmentList extends React.Component {
         </div>
       );
     }
+
     if (this.state.isLoaded) {
-      return this.state.attachments.map(attachment => this.renderElement(attachment));
+      const { attachments } = this.state;
+
+      return (refsContext.isExtractImg)
+        ? <ExtractedAttachments attachments={attachments} refsContext={refsContext} />
+        : attachments.map((attachment) => {
+          return <AttachmentLink key={attachment._id} attachment={attachment} />;
+        });
     }
   }
 

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

@@ -11,49 +11,50 @@ 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 {
+export default class ExtractedAttachments extends React.PureComponent {
 
-  renderExtractedImage(attachment) {
+  renderExtractedImage(attachment, styles) {
     const { refsContext } = this.props;
     const { options } = refsContext;
 
-    const {
-      width,
-      height,
-      'max-width': maxWidth,
-      'max-height': maxHeight,
-    } = options;
-
-    const styles = {
-      width, height, maxWidth, maxHeight,
-    };
-
     // determine alt
     let alt = refsContext.isSingle ? options.alt : undefined; // use only when single mode
     alt = alt || attachment.originalName; //                     use 'originalName' if options.alt is not specified
 
     return (
-      <div>
-        <a href="#">
-          <img src={attachment.filePathProxied} alt={alt} style={styles} />
-        </a>
-      </div>
+      <a key={attachment._id} href="#" style={styles}>
+        <img src={attachment.filePathProxied} alt={alt} style={styles} />
+      </a>
     );
   }
 
   render() {
-    const { attachment } = this.props;
+    const { refsContext } = this.props;
+    const { options } = refsContext;
+
+    const {
+      width,
+      height,
+      'max-width': maxWidth,
+      'max-height': maxHeight,
+    } = options;
+
+    const styles = {
+      width, height, maxWidth, maxHeight, display: 'block',
+    };
 
-    const isImage = attachment.fileFormat.startsWith('image/');
+    return this.props.attachments.map((attachment) => {
+      const isImage = attachment.fileFormat.startsWith('image/');
 
-    return (isImage)
-      ? this.renderExtractedImage(attachment)
-      : <AttachmentLink key={attachment._id} attachment={attachment} />;
+      return (isImage)
+        ? this.renderExtractedImage(attachment, styles)
+        : <AttachmentLink key={attachment._id} attachment={attachment} />;
+    });
   }
 
 }
 
-AttachmentExtracted.propTypes = {
-  attachment: PropTypes.object.isRequired,
+ExtractedAttachments.propTypes = {
+  attachments: PropTypes.arrayOf(PropTypes.object).isRequired,
   refsContext: PropTypes.instanceOf(RefsContext).isRequired,
 };