Skip to content
This repository was archived by the owner on Dec 11, 2019. It is now read-only.

Commit 6cc13ed

Browse files
committed
Converts FindBar into redux component
Resolves #9338 Auditors: @bsclifton @bridiver Test Plan:
1 parent 5e16c50 commit 6cc13ed

File tree

6 files changed

+134
-135
lines changed

6 files changed

+134
-135
lines changed

app/renderer/components/frame/frame.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -832,6 +832,7 @@ class Frame extends React.Component {
832832
if (this.frame.isEmpty()) {
833833
return
834834
}
835+
835836
if (e.result !== undefined && (e.result.matches !== undefined || e.result.activeMatchOrdinal !== undefined)) {
836837
if (e.result.matches === 0) {
837838
windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
@@ -840,9 +841,10 @@ class Frame extends React.Component {
840841
}))
841842
return
842843
}
844+
843845
windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
844-
numberOfMatches: e.result.matches || this.props.findDetailNumberOfMatches,
845-
activeMatchOrdinal: e.result.activeMatchOrdinal || this.props.findDetailActiveMatchOrdinal
846+
numberOfMatches: e.result.matches || -1,
847+
activeMatchOrdinal: e.result.activeMatchOrdinal || -1
846848
}))
847849
}
848850
})
@@ -933,10 +935,8 @@ class Frame extends React.Component {
933935
props.isSecure = frame.getIn(['security', 'isSecure'])
934936
props.findbarShown = frame.get('findbarShown')
935937
props.findDetailCaseSensitivity = frame.getIn(['findDetail', 'caseSensitivity']) || undefined
936-
props.findDetailNumberOfMatches = frame.getIn(['findDetail', 'numberOfMatches']) || 0
937938
props.findDetailSearchString = frame.getIn(['findDetail', 'searchString'])
938939
props.findDetailInternalFindStatePresent = frame.getIn(['findDetail', 'internalFindStatePresent'])
939-
props.findDetailActiveMatchOrdinal = frame.getIn(['findDetail', 'activeMatchOrdinal'])
940940
props.isPrivate = frame.get('isPrivate')
941941
props.activeShortcut = frame.get('activeShortcut')
942942
props.shortcutDetailsUsername = frame.getIn(['activeShortcutDetails', 'username'])

app/renderer/components/main/findbar.js

Lines changed: 119 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,30 @@ const React = require('react')
66
const Immutable = require('immutable')
77

88
// Components
9-
const ImmutableComponent = require('../immutableComponent')
9+
const ReduxComponent = require('../reduxComponent')
1010
const BrowserButton = require('../common/browserButton')
1111
const SwitchControl = require('../common/switchControl')
1212

1313
// Constants
1414
const keyCodes = require('../../../common/constants/keyCodes')
15+
const settings = require('../../../../js/constants/settings')
1516

1617
// Actions
1718
const windowActions = require('../../../../js/actions/windowActions')
18-
19-
// Stores
20-
const windowStore = require('../../../../js/stores/windowStore')
19+
const webviewActions = require('../../../../js/actions/webviewActions')
2120

2221
// Utils
2322
const contextMenus = require('../../../../js/contextMenus')
2423
const {getTextColorForBackground} = require('../../../../js/lib/color')
24+
const frameStateUtil = require('../../../../js/state/frameStateUtil')
25+
const {getSetting} = require('../../../../js/settings')
2526

27+
// Styles
2628
const globalStyles = require('../styles/global')
2729

28-
class FindBar extends ImmutableComponent {
29-
constructor () {
30-
super()
30+
class FindBar extends React.Component {
31+
constructor (props) {
32+
super(props)
3133
this.onBlur = this.onBlur.bind(this)
3234
this.onInputFocus = this.onInputFocus.bind(this)
3335
this.onClear = this.onClear.bind(this)
@@ -37,46 +39,42 @@ class FindBar extends ImmutableComponent {
3739
this.onFindPrev = this.onFindPrev.bind(this)
3840
this.onFindNext = this.onFindNext.bind(this)
3941
this.onCaseSensitivityChange = this.onCaseSensitivityChange.bind(this)
40-
this.didFrameChange = true
41-
}
42-
43-
get frame () {
44-
return windowStore.getFrame(this.props.frameKey)
42+
this.onFind = this.onFind.bind(this)
43+
this.onFindHide = this.onFindHide.bind(this)
4544
}
4645

4746
onInput (e) {
48-
windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
47+
windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
4948
searchString: e.target.value,
50-
caseSensitivity: this.isCaseSensitive
49+
caseSensitivity: this.props.isCaseSensitive
5150
}))
5251
}
5352

5453
onCaseSensitivityChange (e) {
55-
windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
56-
searchString: this.searchString,
57-
caseSensitivity: !this.isCaseSensitive
54+
windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
55+
searchString: this.props.searchString,
56+
caseSensitivity: !this.props.isCaseSensitive
5857
}))
5958
}
6059

