panel converted to card and dropdown ,then tooltip modified

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

@@ -8,6 +8,10 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 // 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,
+} from 'reactstrap';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
@@ -99,77 +103,75 @@ class Draft extends React.Component {
 
   render() {
     const { t } = this.props;
-
-    const copyButtonTooltip = (
-      <Tooltip id="draft-copied-tooltip">
-        { this.state.showCopiedMessage && (
-          <strong>copied!</strong>
-        ) }
-        { !this.state.showCopiedMessage && (
-          <span>{this.props.t('Copy')}</span>
-        ) }
-      </Tooltip>
-    );
-
     return (
       <div className="draft-list-item">
-        <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>
-                )
-              }
-              <OverlayTrigger overlay={copyButtonTooltip} placement="top">
-                <CopyToClipboard text={this.props.markdown} onCopy={this.changeToolTipLabel}>
-                  <a
-                    className="text-center draft-copy"
-                  >
-                    <i className="mx-2 ti-clipboard" />
-                  </a>
-                </CopyToClipboard>
-              </OverlayTrigger>
-              <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>
+        <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>
+                ) }
+                {/* contents */}
+                { this.state.isPanelExpanded && this.state.isRendered && (
+                  <RevisionBody html={this.state.html} />
+                ) }
+              </CardBody>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Card>
       </div>
     );
   }