import React, {Fragment} from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import SharedRepoListItem from './shared-repo-list-item';
import toaster from '../toast';
const propTypes = {
libraryType: PropTypes.string,
currentGroup: PropTypes.object,
isShowTableThread: PropTypes.bool,
sortBy: PropTypes.string,
sortOrder: PropTypes.string,
sortItems: PropTypes.func,
repoList: PropTypes.array.isRequired,
onItemUnshare: PropTypes.func.isRequired,
onItemDelete: PropTypes.func.isRequired,
onItemDetails: PropTypes.func,
onItemRename: PropTypes.func,
};
class SharedRepoListView extends React.Component {
constructor(props) {
super(props);
this.state = {
isItemFreezed: false,
};
}
sortByName = (e) => {
e.preventDefault();
const sortBy = 'name';
const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
this.props.sortItems(sortBy, sortOrder);
}
sortByTime = (e) => {
e.preventDefault();
const sortBy = 'time';
const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
this.props.sortItems(sortBy, sortOrder);
}
getSortMetaData = () => {
return {
sortByName: this.props.sortBy == 'name',
sortByTime: this.props.sortBy == 'time',
sortIcon: this.props.sortOrder == 'asc' ? :
};
}
onFreezedItem = () => {
this.setState({isItemFreezed: true});
}
onUnfreezedItem = () => {
this.setState({isItemFreezed: false});
}
onItemRename = (repo, newName) => {
let isDuplicated = this.props.repoList.some(item => {
return item.name === newName;
});
if (isDuplicated) {
let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
toaster.danger(errMessage);
return false;
}
this.props.onItemRename(repo, newName);
}
renderRepoListView = () => {
return (
{this.props.repoList.map(repo => {
return (
);
})}
);
}
renderPCUI = () => {
let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
const { sortByName, sortByTime, sortIcon } = this.getSortMetaData();
return (
);
}
renderMobileUI = () => {
let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
const { sortByName, sortByTime, sortIcon } = this.getSortMetaData();
return (
);
}
render() {
if (window.innerWidth >= 768) {
return this.renderPCUI();
} else {
return this.renderMobileUI();
}
}
}
SharedRepoListView.propTypes = propTypes;
export default SharedRepoListView;