@vnejs/plugins.views.settings 0.1.3 → 0.2.1

package/src/tests/controller.test.ts

@@ -0,0 +1,93 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { spyEvent } from "@vnejs/test-utils";
+import { SUBSCRIBE_EVENTS as SETTINGS_EVENTS } from "@vnejs/contracts.core.settings";
+
+import { SettingsViewController } from "../modules/controller.js";
+import { createSettingsViewTestModule, registerSettingsViewPluginVne, SUBSCRIBE_EVENTS } from "./setup.js";
+
+describe("SettingsViewController", () => {
+  beforeEach(() => {
+    registerSettingsViewPluginVne();
+  });
+
+  it("SHOW stores fields from tab and maxCurrentItem", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tabKey: "general",
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          { settingKey: "a", type: "toggle" },
+          { settingKey: "b", type: "toggle" },
+        ],
+      },
+    });
+
+    expect((module as SettingsViewController).state.fields).toHaveLength(2);
+    expect((module as SettingsViewController).maxCurrentItem).toBe(1);
+    expect((module as SettingsViewController).state.isShow).toBe(true);
+    expect((module as SettingsViewController).state.tabKey).toBe("general");
+    expect(Object.keys((module as SettingsViewController).state.tabsContent ?? {})).toEqual(["general"]);
+  });
+
+  it("ARROW_RIGHT toggles setting when focused", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.toggle": false } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: { titleLocKey: "general", fields: [{ settingKey: "test.toggle", type: "toggle" }] },
+    });
+
+    (module as SettingsViewController).currentItem = 0;
+    (module as SettingsViewController).updateState({ currentItem: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    (module as SettingsViewController).onArrowRight();
+
+    expect(settingsSet).toHaveBeenCalledExactlyOnceWith({ name: "test.toggle", value: true });
+  });
+
+  it("TAB_SET while visible replaces fields with fade", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tabKey: "general",
+      tabs: {
+        general: { titleLocKey: "general", fields: [{ settingKey: "a", type: "toggle" }] },
+        audio: {
+          titleLocKey: "audio",
+          showTextExample: true,
+          fields: [
+            { settingKey: "b", type: "toggle" },
+            { settingKey: "c", type: "toggle" },
+          ],
+        },
+      },
+      tab: { titleLocKey: "general", fields: [{ settingKey: "a", type: "toggle" }] },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.TAB_SET, {
+      isForce: true,
+      tabKey: "audio",
+      tab: {
+        titleLocKey: "audio",
+        showTextExample: true,
+        fields: [
+          { settingKey: "b", type: "toggle" },
+          { settingKey: "c", type: "toggle" },
+        ],
+      },
+    });
+
+    expect((module as SettingsViewController).state.fields).toHaveLength(2);
+    expect((module as SettingsViewController).state.showTextExample).toBe(true);
+    expect((module as SettingsViewController).maxCurrentItem).toBe(1);
+    expect((module as SettingsViewController).state.currentItemInner).toBe(0);
+    expect((module as SettingsViewController).state.tabKey).toBe("audio");
+    expect(Object.keys((module as SettingsViewController).state.tabsContent ?? {}).sort()).toEqual(["audio", "general"]);
+  });
+});

package/src/tests/setup.ts

@@ -0,0 +1,44 @@
+import { CONSTANTS as CONTROLS_CONST, PLUGIN_NAME as CONTROLS, SUBSCRIBE_EVENTS as CONTROLS_EVENTS } from "@vnejs/contracts.controls";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.settings";
+import { SourcesSet } from "@vnejs/sources-set";
+import {
+  createTestModule as baseCreateTestModule,
+  registerCoreVne,
+  registerVnePlugin,
+  stubSilentEvent,
+} from "@vnejs/test-utils";
+
+export const registerSettingsViewPluginVne = () => {
+  registerCoreVne();
+  registerVnePlugin(CONTROLS, { constants: CONTROLS_CONST, events: CONTROLS_EVENTS });
+  registerVnePlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS });
+};
+
+export const createSettingsViewTestModule = <T extends Parameters<typeof baseCreateTestModule>[0]>(
+  ModuleClass: T,
+  options: Parameters<typeof baseCreateTestModule>[1] = {},
+) => {
+  const { shared: sharedOption, state: stateOption, ...rest } = options;
+
+  const result = baseCreateTestModule(ModuleClass, {
+    ...rest,
+    state: {
+      "settings.fields.controller": { isShow: false, fields: [], currentItem: null, currentItemInner: 0 },
+      ...(stateOption ?? {}),
+    },
+    shared: {
+      ...(sharedOption ?? {}),
+      settings: { ...(sharedOption?.settings ?? {}) },
+      viewForceAnimationSources: new SourcesSet(),
+    },
+  });
+
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.SHOW);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.HIDE);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.UPDATE);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.TAB_SET);
+
+  return result;
+};
+
+export { SUBSCRIBE_EVENTS, PARAMS, PLUGIN_NAME };

