@vnejs/plugins.view.coralina.mainmenu 0.1.0 → 0.1.1

package/const/params.js

@@ -0,0 +1,14 @@
+export const BACKGROUND = "Menu/loading";
+
+export const VIEW_PROPS = {
+  background: { withDark: false, withBlur: false },
+
+  controls: {
+    position: { bottom: 240, left: 240 },
+    props: { textSize: 96, flexGap: 60, flexDirection: "column" },
+  },
+};
+
+export const TRANSITION = 500;
+export const ZINDEX = 3000;
+export const LOC_LABEL = "mainMenu";

package/index.js

@@ -1,8 +1,9 @@
 import { regPlugin } from "@vnejs/shared";
 
 import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
 
 import { MainMenuController } from "./modules/controller";
 import { MainMenuView } from "./modules/view";
 
-regPlugin("MAINMENU_VIEW", { events: SUBSCRIBE_EVENTS }, [MainMenuController, MainMenuView]);
+regPlugin("MAINMENU_VIEW", { events: SUBSCRIBE_EVENTS, params }, [MainMenuController, MainMenuView]);

package/modules/controller.js

@@ -3,20 +3,21 @@ import { ModuleController } from "@vnejs/module.components";
 const toStateItem = ({ onClick, ...item }) => item;
 const onRealItems = (item) => !item.isDisabled && !item.isHide;
 
-window.VneMainMenuBg = "Menu/loading";
-
 export class MainMenuController extends ModuleController {
   name = "mainmenu.controller";
 
-  bgName = window.VneMainMenuBg;
+  emitAccept = () => this.emit(this.EVENTS.MAINMENU_VIEW.ACCEPT);
+
+  bgName = this.PARAMS.MAINMENU_VIEW.BACKGROUND;
 
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
   controls = {
     [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.MAINMENU_VIEW.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.emitAccept,
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.emitAccept,
   };
-  controlsIndex = 2000;
+  controlsIndex = this.PARAMS.MAINMENU_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.MAINMENU.SHOW, this.onShow);
@@ -27,26 +28,22 @@ export class MainMenuController extends ModuleController {
 
     this.on(this.EVENTS.LOCS.LANG_CHANGED, this.updateView);
 
-    this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
     this.on(this.EVENTS.STATE.SET, this.onHideForce);
-
-    this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+    this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
     this.on(this.EVENTS.STATE.CLEAR, this.loadBgMedia);
+    this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
   };
 
   beforeShow = async () => {
-    const items = (await this.getItems()).map(toStateItem);
+    const items = (await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).map(toStateItem);
 
     this.updateState({ items, realItems: items.filter(onRealItems), bgSrc: (await this.loadBgMedia()).src });
 
     this.maxCurrentItem = this.state.realItems.length - 1;
   };
 
-  onAccept = async () => this.click(await this.getRealItems(), this.currentItem);
-  onClick = async ({ index } = {}) => this.click(await this.getItems(), index);
-
-  click = (items, index) => index !== null && items[index] && items[index].onClick && items[index].onClick();
+  onAccept = async () => this.click((await this.emitOne(this.EVENTS.MAINMENU.ITEMS)).filter(onRealItems), this.currentItem);
+  onClick = async ({ index } = {}) => this.click(await this.emitOne(this.EVENTS.MAINMENU.ITEMS), index);
 
-  getItems = () => this.emitOne(this.EVENTS.MAINMENU.ITEMS);
-  getRealItems = async () => (await this.getItems()).filter(onRealItems);
+  click = (items, index) => index !== null && items[index]?.onClick?.();
 }

package/modules/view.js

@@ -1,12 +1,14 @@
 import { ModuleView } from "@vnejs/module.components";
 
-import { render, TRANSITION } from "../view";
+import { render } from "../view";
 
 export class MainMenuView extends ModuleView {
   name = "mainmenu.view";
-  locLabel = "mainMenu";
-  animationTime = TRANSITION;
-  renderFunc = render;
+
+  locLabel = this.PARAMS.MAINMENU_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.MAINMENU_VIEW.TRANSITION;
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
+
+  renderFunc = render;
   updateHandler = this.onUpdateReactComponent;
 }

package/package.json

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

package/view/index.jsx

@@ -1,41 +1,62 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { Flex, PositionBox, Screen, TextControls } from "@vnejs/uis.base";
+import { PositionBox, Screen, TextControls } from "@vnejs/uis.base";
 
-export const TRANSITION = 500;
+class MainMenuControls extends React.Component {
+  state = {};
 
-class MainMenu extends React.Component {
-  state = { isShow: false, items: [], bgSrc: "" };
+  componentDidUpdate(props) {
+    const { items = [] } = this.props;
+
+    if (items !== props.items || this.props.realItems !== props.realItems || this.props.locs !== props.locs) this.setState({ texts: items.map(this.mapItems) });
+    if (this.props.currentItem !== props.currentItem) this.setState({ selectedIndex: items.findIndex(this.findSelectedIndex) });
+  }
+  componentDidMount() {
+    this.setState({ texts: this.props.items.map(this.mapItems), selectedIndex: this.props.items.findIndex(this.findSelectedIndex) });
+  }
+
+  mapItems = ({ locKey, isDisabled, isHide }, i) => ({ text: this.props.locs[locKey], isDisabled, isNotRender: isHide, value: i });
+  findSelectedIndex = (value) => this.props.realItems[this.props.currentItem]?.locKey === value?.locKey;
 
   onClick = (index) => this.props.emit(this.props.EVENTS.MAINMENU_VIEW.CLICK, { index });
-  mapItems = ({ locKey, isDisabled, isHide }, i) => ({ text: this.state.locs[locKey], isDisabled, isNotRender: isHide, value: i });
-  findSelectedIndex = (value) => this.state.realItems[this.state.currentItem]?.locKey === value?.locKey;
 
   render() {
-    const { isShow = false, items = [], bgSrc } = this.state;
+    const { texts = [], selectedIndex = null } = this.state;
 
-    const selectedIndex = items.findIndex(this.findSelectedIndex);
-    const texts = items.map(this.mapItems);
+    return (
+      <TextControls
+        selectedIndex={selectedIndex}
+        texts={texts}
+        onClick={this.onClick}
+        {...this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.props}
+      />
+    );
+  }
+}
+
+class MainMenu extends React.Component {
+  state = {};
+
+  render() {
+    const { isShow = false, items = [], bgSrc = "", currentItem = null, realItems = [], locs = {} } = this.state;
 
     return (
       <Screen
-        zIndex={3000}
         isShow={isShow}
         bgSrc={bgSrc}
-        transition={TRANSITION}
+        zIndex={this.props.PARAMS.MAINMENU_VIEW.ZINDEX}
+        transition={this.props.PARAMS.MAINMENU_VIEW.TRANSITION}
+        withBackgroundDark={this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.background.withDark}
+        withBackgroundBlur={this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.background.withBlur}
       >
-        <PositionBox
-          bottom={240}
-          left={240}
-        >
-          <TextControls
-            selectedIndex={selectedIndex}
-            texts={texts}
-            onClick={this.onClick}
-            textSize={96}
-            flexGap={60}
-            flexDirection={Flex.DIRECTION.COLUMN}
+        <PositionBox {...this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.position}>
+          <MainMenuControls
+            {...this.props}
+            items={items}
+            realItems={realItems}
+            currentItem={currentItem}
+            locs={locs}
           />
         </PositionBox>
       </Screen>