@lvce-editor/settings-view 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/settingsViewWorkerMain.js +238 -93
- package/package.json +1 -1
|
@@ -989,29 +989,36 @@ const create$1 = (id, uri, x, y, width, height) => {
|
|
|
989
989
|
preferences: {},
|
|
990
990
|
inputSource: 0,
|
|
991
991
|
scrollOffset: 0,
|
|
992
|
-
filteredItemsCount: 0
|
|
992
|
+
filteredItemsCount: 0,
|
|
993
|
+
history: [],
|
|
994
|
+
modifiedSettings: {}
|
|
993
995
|
};
|
|
994
996
|
set$1(id, state, state);
|
|
995
997
|
};
|
|
996
998
|
|
|
997
|
-
const isEqual$
|
|
999
|
+
const isEqual$3 = (oldState, newState) => {
|
|
998
1000
|
return oldState.focus === newState.focus;
|
|
999
1001
|
};
|
|
1000
1002
|
|
|
1003
|
+
const isEqual$2 = (oldState, newState) => {
|
|
1004
|
+
return oldState.filteredItems === newState.filteredItems;
|
|
1005
|
+
};
|
|
1006
|
+
|
|
1001
1007
|
const isEqual$1 = (oldState, newState) => {
|
|
1002
|
-
return oldState === newState;
|
|
1008
|
+
return oldState.filteredItems === newState.filteredItems;
|
|
1003
1009
|
};
|
|
1004
1010
|
|
|
1005
1011
|
const RenderItems = 1;
|
|
1006
1012
|
const RenderFocus = 2;
|
|
1007
1013
|
const RenderValue = 3;
|
|
1014
|
+
const RenderSettingValues = 10;
|
|
1008
1015
|
|
|
1009
1016
|
const isEqual = (oldState, newState) => {
|
|
1010
1017
|
return newState.inputSource === User || oldState.searchValue === newState.searchValue;
|
|
1011
1018
|
};
|
|
1012
1019
|
|
|
1013
|
-
const modules = [isEqual$
|
|
1014
|
-
const numbers = [RenderFocus, RenderItems, RenderValue];
|
|
1020
|
+
const modules = [isEqual$3, isEqual$2, isEqual, isEqual$1];
|
|
1021
|
+
const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues];
|
|
1015
1022
|
|
|
1016
1023
|
const diff = (oldState, newState) => {
|
|
1017
1024
|
const diffResult = [];
|
|
@@ -1073,7 +1080,7 @@ const handleClickTab = (state, name) => {
|
|
|
1073
1080
|
};
|
|
1074
1081
|
};
|
|
1075
1082
|
|
|
1076
|
-
const handleInput = (state, value) => {
|
|
1083
|
+
const handleInput = (state, value, inputSource = User) => {
|
|
1077
1084
|
const {
|
|
1078
1085
|
items,
|
|
1079
1086
|
tabs,
|
|
@@ -1084,7 +1091,29 @@ const handleInput = (state, value) => {
|
|
|
1084
1091
|
...state,
|
|
1085
1092
|
searchValue: value,
|
|
1086
1093
|
filteredItems,
|
|
1087
|
-
inputSource
|
|
1094
|
+
inputSource
|
|
1095
|
+
};
|
|
1096
|
+
};
|
|
1097
|
+
|
|
1098
|
+
const handleSettingChecked = (state, name, value) => {
|
|
1099
|
+
// TODO update value
|
|
1100
|
+
return {
|
|
1101
|
+
...state
|
|
1102
|
+
};
|
|
1103
|
+
};
|
|
1104
|
+
|
|
1105
|
+
const handleSettingInput = (state, name, value, inputSource = User) => {
|
|
1106
|
+
// TODO update value
|
|
1107
|
+
return {
|
|
1108
|
+
...state,
|
|
1109
|
+
inputSource
|
|
1110
|
+
};
|
|
1111
|
+
};
|
|
1112
|
+
|
|
1113
|
+
const handleSettingSelect = (state, name, value) => {
|
|
1114
|
+
// TODO update value
|
|
1115
|
+
return {
|
|
1116
|
+
...state
|
|
1088
1117
|
};
|
|
1089
1118
|
};
|
|
1090
1119
|
|
|
@@ -1141,8 +1170,9 @@ const FontSizeDescription = 'The font size of the editor';
|
|
|
1141
1170
|
const FormatOnSave = 'Format on Save';
|
|
1142
1171
|
const FormatOnSaveDescription = 'Format code when saving';
|
|
1143
1172
|
const NumberValue = 'number value';
|
|
1173
|
+
const StringValue = 'string value';
|
|
1144
1174
|
const SearchSettings = 'Search Settings';
|
|
1145
|
-
const SettingsContent = 'Settings Content';
|
|
1175
|
+
const SettingsContent$1 = 'Settings Content';
|
|
1146
1176
|
const SidebarPosition = 'Sidebar Position';
|
|
1147
1177
|
const SidebarPositionDescription = 'The position of the sidebar';
|
|
1148
1178
|
const Telemetry = 'Telemetry';
|
|
@@ -1156,6 +1186,7 @@ const WindowSizeDescription = 'The default window size';
|
|
|
1156
1186
|
const WindowTitle = 'Window Title';
|
|
1157
1187
|
const WindowTitleDescription = 'The title shown in the window';
|
|
1158
1188
|
const NoSettingsMatching = 'No settings matching "{PH1}" found';
|
|
1189
|
+
const MatchingSettings = '{PH1} matching settings';
|
|
1159
1190
|
|
|
1160
1191
|
// Text Editor Settings
|
|
1161
1192
|
const WordWrap = 'Word Wrap';
|
|
@@ -1443,11 +1474,14 @@ const formatOnSaveDescription = () => {
|
|
|
1443
1474
|
const numberValue = () => {
|
|
1444
1475
|
return i18nString(NumberValue);
|
|
1445
1476
|
};
|
|
1477
|
+
const stringValue = () => {
|
|
1478
|
+
return i18nString(StringValue);
|
|
1479
|
+
};
|
|
1446
1480
|
const searchSettings = () => {
|
|
1447
1481
|
return i18nString(SearchSettings);
|
|
1448
1482
|
};
|
|
1449
1483
|
const settingsContent = () => {
|
|
1450
|
-
return i18nString(SettingsContent);
|
|
1484
|
+
return i18nString(SettingsContent$1);
|
|
1451
1485
|
};
|
|
1452
1486
|
const sidebarPosition = () => {
|
|
1453
1487
|
return i18nString(SidebarPosition);
|
|
@@ -1490,6 +1524,11 @@ const noSettingsMatching = searchTerm => {
|
|
|
1490
1524
|
PH1: searchTerm
|
|
1491
1525
|
});
|
|
1492
1526
|
};
|
|
1527
|
+
const matchingSettings = count => {
|
|
1528
|
+
return i18nString(MatchingSettings, {
|
|
1529
|
+
PH1: count.toString()
|
|
1530
|
+
});
|
|
1531
|
+
};
|
|
1493
1532
|
|
|
1494
1533
|
// Text Editor Settings
|
|
1495
1534
|
const wordWrap = () => {
|
|
@@ -2181,14 +2220,14 @@ const wrappingIndentDescription = () => {
|
|
|
2181
2220
|
|
|
2182
2221
|
const getSettingItems = async () => {
|
|
2183
2222
|
return [{
|
|
2184
|
-
id: 'fontSize',
|
|
2223
|
+
id: 'Editor.fontSize',
|
|
2185
2224
|
heading: fontSize(),
|
|
2186
2225
|
description: fontSizeDescription(),
|
|
2187
2226
|
type: Number$1,
|
|
2188
|
-
value:
|
|
2227
|
+
value: 15,
|
|
2189
2228
|
category: TextEditorTab
|
|
2190
2229
|
}, {
|
|
2191
|
-
id: 'fontFamily',
|
|
2230
|
+
id: 'Editor.fontFamily',
|
|
2192
2231
|
heading: fontFamily(),
|
|
2193
2232
|
description: fontFamilyDescription(),
|
|
2194
2233
|
type: String,
|
|
@@ -2197,7 +2236,7 @@ const getSettingItems = async () => {
|
|
|
2197
2236
|
},
|
|
2198
2237
|
// Text Editor Settings
|
|
2199
2238
|
{
|
|
2200
|
-
id: 'wordWrap',
|
|
2239
|
+
id: 'Editor.wordWrap',
|
|
2201
2240
|
heading: wordWrap(),
|
|
2202
2241
|
description: wordWrapDescription(),
|
|
2203
2242
|
type: Enum,
|
|
@@ -2211,7 +2250,7 @@ const getSettingItems = async () => {
|
|
|
2211
2250
|
label: 'off' // i18n
|
|
2212
2251
|
}]
|
|
2213
2252
|
}, {
|
|
2214
|
-
id: 'lineNumbers',
|
|
2253
|
+
id: 'Editor.lineNumbers',
|
|
2215
2254
|
heading: lineNumbers(),
|
|
2216
2255
|
description: lineNumbersDescription(),
|
|
2217
2256
|
type: Enum,
|
|
@@ -2225,133 +2264,133 @@ const getSettingItems = async () => {
|
|
|
2225
2264
|
label: 'off' // i18n
|
|
2226
2265
|
}]
|
|
2227
2266
|
}, {
|
|
2228
|
-
id: 'minimap',
|
|
2267
|
+
id: 'Editor.minimap',
|
|
2229
2268
|
heading: minimap(),
|
|
2230
2269
|
description: minimapDescription(),
|
|
2231
2270
|
type: Boolean$1,
|
|
2232
2271
|
value: 'true',
|
|
2233
2272
|
category: TextEditorTab
|
|
2234
2273
|
}, {
|
|
2235
|
-
id: 'scrollBeyondLastLine',
|
|
2274
|
+
id: 'Editor.scrollBeyondLastLine',
|
|
2236
2275
|
heading: scrollBeyondLastLine(),
|
|
2237
2276
|
description: scrollBeyondLastLineDescription(),
|
|
2238
2277
|
type: Boolean$1,
|
|
2239
2278
|
value: 'false',
|
|
2240
2279
|
category: TextEditorTab
|
|
2241
2280
|
}, {
|
|
2242
|
-
id: 'smoothScrolling',
|
|
2281
|
+
id: 'Editor.smoothScrolling',
|
|
2243
2282
|
heading: smoothScrolling(),
|
|
2244
2283
|
description: smoothScrollingDescription(),
|
|
2245
2284
|
type: Boolean$1,
|
|
2246
2285
|
value: 'true',
|
|
2247
2286
|
category: TextEditorTab
|
|
2248
2287
|
}, {
|
|
2249
|
-
id: 'cursorBlinking',
|
|
2288
|
+
id: 'Editor.cursorBlinking',
|
|
2250
2289
|
heading: cursorBlinking(),
|
|
2251
2290
|
description: cursorBlinkingDescription(),
|
|
2252
2291
|
type: String,
|
|
2253
2292
|
value: 'blink',
|
|
2254
2293
|
category: TextEditorTab
|
|
2255
2294
|
}, {
|
|
2256
|
-
id: 'cursorStyle',
|
|
2295
|
+
id: 'Editor.cursorStyle',
|
|
2257
2296
|
heading: cursorStyle(),
|
|
2258
2297
|
description: cursorStyleDescription(),
|
|
2259
2298
|
type: String,
|
|
2260
2299
|
value: 'line',
|
|
2261
2300
|
category: TextEditorTab
|
|
2262
2301
|
}, {
|
|
2263
|
-
id: 'cursorWidth',
|
|
2302
|
+
id: 'Editor.cursorWidth',
|
|
2264
2303
|
heading: cursorWidth(),
|
|
2265
2304
|
description: cursorWidthDescription(),
|
|
2266
2305
|
type: Number$1,
|
|
2267
2306
|
value: '0',
|
|
2268
2307
|
category: TextEditorTab
|
|
2269
2308
|
}, {
|
|
2270
|
-
id: 'tabSize',
|
|
2309
|
+
id: 'Editor.tabSize',
|
|
2271
2310
|
heading: tabSize(),
|
|
2272
2311
|
description: tabSizeDescription(),
|
|
2273
2312
|
type: Number$1,
|
|
2274
2313
|
value: '4',
|
|
2275
2314
|
category: TextEditorTab
|
|
2276
2315
|
}, {
|
|
2277
|
-
id: 'insertSpaces',
|
|
2316
|
+
id: 'Editor.insertSpaces',
|
|
2278
2317
|
heading: insertSpaces(),
|
|
2279
2318
|
description: insertSpacesDescription(),
|
|
2280
2319
|
type: Boolean$1,
|
|
2281
2320
|
value: 'true',
|
|
2282
2321
|
category: TextEditorTab
|
|
2283
2322
|
}, {
|
|
2284
|
-
id: 'detectIndentation',
|
|
2323
|
+
id: 'Editor.detectIndentation',
|
|
2285
2324
|
heading: detectIndentation(),
|
|
2286
2325
|
description: detectIndentationDescription(),
|
|
2287
2326
|
type: Boolean$1,
|
|
2288
2327
|
value: 'true',
|
|
2289
2328
|
category: TextEditorTab
|
|
2290
2329
|
}, {
|
|
2291
|
-
id: 'trimAutoWhitespace',
|
|
2330
|
+
id: 'Editor.trimAutoWhitespace',
|
|
2292
2331
|
heading: trimAutoWhitespace(),
|
|
2293
2332
|
description: trimAutoWhitespaceDescription(),
|
|
2294
2333
|
type: Boolean$1,
|
|
2295
2334
|
value: 'true',
|
|
2296
2335
|
category: TextEditorTab
|
|
2297
2336
|
}, {
|
|
2298
|
-
id: 'largeFileOptimizations',
|
|
2337
|
+
id: 'Editor.largeFileOptimizations',
|
|
2299
2338
|
heading: largeFileOptimizations(),
|
|
2300
2339
|
description: largeFileOptimizationsDescription(),
|
|
2301
2340
|
type: Boolean$1,
|
|
2302
2341
|
value: 'true',
|
|
2303
2342
|
category: TextEditorTab
|
|
2304
2343
|
}, {
|
|
2305
|
-
id: 'renderWhitespace',
|
|
2344
|
+
id: 'Editor.renderWhitespace',
|
|
2306
2345
|
heading: renderWhitespace(),
|
|
2307
2346
|
description: renderWhitespaceDescription(),
|
|
2308
2347
|
type: String,
|
|
2309
2348
|
value: 'selection',
|
|
2310
2349
|
category: TextEditorTab
|
|
2311
2350
|
}, {
|
|
2312
|
-
id: 'renderControlCharacters',
|
|
2351
|
+
id: 'Editor.renderControlCharacters',
|
|
2313
2352
|
heading: renderControlCharacters(),
|
|
2314
2353
|
description: renderControlCharactersDescription(),
|
|
2315
2354
|
type: Boolean$1,
|
|
2316
2355
|
value: 'false',
|
|
2317
2356
|
category: TextEditorTab
|
|
2318
2357
|
}, {
|
|
2319
|
-
id: 'renderLineHighlight',
|
|
2358
|
+
id: 'Editor.renderLineHighlight',
|
|
2320
2359
|
heading: renderLineHighlight(),
|
|
2321
2360
|
description: renderLineHighlightDescription(),
|
|
2322
2361
|
type: String,
|
|
2323
2362
|
value: 'line',
|
|
2324
2363
|
category: TextEditorTab
|
|
2325
2364
|
}, {
|
|
2326
|
-
id: 'codeLens',
|
|
2365
|
+
id: 'Editor.codeLens',
|
|
2327
2366
|
heading: codeLens(),
|
|
2328
2367
|
description: codeLensDescription(),
|
|
2329
2368
|
type: Boolean$1,
|
|
2330
2369
|
value: 'true',
|
|
2331
2370
|
category: TextEditorTab
|
|
2332
2371
|
}, {
|
|
2333
|
-
id: 'folding',
|
|
2372
|
+
id: 'Editor.folding',
|
|
2334
2373
|
heading: folding(),
|
|
2335
2374
|
description: foldingDescription(),
|
|
2336
2375
|
type: Boolean$1,
|
|
2337
2376
|
value: 'true',
|
|
2338
2377
|
category: TextEditorTab
|
|
2339
2378
|
}, {
|
|
2340
|
-
id: 'showFoldingControls',
|
|
2379
|
+
id: 'Editor.showFoldingControls',
|
|
2341
2380
|
heading: showFoldingControls(),
|
|
2342
2381
|
description: showFoldingControlsDescription(),
|
|
2343
2382
|
type: String,
|
|
2344
2383
|
value: 'mouseover',
|
|
2345
2384
|
category: TextEditorTab
|
|
2346
2385
|
}, {
|
|
2347
|
-
id: 'unfoldOnClickAfterEnd',
|
|
2386
|
+
id: 'Editor.unfoldOnClickAfterEnd',
|
|
2348
2387
|
heading: unfoldOnClickAfterEnd(),
|
|
2349
2388
|
description: unfoldOnClickAfterEndDescription(),
|
|
2350
2389
|
type: Boolean$1,
|
|
2351
2390
|
value: 'false',
|
|
2352
2391
|
category: TextEditorTab
|
|
2353
2392
|
}, {
|
|
2354
|
-
id: 'links',
|
|
2393
|
+
id: 'Editor.links',
|
|
2355
2394
|
heading: links(),
|
|
2356
2395
|
description: linksDescription(),
|
|
2357
2396
|
type: Boolean$1,
|
|
@@ -3184,6 +3223,13 @@ const restoreState = savedState => {
|
|
|
3184
3223
|
};
|
|
3185
3224
|
};
|
|
3186
3225
|
|
|
3226
|
+
const getModifiedSettings = preferences => {
|
|
3227
|
+
const modifiedSettings = Object.create(null);
|
|
3228
|
+
for (const key of Object.keys(preferences)) {
|
|
3229
|
+
modifiedSettings[key] = true;
|
|
3230
|
+
}
|
|
3231
|
+
return modifiedSettings;
|
|
3232
|
+
};
|
|
3187
3233
|
const loadContent = async (state, savedState) => {
|
|
3188
3234
|
const {
|
|
3189
3235
|
searchValue,
|
|
@@ -3193,15 +3239,17 @@ const loadContent = async (state, savedState) => {
|
|
|
3193
3239
|
const newTabs = getUpdatedTabs(tabs, tabId);
|
|
3194
3240
|
const items = await getSettingItems();
|
|
3195
3241
|
const preferences = await getPreferences();
|
|
3242
|
+
const modifiedSettings = getModifiedSettings(preferences);
|
|
3196
3243
|
const filteredItems = getFilteredItems(items, newTabs, searchValue, preferences);
|
|
3197
3244
|
return {
|
|
3198
3245
|
...state,
|
|
3199
|
-
tabs: newTabs,
|
|
3200
|
-
items,
|
|
3201
3246
|
filteredItems,
|
|
3202
|
-
preferences,
|
|
3203
3247
|
inputSource: Script,
|
|
3204
|
-
|
|
3248
|
+
items,
|
|
3249
|
+
modifiedSettings,
|
|
3250
|
+
preferences,
|
|
3251
|
+
searchValue,
|
|
3252
|
+
tabs: newTabs
|
|
3205
3253
|
};
|
|
3206
3254
|
};
|
|
3207
3255
|
|
|
@@ -3218,7 +3266,7 @@ const ClassNames = {
|
|
|
3218
3266
|
const mergeClassNames = (...classNames) => {
|
|
3219
3267
|
return classNames.filter(Boolean).join(' ');
|
|
3220
3268
|
};
|
|
3221
|
-
const Button = 1;
|
|
3269
|
+
const Button$1 = 1;
|
|
3222
3270
|
const Div = 4;
|
|
3223
3271
|
const H1 = 5;
|
|
3224
3272
|
const Input = 6;
|
|
@@ -3227,13 +3275,13 @@ const H3 = 23;
|
|
|
3227
3275
|
const Aside = 28;
|
|
3228
3276
|
const P = 50;
|
|
3229
3277
|
const Ul = 60;
|
|
3230
|
-
const Select = 63;
|
|
3278
|
+
const Select$1 = 63;
|
|
3231
3279
|
const Option = 64;
|
|
3232
3280
|
const Label = 66;
|
|
3233
3281
|
const VirtualDomElements = {
|
|
3234
3282
|
__proto__: null,
|
|
3235
3283
|
Aside,
|
|
3236
|
-
Button,
|
|
3284
|
+
Button: Button$1,
|
|
3237
3285
|
Div,
|
|
3238
3286
|
H1,
|
|
3239
3287
|
H3,
|
|
@@ -3241,7 +3289,7 @@ const VirtualDomElements = {
|
|
|
3241
3289
|
Label,
|
|
3242
3290
|
Option,
|
|
3243
3291
|
P,
|
|
3244
|
-
Select,
|
|
3292
|
+
Select: Select$1,
|
|
3245
3293
|
Ul};
|
|
3246
3294
|
const text = data => {
|
|
3247
3295
|
return {
|
|
@@ -3255,28 +3303,54 @@ const {
|
|
|
3255
3303
|
Viewlet
|
|
3256
3304
|
} = ClassNames;
|
|
3257
3305
|
const Settings = 'Settings';
|
|
3306
|
+
const SettingsInputWrapper = 'SettingsInputWrapper';
|
|
3307
|
+
const InputBox = 'InputBox';
|
|
3308
|
+
const SettingsSearchInput = 'SettingsSearchInput';
|
|
3309
|
+
const Button = 'Button';
|
|
3310
|
+
const InputButton = 'InputButton';
|
|
3311
|
+
const SearchFieldButton = 'SearchFieldButton';
|
|
3312
|
+
const MaskIcon = 'MaskIcon';
|
|
3313
|
+
const MaskIconClearAll = 'MaskIconClearAll';
|
|
3314
|
+
const SettingsItem = 'SettingsItem';
|
|
3315
|
+
const SettingsItemCheckBox = 'SettingsItemCheckBox';
|
|
3316
|
+
const CheckBox = 'CheckBox';
|
|
3317
|
+
const Select = 'Select';
|
|
3318
|
+
const SettingsItems = 'SettingsItems';
|
|
3319
|
+
const SettingsNoResults = 'SettingsNoResults';
|
|
3320
|
+
const SettingsMain = 'SettingsMain';
|
|
3321
|
+
const SettingsContent = 'SettingsContent';
|
|
3322
|
+
const SettingsContentHeading = 'SettingsContentHeading';
|
|
3323
|
+
const SettingsHeader = 'SettingsHeader';
|
|
3324
|
+
const SettingsSideBar = 'SettingsSideBar';
|
|
3325
|
+
const SettingsTabs = 'SettingsTabs';
|
|
3326
|
+
const Tab = 'Tab';
|
|
3327
|
+
const TabSelected = 'TabSelected';
|
|
3328
|
+
const Badge = 'Badge';
|
|
3329
|
+
|
|
3330
|
+
const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
|
|
3331
|
+
if (!hasSearchValue) {
|
|
3332
|
+
return [];
|
|
3333
|
+
}
|
|
3334
|
+
const badgeText = matchingSettings(filteredSettingsCount);
|
|
3335
|
+
return [{
|
|
3336
|
+
type: VirtualDomElements.Div,
|
|
3337
|
+
className: Badge,
|
|
3338
|
+
childCount: 1
|
|
3339
|
+
}, text(badgeText)];
|
|
3340
|
+
};
|
|
3258
3341
|
|
|
3259
3342
|
// TODo use numeric ids
|
|
3260
3343
|
const HandleClickClear = 'handleClickClear';
|
|
3261
3344
|
const HandleClickTab = 'handleClickTab';
|
|
3262
3345
|
const HandleInput = 'handleInput';
|
|
3346
|
+
const HandleSettingInput = 'handleSettingInput';
|
|
3347
|
+
const HandleSettingChecked = 'handleSettingChecked';
|
|
3348
|
+
const HandleSettingSelect = 'handleSettingSelect';
|
|
3263
3349
|
|
|
3264
|
-
const
|
|
3265
|
-
const placeholder = searchSettings();
|
|
3350
|
+
const getSettingsInputButtonsDom = () => {
|
|
3266
3351
|
return [{
|
|
3267
|
-
type: VirtualDomElements.Div,
|
|
3268
|
-
className: 'SettingsInputWrapper',
|
|
3269
|
-
childCount: 2
|
|
3270
|
-
}, {
|
|
3271
|
-
type: VirtualDomElements.Input,
|
|
3272
|
-
className: 'InputBox SettingsSearchInput',
|
|
3273
|
-
placeholder,
|
|
3274
|
-
childCount: 0,
|
|
3275
|
-
name: SettingsSearch,
|
|
3276
|
-
onInput: HandleInput
|
|
3277
|
-
}, {
|
|
3278
3352
|
type: VirtualDomElements.Button,
|
|
3279
|
-
className:
|
|
3353
|
+
className: mergeClassNames(Button, InputButton, SearchFieldButton),
|
|
3280
3354
|
childCount: 1,
|
|
3281
3355
|
ariaLabel: clear(),
|
|
3282
3356
|
name: Clear$1,
|
|
@@ -3284,17 +3358,38 @@ const getSettingsInputDom = () => {
|
|
|
3284
3358
|
onClick: HandleClickClear
|
|
3285
3359
|
}, {
|
|
3286
3360
|
type: VirtualDomElements.Div,
|
|
3287
|
-
className:
|
|
3361
|
+
className: mergeClassNames(MaskIcon, MaskIconClearAll),
|
|
3288
3362
|
childCount: 0
|
|
3289
3363
|
}];
|
|
3290
3364
|
};
|
|
3291
3365
|
|
|
3292
|
-
const
|
|
3366
|
+
const getSettingsInputDom = () => {
|
|
3367
|
+
const placeholder = searchSettings();
|
|
3368
|
+
return [{
|
|
3369
|
+
type: VirtualDomElements.Input,
|
|
3370
|
+
className: mergeClassNames(InputBox, SettingsSearchInput),
|
|
3371
|
+
placeholder,
|
|
3372
|
+
childCount: 0,
|
|
3373
|
+
name: SettingsSearch,
|
|
3374
|
+
onInput: HandleInput
|
|
3375
|
+
}];
|
|
3376
|
+
};
|
|
3377
|
+
|
|
3378
|
+
const getChildCount = hasSearchValue => {
|
|
3379
|
+
return hasSearchValue ? 3 : 2;
|
|
3380
|
+
};
|
|
3381
|
+
const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
|
|
3382
|
+
const badgeDom = getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue);
|
|
3383
|
+
const childCount = getChildCount(hasSearchValue);
|
|
3293
3384
|
return [{
|
|
3294
3385
|
type: VirtualDomElements.Div,
|
|
3295
|
-
className:
|
|
3386
|
+
className: SettingsHeader,
|
|
3296
3387
|
childCount: 1
|
|
3297
|
-
},
|
|
3388
|
+
}, {
|
|
3389
|
+
type: VirtualDomElements.Div,
|
|
3390
|
+
className: SettingsInputWrapper,
|
|
3391
|
+
childCount
|
|
3392
|
+
}, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(), ...badgeDom];
|
|
3298
3393
|
};
|
|
3299
3394
|
|
|
3300
3395
|
const getInputId = id => {
|
|
@@ -3310,21 +3405,22 @@ const getItemCheckBoxVirtualDom = item => {
|
|
|
3310
3405
|
const domId = getInputId(id);
|
|
3311
3406
|
return [{
|
|
3312
3407
|
type: VirtualDomElements.Div,
|
|
3313
|
-
className:
|
|
3408
|
+
className: SettingsItem,
|
|
3314
3409
|
childCount: 3
|
|
3315
3410
|
}, {
|
|
3316
3411
|
type: VirtualDomElements.H3,
|
|
3317
3412
|
childCount: 1
|
|
3318
3413
|
}, text(heading), {
|
|
3319
3414
|
type: VirtualDomElements.Div,
|
|
3320
|
-
className:
|
|
3415
|
+
className: SettingsItemCheckBox,
|
|
3321
3416
|
childCount: 2
|
|
3322
3417
|
}, {
|
|
3323
3418
|
type: VirtualDomElements.Input,
|
|
3324
|
-
className:
|
|
3419
|
+
className: CheckBox,
|
|
3325
3420
|
inputType: 'checkbox',
|
|
3326
3421
|
childCount: 0,
|
|
3327
|
-
id: domId
|
|
3422
|
+
id: domId,
|
|
3423
|
+
name: id
|
|
3328
3424
|
}, {
|
|
3329
3425
|
type: VirtualDomElements.Label,
|
|
3330
3426
|
childCount: 1,
|
|
@@ -3335,24 +3431,31 @@ const getItemCheckBoxVirtualDom = item => {
|
|
|
3335
3431
|
const getItemNumberVirtualDom = item => {
|
|
3336
3432
|
const {
|
|
3337
3433
|
heading,
|
|
3338
|
-
description
|
|
3434
|
+
description,
|
|
3435
|
+
id
|
|
3339
3436
|
} = item;
|
|
3437
|
+
const domId = getInputId(id);
|
|
3340
3438
|
return [{
|
|
3341
3439
|
type: VirtualDomElements.Div,
|
|
3342
|
-
className:
|
|
3440
|
+
className: SettingsItem,
|
|
3343
3441
|
childCount: 3
|
|
3344
3442
|
}, {
|
|
3345
3443
|
type: VirtualDomElements.H3,
|
|
3346
3444
|
childCount: 1
|
|
3347
3445
|
}, text(heading), {
|
|
3348
|
-
type: VirtualDomElements.
|
|
3349
|
-
|
|
3446
|
+
type: VirtualDomElements.Label,
|
|
3447
|
+
htmlFor: domId,
|
|
3448
|
+
childCount: 1,
|
|
3449
|
+
className: 'Label'
|
|
3350
3450
|
}, text(description), {
|
|
3351
3451
|
type: VirtualDomElements.Input,
|
|
3352
|
-
className:
|
|
3452
|
+
className: InputBox,
|
|
3353
3453
|
inputType: 'number',
|
|
3354
3454
|
placeholder: numberValue(),
|
|
3355
|
-
childCount: 0
|
|
3455
|
+
childCount: 0,
|
|
3456
|
+
id: domId,
|
|
3457
|
+
name: id,
|
|
3458
|
+
onInput: HandleSettingInput
|
|
3356
3459
|
}];
|
|
3357
3460
|
};
|
|
3358
3461
|
|
|
@@ -3371,12 +3474,13 @@ const getOptionDom = option => {
|
|
|
3371
3474
|
const getItemSelectVirtualDom = item => {
|
|
3372
3475
|
const {
|
|
3373
3476
|
heading,
|
|
3374
|
-
description
|
|
3477
|
+
description,
|
|
3478
|
+
id
|
|
3375
3479
|
} = item;
|
|
3376
3480
|
const options = item.options || [];
|
|
3377
3481
|
return [{
|
|
3378
3482
|
type: VirtualDomElements.Div,
|
|
3379
|
-
className:
|
|
3483
|
+
className: SettingsItem,
|
|
3380
3484
|
childCount: 3
|
|
3381
3485
|
}, {
|
|
3382
3486
|
type: VirtualDomElements.H3,
|
|
@@ -3386,19 +3490,21 @@ const getItemSelectVirtualDom = item => {
|
|
|
3386
3490
|
childCount: 1
|
|
3387
3491
|
}, text(description), {
|
|
3388
3492
|
type: VirtualDomElements.Select,
|
|
3389
|
-
className:
|
|
3390
|
-
childCount: options.length
|
|
3493
|
+
className: Select,
|
|
3494
|
+
childCount: options.length,
|
|
3495
|
+
name: id
|
|
3391
3496
|
}, ...options.flatMap(getOptionDom)];
|
|
3392
3497
|
};
|
|
3393
3498
|
|
|
3394
3499
|
const getItemStringVirtualDom = item => {
|
|
3395
3500
|
const {
|
|
3396
3501
|
heading,
|
|
3397
|
-
description
|
|
3502
|
+
description,
|
|
3503
|
+
id
|
|
3398
3504
|
} = item;
|
|
3399
3505
|
return [{
|
|
3400
3506
|
type: VirtualDomElements.Div,
|
|
3401
|
-
className:
|
|
3507
|
+
className: SettingsItem,
|
|
3402
3508
|
childCount: 3
|
|
3403
3509
|
}, {
|
|
3404
3510
|
type: VirtualDomElements.H3,
|
|
@@ -3408,13 +3514,23 @@ const getItemStringVirtualDom = item => {
|
|
|
3408
3514
|
childCount: 1
|
|
3409
3515
|
}, text(description), {
|
|
3410
3516
|
type: VirtualDomElements.Input,
|
|
3411
|
-
className:
|
|
3517
|
+
className: InputBox,
|
|
3412
3518
|
inputType: 'text',
|
|
3413
|
-
placeholder:
|
|
3414
|
-
childCount: 0
|
|
3519
|
+
placeholder: stringValue(),
|
|
3520
|
+
childCount: 0,
|
|
3521
|
+
name: id,
|
|
3522
|
+
onInput: HandleSettingInput
|
|
3415
3523
|
}];
|
|
3416
3524
|
};
|
|
3417
3525
|
|
|
3526
|
+
const getItemUnknownVirtualDom = () => {
|
|
3527
|
+
return [{
|
|
3528
|
+
type: VirtualDomElements.Div,
|
|
3529
|
+
className: SettingsItem,
|
|
3530
|
+
childCount: 1
|
|
3531
|
+
}, text('unknown setting type')];
|
|
3532
|
+
};
|
|
3533
|
+
|
|
3418
3534
|
const getItemVirtualDom = item => {
|
|
3419
3535
|
if (item.type === Number$1) {
|
|
3420
3536
|
return getItemNumberVirtualDom(item);
|
|
@@ -3428,18 +3544,17 @@ const getItemVirtualDom = item => {
|
|
|
3428
3544
|
if (item.type === Enum) {
|
|
3429
3545
|
return getItemSelectVirtualDom(item);
|
|
3430
3546
|
}
|
|
3431
|
-
|
|
3432
|
-
return [text('unknown setting type')];
|
|
3547
|
+
return getItemUnknownVirtualDom();
|
|
3433
3548
|
};
|
|
3434
3549
|
|
|
3435
3550
|
const getSettingsNoResultsDom = searchValue => {
|
|
3436
3551
|
return [{
|
|
3437
3552
|
type: VirtualDomElements.Div,
|
|
3438
|
-
className:
|
|
3553
|
+
className: SettingsItems,
|
|
3439
3554
|
childCount: 1
|
|
3440
3555
|
}, {
|
|
3441
|
-
type: VirtualDomElements.
|
|
3442
|
-
className:
|
|
3556
|
+
type: VirtualDomElements.P,
|
|
3557
|
+
className: SettingsNoResults,
|
|
3443
3558
|
childCount: 1
|
|
3444
3559
|
}, text(noSettingsMatching(searchValue))];
|
|
3445
3560
|
};
|
|
@@ -3450,7 +3565,7 @@ const getSettingsItemsDom = (items, searchValue) => {
|
|
|
3450
3565
|
}
|
|
3451
3566
|
return [{
|
|
3452
3567
|
type: VirtualDomElements.Div,
|
|
3453
|
-
className:
|
|
3568
|
+
className: SettingsItems,
|
|
3454
3569
|
childCount: items.length
|
|
3455
3570
|
}, ...items.flatMap(getItemVirtualDom)];
|
|
3456
3571
|
};
|
|
@@ -3460,17 +3575,17 @@ const getSettingsContentDom = (items, tabs, searchValue) => {
|
|
|
3460
3575
|
const headerText = selectedTab ? selectedTab.label : settingsContent();
|
|
3461
3576
|
return [{
|
|
3462
3577
|
type: VirtualDomElements.Div,
|
|
3463
|
-
className:
|
|
3578
|
+
className: SettingsContent,
|
|
3464
3579
|
childCount: 2
|
|
3465
3580
|
}, {
|
|
3466
3581
|
type: VirtualDomElements.H1,
|
|
3467
|
-
className:
|
|
3582
|
+
className: SettingsContentHeading,
|
|
3468
3583
|
childCount: 1
|
|
3469
3584
|
}, text(headerText), ...getSettingsItemsDom(items, searchValue)];
|
|
3470
3585
|
};
|
|
3471
3586
|
|
|
3472
3587
|
const getTabClassName = tab => {
|
|
3473
|
-
return tab.selected ? mergeClassNames(
|
|
3588
|
+
return tab.selected ? mergeClassNames(Tab, TabSelected) : Tab;
|
|
3474
3589
|
};
|
|
3475
3590
|
|
|
3476
3591
|
const getTabVirtualDom = tab => {
|
|
@@ -3489,7 +3604,7 @@ const getTabVirtualDom = tab => {
|
|
|
3489
3604
|
const getSettingsTabsDom = tabs => {
|
|
3490
3605
|
return [{
|
|
3491
3606
|
type: VirtualDomElements.Ul,
|
|
3492
|
-
className:
|
|
3607
|
+
className: SettingsTabs,
|
|
3493
3608
|
role: AriaRoles.TabList,
|
|
3494
3609
|
childCount: tabs.length,
|
|
3495
3610
|
onClick: HandleClickTab
|
|
@@ -3499,7 +3614,7 @@ const getSettingsTabsDom = tabs => {
|
|
|
3499
3614
|
const getSettingsSideBarDom = tabs => {
|
|
3500
3615
|
return [{
|
|
3501
3616
|
type: VirtualDomElements.Aside,
|
|
3502
|
-
className:
|
|
3617
|
+
className: SettingsSideBar,
|
|
3503
3618
|
childCount: 1
|
|
3504
3619
|
}, ...getSettingsTabsDom(tabs)];
|
|
3505
3620
|
};
|
|
@@ -3507,7 +3622,7 @@ const getSettingsSideBarDom = tabs => {
|
|
|
3507
3622
|
const getSettingsMainDom = (tabs, items, searchValue) => {
|
|
3508
3623
|
return [{
|
|
3509
3624
|
type: VirtualDomElements.Div,
|
|
3510
|
-
className:
|
|
3625
|
+
className: SettingsMain,
|
|
3511
3626
|
childCount: 2
|
|
3512
3627
|
}, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs, searchValue)];
|
|
3513
3628
|
};
|
|
@@ -3516,13 +3631,15 @@ const getSettingsDom = state => {
|
|
|
3516
3631
|
const {
|
|
3517
3632
|
tabs,
|
|
3518
3633
|
filteredItems,
|
|
3519
|
-
searchValue
|
|
3634
|
+
searchValue,
|
|
3635
|
+
filteredItemsCount
|
|
3520
3636
|
} = state;
|
|
3637
|
+
const hasSearchValue = searchValue.trim().length > 0;
|
|
3521
3638
|
return [{
|
|
3522
3639
|
type: VirtualDomElements.Div,
|
|
3523
3640
|
childCount: 2,
|
|
3524
3641
|
className: mergeClassNames(Viewlet, Settings)
|
|
3525
|
-
}, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
|
|
3642
|
+
}, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
|
|
3526
3643
|
};
|
|
3527
3644
|
|
|
3528
3645
|
const renderItems = (oldState, newState) => {
|
|
@@ -3530,6 +3647,20 @@ const renderItems = (oldState, newState) => {
|
|
|
3530
3647
|
return ['Viewlet.setDom2', newState.id, dom];
|
|
3531
3648
|
};
|
|
3532
3649
|
|
|
3650
|
+
const renderSettingValues = (oldState, newState) => {
|
|
3651
|
+
const {
|
|
3652
|
+
filteredItems,
|
|
3653
|
+
id
|
|
3654
|
+
} = newState;
|
|
3655
|
+
const enabledTypes = [Number$1, String];
|
|
3656
|
+
const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
|
|
3657
|
+
const inputValues = numericSettings.map(item => ({
|
|
3658
|
+
name: item.id,
|
|
3659
|
+
value: item.value
|
|
3660
|
+
}));
|
|
3661
|
+
return ['Viewlet.setInputValues', id, inputValues];
|
|
3662
|
+
};
|
|
3663
|
+
|
|
3533
3664
|
const renderValue = (oldState, newState) => {
|
|
3534
3665
|
const {
|
|
3535
3666
|
id,
|
|
@@ -3544,6 +3675,8 @@ const getRenderer = diffType => {
|
|
|
3544
3675
|
return renderItems;
|
|
3545
3676
|
case RenderValue:
|
|
3546
3677
|
return renderValue;
|
|
3678
|
+
case RenderSettingValues:
|
|
3679
|
+
return renderSettingValues;
|
|
3547
3680
|
default:
|
|
3548
3681
|
throw new Error('unknown renderer');
|
|
3549
3682
|
}
|
|
@@ -3582,6 +3715,15 @@ const renderEventListeners = () => {
|
|
|
3582
3715
|
}, {
|
|
3583
3716
|
name: HandleClickClear,
|
|
3584
3717
|
params: ['clear']
|
|
3718
|
+
}, {
|
|
3719
|
+
name: HandleSettingInput,
|
|
3720
|
+
params: ['handleSettingInput', 'event.target.name', 'event.target.value']
|
|
3721
|
+
}, {
|
|
3722
|
+
name: HandleSettingChecked,
|
|
3723
|
+
params: ['handleSettingInput', 'event.target.name', 'event.target.value']
|
|
3724
|
+
}, {
|
|
3725
|
+
name: HandleSettingSelect,
|
|
3726
|
+
params: ['handleSettingInput', 'event.target.name', 'event.target.value']
|
|
3585
3727
|
}];
|
|
3586
3728
|
};
|
|
3587
3729
|
|
|
@@ -3616,7 +3758,10 @@ const commandMap = {
|
|
|
3616
3758
|
'Settings.terminate': terminate,
|
|
3617
3759
|
'Settings.handleClickTab': wrapCommand(handleClickTab),
|
|
3618
3760
|
'Settings.clear': wrapCommand(clear$1),
|
|
3619
|
-
'Settings.handleInput': wrapCommand(handleInput)
|
|
3761
|
+
'Settings.handleInput': wrapCommand(handleInput),
|
|
3762
|
+
'Settings.handleSettingInput': wrapCommand(handleSettingInput),
|
|
3763
|
+
'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
|
|
3764
|
+
'Settings.handleSettingSelect': wrapCommand(handleSettingSelect)
|
|
3620
3765
|
};
|
|
3621
3766
|
|
|
3622
3767
|
const rpcs = Object.create(null);
|