package/src/types.ts

@@ -0,0 +1,20 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/contracts.controls";
+import type { PluginName as SettingsPluginName, SubscribeEvents as SettingsSubscribeEvents } from "@vnejs/contracts.core.settings";
+import type { SettingsKeys as TextsizeSettingsKeys, PluginName as TextsizePluginName } from "@vnejs/contracts.settings.textsize";
+import type { Params as TextSmoothParams, PluginName as TextSmoothPluginName, SettingsKeys as TextSmoothSettingsKeys } from "@vnejs/contracts.text.smooth";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/contracts.views.settings";
+
+export type SettingsViewPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<SettingsPluginName, SettingsSubscribeEvents>;
+
+export type SettingsViewPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type SettingsViewPluginSettings = ModuleComponentsSettings &
+  Record<TextSmoothPluginName, TextSmoothSettingsKeys> &
+  Record<TextsizePluginName, TextsizeSettingsKeys>;
+
+export type SettingsViewPluginParams = ModuleComponentsParams &
+  Record<PluginName, Params> &
+  Record<TextSmoothPluginName, TextSmoothParams>;

package/src/utils/settings.ts

@@ -0,0 +1,28 @@
+import type { SettingsField, SettingsTab } from "@vnejs/contracts.views.settings";
+
+export type SettingsViewTabContent = {
+  fields?: SettingsField[];
+  showTextExample?: boolean;
+  locs?: Record<string, string>;
+};
+
+export type SettingsViewPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  tab?: SettingsTab;
+  tabKey?: string;
+  tabsContent?: Record<string, SettingsViewTabContent>;
+  fields?: SettingsField[];
+  locs?: Record<string, string>;
+  showTextExample?: boolean;
+  currentItem?: number | null;
+  currentItemInner?: number | null;
+};
+
+export type SettingsViewTabPayload = {
+  tab?: SettingsTab;
+  tabs?: Record<string, SettingsTab>;
+  tabKey?: string;
+  locs?: Record<string, string>;
+  isForce?: boolean;
+};

package/src/view/SettingsExampleText.tsx

@@ -0,0 +1,61 @@
+import { tokenizeText } from "@vnejs/helpers";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { SmoothText, useEffect, useMemo, useState } from "@vnejs/uis.react";
+
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+
+type SettingsExampleTextProps = ReactComponentProps<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+> & {
+  isShow?: boolean;
+  locs?: Record<string, string>;
+};
+
+type SmoothTextTokens = NonNullable<Parameters<typeof SmoothText>[0]["tokens"]>;
+
+export const SettingsExampleText = ({ isShow = false, locs = {}, PARAMS, shared, SETTINGS }: SettingsExampleTextProps) => {
+  const [tokens, setTokens] = useState<SmoothTextTokens>([]);
+
+  const isForce = shared.textProcessSkipSources.isNotEmpty();
+
+  const text = useMemo(() => locs["fields.text.example"] ?? "", [locs]);
+
+  useEffect(() => {
+    if (isShow) setTokens(tokenizeText(text) as SmoothTextTokens);
+  }, [isShow, text]);
+
+  useEffect(() => {
+    setTokens((prev) => (prev.length ? [...prev] : prev));
+  }, [isForce]);
+
+  useEffect(() => {
+    if (isShow || isForce) return;
+
+    const tm = setTimeout(() => setTokens([]), PARAMS.SETTINGS_VIEW.TRANSITION);
+
+    return () => clearTimeout(tm);
+  }, [isShow, isForce, PARAMS.SETTINGS_VIEW.TRANSITION]);
+
+  const charDelay = isForce
+    ? 0
+    : PARAMS.TEXT_SMOOTH.TOKEN_RENDER_DELAY / Number(shared.settings[SETTINGS.TEXT_SMOOTH.TOKEN_RENDER_SPEED]);
+
+  return (
+    <SmoothText
+      tokens={tokens}
+      isForce={isForce}
+      charDelay={charDelay}
+      tokensVisibleForce={isForce ? tokens.length : null}
+      transition={PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.transition}
+      size={PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.size}
+      color={PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.color}
+      height={PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.height}
+      scrollBarTextSize={Number(shared.settings[SETTINGS.TEXTSIZE.VALUE])}
+    />
+  );
+};

package/src/view/SettingsTabContent.tsx

