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

package/const/params.js

@@ -0,0 +1,11 @@
+export const TRANSITION = 500;
+export const ZINDEX = 9000;
+
+export const VIEW_PROPS = {
+  screen: { withBackgroundBlur: true, withBackgroundDark: true, zIndex: ZINDEX, transition: TRANSITION },
+  position: { isCentered: true },
+  flex: { direction: "column", gap: 60 },
+  flexTitles: { direction: "column", gap: 12 },
+  controls: { wrapWidth: 3120, flexGap: 0, flexJustify: "center", textSize: 72, textWidth: 780, textAlign: "center" },
+  text: { size: 96, width: 3120, align: "center" },
+};

package/index.js

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

package/modules/controller.js

@@ -1,7 +1,5 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import { ZINDEX } from "../view";
-
 export class ConfirmController extends ModuleController {
   name = "confirm.controller";
 
@@ -15,7 +13,7 @@ export class ConfirmController extends ModuleController {
     [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: this.decCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.incCurrentItem,
   };
-  controlsIndex = ZINDEX;
+  controlsIndex = this.PARAMS.CONFIRM_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.CONFIRM.SHOW, this.onShow);

package/modules/view.js

@@ -1,11 +1,13 @@
 import { ModuleView } from "@vnejs/module.components";
 
-import { render, TRANSITION } from "../view";
+import { render } from "../view";
 
 export class ConfirmView extends ModuleView {
   name = "confirm.view";
-  animationTime = TRANSITION;
-  renderFunc = render;
+
+  animationTime = this.PARAMS.CONFIRM_VIEW.TRANSITION;
   updateEvent = this.EVENTS.CONFIRM.UPDATE;
-  updateHandler = this.onUpdateReactComponent;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.confirm",
-  "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,81 +1,36 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { Flex, PositionBox, Screen, Text, TextControls } from "@vnejs/uis.base";
 
-export const TRANSITION = 500;
-export const ZINDEX = 9000;
+const ConfirmView = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, text = "", textAccept = "", textDecline = "", currentItem: selectedIndex = null }, setState] = useState({});
+  const [texts, setTexts] = useState([]);
 
-class ConfirmView extends React.Component {
-  state = { isShow: false, text: "", textAccept: "", textDecline: "", currentItem: null, textsArray: [] };
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
 
-  componentDidUpdate(props, state) {
-    const { textAccept = "", textDecline = "", text = "" } = this.state;
+  useEffect(() => void setTexts([textAccept, textDecline].map((text, i) => ({ text, value: i === 0 }))), [textAccept, textDecline]);
 
-    if (state.textAccept !== textAccept || state.textDecline !== textDecline || state.text !== text)
-      this.setState({
-        textsArray: [
-          { text: textAccept, value: true },
-          { text: textDecline, value: false },
-        ],
-      });
-  }
+  const onClick = useCallback((isAccept) => props.emit(isAccept ? props.EVENTS.CONFIRM.ACCEPT : props.EVENTS.CONFIRM.DECLINE), []);
 
-  onAccept = () => this.props.emit(this.props.EVENTS.CONFIRM.ACCEPT);
-  onDecline = () => this.props.emit(this.props.EVENTS.CONFIRM.DECLINE);
+  const propsView = props.PARAMS.CONFIRM_VIEW.VIEW_PROPS;
 
-  renderOneTitle = (text = "", i) => (
-    <Text
-      key={i}
-      text={text}
-      size={96}
-      width={3120}
-      align={Text.ALIGNS.CENTER}
-    />
-  );
-
-  onClick = (isAccept) => (isAccept ? this.onAccept() : this.onDecline());
+  const propsScreen = useMemo(() => ({ ...propsView.screen, isShow }), [isShow]);
+  const propsControls = useMemo(() => ({ ...propsView.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
 
-  render() {
-    const { isShow = false, text = "", textsArray = [], currentItem = null } = this.state;
+  const renderedTitle = useMemo(() => (text || "").split("\n").map((text = "", i) => <Text {...{ ...propsView.text, key: i, text }} />), [text]);
 
-    const titles = (text || "").split("\n");
-
-    return (
-      <Screen
-        zIndex={ZINDEX}
-        isShow={isShow}
-        withBlur={true}
-        withDark={true}
-        transition={TRANSITION}
-      >
-        <PositionBox isCentered={true}>
-          <Flex
-            direction={Flex.DIRECTION.COLUMN}
-            gap={60}
-          >
-            <Flex
-              direction={Flex.DIRECTION.COLUMN}
-              gap={12}
-            >
-              {titles.map(this.renderOneTitle)}
-            </Flex>
-            <TextControls
-              selectedIndex={currentItem}
-              wrapWidth={3120}
-              flexGap={0}
-              flexJustify={Flex.JUSTIFY.CENTER}
-              textSize={72}
-              textWidth={780}
-              textAlign={Text.ALIGNS.CENTER}
-              texts={textsArray}
-              onClick={this.onClick}
-            />
-          </Flex>
-        </PositionBox>
-      </Screen>
-    );
-  }
-}
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.position}>
+        <Flex {...propsView.flex}>
+          <Flex {...propsView.flexTitles}>{renderedTitle}</Flex>
+          <TextControls {...propsControls} />
+        </Flex>
+      </PositionBox>
+    </Screen>
+  );
+};
 
-export const render = (props, root, resolve) => ReactDOM.render(<ConfirmView {...props} />, root, resolve);
+export const render = (props, root) => ReactDOM.render(<ConfirmView {...props} />, root);