@vnejs/plugins.views.settings 0.1.3 → 0.2.2

package/src/modules/controller.ts

@@ -0,0 +1,221 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { SettingsField } from "@vnejs/contracts.views.settings";
+
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState, SettingsViewTabContent, SettingsViewTabPayload } from "../utils/settings.js";
+
+export class SettingsViewController extends ModuleController<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+> {
+  name = "settings.fields.controller";
+
+  updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
+  controlsIndex = this.PARAMS.SETTINGS_VIEW.ZINDEX;
+
+  tabKeyOf = ({ tabKey, tab }: SettingsViewTabPayload = {}) => tabKey || tab?.titleLocKey || "default";
+
+  tabContentOf = (tab: SettingsViewTabPayload["tab"], locs?: Record<string, string>): SettingsViewTabContent => ({
+    fields: tab?.fields ?? [],
+    showTextExample: Boolean(tab?.showTextExample),
+    locs,
+  });
+
+  applyTab = (payload: SettingsViewTabPayload = {}) => {
+    const { tab, locs } = payload;
+    const fields = tab?.fields ?? [];
+    const key = this.tabKeyOf(payload);
+
+    this.maxCurrentItem = Math.max((fields.length ?? 1) - 1, 0);
+
+    const tabsContent = payload.tabs
+      ? Object.fromEntries(
+          Object.entries(payload.tabs).map(([tabKey, settingsTab]) => [tabKey, this.tabContentOf(settingsTab, locs)]),
+        )
+      : { ...(this.state.tabsContent ?? {}), [key]: this.tabContentOf(tab, locs) };
+
+    return {
+      tab,
+      tabKey: key,
+      tabsContent,
+      fields,
+      locs,
+      showTextExample: Boolean(tab?.showTextExample),
+      currentItemInner: 0,
+    };
+  };
+
+  onShowFields = (payload: SettingsViewTabPayload = {}) => this.onShow(payload);
+
+  onTabSet = async (payload: SettingsViewTabPayload = {}) => {
+    if (!this.state.isShow) return this.onShow(payload);
+
+    const isForce = Boolean(payload.isForce || this.shared.viewForceAnimationSources?.isNotEmpty());
+
+    this.currentItem = null;
+
+    const next = { ...this.applyTab(payload), currentItem: null as null };
+
+    if (isForce) return this.updateStateAndViewForce(next);
+
+    const key = next.tabKey!;
+    const alreadyMounted = Boolean(this.state.tabsContent?.[key]);
+
+    // Mount the incoming tab at opacity 0 first so CSS can crossfade both layers together.
+    if (!alreadyMounted) {
+      await this.updateStateAndViewFast({ tabsContent: next.tabsContent });
+      await this.waitRerender();
+    }
+
+    return this.updateStateAndView(next);
+  };
+
+  getFocusedField = () => {
+    const { currentItem, fields = [] } = this.state;
+
+    if (currentItem == null || !fields.length) return;
+
+    return fields[currentItem];
+  };
+
+  innerIndexOfField = (field?: SettingsField) => {
+    const options = field?.options ?? [];
+    if (!options.length) return 0;
+
+    const settingKey = field?.settingKey;
+    if (!settingKey) return 0;
+
+    const index = options.findIndex((option) => option.value === this.shared.settings[settingKey]);
+
+    return index >= 0 ? index : 0;
+  };
+
+  optionIndexOf = (length: number, index = 0) => {
+    if (!length) return 0;
+
+    return ((index % length) + length) % length;
+  };
+
+  shiftOptions = (direction: -1 | 1) => {
+    const field = this.getFocusedField();
+    const options = field?.options ?? [];
+
+    if (!options.length) return;
+
+    const currentItemInner = this.optionIndexOf(options.length, (this.state.currentItemInner ?? 0) + direction);
+    const option = options[currentItemInner];
+    const settingKey = field?.settingKey;
+
+    void this.updateStateAndViewFast({ currentItemInner });
+
+    if (settingKey && option && !option.action) {
+      void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
+    }
+  };
+
+  setCurrentItem = async (value: number, defaultValue: number) => {
+    if (this.currentItem === null) {
+      this.currentItem = defaultValue;
+    } else {
+      this.currentItem = value;
+      if (this.currentItem > this.maxCurrentItem) this.currentItem = 0;
+      if (this.currentItem < 0) this.currentItem = this.maxCurrentItem;
+    }
+
+    const currentItemInner = this.innerIndexOfField(this.state.fields?.[this.currentItem]);
+
+    await this.updateStateAndViewFast({ currentItem: this.currentItem, currentItemInner });
+  };
+
+  onArrowLeft = () => {
+    const field = this.getFocusedField();
+
+    if (!field) return;
+
+    if (field.options?.length) return this.shiftOptions(-1);
+
+    const { settingKey = "", step = 0, min = 0, type = "" } = field;
+    if (!settingKey) return;
+
+    if (type === "toggle") {
+      return this.shared.settings[settingKey] === true && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
+    }
+
+    if (type === "range") {
+      const newValue = Number(Number(Number(this.shared.settings[settingKey]) - step).toFixed(4));
+
+      return newValue >= min && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+    }
+  };
+
+  onArrowRight = () => {
+    const field = this.getFocusedField();
+
+    if (!field) return;
+
+    if (field.options?.length) return this.shiftOptions(1);
+
+    const { settingKey = "", step = 0, max = 0, type = "" } = field;
+    if (!settingKey) return;
+
+    if (type === "toggle") {
+      return this.shared.settings[settingKey] === false && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: true });
+    }
+
+    if (type === "range") {
+      const newValue = Number(Number(Number(this.shared.settings[settingKey]) + step).toFixed(4));
+
+      return newValue <= max && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+    }
+  };
+
+  onInteract = () => {
+    const field = this.getFocusedField();
+
+    if (!field) return;
+
+    const { settingKey = "", type = "", options = [] } = field;
+    const { locs = {} } = this.state;
+
+    if (options?.length) {
+      const option = options[this.optionIndexOf(options.length, this.state.currentItemInner ?? 0)];
+
+      if (!option) return;
+
+      if (option.action) return this.PARAMS.SETTINGS_VIEW.ACTIONS[option.action](this, locs);
+      if (settingKey) return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
+
+      return;
+    }
+
+    if (!settingKey) return;
+
+    if (type === "toggle") return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
+  };
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.onInteract(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => void this.onArrowLeft(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.onArrowRight(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+  };
+  controlsCheckNext = true;
+
+  subscribe = () => {
+    this.on(this.EVENTS.SETTINGS_VIEW.SHOW, this.onShowFields);
+    this.on(this.EVENTS.SETTINGS_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
+
+    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
+    this.on(this.EVENTS.COMPONENTS.EXTERNAL_UPDATE, this.onSettingChange);
+  };
+
+  beforeShow = async (payload: SettingsViewTabPayload = {}) => this.updateState(this.applyTab(payload));
+  afterHide = () => this.setDefaultState();
+
+  onSettingChange = () => this.state.isShow && this.updateViewFast();
+}

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+
+export class SettingsView extends ModuleView<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+> {
+  name = "settings.fields.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/src/tests/controller.test.ts

@@ -0,0 +1,240 @@
+import { beforeEach, describe, expect, it, vi } 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"]);
+  });
+
+  it("ARROW_RIGHT on selector_texts cycles inner and SET", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.lang": "ru" } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          {
+            settingKey: "test.lang",
+            type: "selector_texts",
+            options: [
+              { text: "ru", value: "ru" },
+              { text: "en", value: "en" },
+              { text: "de", value: "de" },
+            ],
+          },
+        ],
+      },
+    });
+
+    const controller = module as SettingsViewController;
+
+    controller.currentItem = 0;
+    controller.updateState({ currentItem: 0, currentItemInner: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    controller.onArrowRight();
+
+    expect(controller.state.currentItemInner).toBe(1);
+    expect(settingsSet).toHaveBeenCalledExactlyOnceWith({ name: "test.lang", value: "en" });
+  });
+
+  it("ARROW_LEFT on selector_texts wraps inner and SET", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.lang": "ru" } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          {
+            settingKey: "test.lang",
+            type: "selector_texts",
+            options: [
+              { text: "ru", value: "ru" },
+              { text: "en", value: "en" },
+              { text: "de", value: "de" },
+            ],
+          },
+        ],
+      },
+    });
+
+    const controller = module as SettingsViewController;
+
+    controller.currentItem = 0;
+    controller.updateState({ currentItem: 0, currentItemInner: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    controller.onArrowLeft();
+
+    expect(controller.state.currentItemInner).toBe(2);
+    expect(settingsSet).toHaveBeenCalledExactlyOnceWith({ name: "test.lang", value: "de" });
+  });
+
+  it("ARROW_* on actions without settingKey only moves inner", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController);
+    const controller = module as SettingsViewController;
+    const doA = vi.fn();
+    const doB = vi.fn();
+
+    controller.PARAMS.SETTINGS_VIEW.ACTIONS.do_a = doA;
+    controller.PARAMS.SETTINGS_VIEW.ACTIONS.do_b = doB;
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          {
+            type: "actions",
+            options: [
+              { locKey: "a", action: "do_a" },
+              { locKey: "b", action: "do_b" },
+            ],
+          },
+        ],
+      },
+    });
+
+    controller.currentItem = 0;
+    controller.updateState({ currentItem: 0, currentItemInner: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    controller.onArrowLeft();
+
+    expect(controller.state.currentItemInner).toBe(1);
+    expect(doA).not.toHaveBeenCalled();
+    expect(doB).not.toHaveBeenCalled();
+    expect(settingsSet).not.toHaveBeenCalled();
+
+    controller.onInteract();
+
+    expect(doB).toHaveBeenCalledOnce();
+    expect(doA).not.toHaveBeenCalled();
+  });
+
+  it("setCurrentItem syncs currentItemInner to the current option", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.lang": "en" } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          { settingKey: "a", type: "toggle" },
+          {
+            settingKey: "test.lang",
+            type: "selector_texts",
+            options: [
+              { text: "ru", value: "ru" },
+              { text: "en", value: "en" },
+              { text: "de", value: "de" },
+            ],
+          },
+        ],
+      },
+    });
+
+    const controller = module as SettingsViewController;
+
+    controller.currentItem = 0;
+    controller.updateState({ currentItem: 0, currentItemInner: 99 });
+
+    await controller.setCurrentItem(1, 0);
+
+    expect(controller.currentItem).toBe(1);
+    expect(controller.state.currentItem).toBe(1);
+    expect(controller.state.currentItemInner).toBe(1);
+  });
+});

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])}
+    />
+  );
+};