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

package/const/params.js

@@ -0,0 +1,7 @@
+export const ZINDEX = 2000;
+export const TRANSITION = 300;
+export const LOC_LABEL = "history";
+
+export const VIEW_PROPS = {
+  screen: { isDisableAutoread: true, isIgnoreOnScreenshot: true, withBackgroundBlur: true, withBackgroundDark: true, zIndex: ZINDEX, transition: TRANSITION },
+};

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 { HistoryController } from "./modules/controller";
 import { HistoryView } from "./modules/view";
 
-regPlugin("HISTORY_VIEW", { events: SUBSCRIBE_EVENTS }, [HistoryController, HistoryView]);
+regPlugin("HISTORY_VIEW", { events: SUBSCRIBE_EVENTS, params }, [HistoryController, HistoryView]);

package/modules/controller.js

@@ -1,7 +1,5 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import { ZINDEX } from "../view";
-
 export class HistoryController extends ModuleController {
   name = "history.controller";
 
@@ -16,7 +14,7 @@ export class HistoryController extends ModuleController {
     [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.HISTORY_VIEW.ACCEPT),
   };
-  controlsIndex = ZINDEX;
+  controlsIndex = this.PARAMS.HISTORY_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.HISTORY_VIEW.SHOW, this.onShow);

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 HistoryView extends ModuleView {
   name = "history.view";
-  locLabel = "history";
-  animationTime = TRANSITION;
-  renderFunc = render;
+
+  locLabel = this.PARAMS.HISTORY_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.HISTORY_VIEW.TRANSITION;
   updateEvent = this.EVENTS.HISTORY_VIEW.UPDATE;
-  updateHandler = this.onUpdateReactComponent;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.history",
-  "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,45 +1,26 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { Screen } from "@vnejs/uis.base";
 
 import { HistoryClose, HistoryLines } from "./components";
 
-export const ZINDEX = 2000;
-export const TRANSITION = 300;
+const History = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, locs = {}, history = [], historyLocs = [], currentItem = null }, setState] = useState({});
 
-class History extends React.Component {
-  state = {};
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
 
-  render() {
-    const { isShow = false, isForce = false, locs = {}, history = [], historyLocs = [], currentItem = null } = this.state;
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.HISTORY_VIEW.VIEW_PROPS.screen, isShow, isForce }), [isShow, isForce]);
+  const propsLines = useMemo(() => ({ ...props, isShow, history, historyLocs, currentItem }), [isShow, history, historyLocs, currentItem]);
+  const propsClose = useMemo(() => ({ ...props, locs }), [locs]);
 
-    return (
-      <Screen
-        isShow={isShow}
-        isForce={isForce}
-        zIndex={ZINDEX}
-        transition={TRANSITION}
-        isDisableAutoread={true}
-        isIgnoreOnScreenshot={true}
-        withBlur={true}
-        withDark={true}
-      >
-        <HistoryLines
-          {...this.props}
-          isShow={isShow}
-          history={history}
-          historyLocs={historyLocs}
-          currentItem={currentItem}
-        />
+  return (
+    <Screen {...propsScreen}>
+      <HistoryLines {...propsLines} />
+      <HistoryClose {...propsClose} />
+    </Screen>
+  );
+};
 
-        <HistoryClose
-          {...this.props}
-          locs={locs}
-        />
-      </Screen>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<History {...props} />, root, resolve);
+export const render = (props, root) => ReactDOM.render(<History {...props} />, root);