@vnejs/plugins.views.settings 0.1.3 → 0.2.2

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>
-  );
-};

package/view/components/SettingsCross.jsx

@@ -1,13 +0,0 @@
-import { useMemo } from "react";
-
-import { PositionBox, Svg } from "@vnejs/uis.react";
-
-export const SettingsCross = (props = {}) => {
-  const propsCross = useMemo(() => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.cross.svg, onClick: () => props.emit(props.EVENTS.SETTINGS_VIEW.HIDE) }), []);
-
-  return (
-    <PositionBox {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.cross.position}>
-      <Svg.Cross {...propsCross} />
-    </PositionBox>
-  );
-};

package/view/components/SettingsExampleText.jsx

@@ -1,40 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-
-import { SmoothText } from "@vnejs/uis.react";
-
-import { tokenizeText } from "@vnejs/helpers";
-
-const EMPTY_ARRAY = [];
-
-export const SettingsExampleText = ({ isShow = false, locs = {}, ...props } = {}) => {
-  const [tokens, setTokens] = useState(EMPTY_ARRAY);
-
-  const isForce = Boolean(props.shared.textNoAnimationSources.length);
-
-  const text = useMemo(() => locs["fields.text.example"] ?? "", [locs]);
-
-  useEffect(() => {
-    if (isShow) setTokens(tokenizeText(text));
-  }, [isShow, text]);
-
-  useEffect(() => {
-    if (isShow || isForce) return;
-
-    const tm = setTimeout(() => setTokens(EMPTY_ARRAY), props.PARAMS.SETTINGS_VIEW.TRANSITION);
-
-    return () => clearTimeout(tm);
-  }, [isShow]);
-
-  return (
-    <SmoothText
-      tokens={tokens}
-      isForce={isForce}
-      charDelay={props.PARAMS.TEXT.TOKEN_RENDER_DELAY / props.shared.settings[props.SETTINGS.TEXT.TOKEN_RENDER_SPEED]}
-      transition={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.transition}
-      size={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.size}
-      color={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.color}
-      height={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.height}
-      scrollBarTextSize={props.shared.settings[props.SETTINGS.TEXTSIZE.VALUE]}
-    />
-  );
-};

package/view/components/SettingsTabContent.jsx

@@ -1,66 +0,0 @@
-import { useCallback } from "react";
-
-import { PositionBox, Settings, Flex } from "@vnejs/uis.react";
-
-import { SettingsExampleText } from "./SettingsExampleText";
-
-export const SettingsTabContent = ({ isShow = false, isForce = false, locs = {}, fields = [], ...props } = {}) => {
-  const mapFields = useCallback(
-    ({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", valueMap = "", ...fieldProps } = {}) => {
-      const onChange = (value) => props.emit(props.EVENTS.SETTINGS.SET, { name: settingKey, value });
-
-      const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
-      const valueMapReal = valueMap ? props.PARAMS.SETTINGS_VIEW.VALUE_MAPS[valueMap] : null;
-
-      const optionsReal = options.map((option) => {
-        const result = { ...option };
-
-        if (option.locKey) {
-          delete result.locKey;
-          result.text = locs[option.locKey];
-        }
-
-        if (option.action) {
-          delete result.action;
-          result.onClick = () => props.PARAMS.SETTINGS_VIEW.ACTIONS[option.action](props, locs);
-        }
-
-        return result;
-      });
-
-      return { ...titles, value: props.shared.settings[settingKey], type, onChange, props: fieldProps, options: optionsReal, valueMap: valueMapReal };
-    },
-    [locs],
-  );
-
-  return (
-    <PositionBox
-      isCentered={true}
-      opacity={isShow ? 1 : 0}
-      transition={isForce ? 0 : props.PARAMS.SETTINGS_VIEW.TRANSITION}
-    >
-      <Flex
-        direction={Flex.DIRECTION.COLUMN}
-        gap={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldsGap}
-      >
-        <Settings
-          selectedIndex={isShow ? props.currentItem : -1}
-          selectedIndexInner={isShow ? props.currentItemInner : -1}
-          transition={isForce ? 0 : props.PARAMS.SETTINGS_VIEW.TRANSITION}
-          settings={fields.map(mapFields)}
-          {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldProps}
-        />
-
-        {props.showTextExample && (
-          <SettingsExampleText
-            {...props}
-            locs={locs}
-            isShow={isShow}
-            isForce={isForce}
-            text={locs["fields.text.example"] || ""}
-          />
-        )}
-      </Flex>
-    </PositionBox>
-  );
-};

package/view/components/index.js

@@ -1,4 +0,0 @@
-export * from "./SettingsControls";
-export * from "./SettingsCross";
-export * from "./SettingsExampleText";
-export * from "./SettingsTabContent";

package/view/index.jsx

@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { Screen } from "@vnejs/uis.react";
-
-import { SettingsControls, SettingsCross, SettingsTabContent } from "./components";
-
-const Settings = ({ store, onMount, ...props } = {}) => {
-  const [state, setState] = useState({});
-
-  const { isShow = false, isForce = false, bgSrc = "", tabs = [], locs = {}, currentTab = 0, currentItem = null, currentItemInner = null } = state;
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const propsTab = useMemo(() => ({ ...props, isForce, currentItem, currentItemInner, locs }), [isForce, currentItem, currentItemInner, locs]);
-  const propsScreen = useMemo(() => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.screen, isShow, isForce, bgSrc }), [isShow, isForce, bgSrc]);
-  const propsControls = useMemo(() => ({ ...props, locs, tabs, currentTab, isForce }), [locs, tabs, currentTab, isForce]);
-
-  const renderTabContent = useCallback(
-    ({ fields = [], showTextExample = false } = {}, i) => (
-      <SettingsTabContent
-        {...propsTab}
-        key={i}
-        isShow={currentTab === i}
-        fields={fields}
-        showTextExample={showTextExample}
-      />
-    ),
-    [currentTab, propsTab],
-  );
-
-  return (
-    <Screen {...propsScreen}>
-      <SettingsCross {...props} />
-      <SettingsControls {...propsControls} />
-      {Object.values(tabs).map(renderTabContent)}
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<Settings {...props} />);