@vnejs/plugins.views.screens.loading 0.1.4

package/const/events.js

@@ -0,0 +1,6 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:loading:show",
+  HIDE: "vne:loading:hide",
+  EMIT: "vne:loading:emit",
+  UPDATE: "vne:loading:update",
+};

package/const/params.js

@@ -0,0 +1,13 @@
+export const MIN_SHOW_TIME = 200;
+
+export const BACKGROUND = "loading";
+
+export const TRANSITION = 500;
+export const ZINDEX = 10000;
+export const LOC_LABEL = "loading";
+
+export const VIEW_PROPS = {
+  position: { bottom: 120, right: 120 },
+  text: { size: 144 },
+  screen: { transition: TRANSITION, zIndex: ZINDEX },
+};

package/index.js

@@ -0,0 +1,10 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { LoadingController } from "./modules/controller";
+import { Loading } from "./modules/loading";
+import { LoadingView } from "./modules/view";
+
+regPlugin("LOADING", { events: SUBSCRIBE_EVENTS, params }, [LoadingController, Loading, LoadingView]);

package/modules/controller.js

@@ -0,0 +1,23 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class LoadingController extends ModuleController {
+  name = "loading.controller";
+
+  bgName = this.PARAMS.LOADING.BACKGROUND;
+  controls = {};
+  controlsIndex = this.PARAMS.LOADING.ZINDEX;
+  updateEvent = this.EVENTS.LOADING.UPDATE;
+
+  subscribe = () => {
+    this.on(this.EVENTS.LOADING.SHOW, this.onShow);
+    this.on(this.EVENTS.LOADING.HIDE, this.onHide);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.loadBgMedia);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+
+  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src });
+
+  onMemoryCleared = async () => this.updateStateAndViewFast({ bgSrc: (await this.loadBgMedia()).src });
+}

package/modules/loading.js

@@ -0,0 +1,17 @@
+import { Module } from "@vnejs/module";
+
+export class Loading extends Module {
+  name = "loading";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LOADING.EMIT, this.onLoadingEmit);
+  };
+
+  onLoadingEmit = async ({ promiseFunc } = {}) => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "start" } });
+    await this.emit(this.EVENTS.LOADING.SHOW);
+    await Promise.all([promiseFunc(), this.waitTimeout(this.PARAMS.LOADING.MIN_SHOW_TIME)]);
+    await this.emit(this.EVENTS.LOADING.HIDE);
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "finish" } });
+  };
+}

package/modules/view.js

@@ -0,0 +1,14 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class LoadingView extends ModuleView {
+  name = "loading.view";
+
+  locLabel = this.PARAMS.LOADING.LOC_LABEL;
+  animationTime = this.PARAMS.LOADING.TRANSITION;
+  updateEvent = this.EVENTS.LOADING.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.loading",
+  "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,24 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { PositionBox, Screen, Text } from "@vnejs/uis.react";
+
+const Loading = ({ store, onMount, ...props }) => {
+  const [{ isShow = false, isForce = false, bgSrc = "", locs = {} }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const propsText = useMemo(() => ({ ...props.PARAMS.LOADING.VIEW_PROPS.text, text: locs.text }), [locs]);
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.LOADING.VIEW_PROPS.screen, bgSrc, isShow, isForce }), [bgSrc, isShow, isForce]);
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...props.PARAMS.LOADING.VIEW_PROPS.position}>
+        <Text {...propsText} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Loading {...props} />);