2018-12-11 09:52:19 +00:00
|
|
|
import React, { Fragment } from 'react';
|
2018-11-27 06:47:19 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2022-12-29 04:21:47 +00:00
|
|
|
import { Link } from '@gatsbyjs/reach-router';
|
2019-03-15 02:10:24 +00:00
|
|
|
import { UncontrolledTooltip } from 'reactstrap';
|
2018-11-27 06:47:19 +00:00
|
|
|
import { siteRoot, gettext } from '../../utils/constants';
|
2019-06-04 08:18:32 +00:00
|
|
|
import { Utils } from '../../utils/utils';
|
2023-05-12 03:24:34 +00:00
|
|
|
import { InternalLinkOperation } from '../operations';
|
2018-11-27 06:47:19 +00:00
|
|
|
|
|
|
|
const propTypes = {
|
|
|
|
repoName: PropTypes.string.isRequired,
|
|
|
|
currentPath: PropTypes.string.isRequired,
|
|
|
|
onPathClick: PropTypes.func.isRequired,
|
2018-12-13 06:40:09 +00:00
|
|
|
onTabNavClick: PropTypes.func,
|
|
|
|
pathPrefix: PropTypes.array,
|
2018-12-14 04:19:24 +00:00
|
|
|
repoID: PropTypes.string.isRequired,
|
2019-02-20 03:54:25 +00:00
|
|
|
isViewFile: PropTypes.bool,
|
2019-03-15 02:10:24 +00:00
|
|
|
fileTags: PropTypes.array.isRequired,
|
2024-05-16 12:14:26 +00:00
|
|
|
toggleTreePanel: PropTypes.func.isRequired
|
2018-11-27 06:47:19 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
class DirPath extends React.Component {
|
|
|
|
|
|
|
|
onPathClick = (e) => {
|
2019-06-04 08:18:32 +00:00
|
|
|
let path = Utils.getEventData(e, 'path');
|
2018-11-27 06:47:19 +00:00
|
|
|
this.props.onPathClick(path);
|
2023-09-13 00:40:50 +00:00
|
|
|
};
|
2018-11-27 06:47:19 +00:00
|
|
|
|
2019-08-02 12:53:39 +00:00
|
|
|
onTabNavClick = (e, tabName, id) => {
|
2020-11-02 05:56:35 +00:00
|
|
|
if (window.uploader &&
|
|
|
|
window.uploader.isUploadProgressDialogShow &&
|
2019-08-02 12:53:39 +00:00
|
|
|
window.uploader.totalProgress !== 100) {
|
2020-11-02 05:56:35 +00:00
|
|
|
if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
|
|
|
|
e.preventDefault();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
window.uploader.isUploadProgressDialogShow = false;
|
2019-08-02 12:53:39 +00:00
|
|
|
}
|
2018-12-13 06:40:09 +00:00
|
|
|
this.props.onTabNavClick(tabName, id);
|
2023-09-13 00:40:50 +00:00
|
|
|
};
|
2018-12-13 06:40:09 +00:00
|
|
|
|
2018-11-27 06:47:19 +00:00
|
|
|
turnPathToLink = (path) => {
|
|
|
|
path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
|
|
|
|
let pathList = path.split('/');
|
|
|
|
let nodePath = '';
|
|
|
|
let pathElem = pathList.map((item, index) => {
|
|
|
|
if (item === '') {
|
2023-09-13 00:40:50 +00:00
|
|
|
return null;
|
2018-11-27 06:47:19 +00:00
|
|
|
}
|
|
|
|
if (index === (pathList.length - 1)) {
|
|
|
|
return (
|
2019-07-23 07:53:25 +00:00
|
|
|
<Fragment key={index}>
|
|
|
|
<span className="path-split">/</span>
|
|
|
|
<span className="path-file-name">{item}</span>
|
|
|
|
</Fragment>
|
2018-11-27 06:47:19 +00:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
nodePath += '/' + item;
|
|
|
|
return (
|
2019-07-15 06:42:18 +00:00
|
|
|
<Fragment key={index} >
|
2018-11-27 06:47:19 +00:00
|
|
|
<span className="path-split">/</span>
|
|
|
|
<a className="path-link" data-path={nodePath} onClick={this.onPathClick}>{item}</a>
|
2019-07-15 06:42:18 +00:00
|
|
|
</Fragment>
|
2018-11-27 06:47:19 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return pathElem;
|
2023-09-13 00:40:50 +00:00
|
|
|
};
|
2018-11-27 06:47:19 +00:00
|
|
|
|
|
|
|
render() {
|
2019-03-15 02:10:24 +00:00
|
|
|
let { currentPath, repoName, fileTags } = this.props;
|
2018-11-27 06:47:19 +00:00
|
|
|
let pathElem = this.turnPathToLink(currentPath);
|
2019-03-15 02:10:24 +00:00
|
|
|
|
|
|
|
let tagTitle = '';
|
|
|
|
if (fileTags.length > 0) {
|
|
|
|
fileTags.forEach(item => {
|
|
|
|
tagTitle += item.name + ' ';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-11-27 06:47:19 +00:00
|
|
|
return (
|
2018-12-13 14:11:08 +00:00
|
|
|
<div className="path-container">
|
2024-05-16 12:14:26 +00:00
|
|
|
<button className="op-btn mr-2" onClick={this.props.toggleTreePanel}><span className="sf3-font-side-bar sf3-font"></span></button>
|
2018-12-13 06:40:09 +00:00
|
|
|
{this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
|
|
|
|
return (
|
|
|
|
<Fragment key={index}>
|
2019-08-02 12:53:39 +00:00
|
|
|
<Link to={item.url} className="normal" onClick={(e) => this.onTabNavClick(e, item.name, item.id)}>{gettext(item.showName)}</Link>
|
2018-12-11 09:52:19 +00:00
|
|
|
<span className="path-split">/</span>
|
2018-12-13 06:40:09 +00:00
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
{this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
|
|
|
|
<Fragment>
|
2024-05-01 13:13:56 +00:00
|
|
|
<Link to={siteRoot + 'libraries/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
|
2018-12-13 06:40:09 +00:00
|
|
|
<span className="path-split">/</span>
|
|
|
|
</Fragment>
|
2019-03-15 02:10:24 +00:00
|
|
|
)}
|
2018-12-13 06:40:09 +00:00
|
|
|
{!this.props.pathPrefix && (
|
|
|
|
<Fragment>
|
2024-05-01 13:13:56 +00:00
|
|
|
<Link to={siteRoot + 'libraries/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
|
2018-12-13 06:40:09 +00:00
|
|
|
<span className="path-split">/</span>
|
|
|
|
</Fragment>
|
|
|
|
)}
|
2019-06-27 09:53:36 +00:00
|
|
|
{(currentPath === '/' || currentPath === '') ?
|
2019-07-23 07:53:25 +00:00
|
|
|
<span className="path-repo-name">{repoName}</span>:
|
2018-11-27 06:47:19 +00:00
|
|
|
<a className="path-link" data-path="/" onClick={this.onPathClick}>{repoName}</a>
|
|
|
|
}
|
|
|
|
{pathElem}
|
2023-05-12 03:24:34 +00:00
|
|
|
{this.props.isViewFile && (
|
|
|
|
<InternalLinkOperation repoID={this.props.repoID} path={this.props.currentPath}/>
|
|
|
|
)}
|
2020-11-02 05:56:35 +00:00
|
|
|
{(this.props.isViewFile && fileTags.length !== 0) &&
|
2023-06-07 12:41:12 +00:00
|
|
|
<span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1 d-flex align-items-center">
|
2019-03-15 02:10:24 +00:00
|
|
|
{fileTags.map((fileTag, index) => {
|
2019-05-13 03:55:49 +00:00
|
|
|
return (<span className="file-tag" key={fileTag.id} style={{zIndex: index, backgroundColor: fileTag.color}}></span>);
|
2019-03-15 02:10:24 +00:00
|
|
|
})}
|
|
|
|
<UncontrolledTooltip target="column-mode-file-tags" placement="bottom">
|
|
|
|
{tagTitle}
|
|
|
|
</UncontrolledTooltip>
|
|
|
|
</span>
|
|
|
|
}
|
2018-11-27 06:47:19 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
DirPath.propTypes = propTypes;
|
|
|
|
|
|
|
|
export default DirPath;
|