impl CopyDropdown

src/client/js/app.js

@@ -312,7 +312,7 @@ if (pageId) {
 }
 if (pagePath) {
   componentMappings.page = <Page crowi={crowi} crowiRenderer={crowiRenderer} markdown={markdown} pagePath={pagePath} onSaveWithShortcut={saveWithShortcut} />;
-  componentMappings['revision-path'] = <RevisionPath pagePath={pagePath} crowi={crowi} />;
+  componentMappings['revision-path'] = <RevisionPath pageId={pageId} pagePath={pagePath} crowi={crowi} />;
   componentMappings['tag-label'] = <I18nextProvider i18n={i18n}><TagLabels crowi={crowi} pageId={pageId} sendTagData={setTagData} /></I18nextProvider>;
 }
 

src/client/js/components/CopyButton.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ClipboardButton from 'react-clipboard.js';
-
-export default class CopyButton extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.showToolTip = this.showToolTip.bind(this);
-
-    // retrieve xss library from window
-    this.xss = window.xss;
-  }
-
-  showToolTip() {
-    const buttonId = `#${this.props.buttonId}`;
-    $(buttonId).tooltip('show');
-    setTimeout(() => {
-      $(buttonId).tooltip('hide');
-    }, 1000);
-  }
-
-  render() {
-    const containerStyle = {
-      lineHeight: 0,
-    };
-    const style = Object.assign({
-      padding: '0 2px',
-      verticalAlign: 'text-top',
-    }, this.props.buttonStyle);
-
-    const text = this.xss.process(this.props.text);
-
-    return (
-      <span className="btn-copy-container" style={containerStyle}>
-        <ClipboardButton
-          className={this.props.buttonClassName}
-          button-id={this.props.buttonId}
-          button-data-toggle="tooltip"
-          button-data-container="body"
-          button-title="copied!"
-          button-data-placement="bottom"
-          button-data-trigger="manual"
-          button-style={style}
-          data-clipboard-text={text}
-          onSuccess={this.showToolTip}
-        >
-
-          <i className={this.props.iconClassName} />
-        </ClipboardButton>
-      </span>
-    );
-  }
-
-}
-
-CopyButton.propTypes = {
-  text: PropTypes.string.isRequired,
-  buttonId: PropTypes.string.isRequired,
-  buttonClassName: PropTypes.string.isRequired,
-  buttonStyle: PropTypes.object,
-  iconClassName: PropTypes.string.isRequired,
-};
-CopyButton.defaultProps = {
-  buttonStyle: {},
-};

src/client/js/components/Page/CopyDropdown.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Dropdown from 'react-bootstrap/es/Dropdown';
+import MenuItem from 'react-bootstrap/es/MenuItem';
+
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+export default class CopyDropdown extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    // retrieve xss library from window
+    this.xss = window.xss;
+
+    this.generatePageUrl = this.generatePageUrl.bind(this);
+  }
+
+  showToolTip() {
+    const buttonId = '#copyPagePathDropdown';
+    $(buttonId).tooltip('show');
+    setTimeout(() => {
+      $(buttonId).tooltip('hide');
+    }, 1000);
+  }
+
+  generatePageUrl() {
+    return (this.props.pageId == null)
+      ? decodeURIComponent(window.location.pathname + window.location.search)
+      : `${window.location.origin}/${this.props.pageId}`;
+  }
+
+  generateMarkdownLink() {
+    return;
+  }
+
+  render() {
+    const safePagePath = this.xss.process(this.props.pagePath);
+    const url = this.generatePageUrl();
+
+    return (
+      <Dropdown id="copyPagePathDropdown">
+
+        <Dropdown.Toggle bsSize="sm" data-toggle="tooltip" data-placement="bottom" data-trigger="manual" title="copied!">
+          <i className="ti-clipboard"></i>
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          {/* Page path */}
+          <CopyToClipboard text={this.props.pagePath} onCopy={this.showToolTip}>
+            <MenuItem>
+              <div className="d-inline-flex flex-column">
+                <h6 className="mt-1 mb-2 text-muted"><strong>Page path</strong></h6>
+                <span className="small">{safePagePath}</span>
+              </div>
+            </MenuItem>
+          </CopyToClipboard>
+          {/* Parmanent Link */}
+          { this.props.pageId && (
+            <CopyToClipboard text={url} onCopy={this.showToolTip}>
+              <MenuItem>
+                <div className="d-inline-flex flex-column">
+                  <h6 className="mt-1 mb-2 text-muted"><strong>Parmanent link</strong></h6>
+                  <span className="small">{url}</span>
+                </div>
+              </MenuItem>
+            </CopyToClipboard>
+          )}
+          {/* Page path + Parmanent Link */}
+          { this.props.pageId && (
+            <CopyToClipboard text={`${this.props.pagePath}\n${url}`} onCopy={this.showToolTip}>
+              <MenuItem>
+                <div className="d-inline-flex flex-column">
+                  <h6 className="mt-1 mb-2 text-muted"><strong>Page path and parmanent link</strong></h6>
+                  <span className="small mb-1">{safePagePath}</span><br></br>
+                  <span className="small">{url}</span>
+                </div>
+              </MenuItem>
+            </CopyToClipboard>
+          )}
+          {/* Markdown Link */}
+          { this.props.pageId && (
+            <CopyToClipboard text={`[${this.props.pagePath}](${url})`} onCopy={this.showToolTip}>
+              <MenuItem>
+                <div className="d-inline-flex flex-column">
+                  <h6 className="mt-1 mb-2 text-muted"><strong>Markdown link</strong></h6>
+                  <span className="small">{`[${safePagePath}](${url})`}</span>
+                </div>
+              </MenuItem>
+            </CopyToClipboard>
+          )}
+        </Dropdown.Menu>
+
+      </Dropdown>
+    );
+  }
+
+}
+
+CopyDropdown.propTypes = {
+  pagePath: PropTypes.string.isRequired,
+  pageId: PropTypes.string,
+};

