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 ( {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;