@vnejs/plugins.views.screens.mainmenu.socials 0.1.2

package/const/const.js

@@ -0,0 +1,5 @@
+export const TYPES = {
+  VKONTAKTE: "vk",
+  TELEGRAMM: "tg",
+  YOUTUBE: "yt",
+};

package/const/events.js

@@ -0,0 +1,3 @@
+export const SUBSCRIBE_EVENTS = {
+  UPDATE: "vne:mainmenu_socials:update",
+};

package/const/params.js

@@ -0,0 +1,7 @@
+export const VIEW_PROPS = {
+  position: { bottom: 240, right: 240 },
+  icon: { width: 120, height: 120, isOpacityOnHover: true },
+  flex: { gap: 60 },
+};
+
+export const ITEMS = [];

package/index.js

@@ -0,0 +1,10 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { MainMenuSocials } from "./modules/controller";
+import { MainMenuSocialsView } from "./modules/view";
+
+regPlugin("MAINMENU_SOCIALS_VIEW", { constants, events: SUBSCRIBE_EVENTS, params }, [MainMenuSocials, MainMenuSocialsView]);

package/modules/controller.js

@@ -0,0 +1,28 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class MainMenuSocials extends ModuleController {
+  name = "mainmenu.socials.controller";
+
+  updateEvent = this.EVENTS.MAINMENU_SOCIALS_VIEW.UPDATE;
+
+  subscribe = () => {
+    this.on(this.EVENTS.MAINMENU.SHOW, this.onShow);
+    this.on(this.EVENTS.MAINMENU.HIDE, this.onHide);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onHideForce);
+    this.on(this.EVENTS.STATE.SET, this.onHideForce);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+    this.on(this.EVENTS.SYSTEM.STARTED, this.getItems);
+  };
+
+  beforeShow = async () => this.updateState({ items: await this.getItems() });
+
+  getItems = () => Promise.all(this.PARAMS.MAINMENU_SOCIALS_VIEW.ITEMS.map(this.mapItems));
+
+  mapItems = async ({ href, media }) => ({ href, mediaSrc: (await this.loadIconMedia(media)).src });
+
+  loadIconMedia = (media) => this.loadImageMedia(`socials/${media}`, "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY]);
+
+  onMemoryCleared = async () => this.state.isShow && this.updateStateAndViewFast({ items: await this.getItems() });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.mainmenu.socials",
+  "version": "0.1.2",
+  "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,41 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Flex, Icon, View } from "@vnejs/uis.react";
+
+const iconOnClick = (href = "") => window.open(href, "_blank");
+
+const renderOneIcon = ({ href = "", mediaSrc = "", propsIcon = {} } = {}) => (
+  <Icon
+    {...propsIcon}
+    key={mediaSrc}
+    src={mediaSrc}
+    isDisabled={!href}
+    opacity={!href ? 0.5 : null}
+    onClick={iconOnClick}
+    value={href}
+  />
+);
+
+export const MainMenuSocials = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, items = [] }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const itemsWithProps = useMemo(() => items.map((item) => ({ ...item, propsIcon: props.PARAMS.MAINMENU_SOCIALS_VIEW.VIEW_PROPS.icon })), [items]);
+
+  return (
+    <View
+      {...props.PARAMS.MAINMENU_SOCIALS_VIEW.VIEW_PROPS.position}
+      isShow={isShow}
+      isForce={isForce}
+      transition={props.PARAMS.MAINMENU.TRANSITION}
+      zIndex={props.PARAMS.MAINMENU.ZINDEX + 100}
+    >
+      <Flex {...props.PARAMS.MAINMENU_SOCIALS_VIEW.VIEW_PROPS.flex}>{itemsWithProps.map(renderOneIcon)}</Flex>
+    </View>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<MainMenuSocials {...props} />);