@opensumi/ide-preferences 2.21.13 → 2.22.0

package/lib/browser/preferences.module.less

@@ -1,4 +1,4 @@
-@import '~@opensumi/ide-core-browser/lib/style/variable.less';
+@base-font-size: 14px;
 
 .preferences {
   height: 100%;
@@ -45,60 +45,35 @@
 
   .preferences_body {
     height: calc(100% - 40px);
-    position: relative;
-    padding-left: 155px;
+    margin-top: 8px;
     .preferences_indexes {
-      position: absolute;
-      width: 155px;
-      padding-top: 16px;
-      height: 100%;
-      left: 0;
-      .index_item_wrapper {
-        margin-bottom: 2px;
-      }
-      .index_item {
-        height: 26px;
+      .group_item {
         font-size: @base-font-size;
-        line-height: 26px;
-        padding-left: 9px;
         cursor: pointer;
         white-space: nowrap;
         user-select: none;
-
-        > span {
-          margin-right: 5px;
-          display: inline-block;
-          font-size: 1em;
-        }
-        &:hover {
-          color: var(--list-hoverForeground);
-          background-color: var(--list-hoverBackground);
-        }
-        &.activated {
-          color: var(--list-activeSelectionForeground);
-          background: var(--list-activeSelectionBackground);
-        }
-      }
-      .preference_section_link {
-        > div {
-          padding: 5px 5px 5px 20px;
-          padding-left: 25px;
-          color: var(--titleBar-inactiveForeground);
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          cursor: pointer;
-          &:hover {
-            color: var(--list-hoverForeground);
-            background-color: var(--list-hoverBackground);
+        margin-bottom: 2px;
+        :global {
+          .kt-icon {
+            max-height: 20px !important;
           }
         }
       }
+
+      .index_item {
+        color: var(--titleBar-inactiveForeground);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
     }
+
     .preferences_items {
       height: 100%;
+      width: 100%;
+      flex: 1;
       user-select: text;
-      padding: 16px 0 0 10px;
     }
     .preference_section {
       :global(.kt-checkbox-icon) {
@@ -108,20 +83,40 @@
       :global(.kt-checkbox) {
         font-size: @base-font-size;
       }
+      .group_title {
+        font-size: 24px;
+        font-weight: 400;
+        padding: 10px 18px;
+        &:hover {
+          color: var(--kt-tree-hoverForeground);
+          background: var(--kt-tree-hoverBackground);
+        }
+      }
       .section_title {
-        font-size: 14px;
-        font-weight: bold;
-        padding: 10px 15px;
+        font-size: 20px;
+        font-weight: 500;
+        padding: 10px 18px;
         &:hover {
           color: var(--kt-tree-hoverForeground);
           background: var(--kt-tree-hoverBackground);
         }
       }
       .preference_item {
-        padding: 15px 0px 15px 15px;
-        border-left: 3px solid transparent;
+        padding: 18px;
+        border-left: 4px solid transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: space-around;
         &.modified {
-          border-left: 3px solid var(--settings-modifiedItemIndicator);
+          position: relative;
+        }
+        &.modified:before {
+          content: '';
+          position: absolute;
+          left: 7px;
+          height: 75%;
+          border-left: 2px solid var(--settings-modifiedItemIndicator);
         }
         &:hover {
           color: var(--kt-tree-hoverForeground);
@@ -134,28 +129,35 @@
         &.focused {
           outline: 1px solid var(--list-focusOutline);
           outline-offset: -1px;
-          color: var(--kt-tree-activeSelectionForeground) !important;
-          background: var(--kt-tree-activeSelectionBackground);
         }
       }
       .key {
-        margin-bottom: 5px;
+        flex: 1;
+        padding: 0 10px 10px 0;
+        font-weight: 600;
         font-size: @base-font-size;
       }
       .check {
         display: flex;
         align-items: center;
-        > div:first-child {
-          margin-right: 2px;
-          display: flex;
-          align-items: center;
+        :global {
+          .kt-checkbox {
+            margin-right: 2px;
+            display: flex;
+            align-self: flex-start;
+          }
+        }
+        & .desc {
+          padding: 0;
         }
       }
       .desc {
+        flex: 1;
+        padding: 0 10px 10px 0;
         font-size: @base-font-size;
         opacity: 0.75;
         color: var(--descriptionForeground);
-        margin-bottom: 5px;
+        margin-bottom: 0px;
         ul {
           list-style: none;
         }
@@ -169,6 +171,9 @@
           width: 1em;
           margin-left: -1em;
         }
+        p {
+          margin-bottom: auto;
+        }
       }
       .control_wrap {
         input[type='number']::-webkit-outer-spin-button,
@@ -185,7 +190,6 @@
         padding: 0 8px !important;
       }
       .array_items_wrapper {
-        width: 550px;
         padding-left: 0;
         position: relative;
         .array_edit_wrapper {
@@ -239,11 +243,13 @@
         cursor: pointer;
       }
       .text_control {
+        min-width: 300px;
         max-width: 500px;
         width: 100%;
       }
       .select_control {
-        max-width: 300px;
+        min-width: 300px;
+        max-width: 500px;
         width: 100%;
 
         .select_option {
@@ -264,7 +270,8 @@
         }
       }
       .number_control {
-        max-width: 300px;
+        min-width: 300px;
+        max-width: 500px;
         width: 100%;
       }
     }
@@ -293,6 +300,11 @@
   .preference_overwritten {
     font-size: 12px;
     opacity: 0.75;
+    text-decoration: underline;
+    text-decoration-color: black;
+    text-underline-position: under;
+    cursor: pointer;
+    opacity: 0.75;
   }
   .preference_reset {
     font-size: @base-font-size;
@@ -303,3 +315,31 @@
     }
   }
 }
+
+.devider {
+  box-sizing: border-box;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  margin: 0 3px;
+  display: inline-block;
+  vertical-align: middle;
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border-top: 0;
+    border-left: 1px solid var(--editorGroup-border);
+    pointer-events: none;
+    transform: translateX(1.5px);
+  }
+  &:hover:after {
+    border-color: transparent;
+  }
+}

package/lib/browser/preferences.view.d.ts

@@ -1,29 +1,15 @@
 /// <reference types="react" />
-import { PreferenceScope, ISettingGroup, ISettingSection } from '@opensumi/ide-core-browser';
+import { IVirtualListRange } from '@opensumi/ide-components/lib/virtual-list/types';
 import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser';
 import { ISectionItemData } from '../common';
-import './index.less';
 export declare const PreferenceView: ReactEditorComponent<null>;
-export declare const PreferenceSections: ({ preferenceSections, navigateTo, }: {
-    preferenceSections: ISettingSection[];
-    navigateTo: (section: ISettingSection) => void;
-}) => JSX.Element;
-export declare const PreferencesIndexes: ({ groups, scope, searchText, navigateTo, }: {
-    groups: ISettingGroup[];
-    scope: PreferenceScope;
-    searchText: string;
-    navigateTo: (section: ISettingSection) => void;
-}) => JSX.Element;
 export declare const PreferenceItem: ({ data, index }: {
     data: ISectionItemData;
     index: number;
 }) => JSX.Element | undefined;
-export declare const PreferenceBody: ({ items, onReady }: {
+export declare const PreferenceBody: ({ items, onReady, onRangeChanged, }: {
     items: ISectionItemData[];
     onReady: (handler: any) => void;
-}) => JSX.Element;
-export declare const PreferenceSection: ({ section, scope }: {
-    section: ISettingSection;
-    scope: PreferenceScope;
+    onRangeChanged: (props: IVirtualListRange) => any;
 }) => JSX.Element;
 //# sourceMappingURL=preferences.view.d.ts.map

package/lib/browser/preferences.view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preferences.view.d.ts","sourceRoot":"","sources":["../../src/browser/preferences.view.tsx"],"names":[],"mappings":";AAMA,OAAO,EAIL,eAAe,EAGf,aAAa,EAEb,eAAe,EAIhB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,WAAW,CAAC;AAM3D,OAAO,cAAc,CAAC;AAYtB,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,IAAI,CAmJpD,CAAC;AAEH,eAAO,MAAM,kBAAkB;wBAIT,eAAe,EAAE;0BACf,eAAe,KAAK,IAAI;iBAW/C,CAAC;AAEF,eAAO,MAAM,kBAAkB;YAMrB,aAAa,EAAE;WAChB,eAAe;gBACV,MAAM;0BACI,eAAe,KAAK,IAAI;iBAuC/C,CAAC;AAEF,eAAO,MAAM,cAAc;UAA6B,gBAAgB;WAAS,MAAM;6BA2BtF,CAAC;AAEF,eAAO,MAAM,cAAc;WAAiC,gBAAgB,EAAE;uBAAqB,GAAG,KAAK,IAAI;iBAS9G,CAAC;AAEF,eAAO,MAAM,iBAAiB;aAAmC,eAAe;WAAS,eAAe;iBAavG,CAAC"}
+{"version":3,"file":"preferences.view.d.ts","sourceRoot":"","sources":["../../src/browser/preferences.view.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AAepF,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,OAAO,EAAoB,gBAAgB,EAAgB,MAAM,WAAW,CAAC;AAc7E,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,IAAI,CAuSpD,CAAC;AAEH,eAAO,MAAM,cAAc;UAA6B,gBAAgB;WAAS,MAAM;6BA2BtF,CAAC;AAEF,eAAO,MAAM,cAAc;WAKlB,gBAAgB,EAAE;uBACN,GAAG,KAAK,IAAI;4BACP,iBAAiB,KAAK,GAAG;iBASlD,CAAC"}

package/lib/browser/preferences.view.js

@@ -1,66 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreferenceSection = exports.PreferenceBody = exports.PreferenceItem = exports.PreferencesIndexes = exports.PreferenceSections = exports.PreferenceView = void 0;
+exports.PreferenceBody = exports.PreferenceItem = exports.PreferenceView = void 0;
 const tslib_1 = require("tslib");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_virtualized_auto_sizer_1 = tslib_1.__importDefault(require("react-virtualized-auto-sizer"));
 const ide_components_1 = require("@opensumi/ide-components");
+const virtual_list_1 = require("@opensumi/ide-components/lib/virtual-list");
 const ide_core_browser_1 = require("@opensumi/ide-core-browser");
-const scroll_1 = require("@opensumi/ide-core-browser/lib/components/scroll");
+const split_panel_1 = require("@opensumi/ide-core-browser/lib/components/layout/split-panel");
+const useThrottleFn_1 = tslib_1.__importDefault(require("@opensumi/ide-core-browser/lib/react-hooks/useThrottleFn"));
 const common_1 = require("../common");
 const preferenceItem_view_1 = require("./preferenceItem.view");
 const preferences_module_less_1 = tslib_1.__importDefault(require("./preferences.module.less"));
-require("./index.less");
-const WorkspaceScope = {
-    id: ide_core_browser_1.PreferenceScope.Workspace,
-    label: 'preference.tab.workspace',
-};
-const UserScope = {
-    id: ide_core_browser_1.PreferenceScope.User,
-    label: 'preference.tab.user',
-};
+const TREE_NAME = 'preferenceViewIndexTree';
 exports.PreferenceView = (0, mobx_react_lite_1.observer)(() => {
     const preferenceService = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.IPreferenceSettingsService);
-    const preferences = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.PreferenceService);
     const labelService = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.LabelService);
     const getResourceIcon = react_1.default.useCallback((uri, options) => labelService.getIcon(ide_core_browser_1.URI.parse(uri), options), []);
-    const userBeforeWorkspace = react_1.default.useMemo(() => preferences.get('settings.userBeforeWorkspace'), []);
-    const tabList = userBeforeWorkspace ? [UserScope, WorkspaceScope] : [WorkspaceScope, UserScope];
-    const [tabIndex, setTabIndex] = react_1.default.useState(0);
-    const { currentSearch: _currentSearchText, currentGroup } = preferenceService;
-    const currentScope = react_1.default.useMemo(() => (tabList[tabIndex] || tabList[0]).id, [tabList, tabIndex]);
-    const [currentSearchText, setCurrentSearchText] = react_1.default.useState(_currentSearchText);
-    const [groups, setGroups] = react_1.default.useState([]);
     const inputRef = react_1.default.useRef(null);
+    const [focusItem, setFocusItem] = (0, react_1.useState)(undefined);
     const debouncedSearch = (0, debounce_1.default)((value) => {
-        setCurrentSearchText(value);
-    }, 100, { maxWait: 1000 });
-    const doGetGroups = async () => {
-        const groups = preferenceService.getSettingGroups(currentScope, currentSearchText);
-        if (groups.length > 0 && groups.findIndex((g) => g.id === currentGroup) === -1) {
-            preferenceService.setCurrentGroup(groups[0].id);
-        }
-        setGroups(groups);
-    };
-    react_1.default.useEffect(() => {
-        doGetGroups();
-        const toDispose = preferenceService.onDidSettingsChange((0, debounce_1.default)(() => {
-            doGetGroups();
-        }, 300, {
-            maxWait: 1000,
-        }));
-        return () => {
-            toDispose === null || toDispose === void 0 ? void 0 : toDispose.dispose();
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        doGetGroups();
-    }, [currentScope, currentSearchText]);
-    react_1.default.useEffect(() => {
-        setCurrentSearchText(_currentSearchText);
-    }, [_currentSearchText]);
+        preferenceService.search(value);
+    }, 100, { maxWait: 300 });
     react_1.default.useEffect(() => {
         const focusDispose = preferenceService.onFocus(() => {
             if (inputRef && inputRef.current) {
@@ -71,93 +34,212 @@ exports.PreferenceView = (0, mobx_react_lite_1.observer)(() => {
             focusDispose.dispose();
         };
     }, []);
-    const headers = (react_1.default.createElement(ide_components_1.Tabs, { className: preferences_module_less_1.default.tabs, value: tabIndex, onChange: (index) => setTabIndex(index), tabs: tabList.map((n) => (0, ide_core_browser_1.localize)(n.label)) }));
-    const items = react_1.default.useMemo(() => {
-        const sections = preferenceService.getSections(currentGroup, currentScope, currentSearchText);
-        let items = [];
-        for (const section of sections) {
+    react_1.default.useEffect(() => {
+        var _a;
+        if (focusItem && ((_a = preferenceService.treeHandler) === null || _a === void 0 ? void 0 : _a.focusItem)) {
+            preferenceService.treeHandler.focusItem(focusItem);
+        }
+    }, [preferenceService.tabIndex, preferenceService.treeHandler, focusItem]);
+    const treeData = react_1.default.useMemo(() => {
+        if (!preferenceService.groups) {
+            return [];
+        }
+        const parseTreeData = (id, section, i) => {
+            let innerTreeData;
             if (section.title) {
-                items.push({ title: section.title, scope: currentScope });
+                innerTreeData = {
+                    label: section.title,
+                    section: section.title,
+                    groupId: id,
+                    order: i,
+                };
             }
-            if (section.component) {
-                items.push({ component: section.title, scope: currentScope });
+            const subTreeData = [];
+            if (section.subSections) {
+                section.subSections.forEach((v, _i) => {
+                    const _treeData = parseTreeData(id, v, _i);
+                    _treeData && subTreeData.push(_treeData);
+                });
             }
-            else {
-                items = items.concat(section.preferences.map((pre) => ({ preference: pre, scope: currentScope })));
+            if (innerTreeData && subTreeData && subTreeData.length > 0) {
+                innerTreeData.children = subTreeData;
+                innerTreeData.expandable = true;
+            }
+            return innerTreeData;
+        };
+        const basicTreeData = [];
+        for (let index = 0; index < preferenceService.groups.length; index++) {
+            const { id, title, iconClass } = preferenceService.groups[index];
+            const data = {
+                label: (0, common_1.toNormalCase)(title),
+                iconClassName: iconClass,
+                groupId: id,
+                order: index,
+            };
+            const children = [];
+            const sections = preferenceService.getResolvedSections(id, preferenceService.currentScope, preferenceService.currentSearch);
+            sections.forEach((sec, i) => {
+                const _treeData = parseTreeData(id, sec, i);
+                if (_treeData) {
+                    children.push(_treeData);
+                }
+            });
+            // 要传这个，让 BasicTree 认为这是文件夹以保持排列顺序
+            data.children = children;
+            if (children.length > 0) {
+                data.expandable = true;
             }
+            basicTreeData.push(data);
         }
-        return items;
-    }, [currentGroup, currentScope, currentSearchText]);
-    const navigateTo = react_1.default.useCallback((section) => {
+        return basicTreeData;
+    }, [preferenceService.groups, preferenceService.getResolvedSections]);
+    const items = react_1.default.useMemo(() => {
+        // 如果是搜索模式，是只展示用户左侧选择的组的内容
+        const result = [];
+        preferenceService.groups.forEach((v) => {
+            result.push(...collectGroup(v));
+        });
+        return result;
+        function collectGroup(group) {
+            const groupItems = [];
+            const sections = preferenceService.getResolvedSections(group.id, preferenceService.currentScope, preferenceService.currentSearch);
+            const collectItem = (section, prefix = '') => {
+                let currentItemPath = prefix;
+                if (section.title) {
+                    currentItemPath = prefix + '/' + section.title;
+                }
+                const innerItems = [];
+                if (section.component) {
+                    innerItems.push({
+                        component: section.component,
+                        scope: preferenceService.currentScope,
+                    });
+                }
+                else if (section.preferences) {
+                    innerItems.push(...section.preferences.map((pre) => ({
+                        id: "preference:" /* ESectionItemKind.Preference */ + pre.id,
+                        preference: pre,
+                        scope: preferenceService.currentScope,
+                        _path: currentItemPath,
+                    })));
+                }
+                else if (section.subSections) {
+                    section.subSections.forEach((v) => {
+                        const _items = collectItem(v, currentItemPath);
+                        innerItems.push(..._items);
+                    });
+                }
+                // 如果该 section 有选项，填入一个 title
+                if (innerItems.length > 0 && section.title) {
+                    innerItems.unshift({
+                        id: "section:" /* ESectionItemKind.Section */ + section.title,
+                        title: section.title,
+                        scope: preferenceService.currentScope,
+                        _path: currentItemPath,
+                    });
+                }
+                return innerItems;
+            };
+            for (const section of sections) {
+                const _items = collectItem(section, group.title);
+                groupItems.push(..._items);
+            }
+            // 如果该 group 有选项，填入一个 title
+            if (groupItems.length > 0 && group.title) {
+                groupItems.unshift({
+                    title: group.title,
+                    id: "group:" /* ESectionItemKind.Group */ + group.id,
+                    scope: preferenceService.currentScope,
+                    _path: group.title,
+                });
+            }
+            return groupItems;
+        }
+    }, [preferenceService.groups, preferenceService.currentScope, preferenceService.currentSearch]);
+    const navigateTo = (id) => {
         var _a;
-        const index = items.findIndex((item) => item.title === section.title);
-        if (index >= 0) {
-            (_a = preferenceService.listHandler) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
+        if (id) {
+            const index = items.findIndex((item) => item.id === id);
+            if (index >= 0) {
+                (_a = preferenceService.listHandler) === null || _a === void 0 ? void 0 : _a.scrollToIndex({
+                    index,
+                    behavior: 'auto',
+                    align: 'start',
+                });
+            }
+        }
+    };
+    const onRangeChanged = (0, useThrottleFn_1.default)((range) => {
+        // 我们通过第一个 item 来变更左侧文件树的选择状态
+        // 当我们点击左侧的 section 的时候，我们的设计是让每一个 section 的 title 滚到顶部
+        // 此时仍然会触发该事件，但有时可能因为计算取整等原因，它上报的 startIndex 是 title 的上一个 index。
+        // 我们在这里 +1 就是防止因为计算错误而取到上一个章节的 _path 的情况。
+        const item = items[range.startIndex + 1];
+        if (item && item._path) {
+            setFocusItem(item._path);
         }
-    }, [items]);
+    }, 16 * 3, {
+        leading: true,
+        trailing: true,
+    });
+    react_1.default.useEffect(() => {
+        if (preferenceService.currentSelectId) {
+            navigateTo(preferenceService.currentSelectId);
+        }
+    }, [items, preferenceService.currentSelectId]);
     return (react_1.default.createElement(ide_components_1.ComponentContextProvider, { value: { getIcon: ide_core_browser_1.getIcon, localize: ide_core_browser_1.localize, getResourceIcon } },
         react_1.default.createElement("div", { className: preferences_module_less_1.default.preferences },
             react_1.default.createElement("div", { className: preferences_module_less_1.default.preferences_header },
-                headers,
+                react_1.default.createElement(ide_components_1.Tabs, { className: preferences_module_less_1.default.tabs, value: preferenceService.tabIndex, onChange: (index) => {
+                        preferenceService.tabIndex = index;
+                    }, tabs: preferenceService.tabList.map((n) => (0, ide_core_browser_1.localize)(n.label)) }),
                 react_1.default.createElement("div", { className: preferences_module_less_1.default.search_pref },
-                    react_1.default.createElement(ide_components_1.Input, { autoFocus: true, value: currentSearchText, placeholder: (0, ide_core_browser_1.localize)('preference.searchPlaceholder'), onValueChange: debouncedSearch, ref: inputRef }))),
-            groups.length > 0 ? (react_1.default.createElement("div", { className: preferences_module_less_1.default.preferences_body },
-                react_1.default.createElement(exports.PreferencesIndexes, { groups: groups, scope: currentScope, searchText: currentSearchText, navigateTo: navigateTo }),
-                react_1.default.createElement("div", { className: preferences_module_less_1.default.preferences_items },
-                    react_1.default.createElement(exports.PreferenceBody, { items: items, onReady: preferenceService.handleListHandler })))) : (react_1.default.createElement("div", { className: preferences_module_less_1.default.preference_noResults }, currentSearchText
-                ? (0, ide_core_browser_1.formatLocalize)('preference.noResults', currentSearchText)
+                    react_1.default.createElement(ide_components_1.Input, { autoFocus: true, value: preferenceService.currentSearch, placeholder: (0, ide_core_browser_1.localize)('preference.searchPlaceholder'), onValueChange: debouncedSearch, ref: inputRef, hasClear: true }))),
+            preferenceService.groups.length > 0 ? (react_1.default.createElement(split_panel_1.SplitPanel, { id: 'preference-panel', resizeHandleClassName: preferences_module_less_1.default.devider, className: preferences_module_less_1.default.preferences_body, direction: 'left-to-right' },
+                react_1.default.createElement(react_virtualized_auto_sizer_1.default, { className: preferences_module_less_1.default.preferences_indexes, "data-sp-defaultSize": 180, "data-sp-minSize": 150 }, ({ width, height }) => (react_1.default.createElement(ide_components_1.BasicRecycleTree, { treeName: TREE_NAME, sortComparator: (a, b) => {
+                        if (typeof a.order !== 'undefined' && typeof b.order !== 'undefined') {
+                            return a.order > b.order ? 1 : a.order < b.order ? -1 : 0;
+                        }
+                        return undefined;
+                    }, height: height, width: width, itemHeight: 26, getItemClassName: (item) => {
+                        if ((item === null || item === void 0 ? void 0 : item.depth) === 1) {
+                            return preferences_module_less_1.default.group_item;
+                        }
+                        return preferences_module_less_1.default.index_item;
+                    }, baseIndent: 8, treeData: treeData, onClick: (_e, node) => {
+                        const treeData = node && node._raw;
+                        if (treeData) {
+                            if (treeData.section) {
+                                preferenceService.scrollToSection(treeData.section);
+                            }
+                            else if (treeData.groupId) {
+                                preferenceService.scrollToGroup(treeData.groupId);
+                            }
+                        }
+                    }, onReady: (handler) => {
+                        preferenceService.handleTreeHandler(handler);
+                    } }))),
+                react_1.default.createElement("div", { className: preferences_module_less_1.default.preferences_items, "data-sp-flex": 1 },
+                    react_1.default.createElement(exports.PreferenceBody, { items: items, onReady: preferenceService.handleListHandler, onRangeChanged: onRangeChanged.run })))) : (react_1.default.createElement("div", { className: preferences_module_less_1.default.preference_noResults }, preferenceService.currentSearch
+                ? (0, ide_core_browser_1.formatLocalize)('preference.noResults', preferenceService.currentSearch)
                 : (0, ide_core_browser_1.formatLocalize)('preference.empty'))))));
 });
-const PreferenceSections = ({ preferenceSections, navigateTo, }) => (react_1.default.createElement("div", { className: preferences_module_less_1.default.preference_section_link }, preferenceSections
-    .filter((s) => s.title)
-    .map((section, idx) => (react_1.default.createElement("div", { key: `${section.title}-${idx}`, onClick: () => navigateTo(section) }, section.title)))));
-exports.PreferenceSections = PreferenceSections;
-const PreferencesIndexes = ({ groups, scope, searchText, navigateTo, }) => {
-    const preferenceService = (0, ide_core_browser_1.useInjectable)(ide_core_browser_1.IPreferenceSettingsService);
-    return (react_1.default.createElement("div", { className: preferences_module_less_1.default.preferences_indexes },
-        react_1.default.createElement(scroll_1.Scroll, null, groups &&
-            groups.map(({ id, title, iconClass }) => {
-                const sections = preferenceService.getSections(id, scope, searchText);
-                return (react_1.default.createElement("div", { key: `${id} - ${title}`, className: preferences_module_less_1.default.index_item_wrapper },
-                    react_1.default.createElement("div", { key: `${id} - ${title}`, className: (0, classnames_1.default)({
-                            [preferences_module_less_1.default.index_item]: true,
-                            [preferences_module_less_1.default.activated]: preferenceService.currentGroup === id,
-                        }), onClick: () => {
-                            preferenceService.setCurrentGroup(id);
-                        } },
-                        react_1.default.createElement("span", { className: iconClass }),
-                        (0, common_1.toNormalCase)((0, ide_core_browser_1.replaceLocalizePlaceholder)(title) || '')),
-                    preferenceService.currentGroup === id ? (react_1.default.createElement("div", null,
-                        react_1.default.createElement(exports.PreferenceSections, { preferenceSections: sections, navigateTo: navigateTo }))) : (react_1.default.createElement("div", null))));
-            }))));
-};
-exports.PreferencesIndexes = PreferencesIndexes;
 const PreferenceItem = ({ data, index }) => {
+    var _a;
     if (data.title) {
-        return (react_1.default.createElement("div", { className: preferences_module_less_1.default.section_title, id: `preferenceSection-${data.title}` }, data.title));
+        if ((_a = data.id) === null || _a === void 0 ? void 0 : _a.startsWith("group:" /* ESectionItemKind.Group */)) {
+            return (react_1.default.createElement("div", { className: preferences_module_less_1.default.group_title, id: data.id }, data.title));
+        }
+        return (react_1.default.createElement("div", { className: preferences_module_less_1.default.section_title, id: data.id }, data.title));
     }
     else if (data.component) {
         return react_1.default.createElement(data.component, { scope: data.scope });
     }
-    else if (typeof data.preference === 'string') {
-        return (react_1.default.createElement(preferenceItem_view_1.NextPreferenceItem, { key: `${index} - ${data.preference} - ${data.scope}`, preferenceName: data.preference, scope: data.scope }));
-    }
     else if (data.preference) {
-        return (react_1.default.createElement(preferenceItem_view_1.NextPreferenceItem, { key: `${index} - ${data.preference.id} - ${data.scope}`, preferenceName: data.preference.id, localizedName: data.preference.localized ? (0, ide_core_browser_1.localize)(data.preference.localized) : '', scope: data.scope }));
+        return (react_1.default.createElement(preferenceItem_view_1.NextPreferenceItem, { key: `${index} - ${data.preference.id} - ${data.scope}`, preference: data.preference, preferenceId: data.preference.id, localizedName: data.preference.label, scope: data.scope }));
     }
 };
 exports.PreferenceItem = PreferenceItem;
-const PreferenceBody = ({ items, onReady }) => (react_1.default.createElement(ide_components_1.RecycleList, { onReady: onReady, data: items, template: exports.PreferenceItem, className: preferences_module_less_1.default.preference_section, 
-    // 防止底部选择框无法查看的临时处理方式
-    paddingBottomSize: 100 }));
+const PreferenceBody = ({ items, onReady, onRangeChanged, }) => (react_1.default.createElement(virtual_list_1.VirtualList, { data: items, template: exports.PreferenceItem, className: preferences_module_less_1.default.preference_section, refSetter: onReady, onRangeChanged: onRangeChanged }));
 exports.PreferenceBody = PreferenceBody;
-const PreferenceSection = ({ section, scope }) => (react_1.default.createElement("div", { className: preferences_module_less_1.default.preference_section, id: 'preferenceSection-' + section.title },
-    section.title ? react_1.default.createElement("div", { className: preferences_module_less_1.default.section_title }, section.title) : null,
-    section.component ? (react_1.default.createElement(section.component, { scope: scope })) : (section.preferences.map((preference, idx) => {
-        if (typeof preference === 'string') {
-        }
-        else {
-        }
-    }) || react_1.default.createElement("div", null))));
-exports.PreferenceSection = PreferenceSection;
 //# sourceMappingURL=preferences.view.js.map