Work for surveyjs/private-tasks#453 - urveyjs.io - Wrong icon version…

… - Passed icon name to addTab method (#6585) * Work for surveyjs/private-tasks#453 - urveyjs.io - Wrong icon version - Passed icon name to addTab method * Work for surveyjs/private-tasks#453 - urveyjs.io - Wrong icon version - Refactored API * Add tab method refactoring * Fixed lint * Update doccomments * Missing update --------- Co-authored-by: tsv2013 <[email protected]> Co-authored-by: RomanTsukanov <[email protected]>
surveyjs · Feb 13, 2025 · 89f76d1 · 89f76d1
1 parent 6be182e
commit 89f76d1
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 32 deletions.
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -201,7 +201,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("designer", this);
+    creator.addTab({ name: "designer", plugin: this, iconName: "icon-config" });
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.propertyGrid = new PropertyGridModel(undefined, creator, creator.getPropertyGridDefinition());
     this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid;
@@ -287,7 +287,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       });
       this.propertyGrid.survey.onPageVisibleChanged.add((sender: SurveyModel, options: PageVisibleChangedEvent) => {
         const action = this.tabControlModel.topToolbar.getActionById(options.page.name);
-        if(!!action) {
+        if (!!action) {
           action.visible = options.page.isVisible;
         }
       });

diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts b/packages/survey-creator-core/src/components/tabs/json-editor-ace.ts
@@ -113,7 +113,7 @@ export class TabJsonEditorAcePlugin
   implements ICreatorPlugin {
   constructor(creator: SurveyCreatorModel) {
     super(creator);
-    creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-ace");
+    creator.addTab({ name: "json", plugin: this, iconName: "icon-codeeditor-24x24", componentName: "svc-tab-json-editor-ace" });
   }
   protected createModel(
     creator: SurveyCreatorModel

diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts
@@ -89,7 +89,7 @@ export class TabJsonEditorTextareaPlugin
   implements ICreatorPlugin {
   constructor(creator: SurveyCreatorModel) {
     super(creator);
-    creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-textarea");
+    creator.addTab({ name: "json", plugin: this, iconName: "icon-codeeditor-24x24", componentName: "svc-tab-json-editor-textarea" });
   }
   protected createModel(
     creator: SurveyCreatorModel

diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
@@ -13,7 +13,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
   private fastEntryAction: Action;
   public model: SurveyLogicUI;
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("logic", this);
+    creator.addTab({ name: "logic", plugin: this, iconName: "icon-logic-24x24" });
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }
   public activate(): void {

diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -89,7 +89,7 @@ export class TabTestPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("preview", this);
+    creator.addTab({ name: "preview", plugin: this, iconName: "icon-preview" });
     this.setPreviewTheme(this.creator.previewTheme);
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }

diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -244,7 +244,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("theme", this);
+    creator.addTab({ name: "theme", plugin: this, iconName: "icon-theme" });
     this.simulatorCssClasses = surveyCss[defaultThemeName];
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.createActions().forEach(action => creator.toolbar.actions.push(action));

diff --git a/packages/survey-creator-core/src/components/tabs/translation-plugin.ts b/packages/survey-creator-core/src/components/tabs/translation-plugin.ts
@@ -40,7 +40,7 @@ export class TabTranslationPlugin implements ICreatorPlugin {
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("translation", this);
+    creator.addTab({ name: "translation", plugin: this, iconName: "icon-language" });
     this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid;
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.sidebarTab = this.creator.sidebar.addPage("translation");

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -10,7 +10,7 @@ import {
   addIconsToThemeSet,
   SvgThemeSets
 } from "survey-core";
-import { ICreatorPlugin, ISurveyCreatorOptions, settings, ICollectionItemAllowOperations } from "./creator-settings";
+import { ICreatorPlugin, ISurveyCreatorOptions, settings, ICollectionItemAllowOperations, ITabOptions } from "./creator-settings";
 import { editorLocalization, setupLocale } from "./editorLocalization";
 import { SurveyJSON5 } from "./json5";
 import { DragDropChoices } from "survey-core";
@@ -469,14 +469,7 @@ export class SurveyCreatorModel extends Base
 
   protected plugins: { [name: string]: ICreatorPlugin } = {};
   /**
-   * Adds a custom tab to Survey Creator.
-   * 
-   * [View Demo](https://surveyjs.io/survey-creator/examples/modify-tab-bar/ (linkStyle))
-   * @param name A unique tab ID. 
-   * @param plugin An object that allows you to handle user interactions with the tab.
-   * @param title A tab caption. If `title` is undefined, the `name` argument value is displayed instead. To localize the caption, add its translations to the `ed` object within [localization dictionaries](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization) and pass `ed.propertyName` as the `title` argument.
-   * @param componentName The name of the component that renders tab markup. Default value: `"svc-tab-" + name`.
-   * @param index A zero-based index that specifies the tab's position relative to other tabs.
+   * @deprecated Use the [`addTab(tabOptions)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#addTab) method instead.
    */
   public addPluginTab(
     name: string,
@@ -485,7 +478,48 @@ export class SurveyCreatorModel extends Base
     componentName?: string,
     index?: number
   ) {
-    this.tabbedMenu.addTab(name, plugin, title, componentName, index);
+    this.tabbedMenu.addTab(name, plugin, title, undefined, componentName, index);
+    this.addPlugin(name, plugin);
+  }
+  /**
+   * Adds a custom tab to Survey Creator.
+   * 
+   * This method accepts an `ITabOptions` object with the following properties:
+   * 
+   * - `name`: `string`\
+   * A unique tab ID.
+   * 
+   * - `plugin`: `ICreatorPlugin`\
+   * An object that allows you to handle user interactions with the tab.
+   * 
+   * - `title`: `string`\
+   * *(Optional)* A tab caption. If `title` is undefined, the `name` property value is displayed instead. To localize the caption, add its translations to the `ed` object within [localization dictionaries](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization) and pass `ed.propertyName` as the `title` property.
+   * 
+   * - `iconName`: `string`\
+   * *(Optional)* An [icon name](https://surveyjs.io/form-library/documentation/icons). Icons are used when the tab bar doesn't have enough width to display tab titles.
+   * 
+   * - `componentName`: `string`\
+   * *(Optional)* The name of the component that renders tab markup. Default value: `"svc-tab-" + name`.
+   * 
+   * - `index`: `number`\
+   * *(Optional)* A zero-based index that specifies the tab's position relative to other tabs.
+   * 
+   * [View Demo](https://surveyjs.io/survey-creator/examples/modify-tab-bar/ (linkStyle))
+   * @param tabOptions An object that configures the custom tab.
+   */
+  public addTab(tabOptions: ITabOptions) {
+    let {
+      name,
+      plugin,
+      title,
+      iconName,
+      componentName,
+      index
+    } = tabOptions;
+    if (!name || !plugin) {
+      throw new Error("Plugin or name is not set");
+    }
+    this.tabbedMenu.addTab(name, plugin, title, iconName, componentName, index);
     this.addPlugin(name, plugin);
   }
   public addPlugin(name: string, plugin: ICreatorPlugin): void {

diff --git a/packages/survey-creator-core/src/creator-settings.ts b/packages/survey-creator-core/src/creator-settings.ts
@@ -1,4 +1,5 @@
-import { Base, IAction, ItemValue,
+import {
+  Base, IAction, ItemValue,
   JsonObjectProperty, MatrixDropdownColumn, Question,
   SurveyModel, ILocalizableString, PopupBaseViewModel, SurveyElement
 } from "survey-core";
@@ -202,7 +203,15 @@ export interface ICreatorPlugin {
   dispose?: () => void;
   onDesignerSurveyPropertyChanged?: (obj: Base, propName: string) => void;
   model: Base;
-  showOneCategoryInPropertyGrid?: boolean;
+}
+
+export interface ITabOptions {
+  name: string;
+  plugin: ICreatorPlugin;
+  title?: string;
+  iconName?: string;
+  componentName?: string;
+  index?: number;
 }
 
 export interface ISurveyCreatorOptions {

diff --git a/packages/survey-creator-core/src/tabbed-menu.ts b/packages/survey-creator-core/src/tabbed-menu.ts
@@ -8,17 +8,6 @@ export interface ITabbedMenuItem extends IAction {
   renderTab?: () => any;
 }
 
-const tabsIcons = {
-  designer: "icon-config",
-  theme: "icon-theme",
-  json: "icon-codeeditor-24x24",
-  translation: "icon-language",
-  preview: "icon-preview",
-  logic: "icon-logic-24x24",
-  customembeded: "icon-embedsurvey-24x24",
-  default: "icon-undefined-24x24"
-};
-
 export class TabbedMenuItem extends Action implements ITabbedMenuItem {
   constructor(item: ITabbedMenuItem) {
     super(item);
@@ -59,6 +48,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
   public addTab(name: string,
     plugin: ICreatorPlugin,
     title?: string,
+    iconName?: string,
     componentName?: string,
     index?: number) {
     const tabName = name === "test" ? "preview" : name;
@@ -69,7 +59,7 @@ export class TabbedMenuContainer extends AdaptiveActionContainer<TabbedMenuItem>
       title: title,
       componentContent: componentName ? componentName : "svc-tab-" + name,
       data: plugin,
-      iconName: tabsIcons[tabName] || tabsIcons["default"],
+      iconName: iconName || "icon-undefined-24x24",
       action: () => { this.creator.switchTab(name); },
       active: this.creator.viewType === name,
       disableHide: this.creator.viewType === name