diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index adfcea48..e314da97 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,20 +1,12 @@
+import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
+import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { isEmpty } from 'ramda';
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';
-import { isEmpty } from 'ramda';
-import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
-import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
-import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
-import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
-import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
-import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
-import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import Tag from '../utils/Tag';
-import PreviewModal from './helpers/PreviewModal';
-import QrCodeModal from './helpers/QrCodeModal';
+import { RowMenu } from './helpers/ShortUrlsRowMenu';
import { listShortUrls } from './reducers/shortUrlsList';
import './ShortUrlsList.scss';
@@ -175,60 +167,6 @@ class Row extends React.Component {
}
}
-class RowMenu extends React.Component {
- state = { isOpen: false, isQrModalOpen: false, isPreviewOpen: false };
- toggle = () => this.setState({ isOpen: ! this.state.isOpen });
-
- render () {
- const { display, shortUrl, onCopyToClipboard } = this.props;
- const baseClass = 'short-urls-list__dropdown-toggle';
- const toggleClass = ! display ? `${baseClass} short-urls-list__dropdown-toggle--hidden` : baseClass;
- const toggleQrCode = () => this.setState({ isQrModalOpen: !this.state.isQrModalOpen });
- const togglePreview = () => this.setState({ isPreviewOpen: !this.state.isPreviewOpen });
-
- return (
-
-
-
-
-
-
- Visit Stats
-
-
-
-
-
- Preview
-
-
-
-
- QR code
-
-
-
-
-
-
-
- Copy to clipboard
-
-
-
-
- );
- }
-}
-
export default connect(state => ({
selectedServer: state.selectedServer,
shortUrlsListParams: state.shortUrlsListParams,
diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss
index 76149e83..ca359e1e 100644
--- a/src/short-urls/ShortUrlsList.scss
+++ b/src/short-urls/ShortUrlsList.scss
@@ -12,13 +12,6 @@
margin-right: 5px;
}
-.short-urls-list__dropdown-toggle:before {
- display: none !important;
-}
-.short-urls-list__dropdown-toggle--hidden {
- visibility: hidden;
-}
-
.short-urls-list__cell--relative {
position: relative;
}
diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js
new file mode 100644
index 00000000..e5e45f1b
--- /dev/null
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.js
@@ -0,0 +1,66 @@
+import copyIcon from '@fortawesome/fontawesome-free-regular/faCopy';
+import pictureIcon from '@fortawesome/fontawesome-free-regular/faImage';
+import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
+import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
+import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import PreviewModal from './PreviewModal';
+import QrCodeModal from './QrCodeModal';
+import './ShortUrlsRowMenu.scss';
+
+export class RowMenu extends React.Component {
+ state = { isOpen: false, isQrModalOpen: false, isPreviewOpen: false };
+ toggle = () => this.setState({ isOpen: !this.state.isOpen });
+
+ render() {
+ const {display, shortUrl, onCopyToClipboard} = this.props;
+ const baseClass = 'short-urls-row-menu__dropdown-toggle';
+ const toggleClass = !display ? `${baseClass} short-urls-row-menu__dropdown-toggle--hidden` : baseClass;
+ const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
+ const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
+
+ return (
+
+
+
+
+
+
+ Visit Stats
+
+
+
+
+
+ Preview
+
+
+
+
+ QR code
+
+
+
+
+
+
+
+ Copy to clipboard
+
+
+
+
+ );
+ }
+}
diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.scss b/src/short-urls/helpers/ShortUrlsRowMenu.scss
new file mode 100644
index 00000000..9e9aa579
--- /dev/null
+++ b/src/short-urls/helpers/ShortUrlsRowMenu.scss
@@ -0,0 +1,6 @@
+.short-urls-row-menu__dropdown-toggle:before {
+ display: none !important;
+}
+.short-urls-row-menu__dropdown-toggle--hidden {
+ visibility: hidden;
+}