Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove old React version and import React, ReactDOM and createReactCl… #324

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Remove old React version and import React, ReactDOM and createReactCl… #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,959 changes: 1,548 additions & 1,411 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"create-react-class": "^15.6.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.7.1"
}
}
2 changes: 0 additions & 2 deletions ui/assets/excluded_files.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
</head>
<body>
<div id="root"></div>

<script src="js/react-{{.ReactVersion}}.min.js"></script>
<script src="js/jquery-{{.jQueryVersion}}.min.js"></script>
{{ .Source }}
</body>
Expand Down
1 change: 0 additions & 1 deletion ui/assets/index.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
<script>
var ModelData = {{ .ReposAsJson }};
</script>
<script src="js/react-{{.ReactVersion}}.min.js"></script>
<script src="js/jquery-{{.jQueryVersion}}.min.js"></script>
{{ .Source }}
</body>
Expand Down
21 changes: 12 additions & 9 deletions ui/assets/js/excluded_files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import {UrlToRepo} from './common';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import { UrlToRepo } from './common';

var ExcludedRow = React.createClass({
var ExcludedRow = createReactClass({
render: function() {
var url = UrlToRepo(this.props.repo, this.props.file.Filename, this.props.rev);
return (
Expand All @@ -14,7 +17,7 @@ var ExcludedRow = React.createClass({
}
});

var ExcludedTable = React.createClass({
var ExcludedTable = createReactClass({
render: function() {
var _this = this;
if (this.props.searching) {
Expand All @@ -40,7 +43,7 @@ var ExcludedTable = React.createClass({
}
});

var RepoButton = React.createClass({
var RepoButton = createReactClass({
handleClick: function(repoName) {
this.props.onRepoClick(repoName);
},
Expand All @@ -58,12 +61,12 @@ var RepoButton = React.createClass({
}
});

var RepoList = React.createClass({
var RepoList = createReactClass({
render: function() {
var repos = [],
_this = this;
this.props.repos.forEach(function(repo){
repos.push(<RepoButton repo={repo} onRepoClick={_this.props.onRepoClick} currentRepo={_this.props.repo} />);
this.props.repos.forEach(function(repo, index){
repos.push(<RepoButton key={"repo-list-" + index} repo={repo} onRepoClick={_this.props.onRepoClick} currentRepo={_this.props.repo} />);
});

return (
Expand All @@ -74,7 +77,7 @@ var RepoList = React.createClass({
}
});

var FilterableExcludedFiles = React.createClass({
var FilterableExcludedFiles = createReactClass({
getInitialState: function() {
var _this = this;
$.ajax({
Expand Down Expand Up @@ -132,7 +135,7 @@ var FilterableExcludedFiles = React.createClass({
}
});

React.renderComponent(
ReactDOM.render(
<FilterableExcludedFiles />,
document.getElementById('root')
);
81 changes: 44 additions & 37 deletions ui/assets/js/hound.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import {UrlToRepo} from './common';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import { UrlToRepo } from './common';

var Signal = function() {
};
Expand Down Expand Up @@ -300,15 +303,15 @@ var Model = {

};

var RepoOption = React.createClass({
var RepoOption = createReactClass({
render: function() {
return (
<option value={this.props.value} selected={this.props.selected}>{this.props.value}</option>
)
}
});

var SearchBar = React.createClass({
var SearchBar = createReactClass({
componentWillMount: function() {
var _this = this;
Model.didLoadRepos.tap(function(model, repos) {
Expand All @@ -317,7 +320,7 @@ var SearchBar = React.createClass({
},

componentDidMount: function() {
var q = this.refs.q.getDOMNode();
var q = this.refs.q;

// TODO(knorton): Can't set this in jsx
q.setAttribute('autocomplete', 'off');
Expand All @@ -341,7 +344,7 @@ var SearchBar = React.createClass({
switch (event.keyCode) {
case 40:
// this will cause advanced to expand if it is not expanded.
this.refs.files.getDOMNode().focus();
this.refs.files.focus();
break;
case 38:
this.hideAdvanced();
Expand All @@ -360,10 +363,10 @@ var SearchBar = React.createClass({
switch (event.keyCode) {
case 38:
// if advanced is empty, close it up.
if (this.refs.files.getDOMNode().value.trim() === '') {
if (this.refs.files.value.trim() === '') {
this.hideAdvanced();
}
this.refs.q.getDOMNode().focus();
this.refs.q.focus();
break;
case 13:
this.submitQuery();
Expand All @@ -378,41 +381,45 @@ var SearchBar = React.createClass({
},
getRegExp : function() {
return new RegExp(
this.refs.q.getDOMNode().value.trim(),
this.refs.icase.getDOMNode().checked ? 'ig' : 'g');
this.refs.q.value.trim(),
this.refs.icase.checked ? 'ig' : 'g');
},
getParams: function() {
// selecting all repos is the same as not selecting any, so normalize the url
// to have none.
var repos = Model.ValidRepos(this.refs.repos.state.value);
var repos = Model.ValidRepos(
Array.prototype.map.call(this.refs.repos.querySelectorAll("option:checked"), function (option) {
return option.value;
})
);
if (repos.length == Model.RepoCount()) {
repos = [];
}

return {
q : this.refs.q.getDOMNode().value.trim(),
files : this.refs.files.getDOMNode().value.trim(),
q : this.refs.q.value.trim(),
files : this.refs.files.value.trim(),
repos : repos.join(','),
i: this.refs.icase.getDOMNode().checked ? 'fosho' : 'nope'
i: this.refs.icase.checked ? 'fosho' : 'nope'
};
},
setParams: function(params) {
var q = this.refs.q.getDOMNode(),
i = this.refs.icase.getDOMNode(),
files = this.refs.files.getDOMNode();
var q = this.refs.q,
i = this.refs.icase,
files = this.refs.files;

q.value = params.q;
i.checked = ParamValueToBool(params.i);
files.value = params.files;
},
hasAdvancedValues: function() {
return this.refs.files.getDOMNode().value.trim() !== '' || this.refs.icase.getDOMNode().checked || this.refs.repos.getDOMNode().value !== '';
return this.refs.files.value.trim() !== '' || this.refs.icase.checked || this.refs.repos.value !== '';
},
showAdvanced: function() {
var adv = this.refs.adv.getDOMNode(),
ban = this.refs.ban.getDOMNode(),
q = this.refs.q.getDOMNode(),
files = this.refs.files.getDOMNode();
var adv = this.refs.adv,
ban = this.refs.ban,
q = this.refs.q,
files = this.refs.files;

css(adv, 'height', 'auto');
css(adv, 'padding', '10px 0');
Expand All @@ -425,9 +432,9 @@ var SearchBar = React.createClass({
}
},
hideAdvanced: function() {
var adv = this.refs.adv.getDOMNode(),
ban = this.refs.ban.getDOMNode(),
q = this.refs.q.getDOMNode();
var adv = this.refs.adv,
ban = this.refs.ban,
q = this.refs.q;

css(adv, 'height', '0');
css(adv, 'padding', '0');
Expand All @@ -446,8 +453,8 @@ var SearchBar = React.createClass({
selected[repo] = true;
});

this.state.allRepos.forEach(function(repoName) {
repoOptions.push(<RepoOption value={repoName} selected={selected[repoName]}/>);
this.state.allRepos.forEach(function(repoName, index) {
repoOptions.push(<RepoOption key={repoName + "-option-" + index} value={repoName} selected={selected[repoName]}/>);
});

var stats = this.state.stats;
Expand Down Expand Up @@ -477,7 +484,7 @@ var SearchBar = React.createClass({
type="text"
placeholder="Search by Regexp"
ref="q"
autocomplete="off"
autoComplete="off"
onKeyDown={this.queryGotKeydown}
onFocus={this.queryGotFocus}/>
<div className="button-add-on">
Expand Down Expand Up @@ -636,7 +643,7 @@ var ContentFor = function(line, regexp) {
return buffer.join('');
};

var FilesView = React.createClass({
var FilesView = createReactClass({
onLoadMore: function(event) {
Model.LoadMore(this.props.repo);
},
Expand All @@ -650,11 +657,11 @@ var FilesView = React.createClass({
var files = matches.map(function(match, index) {
var filename = match.Filename,
blocks = CoalesceMatches(match.Matches);
var matches = blocks.map(function(block) {
var lines = block.map(function(line) {
var matches = blocks.map(function(block, mindex) {
var lines = block.map(function(line, lindex) {
var content = ContentFor(line, regexp);
return (
<div className="line">
<div className="line" key={repo + "-" + lindex + "-" + mindex + "-" + index}>
<a href={Model.UrlToRepo(repo, filename, line.Number, rev)}
className="lnum"
target="_blank">{line.Number}</a>
Expand All @@ -664,12 +671,12 @@ var FilesView = React.createClass({
});

return (
<div className="match">{lines}</div>
<div className="match" key={repo + "-lines-" + mindex + "-" + index}>{lines}</div>
);
});

return (
<div className="file">
<div className="file" key={repo + "-file-" + index}>
<div className="title">
<a href={Model.UrlToRepo(repo, match.Filename, null, rev)}>
{match.Filename}
Expand All @@ -696,7 +703,7 @@ var FilesView = React.createClass({
}
});

var ResultView = React.createClass({
var ResultView = createReactClass({
componentWillMount: function() {
var _this = this;
Model.willSearch.tap(function(model, params) {
Expand Down Expand Up @@ -735,7 +742,7 @@ var ResultView = React.createClass({
results = this.state.results || [];
var repos = results.map(function(result, index) {
return (
<div className="repo">
<div className="repo" key={"results-view-" + index}>
<div className="title">
<span className="mega-octicon octicon-repo"></span>
<span className="name">{Model.NameForRepo(result.Repo)}</span>
Expand All @@ -754,7 +761,7 @@ var ResultView = React.createClass({
}
});

var App = React.createClass({
var App = createReactClass({
componentWillMount: function() {
var params = ParamsFromUrl(),
repos = (params.repos == '') ? [] : params.repos.split(',');
Expand Down Expand Up @@ -835,7 +842,7 @@ var App = React.createClass({
}
});

React.renderComponent(
ReactDOM.render(
<App />,
document.getElementById('root')
);
Expand Down
16 changes: 0 additions & 16 deletions ui/assets/js/react-0.12.2.min.js
View file
Open in desktop

This file was deleted.

Loading