move annex tooltip to separate component

wri · Oct 26, 2023 · 66c8f57 · 66c8f57
1 parent 747ee6a
commit 66c8f57
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 39 deletions.
diff --git a/components/ui/doc-annex.js b/components/ui/doc-annex.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// import classnames from 'classnames';
+import Tooltip from 'rc-tooltip';
+import { useIntl } from 'react-intl';
+
+import Icon from 'components/ui/icon';
+import Spinner from 'components/ui/spinner';
+
+export default function DocAnnex({ annex, isRemoving, showRemoveButton, onRemove }) {
+  const intl = useIntl();
+
+  return (
+    <Tooltip
+      placement="bottom"
+      overlay={
+        <div>
+          <Spinner isLoading={isRemoving} className="-tiny -transparent" />
+          <h4 className="c-title -default tooltip-title">{annex.name}</h4>
+          <dl className="tooltip-content">
+            <dt><strong>{intl.formatMessage({ id: 'annex.start_date' })}:</strong></dt>
+            <dd>{annex['start-date'] ? annex['start-date'] : '-'}</dd>
+            <dt><strong>{intl.formatMessage({ id: 'annex.expiry_date' })}:</strong></dt>
+            <dd>{annex['expire-date'] ? annex['expire-date'] : '-'}</dd>
+          </dl>
+          <div className="tooltip-footer">
+            {annex.attachment &&
+              <a href={annex.attachment.url} target="_blank" rel="noopener noreferrer" className="c-button -small -tooltip">{intl.formatMessage({ id: 'file' })}</a>
+            }
+            {showRemoveButton &&
+              <button
+                className="c-button -small -tooltip -tooltip-secondary"
+                type="button"
+                data-test-id="remove-annex-button"
+                onClick={() => onRemove && onRemove(annex.id)}
+              >
+                <span className="tooltip-hidden-button-text">{intl.formatMessage({ id: 'annex.remove' })}</span>
+                <Icon className="" name="icon-bin" />
+              </button>
+            }
+          </div>
+        </div>
+      }
+      overlayClassName="c-tooltip"
+    >
+      <button
+        className="c-button"
+        type="button"
+      >
+        <Icon className="" name="icon-file-empty" />
+      </button>
+    </Tooltip>
+  )
+}
+
+DocAnnex.defaultProps = {
+  showRemoveButton: false
+}
+
+DocAnnex.propTypes = {
+  annex: PropTypes.object.isRequired,
+  showRemoveButton: PropTypes.bool,
+  isRemoving: PropTypes.bool,
+  onRemove: PropTypes.func
+}
diff --git a/components/ui/doc-card.js b/components/ui/doc-card.js
@@ -15,6 +15,7 @@ import DocumentationService from 'services/documentationService';
 import DocInfoModal from 'components/ui/doc-info-modal';
 import DocNotRequiredModal from 'components/ui/doc-notrequired-modal';
 import DocAnnexesModal from 'components/ui/doc-annexes-modal';
+import DocAnnex from 'components/ui/doc-annex';
 import Icon from 'components/ui/icon';
 import Spinner from 'components/ui/spinner';
 
@@ -185,45 +186,7 @@ class DocCard extends React.Component {
                   <ul className="doc-card-list">
                     {approvedAnnexes.map(annex => (
                       <li className="doc-card-list-item" key={annex.id}>
-                        <Tooltip
-                          placement="bottom"
-                          overlay={
-                            <div>
-                              <Spinner isLoading={deleteLoading} className="-tiny -transparent" />
-                              <h4 className="c-title -default tooltip-title">{annex.name}</h4>
-                              <dl className="tooltip-content">
-                                <dt><strong>{this.props.intl.formatMessage({ id: 'annex.start_date' })}:</strong></dt>
-                                <dd>{annex['start-date'] ? annex['start-date'] : '-' }</dd>
-                                <dt><strong>{this.props.intl.formatMessage({ id: 'annex.expiry_date' })}:</strong></dt>
-                                <dd>{annex['expire-date'] ? annex['expire-date'] : '-'}</dd>
-                              </dl>
-                              <div className="tooltip-footer">
-                                {annex.attachment &&
-                                  <a href={annex.attachment.url} target="_blank" rel="noopener noreferrer" className="c-button -small -tooltip">{this.props.intl.formatMessage({ id: 'file' })}</a>
-                                }
-                                {isActiveUser &&
-                                  <button
-                                    className="c-button -small -tooltip -tooltip-secondary"
-                                    type="button"
-                                    data-test-id="remove-annex-button"
-                                    onClick={() => this.triggerRemoveAnnex(annex.id)}
-                                  >
-                                    <span className="tooltip-hidden-button-text">{this.props.intl.formatMessage({ id: 'annex.remove' })}</span>
-                                    <Icon className="" name="icon-bin" />
-                                  </button>
-                                }
-                              </div>
-                            </div>
-                          }
-                          overlayClassName="c-tooltip"
-                        >
-                          <button
-                            className="c-button"
-                            type="button"
-                          >
-                            <Icon className="" name="icon-file-empty" />
-                          </button>
-                        </Tooltip>
+                        <DocAnnex annex={annex} isRemoving={deleteLoading} showRemoveButton={isActiveUser} onRemove={this.triggerRemoveAnnex} />
                       </li>
                     ))}
                     {isActiveUser &&