LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

style history table

Browse source
This commit is contained in:
Sean Yesmunt 2018-08-30 23:45:49 -04:00
parent d01b893a68
commit a782f817f1
5 changed files with 127 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/renderer/component/userHistory/view.jsx
View file

@ -23,16 +23,16 @@ type Props = {
class UserHistoryPage extends React.PureComponent<Props> {
constructor() {
super();
this.state = {
itemsSelected: {},
}
};
this.selectAll = this.selectAll.bind(this);
this.unselectAll = this.unselectAll.bind(this);
this.removeSelected = this.removeSelected.bind(this);
}
changePage(pageNumber: number) {
const { params } = this.props;
const newParams = { ...params, page: pageNumber };
@ -51,53 +51,56 @@ class UserHistoryPage extends React.PureComponent<Props> {
this.changePage(pageFromInput);
}
}
onSelect(uri: string) {
console.log("onSelect", uri)
this.setState({
itemsSelected: { ...this.state.itemsSelected, [uri]: !this.state.itemsSelected[uri] }
})
itemsSelected: { ...this.state.itemsSelected, [uri]: !this.state.itemsSelected[uri] },
});
}
selectAll() {
const { history } = this.props;
const newSelectedState = {};
history.forEach(({uri}) => newSelectedState[uri] = true);
history.forEach(({ uri }) => (newSelectedState[uri] = true));
this.setState({ itemsSelected: newSelectedState });
}
unselectAll() {
this.setState({
itemsSelected: {}
})
itemsSelected: {},
});
}
removeSelected() {
const { clearHistoryUri } = this.props;
const { itemsSelected } = this.state;
Object.keys(itemsSelected).forEach(uri => clearHistoryUri(uri));
this.setState({
itemsSelected: {},
});
}
render() {
const { history, page, pageCount, navigate } = this.props;
const { itemsSelected } = this.state;
const allSelected = Object.keys(itemsSelected).length === history.length;
const selectHandler = allSelected ? this.unselectAll : this.selectAll;
return (
<React.Fragment>
<div>
<div className="card__actions card__actions--between">
{!!Object.keys(itemsSelected).length ? (
<Button button="link" label={__('Delete')} onClick={this.removeSelected} />
) : (
<span />
)}
<Button
button="link"
label={allSelected ? __("Cancel") : __("Select All")}
onClick={selectHandler} />
{!!Object.keys(itemsSelected).length && (
<Button
button="link"
label={__("Delete")}
onClick={this.removeSelected} />
)}
label={allSelected ? __('Cancel') : __('Select All')}
onClick={selectHandler}
/>
</div>
{!!history.length && (
<table className="card--section table table--stretch table--history">
@ -109,39 +112,40 @@ class UserHistoryPage extends React.PureComponent<Props> {
lastViewed={item.lastViewed}
selected={!!itemsSelected[item.uri]}
onSelect={() => {
this.onSelect(item.uri)
}} />
))}
this.onSelect(item.uri);
}}
/>
))}
</tbody>
</table>
)}
{pageCount > 1 && (
<FormRow verticallyCentered centered>
<ReactPaginate
pageCount={pageCount}
pageRangeDisplayed={2}
previousLabel="‹"
nextLabel="›"
activeClassName="pagination__item--selected"
pageClassName="pagination__item"
previousClassName="pagination__item pagination__item--previous"
nextClassName="pagination__item pagination__item--next"
breakClassName="pagination__item pagination__item--break"
marginPagesDisplayed={2}
onPageChange={e => this.changePage(e.selected)}
forcePage={page}
initialPage={page}
containerClassName="pagination"
/>
{pageCount > 1 && (
<FormRow verticallyCentered centered>
<ReactPaginate
pageCount={pageCount}
pageRangeDisplayed={2}
previousLabel="‹"
nextLabel="›"
activeClassName="pagination__item--selected"
pageClassName="pagination__item"
previousClassName="pagination__item pagination__item--previous"
nextClassName="pagination__item pagination__item--next"
breakClassName="pagination__item pagination__item--break"
marginPagesDisplayed={2}
onPageChange={e => this.changePage(e.selected)}
forcePage={page}
initialPage={page}
containerClassName="pagination"
/>
<FormField
className="paginate-channel"
onKeyUp={e => this.paginate(e)}
prefix={__('Go to page:')}
type="text"
/>
</FormRow>
)}
<FormField
className="paginate-channel"
onKeyUp={e => this.paginate(e)}
prefix={__('Go to page:')}
type="text"
/>
</FormRow>
)}
</React.Fragment>
);
}

