import React, {Fragment} from 'react'; import PropTypes from 'prop-types'; import { gettext } from '../../utils/constants'; import SharedRepoListItem from './shared-repo-list-item'; 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, }; 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: !this.state.isItemFreezed, }); } 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 ( {this.renderRepoListView()}
{gettext("Library Type")} {gettext('Name')} {sortByName && sortIcon} {gettext("Actions")} {gettext("Size")} {gettext('Last Update')} {sortByTime && sortIcon} {gettext("Owner")}
); } renderMobileUI = () => { let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true; const { sortByName, sortByTime, sortIcon } = this.getSortMetaData(); return ( {this.renderRepoListView()}
{gettext("Library Type")} {gettext("Sort:")} {gettext("name")} {sortByName && sortIcon} {gettext("last update")} {sortByTime && sortIcon} {gettext("Actions")}
); } render() { if (window.innerWidth >= 768) { return this.renderPCUI(); } else { return this.renderMobileUI(); } } } SharedRepoListView.propTypes = propTypes; export default SharedRepoListView;