@@ -0,0 +1,118 @@
+import type { SettingsField } from "@vnejs/contracts.views.settings";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Flex, PositionBox, Settings, useCallback } from "@vnejs/uis.react";
+
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+import { SettingsExampleText } from "./SettingsExampleText.js";
+
+type SettingsTabContentProps = ReactComponentProps<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+> & {
+  isShow?: boolean;
+  isForce?: boolean;
+  locs?: Record<string, string>;
+  fields?: SettingsField[];
+  showTextExample?: boolean;
+  currentItem?: number | null;
+  currentItemInner?: number | null;
+};
+
+type SettingsItem = NonNullable<Parameters<typeof Settings>[0]["settings"]>[number];
+
+export const SettingsTabContent = ({
+  isShow = false,
+  isForce = false,
+  locs = {},
+  fields = [],
+  showTextExample = false,
+  currentItem = null,
+  currentItemInner = null,
+  PARAMS,
+  emit,
+  EVENTS,
+  shared,
+  SETTINGS,
+  store,
+  onMount,
+  CONST,
+}: SettingsTabContentProps) => {
+  const mapFields = useCallback(
+    ({
+      locKey = "",
+      type = "",
+      settingKey = "",
+      options = [],
+      titleToggledLocKey = "",
+      titleUntoggledLocKey = "",
+      valueMap = "",
+      ...fieldProps
+    }: SettingsField = {}) => {
+      const onChange = (value: unknown) => void emit(EVENTS.SETTINGS.SET, { name: settingKey, value });
+
+      const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
+      const valueMapReal = valueMap ? PARAMS.SETTINGS_VIEW.VALUE_MAPS[valueMap] : null;
+
+      const optionsReal = options.map((option) => {
+        const result: Record<string, unknown> = { ...option };
+
+        if (option.locKey) {
+          delete result.locKey;
+          result.text = locs[option.locKey];
+        }
+
+        if (option.action) {
+          delete result.action;
+          result.onClick = () => PARAMS.SETTINGS_VIEW.ACTIONS[option.action!]({ emit, emitOne: emit, emitReal: emit }, locs);
+        }
+
+        return result;
+      });
+
+      return { ...titles, value: shared.settings[settingKey], type, onChange, props: fieldProps, options: optionsReal, valueMap: valueMapReal };
+    },
+    [EVENTS.SETTINGS.SET, PARAMS.SETTINGS_VIEW.ACTIONS, PARAMS.SETTINGS_VIEW.VALUE_MAPS, emit, locs, shared.settings],
+  );
+
+  // Do not memoize mapped settings: shared.settings is mutated in place on SETTINGS.CHANGED.
+  const propsSettings = {
+    ...PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldProps,
+    transition: isForce ? 0 : PARAMS.SETTINGS_VIEW.TRANSITION,
+    settings: fields.map(mapFields) as SettingsItem[],
+    selectedIndex: isShow ? (currentItem ?? undefined) : -1,
+    selectedIndexInner: isShow ? (currentItemInner ?? undefined) : -1,
+  } as Parameters<typeof Settings>[0];
+
+  return (
+    <PositionBox
+      isCentered={true}
+      opacity={isShow ? 1 : 0}
+      transition={isForce ? 0 : PARAMS.SETTINGS_VIEW.TRANSITION}
+    >
+      <Flex
+        direction={Flex.DIRECTION.COLUMN}
+        gap={PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldsGap}
+      >
+        <Settings {...propsSettings} />
+        {showTextExample && (
+          <SettingsExampleText
+            store={store}
+            onMount={onMount}
+            PARAMS={PARAMS}
+            emit={emit}
+            EVENTS={EVENTS}
+            shared={shared}
+            CONST={CONST}
+            SETTINGS={SETTINGS}
+            locs={locs}
+            isShow={isShow}
+          />
+        )}
+      </Flex>
+    </PositionBox>
+  );
+};

package/src/view/index.tsx

