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

Extracted ShortUrlsRow to its own module

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-28 09:18:55 +02:00
parent b734b4515b
commit ce22b7e8e9
4 changed files with 64 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,10 +3,9 @@ import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { isEmpty } from 'ramda';
import React from 'react';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import Tag from '../utils/Tag';
import { RowMenu } from './helpers/ShortUrlsRowMenu';
import { Row } from './helpers/ShortUrlsRow';
import { listShortUrls } from './reducers/shortUrlsList';
import './ShortUrlsList.scss';
@ -123,50 +122,6 @@ export class ShortUrlsList extends React.Component {
}
}
class Row extends React.Component {
state = { displayMenu: false, copiedToClipboard: false };
render() {
const { shortUrl, selectedServer } = this.props;
const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
return (
<tr
onMouseEnter={() => this.setState({ displayMenu: true })}
onMouseLeave={() => this.setState({ displayMenu: false })}
>
<td className="nowrap short-urls-list__cell">
<Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
</td>
<td className="short-urls-list__cell">
<a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
</td>
<td className="short-urls-list__cell short-urls-list__cell--relative">
<a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
<small
className="badge badge-warning short-urls-list__copy-hint"
hidden={!this.state.copiedToClipboard}
>
Copied short URL!
</small>
</td>
<td className="short-urls-list__cell">{ShortUrlsList.renderTags(shortUrl.tags)}</td>
<td className="short-urls-list__cell text-right">{shortUrl.visitsCount}</td>
<td className="short-urls-list__cell">
<RowMenu
display={this.state.displayMenu}
shortUrl={completeShortUrl}
onCopyToClipboard={() => {
this.setState({ copiedToClipboard: true });
setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
}}
/>
</td>
</tr>
)
}
}
export default connect(state => ({
selectedServer: state.selectedServer,
shortUrlsListParams: state.shortUrlsListParams,

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

@ -1,9 +1,3 @@
@import "../utils/mixins/vertical-align";
.short-urls-list__cell {
vertical-align: middle !important;
}
.short-urls-list__header--with-action {
cursor: pointer;
}
@ -11,12 +5,3 @@
.short-urls-list__header-icon {
margin-right: 5px;
}
.short-urls-list__cell--relative {
position: relative;
}
.short-urls-list__copy-hint {
@include vertical-align();
right: 10px;
}

49
src/short-urls/helpers/ShortUrlsRow.js Normal file
View file

@ -0,0 +1,49 @@
import React from 'react';
import Moment from 'react-moment';
import { ShortUrlsList } from '../ShortUrlsList';
import { RowMenu } from './ShortUrlsRowMenu';
import './ShortUrlsRow.scss'
export class Row extends React.Component {
state = {displayMenu: false, copiedToClipboard: false};
render() {
const {shortUrl, selectedServer} = this.props;
const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
return (
<tr
onMouseEnter={() => this.setState({displayMenu: true})}
onMouseLeave={() => this.setState({displayMenu: false})}
>
<td className="nowrap short-urls-row__cell">
<Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
</td>
<td className="short-urls-row__cell">
<a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
</td>
<td className="short-urls-row__cell short-urls-row__cell--relative">
<a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
<small
className="badge badge-warning short-urls-row__copy-hint"
hidden={!this.state.copiedToClipboard}
>
Copied short URL!
</small>
</td>
<td className="short-urls-row__cell">{ShortUrlsList.renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell text-right">{shortUrl.visitsCount}</td>
<td className="short-urls-row__cell">
<RowMenu
display={this.state.displayMenu}
shortUrl={completeShortUrl}
onCopyToClipboard={() => {
this.setState({copiedToClipboard: true});
setTimeout(() => this.setState({copiedToClipboard: false}), 2000);
}}
/>
</td>
</tr>
);
}
}

14
src/short-urls/helpers/ShortUrlsRow.scss Normal file
View file

@ -0,0 +1,14 @@
@import "../../utils/mixins/vertical-align";
.short-urls-row__cell {
vertical-align: middle !important;
}
.short-urls-row__cell--relative {
position: relative;
}
.short-urls-row__copy-hint {
@include vertical-align();
right: 10px;
}