@@ -123,11 +123,96 @@ export class ReplaceInput extends Widget {
123123 this . inputValidationErrorBackground = options . inputValidationErrorBackground ;
124124 this . inputValidationErrorForeground = options . inputValidationErrorForeground ;
125125
126+ const history = options . history || [ ] ;
126127 const flexibleHeight = ! ! options . flexibleHeight ;
127128 const flexibleWidth = ! ! options . flexibleWidth ;
128129 const flexibleMaxHeight = options . flexibleMaxHeight ;
129130
130- this . buildDomNode ( options . history || [ ] , flexibleHeight , flexibleWidth , flexibleMaxHeight ) ;
131+ this . domNode = document . createElement ( 'div' ) ;
132+ dom . addClass ( this . domNode , 'monaco-findInput' ) ;
133+
134+ this . inputBox = this . _register ( new HistoryInputBox ( this . domNode , this . contextViewProvider , {
135+ ariaLabel : this . label || '' ,
136+ placeholder : this . placeholder || '' ,
137+ validationOptions : {
138+ validation : this . validation
139+ } ,
140+ inputBackground : this . inputBackground ,
141+ inputForeground : this . inputForeground ,
142+ inputBorder : this . inputBorder ,
143+ inputValidationInfoBackground : this . inputValidationInfoBackground ,
144+ inputValidationInfoForeground : this . inputValidationInfoForeground ,
145+ inputValidationInfoBorder : this . inputValidationInfoBorder ,
146+ inputValidationWarningBackground : this . inputValidationWarningBackground ,
147+ inputValidationWarningForeground : this . inputValidationWarningForeground ,
148+ inputValidationWarningBorder : this . inputValidationWarningBorder ,
149+ inputValidationErrorBackground : this . inputValidationErrorBackground ,
150+ inputValidationErrorForeground : this . inputValidationErrorForeground ,
151+ inputValidationErrorBorder : this . inputValidationErrorBorder ,
152+ history,
153+ flexibleHeight,
154+ flexibleWidth,
155+ flexibleMaxHeight
156+ } ) ) ;
157+
158+ this . preserveCase = this . _register ( new PreserveCaseCheckbox ( {
159+ appendTitle : '' ,
160+ isChecked : false ,
161+ inputActiveOptionBorder : this . inputActiveOptionBorder ,
162+ inputActiveOptionBackground : this . inputActiveOptionBackground ,
163+ } ) ) ;
164+ this . _register ( this . preserveCase . onChange ( viaKeyboard => {
165+ this . _onDidOptionChange . fire ( viaKeyboard ) ;
166+ if ( ! viaKeyboard && this . fixFocusOnOptionClickEnabled ) {
167+ this . inputBox . focus ( ) ;
168+ }
169+ this . validate ( ) ;
170+ } ) ) ;
171+ this . _register ( this . preserveCase . onKeyDown ( e => {
172+ this . _onPreserveCaseKeyDown . fire ( e ) ;
173+ } ) ) ;
174+
175+ if ( this . _showOptionButtons ) {
176+ this . cachedOptionsWidth = this . preserveCase . width ( ) ;
177+ } else {
178+ this . cachedOptionsWidth = 0 ;
179+ }
180+
181+ // Arrow-Key support to navigate between options
182+ let indexes = [ this . preserveCase . domNode ] ;
183+ this . onkeydown ( this . domNode , ( event : IKeyboardEvent ) => {
184+ if ( event . equals ( KeyCode . LeftArrow ) || event . equals ( KeyCode . RightArrow ) || event . equals ( KeyCode . Escape ) ) {
185+ let index = indexes . indexOf ( < HTMLElement > document . activeElement ) ;
186+ if ( index >= 0 ) {
187+ let newIndex : number = - 1 ;
188+ if ( event . equals ( KeyCode . RightArrow ) ) {
189+ newIndex = ( index + 1 ) % indexes . length ;
190+ } else if ( event . equals ( KeyCode . LeftArrow ) ) {
191+ if ( index === 0 ) {
192+ newIndex = indexes . length - 1 ;
193+ } else {
194+ newIndex = index - 1 ;
195+ }
196+ }
197+
198+ if ( event . equals ( KeyCode . Escape ) ) {
199+ indexes [ index ] . blur ( ) ;
200+ } else if ( newIndex >= 0 ) {
201+ indexes [ newIndex ] . focus ( ) ;
202+ }
203+
204+ dom . EventHelper . stop ( event , true ) ;
205+ }
206+ }
207+ } ) ;
208+
209+
210+ let controls = document . createElement ( 'div' ) ;
211+ controls . className = 'controls' ;
212+ controls . style . display = this . _showOptionButtons ? 'block' : 'none' ;
213+ controls . appendChild ( this . preserveCase . domNode ) ;
214+
215+ this . domNode . appendChild ( controls ) ;
131216
132217 if ( parent ) {
133218 parent . appendChild ( this . domNode ) ;
@@ -256,94 +341,6 @@ export class ReplaceInput extends Widget {
256341 dom . addClass ( this . domNode , 'highlight-' + ( this . _lastHighlightFindOptions ) ) ;
257342 }
258343
259- private buildDomNode ( history : string [ ] , flexibleHeight : boolean , flexibleWidth : boolean , flexibleMaxHeight : number | undefined ) : void {
260- this . domNode = document . createElement ( 'div' ) ;
261- dom . addClass ( this . domNode , 'monaco-findInput' ) ;
262-
263- this . inputBox = this . _register ( new HistoryInputBox ( this . domNode , this . contextViewProvider , {
264- ariaLabel : this . label || '' ,
265- placeholder : this . placeholder || '' ,
266- validationOptions : {
267- validation : this . validation
268- } ,
269- inputBackground : this . inputBackground ,
270- inputForeground : this . inputForeground ,
271- inputBorder : this . inputBorder ,
272- inputValidationInfoBackground : this . inputValidationInfoBackground ,
273- inputValidationInfoForeground : this . inputValidationInfoForeground ,
274- inputValidationInfoBorder : this . inputValidationInfoBorder ,
275- inputValidationWarningBackground : this . inputValidationWarningBackground ,
276- inputValidationWarningForeground : this . inputValidationWarningForeground ,
277- inputValidationWarningBorder : this . inputValidationWarningBorder ,
278- inputValidationErrorBackground : this . inputValidationErrorBackground ,
279- inputValidationErrorForeground : this . inputValidationErrorForeground ,
280- inputValidationErrorBorder : this . inputValidationErrorBorder ,
281- history,
282- flexibleHeight,
283- flexibleWidth,
284- flexibleMaxHeight
285- } ) ) ;
286-
287- this . preserveCase = this . _register ( new PreserveCaseCheckbox ( {
288- appendTitle : '' ,
289- isChecked : false ,
290- inputActiveOptionBorder : this . inputActiveOptionBorder ,
291- inputActiveOptionBackground : this . inputActiveOptionBackground ,
292- } ) ) ;
293- this . _register ( this . preserveCase . onChange ( viaKeyboard => {
294- this . _onDidOptionChange . fire ( viaKeyboard ) ;
295- if ( ! viaKeyboard && this . fixFocusOnOptionClickEnabled ) {
296- this . inputBox . focus ( ) ;
297- }
298- this . validate ( ) ;
299- } ) ) ;
300- this . _register ( this . preserveCase . onKeyDown ( e => {
301- this . _onPreserveCaseKeyDown . fire ( e ) ;
302- } ) ) ;
303-
304- if ( this . _showOptionButtons ) {
305- this . cachedOptionsWidth = this . preserveCase . width ( ) ;
306- } else {
307- this . cachedOptionsWidth = 0 ;
308- }
309-
310- // Arrow-Key support to navigate between options
311- let indexes = [ this . preserveCase . domNode ] ;
312- this . onkeydown ( this . domNode , ( event : IKeyboardEvent ) => {
313- if ( event . equals ( KeyCode . LeftArrow ) || event . equals ( KeyCode . RightArrow ) || event . equals ( KeyCode . Escape ) ) {
314- let index = indexes . indexOf ( < HTMLElement > document . activeElement ) ;
315- if ( index >= 0 ) {
316- let newIndex : number = - 1 ;
317- if ( event . equals ( KeyCode . RightArrow ) ) {
318- newIndex = ( index + 1 ) % indexes . length ;
319- } else if ( event . equals ( KeyCode . LeftArrow ) ) {
320- if ( index === 0 ) {
321- newIndex = indexes . length - 1 ;
322- } else {
323- newIndex = index - 1 ;
324- }
325- }
326-
327- if ( event . equals ( KeyCode . Escape ) ) {
328- indexes [ index ] . blur ( ) ;
329- } else if ( newIndex >= 0 ) {
330- indexes [ newIndex ] . focus ( ) ;
331- }
332-
333- dom . EventHelper . stop ( event , true ) ;
334- }
335- }
336- } ) ;
337-
338-
339- let controls = document . createElement ( 'div' ) ;
340- controls . className = 'controls' ;
341- controls . style . display = this . _showOptionButtons ? 'block' : 'none' ;
342- controls . appendChild ( this . preserveCase . domNode ) ;
343-
344- this . domNode . appendChild ( controls ) ;
345- }
346-
347344 public validate ( ) : void {
348345 if ( this . inputBox ) {
349346 this . inputBox . validate ( ) ;
0 commit comments