2019-10-07 17:11:53 -06:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import cx from 'classnames';
|
|
|
|
import PropTypes from 'prop-types';
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2019-10-07 17:11:53 -06:00
|
|
|
import OpenDbc from '../api/OpenDbc';
|
2017-06-16 23:28:51 -06:00
|
|
|
|
|
|
|
export default class GithubDbcList extends Component {
|
2017-12-12 19:27:20 -07:00
|
|
|
static propTypes = {
|
|
|
|
onDbcLoaded: PropTypes.func.isRequired,
|
|
|
|
repo: PropTypes.string.isRequired,
|
|
|
|
openDbcClient: PropTypes.instanceOf(OpenDbc).isRequired
|
|
|
|
};
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
this.state = {
|
|
|
|
paths: [],
|
|
|
|
selectedPath: null,
|
2019-10-07 17:11:53 -06:00
|
|
|
pathQuery: ''
|
2017-12-12 19:27:20 -07:00
|
|
|
};
|
2017-07-27 04:03:12 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
this.updatePathQuery = this.updatePathQuery.bind(this);
|
|
|
|
}
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if (nextProps.repo !== this.props.repo) {
|
2019-10-07 17:11:53 -06:00
|
|
|
this.props.openDbcClient.list(nextProps.repo).then((paths) => {
|
2017-12-12 19:27:20 -07:00
|
|
|
this.setState({ paths, selectedPath: null });
|
|
|
|
});
|
2017-07-27 04:03:12 -06:00
|
|
|
}
|
2017-12-12 19:27:20 -07:00
|
|
|
}
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2019-10-09 16:22:46 -06:00
|
|
|
componentDidMount() {
|
2019-10-07 17:11:53 -06:00
|
|
|
this.props.openDbcClient.list(this.props.repo).then((paths) => {
|
|
|
|
paths = paths.filter((path) => path.indexOf('.dbc') !== -1);
|
2017-12-12 19:27:20 -07:00
|
|
|
this.setState({ paths });
|
|
|
|
});
|
|
|
|
}
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
updatePathQuery(e) {
|
|
|
|
this.setState({
|
|
|
|
pathQuery: e.target.value
|
|
|
|
});
|
|
|
|
}
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
selectPath(path) {
|
|
|
|
this.setState({ selectedPath: path });
|
|
|
|
this.props.openDbcClient
|
|
|
|
.getDbcContents(path, this.props.repo)
|
2019-10-07 17:11:53 -06:00
|
|
|
.then((dbcContents) => {
|
2017-12-12 19:27:20 -07:00
|
|
|
this.props.onDbcLoaded(path, dbcContents);
|
|
|
|
});
|
|
|
|
}
|
2017-06-16 23:28:51 -06:00
|
|
|
|
2017-12-12 19:27:20 -07:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="cabana-dbc-list">
|
|
|
|
<div className="cabana-dbc-list-header">
|
2021-10-04 10:57:54 -06:00
|
|
|
<a href={`https://github.com/${this.props.repo}`} target="_blank" rel="noopener noreferrer">
|
2017-12-12 19:27:20 -07:00
|
|
|
<i className="fa fa-github" />
|
|
|
|
<span>{this.props.repo}</span>
|
|
|
|
</a>
|
|
|
|
<div className="form-field form-field--small">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="Search DBC Files"
|
|
|
|
onChange={this.updatePathQuery}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="cabana-dbc-list-files">
|
|
|
|
{this.state.paths
|
|
|
|
.filter(
|
2019-10-07 17:11:53 -06:00
|
|
|
(p) => (this.state.pathQuery === '') | p.includes(this.state.pathQuery)
|
2017-12-12 19:27:20 -07:00
|
|
|
)
|
2019-10-07 17:11:53 -06:00
|
|
|
.map((path) => (
|
|
|
|
<div
|
|
|
|
className={cx('cabana-dbc-list-file', {
|
|
|
|
'is-selected': this.state.selectedPath === path
|
|
|
|
})}
|
|
|
|
onClick={() => {
|
|
|
|
this.selectPath(path);
|
|
|
|
}}
|
|
|
|
key={path}
|
|
|
|
>
|
|
|
|
<span>{path}</span>
|
|
|
|
</div>
|
|
|
|
))}
|
2017-12-12 19:27:20 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-07-27 04:03:12 -06:00
|
|
|
}
|