@@ -6,28 +6,30 @@ const React = require('react')
6
6
const Immutable = require ( 'immutable' )
7
7
8
8
// Components
9
- const ImmutableComponent = require ( '../immutableComponent ' )
9
+ const ReduxComponent = require ( '../reduxComponent ' )
10
10
const BrowserButton = require ( '../common/browserButton' )
11
11
const SwitchControl = require ( '../common/switchControl' )
12
12
13
13
// Constants
14
14
const keyCodes = require ( '../../../common/constants/keyCodes' )
15
+ const settings = require ( '../../../../js/constants/settings' )
15
16
16
17
// Actions
17
18
const windowActions = require ( '../../../../js/actions/windowActions' )
18
-
19
- // Stores
20
- const windowStore = require ( '../../../../js/stores/windowStore' )
19
+ const webviewActions = require ( '../../../../js/actions/webviewActions' )
21
20
22
21
// Utils
23
22
const contextMenus = require ( '../../../../js/contextMenus' )
24
23
const { getTextColorForBackground} = require ( '../../../../js/lib/color' )
24
+ const frameStateUtil = require ( '../../../../js/state/frameStateUtil' )
25
+ const { getSetting} = require ( '../../../../js/settings' )
25
26
27
+ // Styles
26
28
const globalStyles = require ( '../styles/global' )
27
29
28
- class FindBar extends ImmutableComponent {
29
- constructor ( ) {
30
- super ( )
30
+ class FindBar extends React . Component {
31
+ constructor ( props ) {
32
+ super ( props )
31
33
this . onBlur = this . onBlur . bind ( this )
32
34
this . onInputFocus = this . onInputFocus . bind ( this )
33
35
this . onClear = this . onClear . bind ( this )
@@ -37,46 +39,42 @@ class FindBar extends ImmutableComponent {
37
39
this . onFindPrev = this . onFindPrev . bind ( this )
38
40
this . onFindNext = this . onFindNext . bind ( this )
39
41
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 )
45
44
}
46
45
47
46
onInput ( e ) {
48
- windowActions . setFindDetail ( this . props . frameKey , Immutable . fromJS ( {
47
+ windowActions . setFindDetail ( this . props . activeFrameKey , Immutable . fromJS ( {
49
48
searchString : e . target . value ,
50
- caseSensitivity : this . isCaseSensitive
49
+ caseSensitivity : this . props . isCaseSensitive
51
50
} ) )
52
51
}
53
52
54
53
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
58
57
} ) )
59
58
}
60
59
61
60
onFindFirst ( ) {
62
- this . props . onFind ( this . searchString , this . isCaseSensitive , true , false )
61
+ this . onFind ( this . props . searchString , this . props . isCaseSensitive , true , false )
63
62
}
64
63
65
64
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 )
67
66
}
68
67
69
68
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 )
71
70
}
72
71
73
72
onContextMenu ( e ) {
74
73
// Without this timeout selection is not shown when right clicking in
75
74
// a word so the word replacement is kind of a surprise. This is because
76
75
// our context menus are modal at the moment. If we fix that we can
77
76
// remove this timeout.
78
- setTimeout ( ( ) =>
79
- contextMenus . onFindBarContextMenu ( e ) , 10 )
77
+ setTimeout ( ( ) => contextMenus . onFindBarContextMenu ( e ) , 10 )
80
78
}
81
79
82
80
/**
@@ -91,29 +89,37 @@ class FindBar extends ImmutableComponent {
91
89
}
92
90
93
91
componentDidMount ( ) {
94
- this . searchInput . value = this . searchString
92
+ this . searchInput . value = this . props . searchString
95
93
this . focus ( )
96
94
this . select ( )
97
- windowActions . setFindbarSelected ( this . frame , false )
95
+ windowActions . setFindbarSelected ( this . props . activeFrameKey , false )
98
96
}
99
97
100
98
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
+ } ) )
103
110
}
104
111
}
105
112
106
113
componentDidUpdate ( prevProps ) {
107
- if ( this . props . selected && ! prevProps . selected ) {
114
+ if ( this . props . isSelected && ! prevProps . isSelected ) {
108
115
this . focus ( )
109
116
// Findbar might already be focused, so make sure select happens even if no
110
117
// onFocus event happens.
111
118
this . select ( )
112
- windowActions . setFindbarSelected ( this . frame , false )
119
+ windowActions . setFindbarSelected ( this . props . activeFrameKey , false )
113
120
}
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 ) {
117
123
// Redo search if details have changed
118
124
this . onFindFirst ( )
119
125
}
@@ -123,7 +129,7 @@ class FindBar extends ImmutableComponent {
123
129
switch ( e . keyCode ) {
124
130
case keyCodes . ESC :
125
131
e . preventDefault ( )
126
- this . props . onFindHide ( )
132
+ this . onFindHide ( )
127
133
break
128
134
case keyCodes . ENTER :
129
135
e . preventDefault ( )
@@ -141,81 +147,86 @@ class FindBar extends ImmutableComponent {
141
147
}
142
148
143
149
onBlur ( e ) {
144
- windowActions . setFindbarSelected ( this . frame , false )
150
+ windowActions . setFindbarSelected ( this . props . activeFrameKey , false )
145
151
}
146
152
147
153
onClear ( ) {
148
154
this . searchInput . value = ''
149
- windowActions . setFindDetail ( this . props . frameKey , Immutable . fromJS ( {
155
+ windowActions . setFindDetail ( this . props . activeFrameKey , Immutable . fromJS ( {
150
156
searchString : '' ,
151
- caseSensitivity : this . isCaseSensitive
157
+ caseSensitivity : this . props . isCaseSensitive
152
158
} ) )
153
159
this . focus ( )
154
160
}
155
161
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 )
161
164
}
162
165
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
+ } ) )
166
172
}
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 )
190
173
}
191
174
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 ) {
195
177
const l10nArgs = {
196
- activeMatchOrdinal : this . activeMatchOrdinal ,
197
- numberOfMatches : this . numberOfMatches
178
+ activeMatchOrdinal : this . props . activeMatchOrdinal ,
179
+ numberOfMatches : this . props . numberOfMatches
198
180
}
199
- findMatchText = < div className = 'foundResults'
181
+
182
+ return < div className = 'foundResults'
200
183
data-l10n-args = { JSON . stringify ( l10nArgs ) }
201
184
data-l10n-id = 'findResults' />
202
- } else if ( this . numberOfMatches !== - 1 && this . searchString ) {
185
+ } else if ( this . props . numberOfMatches !== - 1 && this . props . searchString ) {
203
186
const l10nArgs = {
204
- activeMatchOrdinal : this . activeMatchOrdinal ,
205
- numberOfMatches : this . numberOfMatches
187
+ activeMatchOrdinal : this . props . activeMatchOrdinal ,
188
+ numberOfMatches : this . props . numberOfMatches
206
189
}
207
- findMatchText = < div className = 'foundResults'
190
+
191
+ return < div className = 'foundResults'
208
192
data-l10n-args = { JSON . stringify ( l10nArgs ) }
209
193
data-l10n-id = 'findResultMatches' />
210
194
}
211
195
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 ( ) {
213
224
let findBarStyle = { }
214
225
let findBarTextStyle = { }
215
226
216
- if ( backgroundColor ) {
227
+ if ( this . props . backgroundColor ) {
217
228
findBarStyle = {
218
- background : backgroundColor ,
229
+ background : this . props . backgroundColor ,
219
230
color : this . textColor
220
231
}
221
232
findBarTextStyle = {
@@ -227,42 +238,55 @@ class FindBar extends ImmutableComponent {
227
238
< div className = 'searchContainer' >
228
239
< div className = 'searchStringContainer' >
229
240
< span className = 'searchStringContainerIcon fa fa-search' />
230
- < input type = 'text'
241
+ < input
242
+ ref = { ( node ) => { this . searchInput = node } }
243
+ type = 'text'
231
244
spellCheck = 'false'
232
245
onContextMenu = { this . onContextMenu }
233
- ref = { ( node ) => { this . searchInput = node } }
234
246
onFocus = { this . onInputFocus }
235
247
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
+ />
239
254
</ div >
240
- < span className = 'findMatchText' > { findMatchText } </ span >
241
- < BrowserButton iconOnly
255
+ < span className = 'findMatchText' > { this . findTextMatch } </ span >
256
+ < BrowserButton
257
+ iconOnly
242
258
iconClass = { globalStyles . appIcons . findPrev }
243
259
inlineStyles = { findBarStyle }
244
260
testId = 'findBarPrevButton'
245
- disabled = { this . numberOfMatches <= 0 }
261
+ disabled = { this . props . numberOfMatches <= 0 }
246
262
onClick = { this . onFindPrev }
247
263
/>
248
- < BrowserButton iconOnly
264
+ < BrowserButton
265
+ iconOnly
249
266
iconClass = { globalStyles . appIcons . findNext }
250
267
inlineStyles = { findBarStyle }
251
268
testId = 'findBarNextButton'
252
- disabled = { this . numberOfMatches <= 0 }
269
+ disabled = { this . props . numberOfMatches <= 0 }
253
270
onClick = { this . onFindNext }
254
271
/>
255
272
< SwitchControl
256
273
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
+ />
260
282
</ div >
261
- < span className = 'closeButton'
283
+ < span
284
+ className = 'closeButton'
262
285
style = { findBarTextStyle }
263
- onClick = { this . props . onFindHide } > +</ span >
286
+ onClick = { this . onFindHide }
287
+ > +</ span >
264
288
</ div >
265
289
}
266
290
}
267
291
268
- module . exports = FindBar
292
+ module . exports = ReduxComponent . connect ( FindBar )
0 commit comments