mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Extracted ShortUrlsRowMenu to its own module

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-28 09:15:41 +02:00
parent 842b1a7590
commit b734b4515b
4 changed files with 77 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/short-urls/ShortUrlsList.js
View file

@ -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 React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import Moment from 'react-moment'; import Moment from 'react-moment';
import { connect } from 'react-redux'; 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 Tag from '../utils/Tag';
import PreviewModal from './helpers/PreviewModal'; import { RowMenu } from './helpers/ShortUrlsRowMenu';
import QrCodeModal from './helpers/QrCodeModal';
import { listShortUrls } from './reducers/shortUrlsList'; import { listShortUrls } from './reducers/shortUrlsList';
import './ShortUrlsList.scss'; 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 (
<ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
<DropdownToggle color="white" size="sm" caret className={toggleClass}>
&nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={togglePreview}>
<FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
</DropdownItem>
<PreviewModal
url={shortUrl}
isOpen={this.state.isPreviewOpen}
toggle={togglePreview}
/>
<DropdownItem onClick={toggleQrCode}>
<FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
</DropdownItem>
<QrCodeModal
url={shortUrl}
isOpen={this.state.isQrModalOpen}
toggle={toggleQrCode}
/>
<DropdownItem divider />
<CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
<DropdownItem>
<FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
</DropdownItem>
</CopyToClipboard>
</DropdownMenu>
</ButtonDropdown>
);
}
}
export default connect(state => ({ export default connect(state => ({
selectedServer: state.selectedServer, selectedServer: state.selectedServer,
shortUrlsListParams: state.shortUrlsListParams, shortUrlsListParams: state.shortUrlsListParams,

7
src/short-urls/ShortUrlsList.scss
View file

@ -12,13 +12,6 @@
margin-right: 5px; 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 { .short-urls-list__cell--relative {
position: relative; position: relative;
} }

66
src/short-urls/helpers/ShortUrlsRowMenu.js Normal file
View file

@ -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 (
<ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
<DropdownToggle color="white" size="sm" caret className={toggleClass}>
&nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<FontAwesomeIcon icon={pieChartIcon}/> &nbsp;Visit Stats
</DropdownItem>
<DropdownItem divider/>
<DropdownItem onClick={togglePreview}>
<FontAwesomeIcon icon={pictureIcon}/> &nbsp;Preview
</DropdownItem>
<PreviewModal
url={shortUrl}
isOpen={this.state.isPreviewOpen}
toggle={togglePreview}
/>
<DropdownItem onClick={toggleQrCode}>
<FontAwesomeIcon icon={qrIcon}/> &nbsp;QR code
</DropdownItem>
<QrCodeModal
url={shortUrl}
isOpen={this.state.isQrModalOpen}
toggle={toggleQrCode}
/>
<DropdownItem divider/>
<CopyToClipboard text={shortUrl} onCopy={onCopyToClipboard}>
<DropdownItem>
<FontAwesomeIcon icon={copyIcon}/> &nbsp;Copy to clipboard
</DropdownItem>
</CopyToClipboard>
</DropdownMenu>
</ButtonDropdown>
);
}
}

6
src/short-urls/helpers/ShortUrlsRowMenu.scss Normal file
View file

@ -0,0 +1,6 @@
.short-urls-row-menu__dropdown-toggle:before {
display: none !important;
}
.short-urls-row-menu__dropdown-toggle--hidden {
visibility: hidden;
}