diff --git a/package.json b/package.json
index c5b4ce38..b79747d8 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
"raf": "3.4.0",
"ramda": "^0.25.0",
"react": "^16.3.2",
+ "react-copy-to-clipboard": "^5.0.1",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2",
"react-moment": "^0.7.6",
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 827dcb14..26a96873 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,4 +1,5 @@
import React from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
@@ -44,7 +45,6 @@ export class ShortUrlsList extends React.Component {
renderShortUrls() {
const { shortUrlsList, selectedServer, loading } = this.props;
- console.log('Is loading?: ', loading);
if (loading) {
return
Loading... |
;
}
@@ -68,11 +68,11 @@ export class ShortUrlsList extends React.Component {
}
class Row extends React.Component {
- state = { displayMenu: false };
+ state = { displayMenu: false, copiedToClipboard: false };
render() {
const { shortUrl, selectedServer } = this.props;
- const selectedServerUrl = selectedServer ? selectedServer.url : '';
+ const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
return (
{shortUrl.dateCreated}
-
- {`${selectedServerUrl}/${shortUrl.shortCode}`}
-
+ {completeShortUrl}
|
-
+ |
{shortUrl.originalUrl}
+
+ Copied short URL!
+
|
{ShortUrlsList.renderTags(shortUrl.tags)} |
{shortUrl.visitsCount} |
-
+ {
+ this.setState({ copiedToClipboard: true });
+ setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
+ }}
+ />
|
)
@@ -128,8 +139,13 @@ class RowMenu extends React.Component {
- Copy to clipboard
+
+ Copy to clipboard
+
+ {/**/}
+ {/* Copy to clipboard*/}
+ {/**/}
);
diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss
index 776c61e9..3f95358b 100644
--- a/src/short-urls/ShortUrlsList.scss
+++ b/src/short-urls/ShortUrlsList.scss
@@ -1,3 +1,5 @@
+@import "../utils/mixins/vertical-align";
+
.short-urls-list__cell {
vertical-align: middle !important;
}
@@ -8,3 +10,12 @@
.short-urls-list__dropdown-toggle--hidden {
visibility: hidden;
}
+
+.short-urls-list__cell--relative {
+ position: relative;
+}
+
+.short-urls-list__copy-hint {
+ @include vertical-align();
+ right: 10px;
+}
diff --git a/yarn.lock b/yarn.lock
index 842cba52..aca87d6e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1741,6 +1741,12 @@ copy-descriptor@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+copy-to-clipboard@^3:
+ version "3.0.8"
+ resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+ dependencies:
+ toggle-selection "^1.0.3"
+
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -6058,6 +6064,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
+react-copy-to-clipboard@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+ dependencies:
+ copy-to-clipboard "^3"
+ prop-types "^15.5.8"
+
react-dev-utils@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@@ -7291,6 +7304,10 @@ to-regex@^3.0.1, to-regex@^3.0.2:
regex-not "^1.0.2"
safe-regex "^1.1.0"
+toggle-selection@^1.0.3:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+
toposort@^1.0.0:
version "1.0.7"
resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"