@vnejs/plugins.views.screens.confirm 0.1.4

package/const/events.js

@@ -0,0 +1,9 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:confirm:show",
+  HIDE: "vne:confirm:hide",
+  EMIT: "vne:confirm:emit",
+  UPDATE: "vne:confirm:update",
+  ACCEPT: "vne:confirm:accept",
+  CHOOSE: "vne:confirm:choose",
+  DECLINE: "vne:confirm:decline",
+};

package/const/params.js

@@ -0,0 +1,11 @@
+export const TRANSITION = 500;
+export const ZINDEX = 9000;
+
+export const VIEW_PROPS = {
+  screen: { withBlur: true, withDark: 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

@@ -0,0 +1,11 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+
+import * as params from "./const/params";
+
+import { Confirm } from "./modules/confirm";
+import { ConfirmController } from "./modules/controller";
+import { ConfirmView } from "./modules/view";
+
+regPlugin("CONFIRM", { events: SUBSCRIBE_EVENTS, params }, [Confirm, ConfirmController, ConfirmView]);

package/modules/confirm.js

@@ -0,0 +1,27 @@
+import { Module } from "@vnejs/module";
+
+export class Confirm extends Module {
+  name = "confirm";
+
+  subscribe = () => {
+    this.on(this.EVENTS.CONFIRM.EMIT, this.onEmit);
+    this.on(this.EVENTS.CONFIRM.ACCEPT, this.onAccept);
+    this.on(this.EVENTS.CONFIRM.DECLINE, this.onDecline);
+  };
+
+  onEmit = ({ onAccept, onDecline, ...args } = {}) => {
+    this.onAccept = onAccept;
+    this.onDecline = onDecline;
+    return this.emit(this.EVENTS.CONFIRM.SHOW, { ...args, onClose: this.onClose });
+  };
+
+  onClose = () => {
+    delete this.onAccept;
+    delete this.onDecline;
+  };
+
+  onAccept = () => Promise.all([this.accept(), this.emit(this.EVENTS.CONFIRM.HIDE)].filter(Boolean));
+  onDecline = () => Promise.all([this.decline(), this.emit(this.EVENTS.CONFIRM.HIDE)].filter(Boolean));
+  accept = () => this.onAccept && this.onAccept();
+  decline = () => this.onDecline && this.onDecline();
+}

package/modules/controller.js

@@ -0,0 +1,26 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class ConfirmController extends ModuleController {
+  name = "confirm.controller";
+
+  maxCurrentItem = 1;
+
+  updateEvent = this.EVENTS.CONFIRM.UPDATE;
+  controls = {
+    [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.ARROW_LEFT]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.incCurrentItem,
+  };
+  controlsIndex = this.PARAMS.CONFIRM.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.CONFIRM.SHOW, this.onShow);
+    this.on(this.EVENTS.CONFIRM.HIDE, this.onHide);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onHide);
+  };
+
+  beforeShow = (args) => this.setState(args);
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.confirm",
+  "version": "0.1.4",
+  "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": ""
+}

package/view/index.jsx

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Flex, PositionBox, Screen, Text, TextControls } from "@vnejs/uis.react";
+
+const renderTitleLine = ({ text, props } = {}) => (
+  <Text
+    {...props}
+    text={text}
+    key={text}
+  />
+);
+
+const mapChoises = (text, i) => ({ text, value: i === 0 });
+
+const ConfirmView = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, text = "", textAccept = "", textDecline = "", currentItem: selectedIndex = null }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const texts = useMemo(() => [textAccept, textDecline].filter(Boolean).map(mapChoises), [textAccept, textDecline]);
+
+  const onClick = useCallback((isAccept) => props.emit(isAccept ? props.EVENTS.CONFIRM.ACCEPT : props.EVENTS.CONFIRM.DECLINE), []);
+
+  const propsView = props.PARAMS.CONFIRM.VIEW_PROPS;
+
+  const propsScreen = useMemo(() => ({ ...propsView.screen, isShow, isForce }), [isShow, isForce]);
+  const propsControls = useMemo(() => ({ ...propsView.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
+
+  const textsWithProps = useMemo(() => (text || "").split("\n").map((text = "") => ({ text, props: propsView.text })), [text]);
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.position}>
+        <Flex {...propsView.flex}>
+          <Flex {...propsView.flexTitles}>{textsWithProps.map(renderTitleLine)}</Flex>
+          <TextControls {...propsControls} />
+        </Flex>
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<ConfirmView {...props} />);