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

package/modules/controller.js

@@ -1,16 +1,21 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class ConfirmController extends Module.Controller {
+import { ZINDEX } from "../view";
+
+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 = ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.CONFIRM.SHOW, this.onShow);

package/modules/view.js

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

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.confirm",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "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,43 +1,79 @@
 import React 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 b = cn("ConfirmView");
+export const TRANSITION = 500;
+export const ZINDEX = 9000;
 
 class ConfirmView extends React.Component {
-  state = { isShow: false, text: "", textAccept: "", textDecline: "" };
+  state = { isShow: false, text: "", textAccept: "", textDecline: "", currentItem: null, textsArray: [] };
+
+  componentDidUpdate(props, state) {
+    const { textAccept = "", textDecline = "", text = "" } = this.state;
+
+    if (state.textAccept !== textAccept || state.textDecline !== textDecline || state.text !== text)
+      this.setState({
+        textsArray: [
+          { text: textAccept, value: true },
+          { text: textDecline, value: false },
+        ],
+      });
+  }
 
   onAccept = () => this.props.emit(this.props.EVENTS.CONFIRM.ACCEPT);
   onDecline = () => this.props.emit(this.props.EVENTS.CONFIRM.DECLINE);
 
-  renderOneLine = (line = "", i) => (
-    <div key={i} className={b("text", ["text"])}>
-      {line}
-    </div>
+  renderOneTitle = (text = "", i) => (
+    <Text
+      key={i}
+      text={text}
+      size={96}
+      width={3120}
+      align={Text.ALIGNS.CENTER}
+    />
   );
 
-  renderControl = (text, onClick) => (
-    <div className={b("control", ["text"])} onClick={onClick}>
-      {text}
-    </div>
-  );
+  onClick = (isAccept) => (isAccept ? this.onAccept() : this.onDecline());
 
   render() {
-    const { isShow = false, text = "", textAccept = "", textDecline = "" } = this.state;
+    const { isShow = false, text = "", textsArray = [], currentItem = null } = this.state;
+
+    const titles = (text || "").split("\n");
 
     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>
+      <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>
     );
   }
 }

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