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; +}