src/client/js/components/Page/RevisionPath.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Dropdown from 'react-bootstrap/es/Dropdown';
-import MenuItem from 'react-bootstrap/es/MenuItem';
-
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import CopyDropdown from './CopyDropdown';
 
 export default class RevisionPath extends React.Component {
 
@@ -115,20 +112,7 @@ export default class RevisionPath extends React.Component {
         </span>
         {afterElements}
 
-        <Dropdown id="copyPagePathDropdown">
-
-          <Dropdown.Toggle bsSize="sm" data-toggle="tooltip" data-placement="bottom" data-trigger="manual" title="copied!">
-            <i className="ti-clipboard"></i>
-          </Dropdown.Toggle>
-
-          <Dropdown.Menu>
-            <MenuItem>hoge</MenuItem>
-            <CopyToClipboard text="fuga" onCopy={this.showToolTip}>
-              <MenuItem>fuga</MenuItem>
-            </CopyToClipboard>
-          </Dropdown.Menu>
-
-        </Dropdown>
+        <CopyDropdown pagePath={this.props.pagePath} pageId={this.props.pageId}></CopyDropdown>
 
         <a href="#edit" className="btn btn-default btn-edit" style={editButtonStyle}>
           <i className="icon-note" />
@@ -140,6 +124,7 @@ export default class RevisionPath extends React.Component {
 }
 
 RevisionPath.propTypes = {
-  pagePath: PropTypes.string.isRequired,
   crowi: PropTypes.object.isRequired,
+  pagePath: PropTypes.string.isRequired,
+  pageId: PropTypes.string,
 };

src/client/js/components/Page/RevisionUrl.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import CopyButton from '../CopyButton';
-
-export default class RevisionUrl extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    // retrieve xss library from window
-    this.xss = window.xss;
-  }
-
-  render() {
-    const buttonStyle = {
-      fontSize: '1em',
-    };
-
-    const pagePath = this.xss.process(this.props.pagePath);
-
-    const url = (this.props.pageId == null)
-      ? decodeURIComponent(window.location.href)
-      : `${window.location.origin}/${this.props.pageId}`;
-    const copiedText = `${pagePath}\n${url}`;
-
-    return (
-      <span>
-        {url}
-        <CopyButton
-          buttonId="btnCopyRevisionUrl"
-          text={copiedText}
-          buttonClassName="btn btn-default btn-copy-link"
-          buttonStyle={buttonStyle}
-          iconClassName="ti-clipboard"
-        />
-      </span>
-    );
-  }
-
-}
-
-RevisionUrl.propTypes = {
-  pageId: PropTypes.string,
-  pagePath: PropTypes.string.isRequired,
-};