@vnejs/plugins.view.coralina.confirm 0.0.1 → 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,16 +1,19 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class ConfirmController extends Module.Controller {
+export class ConfirmController extends ModuleController {
   name = "confirm.controller";
 
+  maxCurrentItem = 1;
+
   updateEvent = this.EVENTS.CONFIRM.UPDATE;
   controls = {
-    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => this.emit(this.EVENTS.CONFIRM.ACCEPT),
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => this.emit(this.maxCurrentItem === 0 ? this.EVENTS.CONFIRM.ACCEPT : this.EVENTS.CONFIRM.DECLINE),
     [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.CONFIRM.ACCEPT),
     [this.CONST.CONTROLS.BUTTONS.BACK]: () => this.emit(this.EVENTS.CONFIRM.DECLINE),
-    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => this.emit(this.EVENTS.CONFIRM.DECLINE),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.incCurrentItem,
   };
-  controlsIndex = 5000;
+  controlsIndex = this.PARAMS.CONFIRM_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.CONFIRM.SHOW, this.onShow);

package/modules/view.js

@@ -1,11 +1,13 @@
-import { Module } from "@vnejs/module";
+import { ModuleView } from "@vnejs/module.components";
 
 import { render } from "../view";
 
-export class ConfirmView extends Module.View {
+export class ConfirmView extends ModuleView {
   name = "confirm.view";
-  animationTime = 300;
-  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,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.confirm",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
     "publish:major": "npm version major && npm publish --access public",
     "publish:minor": "npm version minor && npm publish --access public",
     "publish:patch": "npm version patch && npm publish --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": "",
-  "peerDependencies": {
-    "@vnejs/shared": "*",
-    "@vnejs/module": "*"
-  }
+  "description": ""
 }

package/view/index.jsx

@@ -1,45 +1,36 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { Flex, PositionBox, Screen, Text, TextControls } from "@vnejs/uis.base";
 
-import "./index.styl";
+const ConfirmView = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, text = "", textAccept = "", textDecline = "", currentItem: selectedIndex = null }, setState] = useState({});
+  const [texts, setTexts] = useState([]);
 
-const b = cn("ConfirmView");
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
 
-class ConfirmView extends React.Component {
-  state = { isShow: false, text: "", textAccept: "", textDecline: "" };
+  useEffect(() => void setTexts([textAccept, textDecline].map((text, i) => ({ text, value: i === 0 }))), [textAccept, textDecline]);
 
-  onAccept = () => this.props.emit(this.props.EVENTS.CONFIRM.ACCEPT);
-  onDecline = () => this.props.emit(this.props.EVENTS.CONFIRM.DECLINE);
+  const onClick = useCallback((isAccept) => props.emit(isAccept ? props.EVENTS.CONFIRM.ACCEPT : props.EVENTS.CONFIRM.DECLINE), []);
 
-  renderOneLine = (line = "", i) => (
-    <div key={i} className={b("text", ["text"])}>
-      {line}
-    </div>
-  );
+  const propsView = props.PARAMS.CONFIRM_VIEW.VIEW_PROPS;
+
+  const propsScreen = useMemo(() => ({ ...propsView.screen, isShow }), [isShow]);
+  const propsControls = useMemo(() => ({ ...propsView.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
+
+  const renderedTitle = useMemo(() => (text || "").split("\n").map((text = "", i) => <Text {...{ ...propsView.text, key: i, text }} />), [text]);
 
-  renderControl = (text, onClick) => (
-    <div className={b("control", ["text"])} onClick={onClick}>
-      {text}
-    </div>
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.position}>
+        <Flex {...propsView.flex}>
+          <Flex {...propsView.flexTitles}>{renderedTitle}</Flex>
+          <TextControls {...propsControls} />
+        </Flex>
+      </PositionBox>
+    </Screen>
   );
+};
 
-  render() {
-    const { isShow = false, text = "", textAccept = "", textDecline = "" } = this.state;
-
-    return (
-      <div className={b({ isShow })}>
-        <div className={b("wrap")}>
-          <div className={b("texts", ["textWrap_60"])}>{(text || "").split("\n").map(this.renderOneLine)}</div>
-          <div className={b("controls", ["textWrap_60"])}>
-            {this.renderControl(textAccept, this.onAccept)}
-            {this.renderControl(textDecline, this.onDecline)}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<ConfirmView {...props} />, root, resolve);
+export const render = (props, root) => ReactDOM.render(<ConfirmView {...props} />, root);

package/view/index.styl

@@ -1,59 +0,0 @@
-.ConfirmView
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    display: flex
-    align-items: center
-    justify-content: center
-    z-index: 9000
-    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 14.04%, rgba(0,0,0,0.45) 27.9%, rgba(0,0,0,0.55) 45.51%, rgba(0,0,0,0.7) 66.85%, rgba(0,0,0,0.85) 100%);
-    backdrop-filter: blur(5px) brightness(0.5)
-    font-family: Montserrat
-    pointer-events: none
-    opacity: 0
-    transition: opacity 300ms
-
-    &-wrap
-        display: flex
-        flex-direction: column
-        align-items: center
-        justify-content: center
-
-        text-align: center
-
-        height: calc(1000 / 2160 * 100%)
-        gap: calc(50 / 1000 * 100%)
-
-    &-texts
-        display: flex;
-        flex-direction: column
-        justify-content: flex-end
-        width: 100%;
-        height: calc(450 / 1000 * 100%)
-
-    &-text
-        color: rgba(255,255,255,0.6)
-
-    &-controls
-        display: flex;
-        justify-content: space-around;
-        align-items: flex-start
-        width: 100%;
-        height: calc(450 / 1000 * 100%)
-
-    &-control
-        cursor: pointer
-        color: rgba(255,255,255,0.6)
-
-        transition: color 300ms, text-shadow 300ms, transform 300ms
-
-        &:hover
-            text-shadow: 0px 5px 25px rgba(255,255,255,0.75)
-            transform: scale(1.5)
-            color: white
-
-    &_isShow
-        pointer-events: all
-        opacity: 1