Remove unnecessary div
MODIFY
lib/project/match-view.js
lib/project/match-view.js
@@ -4,22 +4,24 @@ const {showIf} = require('./util')
module.exports =
class MatchView {
- constructor({match, regex, replacePattern, isSelected, previewStyle}) {
+ constructor({match, regex, replacePattern, isSelected, previewStyle, top}) {
this.match = match;
this.regex = regex;
this.replacePattern = replacePattern;
this.previewStyle = previewStyle;
this.isSelected = isSelected;
+ this.top = top;
etch.initialize(this);
}
- update({match, regex, replacePattern, previewStyle, isSelected}) {
+ update({match, regex, replacePattern, previewStyle, isSelected, top}) {
const changed =
match !== this.match ||
regex !== this.regex ||
replacePattern !== this.replacePattern ||
previewStyle !== this.previewStyle ||
- isSelected !== this.isSelected;
+ isSelected !== this.isSelected ||
+ top !== this.top;
if (changed) {
this.match = match;
@@ -27,6 +29,7 @@ class MatchView {
this.replacePattern = replacePattern;
this.previewStyle = previewStyle;
this.isSelected = isSelected;
+ this.top = top;
etch.update(this);
}
}
@@ -50,7 +53,13 @@ class MatchView {
{
key: range.toString(),
dataset: {range: range.toString()},
- className: `search-result list-item ${this.isSelected ? 'selected' : ''}`
+ className: `search-result list-item ${this.isSelected ? 'selected' : ''}`,
+ style: {
+ position: 'absolute',
+ top: `${this.top}px`,
+ left: 0,
+ right: 0
+ }
},
etch.dom.span({className: 'line-number text-subtle'},

MODIFY
lib/project/result-view.js
lib/project/result-view.js
@@ -111,47 +111,33 @@ class ResultView {
renderList() {
const children = [];
- let itemTopPosition = this.pathDetailsHeight;
- let i = 0;
-
- for (; i < this.matches.length; i++) {
- let itemBottomPosition = itemTopPosition + this.matchHeight;
- if (itemBottomPosition > this.top) break;
- itemTopPosition = itemBottomPosition;
- }
-
- for (; i < this.matches.length; i++) {
+ const top = Math.max(0, this.top - this.pathDetailsHeight);
+ let itemTopPosition = 0;
+ for (let i = Math.floor(top / this.matchHeight); i < this.matches.length; i++) {
+ itemTopPosition = i * this.matchHeight;
const match = this.matches[i];
children.push(
- etch.dom.div(
- {
- style: {
- position: 'absolute',
- height: this.matchHeight + 'px',
- minWidth: '100%',
- top: itemTopPosition - this.pathDetailsHeight + 'px'
- },
- key: i
- },
etch.dom(MatchView, {
match,
+ key: i,
regex: this.regex,
replacePattern: this.replacePattern,
isSelected: (i === this.selectedMatchIndex),
- previewStyle: this.previewStyle
+ previewStyle: this.previewStyle,
+ top: itemTopPosition
})
- )
);
- itemTopPosition += this.matchHeight;
- if (itemTopPosition >= this.bottom) break;
+ if (itemTopPosition + this.matchHeight + this.pathDetailsHeight >= this.bottom) {
+ break;
+ }
}
return etch.dom.ol(
{
ref: 'list',
className: 'matches list-tree',
- style: {height: itemTopPosition + 'px', position: 'relative'}
+ style: {height: `${itemTopPosition + this.pathDetailsHeight}px`, position: 'relative'}
},
...children
)

MODIFY
lib/project/results-view.js
lib/project/results-view.js
@@ -74,7 +74,7 @@ class ResultsView {
etch.dom.ol(
{
className: 'list-tree has-collapsable-children',
- style: {visibility: 'hidden', position: 'absolute'}
+ style: {visibility: 'hidden', position: 'absolute', overflow: 'hidden', left: 0, top: 0, right: 0}
},
etch.dom(ResultView, {
ref: 'dummyResultView',

Remove unnecessary div