6160
onFindFirst () {
62-
this.props.onFind(this.searchString, this.isCaseSensitive, true, false)
61+
this.onFind(this.props.searchString, this.props.isCaseSensitive, true, false)
6362
}
6463

6564
onFindNext () {
66-
this.props.onFind(this.searchString, this.isCaseSensitive, true, this.props.findDetail.get('internalFindStatePresent'))
65+
this.onFind(this.props.searchString, this.props.isCaseSensitive, true, this.props.internalFindStatePresent)
6766
}
6867

6968
onFindPrev () {
70-
this.props.onFind(this.searchString, this.isCaseSensitive, false, this.props.findDetail.get('internalFindStatePresent'))
69+
this.onFind(this.props.searchString, this.props.isCaseSensitive, false, this.props.internalFindStatePresent)
7170
}
7271

7372
onContextMenu (e) {
7473
// Without this timeout selection is not shown when right clicking in
7574
// a word so the word replacement is kind of a surprise. This is because
7675
// our context menus are modal at the moment. If we fix that we can
7776
// remove this timeout.
78-
setTimeout(() =>
79-
contextMenus.onFindBarContextMenu(e), 10)
77+
setTimeout(() => contextMenus.onFindBarContextMenu(e), 10)
8078
}
8179

8280
/**
@@ -91,29 +89,37 @@ class FindBar extends ImmutableComponent {
9189
}
9290

9391
componentDidMount () {
94-
this.searchInput.value = this.searchString
92+
this.searchInput.value = this.props.searchString
9593
this.focus()
9694
this.select()
97-
windowActions.setFindbarSelected(this.frame, false)
95+
windowActions.setFindbarSelected(this.props.activeFrameKey, false)
9896
}
9997

10098
componentWillUpdate (nextProps) {
101-
if (nextProps.frameKey !== this.props.frameKey) {
102-
this.searchInput.value = (nextProps.findDetail && nextProps.findDetail.get('searchString')) || ''
99+
if (nextProps.activeFrameKey !== this.props.activeFrameKey) {
100+
this.searchInput.value = nextProps.searchString
101+
}
102+
}
103+
104+
componentWillUnmount () {
105+
if (this.props.isPrivate) {
106+
windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
107+
searchString: '',
108+
caseSensitivity: this.props.isCaseSensitive
109+
}))
103110
}
104111
}
105112

106113
componentDidUpdate (prevProps) {
107-
if (this.props.selected && !prevProps.selected) {
114+
if (this.props.isSelected && !prevProps.isSelected) {
108115
this.focus()
109116
// Findbar might already be focused, so make sure select happens even if no
110117
// onFocus event happens.
111118
this.select()
112-
windowActions.setFindbarSelected(this.frame, false)
119+
windowActions.setFindbarSelected(this.props.activeFrameKey, false)
113120
}
114-
if (!this.props.findDetail || !prevProps.findDetail ||
115-
this.props.findDetail.get('searchString') !== prevProps.findDetail.get('searchString') ||
116-
this.props.findDetail.get('caseSensitivity') !== prevProps.findDetail.get('caseSensitivity')) {
121+
122+
if (this.props.searchString !== prevProps.searchString || this.props.isCaseSensitive !== prevProps.isCaseSensitive) {
117123
// Redo search if details have changed
118124
this.onFindFirst()
119125
}
@@ -123,7 +129,7 @@ class FindBar extends ImmutableComponent {
123129
switch (e.keyCode) {
124130
case keyCodes.ESC:
125131
e.preventDefault()
126-
this.props.onFindHide()
132+
this.onFindHide()
127133
break
128134
case keyCodes.ENTER:
129135
e.preventDefault()
@@ -141,81 +147,86 @@ class FindBar extends ImmutableComponent {
141147
}
142148

143149
onBlur (e) {
144-
windowActions.setFindbarSelected(this.frame, false)
150+
windowActions.setFindbarSelected(this.props.activeFrameKey, false)
145151
}
146152

147153
onClear () {
148154
this.searchInput.value = ''
149-
windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
155+
windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
150156
searchString: '',
151-
caseSensitivity: this.isCaseSensitive
157+
caseSensitivity: this.props.isCaseSensitive
152158
}))
153159
this.focus()
154160
}
155161

156-
get numberOfMatches () {
157-
if (!this.props.findDetail || this.props.findDetail.get('numberOfMatches') === undefined) {
158-
return -1
159-
}
160-
return this.props.findDetail.get('numberOfMatches')
162+
onFindHide () {
163+
frameStateUtil.onFindBarHide(this.props.activeFrameKey)
161164
}
162165

163-
get activeMatchOrdinal () {
164-
if (!this.props.findDetail || this.props.findDetail.get('activeMatchOrdinal') === undefined) {
165-
return -1
166+
onFind (searchString, caseSensitivity, forward, findNext) {
167+
webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
168+
if (!findNext) {
169+
windowActions.setFindDetail(this.props.activeFrameKey, Immutable.fromJS({
170+
internalFindStatePresent: true
171+
}))
166172
}
167-
return this.props.findDetail.get('activeMatchOrdinal') || -1
168-
}
169-
170-
get isCaseSensitive () {
171-
if (!this.props.findDetail) {
172-
return false
173-
}
174-
return this.props.findDetail.get('caseSensitivity')
175-
}
176-
177-
get searchString () {
178-
if (!this.props.findDetail) {
179-
return ''
180-
}
181-
return this.props.findDetail.get('searchString')
182-
}
183-
184-
get backgroundColor () {
185-
return this.props.paintTabs && (this.props.themeColor || this.props.computedThemeColor)
186-
}
187-
188-
get textColor () {
189-
return getTextColorForBackground(this.backgroundColor)
190173
}
191174

192-
render () {
193-
let findMatchText
194-
if (this.numberOfMatches !== -1 && this.activeMatchOrdinal !== -1 && this.searchString) {
175+
get findTextMatch () {
176+
if (this.props.numberOfMatches !== -1 && this.props.activeMatchOrdinal !== -1 && this.props.searchString) {
195177
const l10nArgs = {
196-
activeMatchOrdinal: this.activeMatchOrdinal,
197-
numberOfMatches: this.numberOfMatches
178+
activeMatchOrdinal: this.props.activeMatchOrdinal,
179+
numberOfMatches: this.props.numberOfMatches
198180
}
199-
findMatchText = <div className='foundResults'
181+
182+
return <div className='foundResults'
200183
data-l10n-args={JSON.stringify(l10nArgs)}
201184
data-l10n-id='findResults' />
202-
} else if (this.numberOfMatches !== -1 && this.searchString) {
185+
} else if (this.props.numberOfMatches !== -1 && this.props.searchString) {
203186
const l10nArgs = {
204-
activeMatchOrdinal: this.activeMatchOrdinal,
205-
numberOfMatches: this.numberOfMatches
187+
activeMatchOrdinal: this.props.activeMatchOrdinal,
188+
numberOfMatches: this.props.numberOfMatches
206189
}
207-
findMatchText = <div className='foundResults'
190+
191+
return <div className='foundResults'
208192
data-l10n-args={JSON.stringify(l10nArgs)}
209193
data-l10n-id='findResultMatches' />
210194
}
211195

212-
const backgroundColor = this.backgroundColor
196+
return null
197+
}
198+
199+
mergeProps (state, ownProps) {
200+
const currentWindow = state.get('currentWindow')
201+
const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
202+
const activeFrameKey = activeFrame.get('key')
203+
204+
const props = {}
205+
// used in renderer
206+
props.backgroundColor = getSetting(settings.PAINT_TABS) &&
207+
(activeFrame.get('themeColor') || activeFrame.get('computedThemeColor'))
208+
props.textColor = getTextColorForBackground(props.backgroundColor)
209+
props.numberOfMatches = activeFrame.getIn(['findDetail', 'numberOfMatches'], -1)
210+
props.activeMatchOrdinal = activeFrame.getIn(['findDetail', 'activeMatchOrdinal'], -1)
211+
props.searchString = activeFrame.getIn(['findDetail', 'searchString'], '')
212+
props.isCaseSensitive = activeFrame.getIn(['findDetail', 'caseSensitivity'], false)
213+
214+
// used in other functions
215+
props.activeFrameKey = activeFrameKey
216+
props.isSelected = activeFrame.get('findbarSelected', false)
217+
props.internalFindStatePresent = activeFrame.getIn(['findDetail', 'internalFindStatePresent'])
218+
props.isPrivate = activeFrame.get('isPrivate', false)
219+
220+
return props
221+
}
222+
223+
render () {
213224
let findBarStyle = {}
214225
let findBarTextStyle = {}
215226

216-
if (backgroundColor) {
227+
if (this.props.backgroundColor) {
217228
findBarStyle = {
218-
background: backgroundColor,
229+
background: this.props.backgroundColor,
219230
color: this.textColor
220231
}
221232
findBarTextStyle = {
@@ -227,42 +238,55 @@ class FindBar extends ImmutableComponent {
227238
<div className='searchContainer'>
228239
<div className='searchStringContainer'>
229240
<span className='searchStringContainerIcon fa fa-search' />
230-
<input type='text'
241+
<input
242+
ref={(node) => { this.searchInput = node }}
243+
type='text'
231244
spellCheck='false'
232245
onContextMenu={this.onContextMenu}
233-
ref={(node) => { this.searchInput = node }}
234246
onFocus={this.onInputFocus}
235247
onKeyDown={this.onKeyDown}
236-
onInput={this.onInput} />
237-
<span className='searchStringContainerIcon fa fa-times findClear'
238-
onClick={this.onClear} />
248+
onInput={this.onInput}
249+
/>
250+
<span
251+
className='searchStringContainerIcon fa fa-times findClear'
252+
onClick={this.onClear}
253+
/>
239254
</div>
240-
<span className='findMatchText'>{findMatchText}</span>
241-
<BrowserButton iconOnly
255+
<span className='findMatchText'>{this.findTextMatch}</span>
256+
<BrowserButton
257+
iconOnly
242258
iconClass={globalStyles.appIcons.findPrev}
243259
inlineStyles={findBarStyle}
244260
testId='findBarPrevButton'
245-
disabled={this.numberOfMatches <= 0}
261+
disabled={this.props.numberOfMatches <= 0}
246262
onClick={this.onFindPrev}
247263
/>
248-
<BrowserButton iconOnly
264+
<BrowserButton
265+
iconOnly
249266
iconClass={globalStyles.appIcons.findNext}
250267
inlineStyles={findBarStyle}
251268
testId='findBarNextButton'
252-
disabled={this.numberOfMatches <= 0}
269+
disabled={this.props.numberOfMatches <= 0}
253270
onClick={this.onFindNext}
254271
/>
255272
<SwitchControl
256273
id='caseSensitivityCheckbox'
257-
checkedOn={this.isCaseSensitive}
258-
onClick={this.onCaseSensitivityChange} />
259-
<label htmlFor='caseSensitivityCheckbox' data-l10n-id='caseSensitivity' style={findBarTextStyle} />
274+
checkedOn={this.props.isCaseSensitive}
275+
onClick={this.onCaseSensitivityChange}
276+
/>
277+
<label
278+
htmlFor='caseSensitivityCheckbox'
279+
data-l10n-id='caseSensitivity'
280+
style={findBarTextStyle}
281+
/>
260282
</div>
261-
<span className='closeButton'
283+
<span
284+
className='closeButton'
262285
style={findBarTextStyle}
263-
onClick={this.props.onFindHide}>+</span>
286+
onClick={this.onFindHide}
287+
>+</span>
264288
</div>
265289
}
266290
}
267291

268-
module.exports = FindBar
292+
module.exports = ReduxComponent.connect(FindBar)

0 commit comments

Comments
 (0)