@vnejs/plugins.view.coralina.point-and-click 0.1.1 → 0.1.3

package/const/params.js

@@ -0,0 +1,2 @@
+export const ZINDEX = 1200;
+export const TRANSITION = 300;

package/index.js

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

package/modules/controller.js

@@ -1,7 +1,5 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import { ZINDEX } from "../view";
-
 export class PointAndClickController extends ModuleController {
   name = "point-and-click.controller";
 
@@ -15,7 +13,7 @@ export class PointAndClickController extends ModuleController {
     [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitGameMenu,
     [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => this.emit(this.EVENTS.INTERFACE.HISTORY_BACK),
   };
-  controlsIndex = ZINDEX;
+  controlsIndex = this.PARAMS.POINT_AND_CLICK_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.POINT_AND_CLICK.SHOW, this.onShow);

package/modules/view.js

@@ -1,13 +1,13 @@
 import { ModuleView } from "@vnejs/module.components";
 
-import { render, TRANSITION } from "../view";
+import { render } from "../view";
 
 export class PointAndClickView extends ModuleView {
   name = "point-and-click.view";
 
-  animationTime = TRANSITION;
+  animationTime = this.PARAMS.POINT_AND_CLICK_VIEW.TRANSITION;
   updateEvent = this.EVENTS.POINT_AND_CLICK.UPDATE;
 
   renderFunc = render;
-  updateHandler = this.onUpdateReactComponent;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

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

package/view/index.jsx

@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
 
 import { cn } from "@bem-react/classname";
 
@@ -9,15 +9,8 @@ import "./index.styl";
 
 const b = cn("PointAndClick");
 
-export const ZINDEX = 1200;
-export const TRANSITION = 300;
-
-class PointAndClick extends React.Component {
-  state = { isShow: false, isForce: false, options: [] };
-
-  onClick = (index) => this.props.emit(this.props.EVENTS.POINT_AND_CLICK.OPTION, { index });
-
-  renderOption = ({ disabled, hided, coords: [x, y], icon }, index) => (
+const renderOptions = (options, currentItem, onClick) =>
+  options.map(({ disabled, hided, coords: [x, y], icon }, index) => (
     <PositionBox
       left={`${x}%`}
       top={`${y}%`}
@@ -25,28 +18,34 @@ class PointAndClick extends React.Component {
       translateY={"-50%"}
       isNotRender={hided}
       key={index}
-      onClick={disabled ? undefined : this.onClick}
+      onClick={disabled ? undefined : onClick}
       value={index}
     >
-      <div className={b("option", { icon, disabled, isCurrent: index === this.state.currentItem, coords: Boolean(x) && Boolean(y) })} />
+      <div className={b("option", { icon, disabled, isCurrent: index === currentItem, coords: Boolean(x) && Boolean(y) })} />
     </PositionBox>
+  ));
+
+export const PointAndClick = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, options = [], currentItem = null }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClick = useCallback((index) => props.emit(props.EVENTS.POINT_AND_CLICK.OPTION, { index }), []);
+
+  const renderedOptions = useMemo(() => renderOptions(options, currentItem, onClick), [options, currentItem, onClick]);
+
+  return (
+    <Screen
+      isShow={isShow}
+      isForce={isForce}
+      isDisableAutoread={isShow}
+      zIndex={props.PARAMS.POINT_AND_CLICK_VIEW.ZINDEX}
+      transition={props.PARAMS.POINT_AND_CLICK_VIEW.TRANSITION}
+    >
+      {renderedOptions}
+    </Screen>
   );
+};
 
-  render() {
-    const { isShow = false, isForce = false, options = [] } = this.state;
-
-    return (
-      <Screen
-        isShow={isShow}
-        isForce={isForce}
-        zIndex={ZINDEX}
-        transition={TRANSITION}
-        isDisableAutoread={isShow}
-      >
-        {options.map(this.renderOption)}
-      </Screen>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<PointAndClick {...props} />, root, resolve);
+export const render = (props, root) => createRoot(root).render(<PointAndClick {...props} />);