@@ -0,0 +1,63 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { View, createRenderFunc, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+import { SettingsTabContent } from "./SettingsTabContent.js";
+
+type SettingsComponentProps = ReactComponentProps<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+>;
+
+const SettingsViewComponent = ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS }: SettingsComponentProps) => {
+  const {
+    isShow = false,
+    isForce = false,
+    locs = {},
+    tabsContent = {},
+    tabKey = "",
+    currentItem = null,
+    currentItemInner = null,
+  } = useStoreState<SettingsViewPluginState>(store, onMount);
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const propsByView = PARAMS.SETTINGS_VIEW.VIEW_PROPS;
+
+  const propsView = useMemo(
+    () => ({
+      ...propsByView.view,
+      isShow,
+      isForce: isRealForce,
+      transition: isRealForce ? 0 : PARAMS.SETTINGS_VIEW.TRANSITION,
+    }),
+    [isShow, isRealForce, propsByView.view, PARAMS.SETTINGS_VIEW.TRANSITION],
+  );
+
+  const propsTab = useMemo(
+    () => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isForce: isRealForce, currentItem, currentItemInner, locs }),
+    [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isRealForce, currentItem, currentItemInner, locs],
+  );
+
+  return (
+    <View {...propsView}>
+      {Object.entries(tabsContent).map(([key, content]) => (
+        <SettingsTabContent
+          {...propsTab}
+          key={key}
+          isShow={tabKey === key}
+          fields={content.fields}
+          showTextExample={content.showTextExample}
+          locs={content.locs ?? locs}
+        />
+      ))}
+    </View>
+  );
+};
+
+export const render: ViewRenderFunc<SettingsViewPluginState> = createRenderFunc(SettingsViewComponent);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules", "src/tests"]
+}

package/const/events.js

@@ -1,7 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SHOW: "vne:settings_view:show",
-  HIDE: "vne:settings_view:hide",
-  UPDATE: "vne:settings_view:update",
-  PRELOAD: "vne:settings_view:preload",
-  TAB_SET: "vne:settings_view:tab_set",
-};

package/const/params.js

@@ -1,43 +0,0 @@
-export const TRANSITION = 500;
-export const ZINDEX = 4000;
-export const LOC_LABEL = "settings";
-
-export const BACKGROUND = "save";
-
-export const TABS = {};
-
-export const VALUE_MAPS = {};
-
-export const VIEW_PROPS = {
-  screen: { withBackgroundDark: true, withBackgroundBlur: false, transition: TRANSITION, zIndex: ZINDEX },
-
-  background: { withDark: true, withBlur: false },
-
-  cross: { position: { bottom: 90, right: 120 }, svg: { size: 60 } },
-
-  exampleText: { size: 60, height: 300, color: "var(--vne-color-active)", transition: 300 },
-
-  fieldsGap: 48,
-
-  fieldProps: {
-    widthTitle: 1440,
-    width: 3120,
-
-    sizeTitle: 96,
-    sizeText: 72,
-
-    gapBetweenItems: 48,
-    gapBetweenTitleAndContent: 120,
-    gapBetweenInnerItems: 120,
-
-    rangeHeight: 24,
-
-    widthInnerLeft: 960,
-    widthInnerRight: 240,
-  },
-
-  controls: {
-    position: { top: 90, left: 120 },
-    props: { textWidth: 660, wrapWidth: 3600, flexGap: 36, flexWithWrap: false, textSize: 96, textAlign: "center" },
-  },
-};

package/index.js

@@ -1,9 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { SettingsController } from "./modules/controller";
-import { SettingsView } from "./modules/view";
-
-regPlugin("SETTINGS_VIEW", { events: SUBSCRIBE_EVENTS, params }, [SettingsController, SettingsView]);

package/modules/controller.js

