1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-15 16:04:01 +00:00
seahub/frontend/src/components/index-viewer.js

272 lines
8.0 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
2019-01-29 03:03:43 +00:00
import { repoID, slug, serviceURL, isPublicWiki } from '../utils/constants';
import { Utils } from '../utils/utils';
2019-04-28 07:38:21 +00:00
import { Value } from 'slate';
import { deserialize } from '@seafile/seafile-editor/dist/utils/slate2markdown';
import'../css/index-viewer.css';
const viewerPropTypes = {
2019-01-28 08:48:03 +00:00
indexContent: PropTypes.string.isRequired,
onLinkClick: PropTypes.func.isRequired,
};
2019-05-17 07:49:34 +00:00
class TreeNode {
constructor({ name, href, parentNode }) {
this.name = name;
this.href = href;
this.parentNode = parentNode || null;
this.children = [];
}
setParent(parentNode) {
this.parentNode = parentNode;
}
addChildren(nodeList) {
nodeList.forEach((node) => {
node.setParent(this);
});
this.children = nodeList;
}
}
class IndexContentViewer extends React.Component {
2019-01-29 03:03:43 +00:00
constructor(props) {
super(props);
this.links = [];
2019-05-17 07:49:34 +00:00
this.treeRoot = new TreeNode({ name: '', href: '' });
2019-04-28 07:38:21 +00:00
}
componentWillMount() {
this.getRootNode();
2019-01-29 03:03:43 +00:00
}
componentDidMount() {
2019-04-28 07:38:21 +00:00
this.bindClickEvent();
2019-01-29 03:03:43 +00:00
}
componentWillReceiveProps() {
2019-04-28 07:38:21 +00:00
this.removeClickEvent();
2019-01-29 03:03:43 +00:00
}
componentDidUpdate() {
2019-04-28 07:38:21 +00:00
this.bindClickEvent();
}
componentWillUnmount() {
this.removeClickEvent();
}
bindClickEvent = () => {
const contentClass = 'wiki-nav-content';
2019-01-29 03:03:43 +00:00
this.links = document.querySelectorAll(`.${contentClass} a`);
this.links.forEach(link => {
link.addEventListener('click', this.onLinkClick);
});
}
2019-04-28 07:38:21 +00:00
removeClickEvent = () => {
2019-01-29 03:03:43 +00:00
this.links.forEach(link => {
link.removeEventListener('click', this.onLinkClick);
});
}
onLinkClick = (event) => {
2019-01-29 03:03:43 +00:00
event.preventDefault();
event.stopPropagation();
2019-04-28 07:38:21 +00:00
const link = this.getLink(event.target);
if (link) this.props.onLinkClick(link);
}
2019-04-28 07:38:21 +00:00
getLink = (node) => {
const tagName = node.tagName;
if (!tagName || tagName === 'HTML') return;
if (tagName === 'A') {
return node.href;
2019-01-29 03:03:43 +00:00
} else {
2019-04-28 07:38:21 +00:00
return this.getLink(node.parentNode);
2019-01-29 03:03:43 +00:00
}
}
changeInlineNode = (item) => {
if (item.object == 'inline') {
let url;
// change image url
if (item.type == 'image' && isPublicWiki) {
url = item.data.src;
const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
// different repo
if (!re.test(url)) {
return;
}
// get image path
let index = url.indexOf('/file');
let index2 = url.indexOf('?');
const imagePath = url.substring(index + 5, index2);
// replace url
item.data.src = serviceURL + '/view-image-via-public-wiki/?slug=' + slug + '&path=' + imagePath;
}
else if (item.type == 'link') {
url = item.data.href;
2019-04-28 07:38:21 +00:00
/* eslint-disable */
let expression = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/
2019-04-28 07:38:21 +00:00
/* eslint-enable */
let re = new RegExp(expression);
// Solving relative paths
if (!re.test(url)) {
2019-04-28 07:38:21 +00:00
item.data.href = serviceURL + '/published/' + slug + '/' + url;
}
2019-01-29 03:03:43 +00:00
// change file url
else if (Utils.isInternalMarkdownLink(url, repoID)) {
2019-01-29 03:03:43 +00:00
let path = Utils.getPathFromInternalMarkdownLink(url, repoID);
// replace url
item.data.href = serviceURL + '/published/' + slug + path;
2019-01-29 03:03:43 +00:00
}
// change dir url
else if (Utils.isInternalDirLink(url, repoID)) {
2019-01-30 03:48:15 +00:00
let path = Utils.getPathFromInternalDirLink(url, repoID);
2019-01-29 03:03:43 +00:00
// replace url
item.data.href = serviceURL + '/published/' + slug + path;
}
2019-01-29 03:03:43 +00:00
}
}
return item;
}
2019-04-28 07:38:21 +00:00
getRootNode = () => {
let value = deserialize(this.props.indexContent);
value = value.toJSON();
2019-05-17 07:49:34 +00:00
const newNodes = Utils.changeMarkdownNodes(value.document.nodes, this.changeInlineNode);
newNodes.map((node) => {
if (node.type === 'unordered_list' || node.type === 'ordered_list') {
this.treeRoot = this.transSlateToTree(node.nodes, this.treeRoot);
}
});
}
// slateNodes is list items of an unordered list or ordered list, translate them to treeNode and add to parentTreeNode
transSlateToTree = (slateNodes, parentTreeNode) => {
2019-05-17 07:49:34 +00:00
let treeNodes = slateNodes.map((slateNode) => {
// item has children(unordered list)
if (slateNode.nodes.length === 2 && (slateNode.nodes[1].type === 'unordered_list' || slateNode.nodes[1].type === 'ordered_list')) {
// slateNode.nodes[0] is paragraph, create TreeNode, set name and href
const paragraphNode = slateNode.nodes[0];
const treeNode = this.transParagraph(paragraphNode);
// slateNode.nodes[1] is list, set it as TreeNode's children
const listNode = slateNode.nodes[1];
// Add sub list items to the tree node
return this.transSlateToTree(listNode.nodes, treeNode);
2019-05-17 07:49:34 +00:00
} else {
2019-05-19 10:24:06 +00:00
// item doesn't have children list
if (slateNode.nodes[0] && (slateNode.nodes[0].type === 'paragraph')) {
return this.transParagraph(slateNode.nodes[0]);
} else {
// list item contain table/code_block/blockqupta
return new TreeNode({ name: '', href: '' });
}
2019-04-28 07:38:21 +00:00
}
});
parentTreeNode.addChildren(treeNodes);
return parentTreeNode;
}
// translate slate_paragraph_node to treeNode
transParagraph = (paragraphNode) => {
let treeNode;
if (paragraphNode.nodes[0].type === 'link') {
// paragraph node is a link node
const linkNode = paragraphNode.nodes[0];
const textNode = linkNode.nodes[0];
let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
treeNode = new TreeNode({ name: name, href: linkNode.data.href });
} else if (paragraphNode.nodes[0].object === 'text') {
// paragraph first child node is a text node, then get node name
const textNode = paragraphNode.nodes[0];
let name = textNode.leaves[0] ? textNode.leaves[0].text : '';
treeNode = new TreeNode({ name: name, href: '' });
} else {
treeNode = new TreeNode({ name: '', href: '' });
}
return treeNode;
2019-01-28 08:48:03 +00:00
}
render() {
2019-05-17 07:49:34 +00:00
return (
<div className="mx-2 o-hidden">
<FolderItem node={this.treeRoot} bindClickEvent={this.bindClickEvent}/>
</div>
);
2019-04-28 07:38:21 +00:00
}
}
IndexContentViewer.propTypes = viewerPropTypes;
const FolderItemPropTypes = {
2019-05-17 07:49:34 +00:00
node: PropTypes.object.isRequired,
2019-04-28 07:38:21 +00:00
bindClickEvent: PropTypes.func.isRequired,
};
class FolderItem extends React.Component {
constructor(props) {
super(props);
this.state = {
2019-05-17 07:49:34 +00:00
expanded: true
2019-04-28 07:38:21 +00:00
};
}
2019-05-17 07:49:34 +00:00
toggleExpanded = () => {
this.setState({ expanded: !this.state.expanded }, () => {
if (this.state.expanded) this.props.bindClickEvent();
2019-04-28 07:38:21 +00:00
});
}
2019-05-17 07:49:34 +00:00
renderLink = (node) => {
if (node.href && node.name) {
return <div className="wiki-nav-content"><a href={node.href}>{node.name}</a></div>;
} else if (node.name) {
return <div className="wiki-nav-content"><span>{node.name}</span></div>;
} else {
return null;
}
2019-04-28 07:38:21 +00:00
}
render() {
2019-05-17 07:49:34 +00:00
const { node } = this.props;
if (node.children.length > 0) {
return (
<React.Fragment>
{node.parentNode &&
<React.Fragment>
<span className="switch-btn" onClick={this.toggleExpanded}>
{this.state.expanded ? <i className="fa fa-caret-down"></i> : <i className="fa fa-caret-right"></i>}
</span>
{this.renderLink(node)}
</React.Fragment>
}
{this.state.expanded && node.children.map((child, index) => {
return (
<div className="pl-4 position-relative" key={index}>
<FolderItem node={child} bindClickEvent={this.props.bindClickEvent}/>
</div>
);
})}
</React.Fragment>
);
} else {
return this.renderLink(node);
}
}
}
2019-04-28 07:38:21 +00:00
FolderItem.propTypes = FolderItemPropTypes;
export default IndexContentViewer;