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

package/modules/view.js

@@ -10,5 +10,5 @@ export class MainMenuView extends ModuleView {
   updateEvent = this.EVENTS.MAINMENU_VIEW.UPDATE;
 
   renderFunc = render;
-  updateHandler = this.onUpdateReactComponent;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

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

package/view/index.jsx

@@ -1,67 +1,55 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { PositionBox, Screen, TextControls } from "@vnejs/uis.base";
 
-class MainMenuControls extends React.Component {
-  state = {};
-
-  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 });
-
-  render() {
-    const { texts = [], selectedIndex = null } = this.state;
-
-    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
-        isShow={isShow}
-        bgSrc={bgSrc}
-        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 {...this.props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.position}>
-          <MainMenuControls
-            {...this.props}
-            items={items}
-            realItems={realItems}
-            currentItem={currentItem}
-            locs={locs}
-          />
-        </PositionBox>
-      </Screen>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<MainMenu {...props} />, root, resolve);
+const MainMenuControls = (props) => {
+  const [texts, setTexts] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const mapItems = useCallback(({ locKey, isDisabled, isHide }, i) => ({ text: props.locs[locKey], isDisabled, isNotRender: isHide, value: i }), [props.locs]);
+  const findSelectedIndex = useCallback((value) => props.realItems[props.currentItem]?.locKey === value?.locKey, [props.realItems, props.currentItem]);
+  const onClick = useCallback((index) => props.emit(props.EVENTS.MAINMENU_VIEW.CLICK, { index }), []);
+
+  useEffect(() => void setTexts(props.items.map(mapItems)), [props.items, mapItems]);
+  useEffect(() => void setSelectedIndex(props.items.findIndex(findSelectedIndex)), [props.items, findSelectedIndex]);
+
+  return (
+    <TextControls
+      texts={texts}
+      onClick={onClick}
+      selectedIndex={selectedIndex}
+      {...props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.props}
+    />
+  );
+};
+
+const MainMenu = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, items = [], bgSrc = "", currentItem = null, realItems = [], locs = {} }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  return (
+    <Screen
+      bgSrc={bgSrc}
+      isShow={isShow}
+      zIndex={props.PARAMS.MAINMENU_VIEW.ZINDEX}
+      transition={props.PARAMS.MAINMENU_VIEW.TRANSITION}
+      withBackgroundDark={props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.background.withDark}
+      withBackgroundBlur={props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.background.withBlur}
+    >
+      <PositionBox {...props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.position}>
+        <MainMenuControls
+          {...props}
+          items={items}
+          realItems={realItems}
+          currentItem={currentItem}
+          locs={locs}
+        />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => ReactDOM.render(<MainMenu {...props} />, root);