mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-10 03:11:07 +00:00
update draft module
This commit is contained in:
杨顺强
@@ -1,737 +1,15 @@
|
||||
import React from 'react';
|
||||
import ReactDom from 'react-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import axios from 'axios';
|
||||
import classnames from 'classnames';
|
||||
import { Button, Tooltip, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
|
||||
/* eslint-disable */
|
||||
import Prism from 'prismjs';
|
||||
/* eslint-enable */
|
||||
import { ReactEditor, DiffViewer } from '@seafile/seafile-editor';
|
||||
import { siteRoot, gettext, draftOriginFilePath, draftFilePath, author, authorAvatar, originFileExists, draftFileExists, draftID, draftFileName, draftRepoID, draftStatus, draftPublishVersion, originFileVersion, filePermission, serviceURL, mediaUrl } from './utils/constants';
|
||||
import { seafileAPI } from './utils/seafile-api';
|
||||
import Loading from './components/loading';
|
||||
import AddReviewerDialog from './components/dialog/add-reviewer-dialog';
|
||||
import HistoryList from './pages/review/history-list';
|
||||
import ModalPortal from './components/modal-portal';
|
||||
|
||||
import './css/layout.css';
|
||||
import './css/toolbar.css';
|
||||
import './css/dirent-detail.css';
|
||||
import './css/draft.css';
|
||||
|
||||
const URL = require('url-parse');
|
||||
var moment = require('moment');
|
||||
|
||||
const { toDOMNode } = ReactEditor;
|
||||
|
||||
class Draft extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
draftContent: '',
|
||||
draftOriginContent: '',
|
||||
draftInfo: {},
|
||||
isLoading: true,
|
||||
isShowDiff: true,
|
||||
showDiffTip: false,
|
||||
activeTab: 'reviewInfo',
|
||||
changedNodes: [],
|
||||
originRepoName: '',
|
||||
activeItem: null,
|
||||
historyList: [],
|
||||
showReviewerDialog: false,
|
||||
reviewers: [],
|
||||
draftStatus: draftStatus,
|
||||
};
|
||||
this.quote = '';
|
||||
this.newIndex = null;
|
||||
this.oldIndex = null;
|
||||
this.changeIndex = -1;
|
||||
this.range = null;
|
||||
}
|
||||
|
||||
initialContent = () => {
|
||||
switch(draftStatus) {
|
||||
case 'open':
|
||||
if (!draftFileExists) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
isShowDiff: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!originFileExists) {
|
||||
seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath)
|
||||
.then(res => {
|
||||
seafileAPI.getFileContent(res.data)
|
||||
.then(res => {
|
||||
this.setState({
|
||||
draftContent: res.data,
|
||||
draftOriginContent: res.data,
|
||||
isLoading: false,
|
||||
isShowDiff: false
|
||||
});
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
const hash = window.location.hash;
|
||||
if (hash.indexOf('#history-') === 0) {
|
||||
const currentCommitID = hash.slice(9, 49);
|
||||
const preCommitID = hash.slice(50, 90);
|
||||
let preItemFilePath, currentItemFilePath;
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
activeTab: 'history',
|
||||
});
|
||||
seafileAPI.listFileHistoryRecords(draftRepoID, draftFilePath, 1, 25).then((res) => {
|
||||
const historyList = res.data.data;
|
||||
this.setState({
|
||||
historyList: historyList,
|
||||
totalReversionCount: res.data.total_count
|
||||
});
|
||||
for (let i = 0, length = historyList.length; i < length; i++) {
|
||||
if (preCommitID === historyList[i].commit_id) {
|
||||
this.setState({
|
||||
activeItem: i
|
||||
});
|
||||
preItemFilePath = historyList[i].path;
|
||||
}
|
||||
if (currentCommitID === historyList[i].commit_id) {
|
||||
currentItemFilePath = historyList[i].path;
|
||||
}
|
||||
if (preItemFilePath && currentItemFilePath) break;
|
||||
}
|
||||
axios.all([
|
||||
seafileAPI.getFileRevision(draftRepoID, currentCommitID, currentItemFilePath),
|
||||
seafileAPI.getFileRevision(draftRepoID, preCommitID, preItemFilePath)
|
||||
]).then(axios.spread((res1, res2) => {
|
||||
axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1, content2) => {
|
||||
this.setDiffViewerContent(content2.data, content1.data);
|
||||
}));
|
||||
}));
|
||||
return;
|
||||
});
|
||||
} else {
|
||||
axios.all([
|
||||
seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath),
|
||||
seafileAPI.getFileDownloadLink(draftRepoID, draftOriginFilePath)
|
||||
]).then(axios.spread((res1, res2) => {
|
||||
axios.all([
|
||||
seafileAPI.getFileContent(res1.data),
|
||||
seafileAPI.getFileContent(res2.data)
|
||||
]).then(axios.spread((draftContent, draftOriginContent) => {
|
||||
this.setState({
|
||||
draftContent: draftContent.data,
|
||||
draftOriginContent: draftOriginContent.data,
|
||||
isLoading: false
|
||||
});
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.getChangedNodes();
|
||||
}, 100);
|
||||
}));
|
||||
}));
|
||||
}
|
||||
break;
|
||||
case 'published':
|
||||
if (!originFileExists) {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
isShowDiff: false
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
let dl0 = siteRoot + 'repo/' + draftRepoID + '/' + draftPublishVersion + '/download?' + 'p=' + draftOriginFilePath;
|
||||
// eslint-disable-next-line
|
||||
let dl = siteRoot + 'repo/' + draftRepoID + '/' + originFileVersion + '/download?' + 'p=' + draftOriginFilePath;
|
||||
axios.all([
|
||||
seafileAPI.getFileContent(dl0),
|
||||
seafileAPI.getFileContent(dl)
|
||||
]).then(axios.spread((draftContent, draftOriginContent) => {
|
||||
this.setState({
|
||||
draftContent: draftContent.data,
|
||||
draftOriginContent: draftOriginContent.data,
|
||||
isLoading: false,
|
||||
});
|
||||
}));
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
onHistoryItemClick = (currentItem, preItem, activeItem) => {
|
||||
const preCommitID = preItem.commit_id;
|
||||
const currentCommitID = currentItem.commit_id;
|
||||
const url = 'history-' + preCommitID + '-' + currentCommitID;
|
||||
this.setURL(url);
|
||||
this.setState({
|
||||
activeItem: activeItem,
|
||||
isLoading: true,
|
||||
});
|
||||
axios.all([
|
||||
seafileAPI.getFileRevision(draftRepoID, currentCommitID, currentItem.path),
|
||||
seafileAPI.getFileRevision(draftRepoID, preCommitID, preItem.path)
|
||||
]).then(axios.spread((res1, res2) => {
|
||||
axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
|
||||
this.setDiffViewerContent(content1.data, content2.data);
|
||||
}));
|
||||
}));
|
||||
};
|
||||
|
||||
onHistoryListChange = (historyList) => {
|
||||
this.setState({historyList: historyList });
|
||||
};
|
||||
|
||||
getOriginRepoInfo = () => {
|
||||
seafileAPI.getRepoInfo(draftRepoID).then((res) => {
|
||||
this.setState({ originRepoName: res.data.repo_name });
|
||||
});
|
||||
};
|
||||
|
||||
getDraftInfo = () => {
|
||||
if (draftStatus === 'open') {
|
||||
seafileAPI.getFileInfo(draftRepoID, draftFilePath).then((res) => {
|
||||
this.setState({ draftInfo: res.data });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
getChangedNodes = () => {
|
||||
const nodes = this.refs.diffViewer.value;
|
||||
let keys = [];
|
||||
let lastDiffState = '';
|
||||
nodes.forEach((node, index) => {
|
||||
const diff_state = node.data['diff_state'];
|
||||
if (diff_state === 'diff-added' && lastDiffState !== 'diff-added') {
|
||||
keys.push(index);
|
||||
} else if (diff_state === 'diff-removed' && lastDiffState !== 'diff-removed') {
|
||||
keys.push(index);
|
||||
} else if (diff_state === 'diff-replaced' && lastDiffState !== 'diff-replaced') {
|
||||
keys.push(index);
|
||||
}
|
||||
lastDiffState = node.data.diff_state;
|
||||
});
|
||||
this.setState({
|
||||
changedNodes: keys
|
||||
});
|
||||
};
|
||||
|
||||
scrollToChangedNode = (scroll) => {
|
||||
if (this.state.changedNodes.length == 0) return;
|
||||
if (scroll === 'up') { this.changeIndex++; } else { this.changeIndex--; }
|
||||
if (this.changeIndex > this.state.changedNodes.length - 1) {
|
||||
this.changeIndex = 0;
|
||||
}
|
||||
if (this.changeIndex < 0) {
|
||||
this.changeIndex = this.state.changedNodes.length - 1;
|
||||
}
|
||||
const win = window;
|
||||
let key = this.state.changedNodes[this.changeIndex];
|
||||
let node = window.viewer.children[key];
|
||||
let element = toDOMNode(window.viewer, node);
|
||||
// fix code-block or tables
|
||||
while (element.className.indexOf('diff-') === -1 && element.tagName !== 'BODY') {
|
||||
element = element.parentNode;
|
||||
}
|
||||
const scroller = this.findScrollContainer(element, win);
|
||||
const isWindow = scroller == win.document.body || scroller == win.document.documentElement;
|
||||
if (isWindow) {
|
||||
win.scrollTo(0, element.offsetTop);
|
||||
} else {
|
||||
scroller.scrollTop = element.offsetTop;
|
||||
}
|
||||
};
|
||||
|
||||
findScrollContainer = (element, window) => {
|
||||
let parent = element.parentNode;
|
||||
const OVERFLOWS = ['auto', 'overlay', 'scroll'];
|
||||
let scroller;
|
||||
while (!scroller) {
|
||||
if (!parent.parentNode) break;
|
||||
const style = window.getComputedStyle(parent);
|
||||
const { overflowY } = style;
|
||||
if (OVERFLOWS.includes(overflowY)) {
|
||||
scroller = parent;
|
||||
break;
|
||||
}
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
if (!scroller) {
|
||||
return window.document.body;
|
||||
}
|
||||
return scroller;
|
||||
};
|
||||
|
||||
showDiffViewer = () => {
|
||||
return (
|
||||
<div>
|
||||
{this.state.isShowDiff ?
|
||||
<DiffViewer
|
||||
scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
|
||||
newMarkdownContent={this.state.draftContent}
|
||||
oldMarkdownContent={this.state.draftOriginContent}
|
||||
ref="diffViewer"
|
||||
/> :
|
||||
<DiffViewer
|
||||
scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
|
||||
newMarkdownContent={this.state.draftContent}
|
||||
oldMarkdownContent={this.state.draftContent}
|
||||
ref="diffViewer"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
listReviewers = () => {
|
||||
seafileAPI.listDraftReviewers(draftID).then((res) => {
|
||||
this.setState({
|
||||
reviewers: res.data.reviewers
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onSwitchShowDiff = () => {
|
||||
if (!this.state.isShowDiff) {
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.getChangedNodes();
|
||||
}, 100);
|
||||
}
|
||||
this.setState({
|
||||
isShowDiff: !this.state.isShowDiff,
|
||||
});
|
||||
};
|
||||
|
||||
toggleDiffTip = () => {
|
||||
this.setState({
|
||||
showDiffTip: !this.state.showDiffTip
|
||||
});
|
||||
};
|
||||
|
||||
toggleAddReviewerDialog = () => {
|
||||
if (this.state.showReviewerDialog) {
|
||||
this.listReviewers();
|
||||
}
|
||||
this.setState({
|
||||
showReviewerDialog: !this.state.showReviewerDialog
|
||||
});
|
||||
};
|
||||
|
||||
showDiffButton = () => {
|
||||
return (
|
||||
<div className={'seafile-toggle-diff'}>
|
||||
<label className="custom-switch" id="toggle-diff">
|
||||
<input type="checkbox" checked={this.state.isShowDiff && 'checked'}
|
||||
name="option" className="custom-switch-input"
|
||||
onChange={this.onSwitchShowDiff}/>
|
||||
<span className="custom-switch-indicator"></span>
|
||||
</label>
|
||||
<Tooltip placement="bottom" isOpen={this.state.showDiffTip}
|
||||
target="toggle-diff" toggle={this.toggleDiffTip}>
|
||||
{gettext('View diff')}</Tooltip>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onPublishDraft = () => {
|
||||
seafileAPI.publishDraft(draftID).then(res => {
|
||||
this.setState({
|
||||
draftStatus: res.data.draft_status,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
initialDiffViewerContent = () => {
|
||||
seafileAPI.listFileHistoryRecords(draftRepoID, draftFilePath, 1, 25).then((res) => {
|
||||
this.setState({
|
||||
historyList: res.data.data,
|
||||
totalReversionCount: res.data.total_count
|
||||
});
|
||||
if (res.data.data.length > 1) {
|
||||
axios.all([
|
||||
seafileAPI.getFileRevision(draftRepoID, res.data.data[0].commit_id, draftFilePath),
|
||||
seafileAPI.getFileRevision(draftRepoID, res.data.data[1].commit_id, draftFilePath)
|
||||
]).then(axios.spread((res1, res2) => {
|
||||
axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
|
||||
this.setState({
|
||||
draftContent: content1.data,
|
||||
draftOriginContent: content2.data
|
||||
});
|
||||
}));
|
||||
}));
|
||||
} else {
|
||||
seafileAPI.getFileRevision(draftRepoID, res.data.data[0].commit_id, draftFilePath).then((res) => {
|
||||
seafileAPI.getFileContent(res.data).then((content) => {
|
||||
this.setState({
|
||||
draftContent: content.data,
|
||||
draftOriginContent: ''
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
setDiffViewerContent = (newContent, prevContent) => {
|
||||
this.setState({
|
||||
draftContent: newContent,
|
||||
draftOriginContent: prevContent,
|
||||
isLoading: false,
|
||||
});
|
||||
};
|
||||
|
||||
setURL = (newurl) => {
|
||||
let url = new URL(window.location.href);
|
||||
url.set('hash', newurl);
|
||||
window.location.href = url.toString();
|
||||
};
|
||||
|
||||
tabItemClick = (tab) => {
|
||||
if (this.state.activeTab !== tab) {
|
||||
if (tab !== 'history' && window.location.hash) {
|
||||
this.setURL('#');
|
||||
}
|
||||
if (tab == 'reviewInfo') {
|
||||
this.initialContent();
|
||||
} else if (tab == 'history') {
|
||||
this.initialDiffViewerContent();
|
||||
}
|
||||
this.setState({
|
||||
activeTab: tab
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
showNavItem = (showTab) => {
|
||||
switch(showTab) {
|
||||
case 'info':
|
||||
return (
|
||||
<NavItem className="nav-item">
|
||||
<NavLink
|
||||
className={classnames({ active: this.state.activeTab === 'reviewInfo' })}
|
||||
onClick={() => { this.tabItemClick('reviewInfo');}}
|
||||
>
|
||||
<i className="fas fa-info-circle"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
);
|
||||
case 'history':
|
||||
return (
|
||||
<NavItem className="nav-item">
|
||||
<NavLink
|
||||
className={classnames({ active: this.state.activeTab === 'history' })}
|
||||
onClick={() => { this.tabItemClick('history');}}
|
||||
>
|
||||
<i className="fas fa-history"></i>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.getOriginRepoInfo();
|
||||
this.getDraftInfo();
|
||||
this.listReviewers();
|
||||
this.initialContent();
|
||||
}
|
||||
|
||||
renderDiffButton = () => {
|
||||
switch(draftStatus) {
|
||||
case 'open':
|
||||
if (!draftFileExists || !originFileExists) {
|
||||
return;
|
||||
}
|
||||
return this.showDiffButton();
|
||||
case 'published':
|
||||
if (!originFileExists) {
|
||||
return;
|
||||
}
|
||||
return this.showDiffButton();
|
||||
}
|
||||
};
|
||||
|
||||
renderNavItems = () => {
|
||||
switch (draftStatus) {
|
||||
case 'open':
|
||||
if (!draftFileExists) {
|
||||
return (
|
||||
<Nav tabs className="review-side-panel-nav">
|
||||
{this.showNavItem('info')}
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Nav tabs className="review-side-panel-nav">
|
||||
{this.showNavItem('info')}
|
||||
{this.showNavItem('history')}
|
||||
</Nav>
|
||||
);
|
||||
case 'published':
|
||||
if (!originFileExists) {
|
||||
return (
|
||||
<Nav tabs className="review-side-panel-nav">
|
||||
{this.showNavItem('info')}
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Nav tabs className="review-side-panel-nav">
|
||||
{this.showNavItem('info')}
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
renderContent = () => {
|
||||
switch(draftStatus) {
|
||||
case 'open':
|
||||
if (!draftFileExists) {
|
||||
return <p className="error">{gettext('Draft has been deleted.')}</p>;
|
||||
}
|
||||
return this.showDiffViewer();
|
||||
case 'published':
|
||||
if (!originFileExists) {
|
||||
return <p className="error">{gettext('Original file has been deleted.')}</p>;
|
||||
}
|
||||
return this.showDiffViewer();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { draftInfo, reviewers, originRepoName, draftStatus } = this.state;
|
||||
const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit';
|
||||
const showPublishedButton = this.state.draftStatus == 'published';
|
||||
const showPublishButton = this.state.draftStatus == 'open' && filePermission == 'rw';
|
||||
const showEditButton = this.state.draftStatus == 'open' && filePermission == 'rw';
|
||||
const time = moment(draftInfo.mtime * 1000).format('YYYY-MM-DD HH:mm');
|
||||
const url = `${siteRoot}profile/${encodeURIComponent(draftInfo.last_modifier_email)}/`;
|
||||
return(
|
||||
<div className="wrapper">
|
||||
<div id="header" className="header review">
|
||||
<div className="cur-file-info">
|
||||
<div className="info-item file-feature">
|
||||
<span className="sf2-icon-review"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="info-item file-info">
|
||||
<span className="file-name">{draftFileName}</span>
|
||||
<span className="mx-2 file-review">{gettext('Review')}</span>
|
||||
</div>
|
||||
{(!showPublishedButton && draftInfo.mtime) &&
|
||||
<div className="last-modification">
|
||||
<a href={url}>{draftInfo.last_modifier_name}</a><span className="mx-1">{time}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-group">
|
||||
{this.renderDiffButton()}
|
||||
{showEditButton &&
|
||||
<a href={draftLink} className="mx-1">
|
||||
<Button className="file-operation-btn" color="secondary">{gettext('Edit Draft')}</Button>
|
||||
</a>
|
||||
}
|
||||
{showPublishButton &&
|
||||
<button className='btn btn-success file-operation-btn' title={gettext('Publish draft')} onClick={this.onPublishDraft}>
|
||||
{gettext('Publish')}
|
||||
</button>
|
||||
}
|
||||
{showPublishedButton &&
|
||||
<button className='btn btn-success file-operation-btn' title={gettext('Published')} disabled>
|
||||
{gettext('Published')}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" className="main" ref="main">
|
||||
<div className="cur-view-container">
|
||||
<div className='cur-view-content' ref="viewContent">
|
||||
{this.state.isLoading ?
|
||||
<div className="markdown-viewer-render-content article">
|
||||
<Loading />
|
||||
</div>
|
||||
:
|
||||
<div className="markdown-viewer-render-content article">
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className="cur-view-right-part">
|
||||
<div className="review-side-panel">
|
||||
{this.renderNavItems()}
|
||||
<TabContent activeTab={this.state.activeTab}>
|
||||
<TabPane tabId="reviewInfo">
|
||||
<div className="review-side-panel-body">
|
||||
<SidePanelReviewers
|
||||
reviewers={reviewers}
|
||||
toggleAddReviewerDialog={this.toggleAddReviewerDialog}/>
|
||||
<SidePanelAuthor/>
|
||||
{(this.state.isShowDiff === true && this.state.changedNodes.length > 0) &&
|
||||
<SidePanelChanges
|
||||
changedNumber={this.state.changedNodes.length}
|
||||
scrollToChangedNode={this.scrollToChangedNode}/>
|
||||
}
|
||||
<SidePanelOrigin originRepoName={originRepoName} draftInfo={draftInfo} draftStatus={draftStatus}/>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tabId="history" className="history">
|
||||
<HistoryList
|
||||
activeItem={this.state.activeItem}
|
||||
historyList={this.state.historyList}
|
||||
totalReversionCount={this.state.totalReversionCount}
|
||||
onHistoryItemClick={this.onHistoryItemClick}
|
||||
onHistoryListChange={this.onHistoryListChange}
|
||||
/>
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.showReviewerDialog &&
|
||||
<ModalPortal>
|
||||
<AddReviewerDialog
|
||||
showReviewerDialog={this.state.showReviewerDialog}
|
||||
toggleAddReviewerDialog={this.toggleAddReviewerDialog}
|
||||
draftID={draftID}
|
||||
reviewers={reviewers}
|
||||
/>
|
||||
</ModalPortal>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function Draft() {
|
||||
return (
|
||||
<div style={{display: 'flex', flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
|
||||
<h1>Draft module</h1>
|
||||
<div>The current module is no longer supported</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
class SidePanelReviewers extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { reviewers } = this.props;
|
||||
return (
|
||||
<div className="review-side-panel-item">
|
||||
<div className="review-side-panel-header">{gettext('Reviewers')}
|
||||
<i className="fa fa-cog" onClick={this.props.toggleAddReviewerDialog}></i>
|
||||
</div>
|
||||
{reviewers.length > 0 ?
|
||||
reviewers.map((item, index = 0, arr) => {
|
||||
return (
|
||||
<div className="reviewer-info" key={index}>
|
||||
<img className="avatar review-side-panel-avatar" src={item.avatar_url} alt=""/>
|
||||
<span className="reviewer-name ellipsis">{item.user_name}</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
:
|
||||
<span>{gettext('No reviewer yet.')}</span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const sidePanelReviewersPropTypes = {
|
||||
reviewers: PropTypes.array.isRequired,
|
||||
toggleAddReviewerDialog: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
SidePanelReviewers.propTypes = sidePanelReviewersPropTypes;
|
||||
|
||||
class SidePanelAuthor extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="review-side-panel-item">
|
||||
<div className="review-side-panel-header">{gettext('Author')}</div>
|
||||
<div className="author-info">
|
||||
<img className="avatar review-side-panel-avatar" src={authorAvatar} alt=""/>
|
||||
<span className="author-name ellipsis">{author}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SidePanelOrigin extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { draftStatus, originRepoName } = this.props;
|
||||
const filePath = serviceURL + '/lib/' + draftRepoID + '/file' + draftOriginFilePath;
|
||||
return (
|
||||
<div className="dirent-table-container">
|
||||
<table className="table-thead-hidden">
|
||||
<thead>
|
||||
<tr><th width="25%"></th><th width="75%"></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className="align-text-top">{gettext('Location')}</th>
|
||||
<td>
|
||||
{draftStatus === 'open' ?
|
||||
<span>{originRepoName}{draftFilePath}</span> :
|
||||
<a href={filePath} className="text-dark">{filePath}</a>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SidePanelOriginPropTypes = {
|
||||
originRepoName: PropTypes.string.isRequired,
|
||||
draftStatus: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
SidePanelOrigin.propTypes = SidePanelOriginPropTypes;
|
||||
|
||||
class SidePanelChanges extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="review-side-panel-item">
|
||||
<div className="review-side-panel-header">{gettext('Changes')}</div>
|
||||
<div className="changes-info">
|
||||
<span>{gettext('Number of changes:')}{' '}{this.props.changedNumber}</span>
|
||||
{this.props.changedNumber > 0 &&
|
||||
<div>
|
||||
<i className="fa fa-arrow-circle-up" onClick={() => { this.props.scrollToChangedNode('down');}}></i>
|
||||
<i className="fa fa-arrow-circle-down" onClick={() => { this.props.scrollToChangedNode('up');}}></i>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const sidePanelChangesPropTypes = {
|
||||
changedNumber: PropTypes.number.isRequired,
|
||||
scrollToChangedNode: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
SidePanelChanges.propTypes = sidePanelChangesPropTypes;
|
||||
|
||||
|
||||
ReactDom.render(<Draft />, document.getElementById('wrapper'));
|
||||
|
||||
Reference in New Issue
Block a user