rollback toward UncontrolledTooltip

src/client/js/components/MyDraftList/Draft.jsx

@@ -6,11 +6,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 // TODO: GW-333
 // import Panel from 'react-bootstrap/es/Panel';
-// import Tooltip from 'react-bootstrap/es/Tooltip';
-// import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
 import {
-  Card, CardBody, CardTitle, Tooltip,
-  UncontrolledDropdown, DropdownToggle, DropdownMenu,
+  UncontrolledTooltip,
 } from 'reactstrap';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -105,73 +102,71 @@ class Draft extends React.Component {
     const { t } = this.props;
     return (
       <div className="draft-list-item">
-        <Card>
-          <UncontrolledDropdown>
-            <CardTitle className="d-flex">
-              <DropdownToggle caret>
-                {this.renderAccordionTitle(this.props.isExist)}
-              </DropdownToggle>
-              <a href={this.props.path}><i className="icon icon-login"></i></a>
-              <div className="flex-grow-1"></div>
-              <div className="icon-container">
-                {this.props.isExist
-                  ? null
-                  : (
-                    <a
-                      href={`${this.props.path}#edit`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      data-toggle="tooltip"
-                      title={this.props.t('Edit')}
-                    >
-                      <i className="mx-2 icon-note" />
-                    </a>
-                  )
-                }
-                <span id="draft-copied-tooltip" placement="top">
-                  <CopyToClipboard text={this.props.markdown} onCopy={this.changeToolTipLabel}>
-                    <a
-                      className="text-center draft-copy"
-                    >
-                      <i className="mx-2 ti-clipboard" />
-                    </a>
-                  </CopyToClipboard>
-                </span>
-                <Tooltip target="draft-copied-tooltip">
-                  { this.state.showCopiedMessage && (
-                    <strong>copied!</strong>
-                  ) }
-                  { !this.state.showCopiedMessage && (
-                    <span>{this.props.t('Copy')}</span>
-                  ) }
-                </Tooltip>
-                <a
-                  className="text-danger text-center"
-                  data-toggle="tooltip"
-                  data-placement="top"
-                  title={t('Delete')}
-                  onClick={() => { return this.props.clearDraft(this.props.path) }}
-                >
-                  <i className="mx-2 icon-trash" />
-                </a>
-              </div>
-            </CardTitle>
-            <DropdownMenu onEnter={this.expandPanelHandler} onExit={this.collapsePanelHandler}>
-              <CardBody>
-                {/* loading spinner */}
-                { this.state.isPanelExpanded && !this.state.isRendered && (
-                  <div className="text-center">
-                    <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
-                  </div>
+        <Panel>
+          <Panel.Heading className="d-flex">
+            <Panel.Toggle>
+              {this.renderAccordionTitle(this.props.isExist)}
+            </Panel.Toggle>
+            <a href={this.props.path}><i className="icon icon-login"></i></a>
+            <div className="flex-grow-1"></div>
+            <div className="icon-container">
+              {this.props.isExist
+                ? null
+                : (
+                  <a
+                    href={`${this.props.path}#edit`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    data-toggle="tooltip"
+                    title={this.props.t('Edit')}
+                  >
+                    <i className="mx-2 icon-note" />
+                  </a>
+                )
+              }
+              <span id="draft-copied-tooltip">
+                <CopyToClipboard text={this.props.markdown} onCopy={this.changeToolTipLabel}>
+                  <a
+                    className="text-center draft-copy"
+                  >
+                    <i className="mx-2 ti-clipboard" />
+                  </a>
+                </CopyToClipboard>
+              </span>
+              <UncontrolledTooltip placement="top" target="draft-copied-tooltip">
+                { this.state.showCopiedMessage && (
+                  <strong>copied!</strong>
                 ) }
-                {/* contents */}
-                { this.state.isPanelExpanded && this.state.isRendered && (
-                  <RevisionBody html={this.state.html} />
+                { !this.state.showCopiedMessage && (
+                  <span>{this.props.t('Copy')}</span>
                 ) }
-              </CardBody>
-            </DropdownMenu>
-          </UncontrolledDropdown>
-        </Card>
+              </UncontrolledTooltip>
+              <a
+                className="text-danger text-center"
+                data-toggle="tooltip"
+                data-placement="top"
+                title={t('Delete')}
+                onClick={() => { return this.props.clearDraft(this.props.path) }}
+              >
+                <i className="mx-2 icon-trash" />
+              </a>
+            </div>
+          </Panel.Heading>
+          <Panel.Collapse onEnter={this.expandPanelHandler} onExit={this.collapsePanelHandler}>
+            <Panel.Body>
+              {/* loading spinner */}
+              { this.state.isPanelExpanded && !this.state.isRendered && (
+                <div className="text-center">
+                  <i className="fa fa-lg fa-spinner fa-pulse mx-auto text-muted"></i>
+                </div>
+              ) }
+              {/* contents */}
+              { this.state.isPanelExpanded && this.state.isRendered && (
+                <RevisionBody html={this.state.html} />
+              ) }
+            </Panel.Body>
+          </Panel.Collapse>
+        </Panel>
       </div>
     );
   }