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} + {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"