@@ -1,132 +0,0 @@
-import { ModuleController } from "@vnejs/module.components";
-
-const filterTabsToShow = ({ showInSettings = false }) => Boolean(showInSettings);
-
-export class SettingsController extends ModuleController {
-  name = "settings.controller";
-
-  emitHide = () => this.emit(this.EVENTS.SETTINGS_VIEW.HIDE);
-
-  onArrowLeft = () => {
-    const { currentTab, currentItemInner, currentItem } = this.state;
-
-    if (currentItem === null) return;
-
-    const { settingKey = "", step = 0, min = 0, type = "", options = [] } = this.tabs[currentTab].fields[currentItem];
-
-    if (options?.length) {
-      const newValue = (currentItemInner === 0 ? options.length : currentItemInner) - 1;
-
-      return this.updateStateAndViewFast({ currentItemInner: newValue });
-    }
-
-    if (type === "toggle") {
-      return this.shared.settings[settingKey] === true && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
-    }
-
-    if (type === "range") {
-      const newValue = Number(Number(this.shared.settings[settingKey] - step).toFixed(4));
-
-      return newValue >= min && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
-    }
-  };
-
-  onArrowRight = () => {
-    const { currentTab, currentItemInner, currentItem } = this.state;
-
-    if (currentItem === null) return;
-
-    const { settingKey = "", step = 0, max = 0, type = "", options = [] } = this.tabs[currentTab].fields[currentItem];
-
-    if (options?.length) {
-      return this.updateStateAndViewFast({ currentItemInner: (currentItemInner + 1) % options.length });
-    }
-
-    if (type === "toggle") {
-      return this.shared.settings[settingKey] === false && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: true });
-    }
-
-    if (type === "range") {
-      const newValue = Number(Number(this.shared.settings[settingKey] + step).toFixed(4));
-
-      return newValue <= max && this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
-    }
-  };
-
-  onPrevTab = () => this.emit(this.EVENTS.SETTINGS_VIEW.TAB_SET, { tab: (this.state.currentTab === 0 ? this.tabs.length : this.state.currentTab) - 1 });
-  onNextTab = () => this.emit(this.EVENTS.SETTINGS_VIEW.TAB_SET, { tab: (this.state.currentTab + 1) % this.tabs.length });
-
-  onInteract = () => {
-    const { currentTab, currentItemInner, currentItem } = this.state;
-
-    if (currentItem === null) return;
-
-    const { settingKey = "", type = "", options = [] } = this.tabs[currentTab].fields[currentItem];
-
-    if (options?.length)
-      return options[currentItemInner].action
-        ? this.PARAMS.SETTINGS_VIEW.ACTIONS[options[currentItemInner].action](this, this.state.locs)
-        : this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: options[currentItemInner].value });
-
-    if (type === "toggle") return this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
-  };
-
-  bgName = this.PARAMS.SETTINGS_VIEW.BACKGROUND;
-
-  updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
-  controls = {
-    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.onInteract,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.onInteract,
-    [this.CONST.CONTROLS.BUTTONS.TAB_PREV]: this.onPrevTab,
-    [this.CONST.CONTROLS.BUTTONS.TAB_NEXT]: this.onNextTab,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: this.onArrowLeft,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.onArrowRight,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
-  };
-  controlsIndex = this.PARAMS.SETTINGS_VIEW.ZINDEX;
-
-  subscribe = () => {
-    this.on(this.EVENTS.SETTINGS_VIEW.SHOW, this.onShow);
-    this.on(this.EVENTS.SETTINGS_VIEW.HIDE, this.onHide);
-    this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
-    this.on(this.EVENTS.SETTINGS_VIEW.PRELOAD, this.loadBgMedia);
-
-    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
-
-    this.on(this.EVENTS.LOCS.CHANGED, this.updateViewFast);
-
-    this.on(this.EVENTS.STATE.SET, this.onHide);
-    this.on(this.EVENTS.STATE.CLEAR, this.onHide);
-
-    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
-  };
-  init = () => {
-    this.tabs = Object.values(this.PARAMS.SETTINGS_VIEW.TABS).filter(filterTabsToShow);
-
-    this.setMaxCurrentItemByTabIndex(0);
-
-    return this.emit(this.EVENTS.SETTINGS.INIT);
-  };
-
-  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src, tabs: this.tabs, currentTab: 0 });
-  afterHide = () => this.setDefaultState();
-
-  onSettingChange = () => this.isReady && this.state.isShow && this.updateViewFast();
-
-  onTabSet = ({ tab = 0 } = {}) => {
-    this.setMaxCurrentItemByTabIndex(tab);
-    this.unsetCurrentItem();
-
-    return this.updateStateAndViewFast({ currentTab: tab, currentItemInner: 0 });
-  };
-
-  onMemoryCleared = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
-
-  setMaxCurrentItemByTabIndex = (i) => {
-    this.maxCurrentItem = this.tabs[i].fields.length - 1;
-  };
-}

package/modules/view.js

@@ -1,14 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class SettingsView extends ModuleView {
-  name = "settings.view";
-
-  locLabel = this.PARAMS.SETTINGS_VIEW.LOC_LABEL;
-  animationTime = this.PARAMS.SETTINGS_VIEW.TRANSITION;
-  updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/components/SettingsControls.jsx

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-import { PositionBox, TextControls } from "@vnejs/uis.react";
-
-export const SettingsControls = ({ tabs = [], locs = {}, currentTab = 0, ...props } = {}) => {
-  const [texts, setTexts] = useState();
-
-  useEffect(() => void setTexts(Object.values(tabs).map(({ titleLocKey }, i) => ({ value: i, text: locs[titleLocKey] }))), [locs, tabs]);
-
-  const onClick = useCallback((tab) => props.emit(props.EVENTS.SETTINGS_VIEW.TAB_SET, { tab }), []);
-
-  const propsControls = useMemo(
-    () => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.controls.props, selectedIndex: currentTab, texts, onClick }),
-    [currentTab, texts],
-  );
-
-  return (
-    <PositionBox {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.controls.position}>
-      <TextControls {...propsControls} />
-    </PositionBox>
-  );
-};