@vnejs/plugins.view.coralina.settings.defaults 0.1.0 → 0.1.2

package/const/params.js

@@ -0,0 +1,16 @@
+export const BACKGROUND = "Menu/save";
+
+export const TRANSITION = 500;
+export const ZINDEX = 4000;
+export const LOC_LABEL = "settings";
+
+const TEXT_PROPS = { align: "center", width: 3120 };
+
+export const VIEW_PROPS = {
+  screen: { withBackgroundDark: true, withBackgroundBlur: false, transition: TRANSITION, zIndex: ZINDEX },
+  position: { isCentered: true },
+  flex: { direction: "column", gap: 120 },
+  title: TEXT_PROPS,
+  settings: { transition: TRANSITION },
+  accept: TEXT_PROPS,
+};

package/index.js

@@ -1,6 +1,8 @@
 import { regPlugin } from "@vnejs/shared";
 
+import * as params from "./const/params";
+
 import { SettingsDefaultsController } from "./modules/controller";
 import { SettingsDefaultsView } from "./modules/view";
 
-regPlugin("SETTINGS_DEFAULTS_VIEW", {}, [SettingsDefaultsController, SettingsDefaultsView]);
+regPlugin("SETTINGS_DEFAULTS_VIEW", { params }, [SettingsDefaultsController, SettingsDefaultsView]);

package/modules/controller.js

@@ -10,8 +10,7 @@ const mapTabInfo = ({ ...tabInfo }) => {
 export class SettingsDefaultsController extends ModuleController {
   name = "settings.defaults.controller";
 
-  bgName = "Menu/save";
-
+  bgName = this.PARAMS.SETTINGS_DEFAULTS_VIEW.BACKGROUND;
   updateEvent = this.EVENTS.SETTINGS_DEFAULTS.UPDATE;
 
   subscribe = () => {
@@ -21,11 +20,7 @@ export class SettingsDefaultsController extends ModuleController {
     this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
   };
 
-  init = () => {
-    this.tab = mapTabInfo(this.PARAMS.SETTINGS_VIEW.TABS.DEFAULT);
-  };
-
-  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src, tab: this.tab, currentTab: 0 });
+  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src, tab: mapTabInfo(this.PARAMS.SETTINGS_VIEW.TABS.DEFAULT), currentTab: 0 });
 
   emitFunc = (func) => func({ SETTINGS: this.SETTINGS, CONST: this.CONST, platform: window.VneCore.getPlatform() });
 

package/modules/view.js

@@ -5,10 +5,10 @@ import { render } from "../view";
 export class SettingsDefaultsView extends ModuleView {
   name = "settings.defaults.view";
 
-  locLabel = "settings";
-  animationTime = 300;
+  locLabel = this.PARAMS.SETTINGS_DEFAULTS_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.SETTINGS_DEFAULTS_VIEW.TRANSITION;
   updateEvent = this.EVENTS.SETTINGS_DEFAULTS.UPDATE;
 
   renderFunc = render;
-  updateHandler = this.onUpdateReactComponent;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.settings.defaults",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -1,74 +1,54 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
 
 import { Flex, Text, Screen, Settings, PositionBox } from "@vnejs/uis.base";
 
-export const TRANSITION = 500;
-export const ZINDEX = 4000;
-
-const EMPTY_ARRAY = [];
-
-class SettingsDefaults extends React.Component {
-  state = { isShow: false, locs: {}, tokens: EMPTY_ARRAY, tab: { options: [], fields: [] } };
-
-  mapTokens = (token) => ({ token });
-  recalcTokens = () => this.setState({ tokens: [...this.props.text].map(this.mapTokens) });
-
-  componentDidUpdate(props) {
-    if (props.text !== this.props.text || (!props.isShow && this.props.isShow)) this.recalcTokens();
-  }
-
-  onClickConfirm = () => this.props.emit(this.props.EVENTS.SETTINGS_DEFAULTS.CONFIRM);
-
-  mapFields = ({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", ...props } = {}) => {
-    const { shared: { settings = {} } = {} } = this.props;
-    const { locs = {} } = this.state;
-
-    const onChange = (value) => this.props.emit(this.props.EVENTS.SETTINGS.SET, { name: settingKey, value });
-
-    const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
-
-    return { ...titles, value: settings[settingKey], type, onChange, props, options };
-  };
-
-  render() {
-    const { isShow = false, locs = {}, tab = {}, bgSrc = "" } = this.state;
-
-    return (
-      <Screen
-        isShow={isShow}
-        zIndex={ZINDEX}
-        transition={TRANSITION}
-        bgSrc={bgSrc}
-      >
-        <PositionBox isCentered={true}>
-          <Flex
-            direction={Flex.DIRECTION.COLUMN}
-            gap={120}
-          >
-            <Text
-              align={Text.ALIGNS.CENTER}
-              width={3120}
-              text={locs[tab.titleLocKey]}
-            />
-            <Settings
-              selectedIndex={0}
-              selectedIndexInner={0}
-              transition={TRANSITION}
-              settings={tab.fields.map(this.mapFields)}
-            />
-
-            <Text
-              align={Text.ALIGNS.CENTER}
-              width={3120}
-              text={locs[tab.acceptLocKey]}
-              onClick={this.onClickConfirm}
-            />
-          </Flex>
-        </PositionBox>
-      </Screen>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<SettingsDefaults {...props} />, root, resolve);
+const SettingsDefaults = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, locs = {}, tab = {}, bgSrc = "" }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const mapFields = useCallback(
+    ({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", ...fieldProps } = {}) => {
+      const onChange = (value) => props.emit(props.EVENTS.SETTINGS.SET, { name: settingKey, value });
+
+      const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
+
+      return { ...titles, value: props.shared.settings[settingKey], type, onChange, props: fieldProps, options };
+    },
+    [locs],
+  );
+  const onAccept = useCallback(() => props.emit(props.EVENTS.SETTINGS_DEFAULTS.CONFIRM), []);
+
+  const settings = useMemo(() => (tab.fields ? tab.fields.map(mapFields) : []), [tab, mapFields]);
+
+  const propsTitle = useMemo(() => ({ ...props.PARAMS.SETTINGS_DEFAULTS_VIEW.VIEW_PROPS.title, text: locs[tab.titleLocKey] }), [locs, tab]);
+  const propsSettings = useMemo(() => ({ ...props.PARAMS.SETTINGS_DEFAULTS_VIEW.VIEW_PROPS.settings, settings }), [settings]);
+  const propsAccept = useMemo(
+    () => ({ ...props.PARAMS.SETTINGS_DEFAULTS_VIEW.VIEW_PROPS.accept, text: locs[tab.acceptLocKey], onClick: onAccept }),
+    [locs, tab],
+  );
+
+  return (
+    <Screen
+      {...props.PARAMS.SETTINGS_DEFAULTS_VIEW.VIEW_PROPS.screen}
+      isShow={isShow}
+      bgSrc={bgSrc}
+    >
+      <PositionBox {...props.PARAMS.SETTINGS_DEFAULTS_VIEW.VIEW_PROPS.position}>
+        <Flex {...props.PARAMS.SETTINGS_DEFAULTS_VIEW.VIEW_PROPS.flex}>
+          <Text {...propsTitle} />
+          <Settings
+            {...propsSettings}
+            selectedIndex={0}
+            selectedIndexInner={0}
+          />
+          <Text {...propsAccept} />
+        </Flex>
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<SettingsDefaults {...props} />);