17
src/renderer/component/userHistoryItem/index.js
View file

@ -1,9 +1,16 @@
import { connect } from 'react-redux';
import { doResolveUri } from 'lbry-redux';
import { doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
import UserHistoryItem from './view';
const perform = (dispatch) => ({
resolveUri: uri => dispatch(doResolveUri(uri)),
})
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
});
export default connect(null, perform)(UserHistoryItem);
const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)),
});
export default connect(
select,
perform
)(UserHistoryItem);

51
src/renderer/component/userHistoryItem/view.jsx
View file

@ -4,50 +4,59 @@ import type { Claim } from 'types/claim';
import moment from 'moment';
import classnames from 'classnames';
import { FormRow, FormField } from 'component/common/form';
import Button from 'component/button';
type Props = {
lastViewed: number,
uri: string,
claim: ?{}
claim: ?{},
};
class UserHistoryItem extends React.PureComponent<Props> {
componentDidMount() {
const { claim, uri, resolveUri } = this.props;
if (!claim) {
console.log("fetch claim")
resolveUri(uri)
resolveUri(uri);
}
}
render() {
const { lastViewed, selected, onSelect, claim } = this.props;
let name;
let title;
let uri;
if (claim) {
({ name } = claim);
({ title } = claim.value.stream.metadata);
uri = claim.permanent_url;
}
return (
<tr className={classnames({
"history__selected": selected
})}>
<td>
<FormField
checked={selected}
type="checkbox"
onClick={onSelect}
/>
</td>
<td>
{moment(lastViewed).from(moment())}
</td>
<td>
{name}
</td>
<tr
onClick={onSelect}
className={classnames({
history__selected: selected,
})}
>
<td>
<input checked={selected} type="checkbox" onClick={onSelect} />
</td>
<td>{moment(lastViewed).from(moment())}</td>
<td>
<Button
tourniquet
button="link"
label={`lbry://${name}`}
navigate="/show"
navigateParams={{ uri }}
/>
</td>
<td>{title}</td>
</tr>
);
}
}
export default UserHistoryItem;

4
src/renderer/page/file/view.jsx
View file

@ -85,11 +85,11 @@ class FilePage extends React.Component<Props> {
}
componentWillReceiveProps(nextProps: Props) {
const { fetchFileInfo, uri } = this.props;
const { fetchFileInfo, uri, setViewed } = this.props;
if (nextProps.fileInfo === undefined) {
fetchFileInfo(uri);
}
if (uri !== nextProps.uri) {
setViewed(nextProps.uri);
}

32
src/renderer/scss/component/_table.scss
View file

@ -109,28 +109,46 @@ table.table--transactions {
}
table.table--history {
margin-top: 0;
margin-top: $spacing-vertical * 1/3;
tbody {
tr {
&:nth-child(even),
&:nth-child(odd) {
background-color: var(--table-item-even);
&.history__selected {
color: red;
background-color: var(--table-item-odd);
}
}
}
td {
cursor: default;
padding: $spacing-vertical * 1/3 0;
}
td:nth-of-type(1) {
width: 7.5%;
}
td:nth-of-type(2) {
/*Tourniquets text over 20VW*/
max-width: 20vw;
width: 20%;
}
td:nth-of-type(3) {
width: 30%;
padding-right: 10px;
}
td:nth-of-type(4) {
width: 42.5%;
max-width: 30vw;
}
td:nth-of-type(3),
td:nth-of-type(4) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-help);
}
}
}