@@ -4,6 +4,17 @@ export type DemoState = {
44 dataset : DatasetKey ;
55 contextLines : number ;
66 height : number ;
7+ splitView : boolean ;
8+ showDiffOnly : boolean ;
9+ hideLineNumbers : boolean ;
10+ useCompatApi : boolean ;
11+ enableRenderContent : boolean ;
12+ enableHighlight : boolean ;
13+ compareMethod : 'LINES' | 'WORDS' | 'CHARS' ;
14+ disableWordDiff : boolean ;
15+ useDarkTheme : boolean ;
16+ linesOffset : number ;
17+ useCustomFoldRenderer : boolean ;
718} ;
819
920type PlaygroundControlsProps = {
@@ -82,6 +93,184 @@ export default function PlaygroundControls(props: PlaygroundControlsProps) {
8293 />
8394 </ div >
8495
96+ < div className = "control-panel__section" >
97+ < label className = "toggle-row" htmlFor = "splitView" >
98+ < input
99+ id = "splitView"
100+ type = "checkbox"
101+ checked = { value . splitView }
102+ onChange = { ( event ) =>
103+ onChange ( {
104+ ...value ,
105+ splitView : event . target . checked ,
106+ } )
107+ }
108+ />
109+ < span > Split view (`splitView`)</ span >
110+ </ label >
111+
112+ < label className = "toggle-row" htmlFor = "showDiffOnly" >
113+ < input
114+ id = "showDiffOnly"
115+ type = "checkbox"
116+ checked = { value . showDiffOnly }
117+ onChange = { ( event ) =>
118+ onChange ( {
119+ ...value ,
120+ showDiffOnly : event . target . checked ,
121+ } )
122+ }
123+ />
124+ < span > Show diff only (`showDiffOnly`)</ span >
125+ </ label >
126+
127+ < label className = "toggle-row" htmlFor = "hideLineNumbers" >
128+ < input
129+ id = "hideLineNumbers"
130+ type = "checkbox"
131+ checked = { value . hideLineNumbers }
132+ onChange = { ( event ) =>
133+ onChange ( {
134+ ...value ,
135+ hideLineNumbers : event . target . checked ,
136+ } )
137+ }
138+ />
139+ < span > Hide line numbers (`hideLineNumbers`)</ span >
140+ </ label >
141+
142+ < label className = "toggle-row" htmlFor = "useCompatApi" >
143+ < input
144+ id = "useCompatApi"
145+ type = "checkbox"
146+ checked = { value . useCompatApi }
147+ onChange = { ( event ) =>
148+ onChange ( {
149+ ...value ,
150+ useCompatApi : event . target . checked ,
151+ } )
152+ }
153+ />
154+ < span > Use legacy `oldValue/newValue` props</ span >
155+ </ label >
156+
157+ < label className = "toggle-row" htmlFor = "enableRenderContent" >
158+ < input
159+ id = "enableRenderContent"
160+ type = "checkbox"
161+ checked = { value . enableRenderContent }
162+ onChange = { ( event ) =>
163+ onChange ( {
164+ ...value ,
165+ enableRenderContent : event . target . checked ,
166+ } )
167+ }
168+ />
169+ < span > Enable `renderContent` formatter</ span >
170+ </ label >
171+
172+ < label className = "toggle-row" htmlFor = "enableHighlight" >
173+ < input
174+ id = "enableHighlight"
175+ type = "checkbox"
176+ checked = { value . enableHighlight }
177+ onChange = { ( event ) =>
178+ onChange ( {
179+ ...value ,
180+ enableHighlight : event . target . checked ,
181+ } )
182+ }
183+ />
184+ < span > Enable `highlightLines` preset</ span >
185+ </ label >
186+ </ div >
187+
188+
189+ < div className = "control-panel__section" >
190+ < label className = "field-label" htmlFor = "compareMethod" >
191+ Compare method
192+ </ label >
193+ < select
194+ id = "compareMethod"
195+ className = "field-input"
196+ value = { value . compareMethod }
197+ onChange = { ( event ) =>
198+ onChange ( {
199+ ...value ,
200+ compareMethod : event . target . value as DemoState [ 'compareMethod' ] ,
201+ } )
202+ }
203+ >
204+ < option value = "LINES" > LINES</ option >
205+ < option value = "WORDS" > WORDS</ option >
206+ { /* <option value="CHARS">CHARS</option> */ }
207+ </ select >
208+
209+ < label className = "toggle-row" htmlFor = "disableWordDiff" >
210+ < input
211+ id = "disableWordDiff"
212+ type = "checkbox"
213+ checked = { value . disableWordDiff }
214+ onChange = { ( event ) =>
215+ onChange ( {
216+ ...value ,
217+ disableWordDiff : event . target . checked ,
218+ } )
219+ }
220+ />
221+ < span > Disable word diff (`disableWordDiff`)</ span >
222+ </ label >
223+
224+ < label className = "toggle-row" htmlFor = "useDarkTheme" >
225+ < input
226+ id = "useDarkTheme"
227+ type = "checkbox"
228+ checked = { value . useDarkTheme }
229+ onChange = { ( event ) =>
230+ onChange ( {
231+ ...value ,
232+ useDarkTheme : event . target . checked ,
233+ } )
234+ }
235+ />
236+ < span > Use dark theme (`useDarkTheme`)</ span >
237+ </ label >
238+
239+ < label className = "toggle-row" htmlFor = "useCustomFoldRenderer" >
240+ < input
241+ id = "useCustomFoldRenderer"
242+ type = "checkbox"
243+ checked = { value . useCustomFoldRenderer }
244+ onChange = { ( event ) =>
245+ onChange ( {
246+ ...value ,
247+ useCustomFoldRenderer : event . target . checked ,
248+ } )
249+ }
250+ />
251+ < span > Custom fold renderer (`codeFoldMessageRenderer`)</ span >
252+ </ label >
253+
254+ < label className = "field-label" htmlFor = "linesOffset" >
255+ Line offset: { value . linesOffset }
256+ </ label >
257+ < input
258+ id = "linesOffset"
259+ className = "field-range"
260+ type = "range"
261+ min = { 0 }
262+ max = { 200 }
263+ step = { 1 }
264+ value = { value . linesOffset }
265+ onChange = { ( event ) =>
266+ onChange ( {
267+ ...value ,
268+ linesOffset : Number ( event . target . value ) ,
269+ } )
270+ }
271+ />
272+ </ div >
273+
85274 < button type = "button" className = "button button--primary button--block" onClick = { onRunStressTest } >
86275 Run 100k stress test
87276 </ button >
0 commit comments