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

package/const/params.js

@@ -1,14 +1,10 @@
 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";
+
+export const VIEW_PROPS = {
+  screen: { withBackgroundDark: false, withBackgroundBlur: false, zIndex: ZINDEX, transition: TRANSITION },
+  controls: { position: { bottom: 240, left: 240 }, props: { textSize: 96, flexGap: 60, flexDirection: "column" } },
+};

package/package.json

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

package/view/index.jsx

@@ -1,55 +1,43 @@
-import React, { useCallback, useEffect, useState } from "react";
-import ReactDOM from "react-dom";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
 
 import { PositionBox, Screen, TextControls } from "@vnejs/uis.base";
 
-const MainMenuControls = (props) => {
-  const [texts, setTexts] = useState([]);
+const EMPTY_ARRAY = [];
+const EMPTY_OBJ = {};
+
+const MainMenuControls = ({ locs = EMPTY_OBJ, currentItem = null, realItems = EMPTY_ARRAY, items = EMPTY_ARRAY, ...props } = EMPTY_OBJ) => {
+  const [texts, setTexts] = useState(EMPTY_ARRAY);
   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 }), []);
+  const mapItems = useCallback(({ locKey, isDisabled, isHide }, i) => ({ text: locs[locKey], isDisabled, isNotRender: isHide, value: i }), [locs]);
+  const findSelectedIndex = useCallback((value) => realItems[currentItem]?.locKey === value?.locKey, [realItems, currentItem]);
+  const onClick = useCallback((index) => props.emit(props.EVENTS.MAINMENU_VIEW.CLICK, { index }), EMPTY_ARRAY);
 
-  useEffect(() => void setTexts(props.items.map(mapItems)), [props.items, mapItems]);
-  useEffect(() => void setSelectedIndex(props.items.findIndex(findSelectedIndex)), [props.items, findSelectedIndex]);
+  useEffect(() => void setTexts(items.map(mapItems)), [items, mapItems]);
+  useEffect(() => void setSelectedIndex(items.findIndex(findSelectedIndex)), [items, findSelectedIndex]);
 
-  return (
-    <TextControls
-      texts={texts}
-      onClick={onClick}
-      selectedIndex={selectedIndex}
-      {...props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.props}
-    />
-  );
+  const propsControls = useMemo(() => ({ ...props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.props, texts, onClick, selectedIndex }), [texts, selectedIndex]);
+
+  return <TextControls {...propsControls} />;
 };
 
-const MainMenu = ({ store, onMount, ...props } = {}) => {
-  const [{ isShow = false, items = [], bgSrc = "", currentItem = null, realItems = [], locs = {} }, setState] = useState({});
+const MainMenu = ({ store, onMount, ...props } = EMPTY_OBJ) => {
+  const [{ isShow = false, items = EMPTY_ARRAY, bgSrc = "", currentItem = null, realItems = EMPTY_ARRAY, locs = EMPTY_OBJ }, setState] = useState(EMPTY_OBJ);
+
+  useEffect(() => store.subscribe(setState), EMPTY_ARRAY);
+  useEffect(() => void onMount(), EMPTY_ARRAY);
 
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.screen, bgSrc, isShow }), [bgSrc, isShow]);
+  const propsControls = useMemo(() => ({ ...props, items, realItems, currentItem, locs }), [items, realItems, currentItem, locs]);
 
   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}
-    >
+    <Screen {...propsScreen}>
       <PositionBox {...props.PARAMS.MAINMENU_VIEW.VIEW_PROPS.controls.position}>
-        <MainMenuControls
-          {...props}
-          items={items}
-          realItems={realItems}
-          currentItem={currentItem}
-          locs={locs}
-        />
+        <MainMenuControls {...propsControls} />
       </PositionBox>
     </Screen>
   );
 };
 
-export const render = (props, root) => ReactDOM.render(<MainMenu {...props} />, root);
+export const render = (props, root) => createRoot(root).render(<MainMenu {...props} />);