@vnejs/plugins.views.screens.gallery 0.1.5 → 0.1.7

package/{modules/controller.js → src/modules/controller.ts}

@@ -1,15 +1,32 @@
 import { ModuleController } from "@vnejs/module.components";
 
-export class GalleryController extends ModuleController {
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type {
+  GalleryChoosePayload,
+  GalleryCurrentItem,
+  GalleryMapTabContentPayload,
+  GalleryPageSetPayload,
+  GalleryPluginState,
+  GalleryTypeSetPayload,
+} from "../utils/gallery.js";
+
+export class GalleryController extends ModuleController<
+  GalleryPluginEvents,
+  GalleryPluginConstants,
+  GalleryPluginSettings,
+  GalleryPluginParams,
+  GalleryPluginState
+> {
   name = "gallery.controller";
 
   updateEvent = this.EVENTS.GALLERY.UPDATE;
 
   bgName = this.PARAMS.GALLERY.BACKGROUND;
 
-  maxPagesCount = {};
+  maxPagesCount: Record<string, number> = {};
+  itemsOnPage!: number;
 
-  emitHide = () => this.emit(this.EVENTS.GALLERY.HIDE);
+  emitHide = () => void this.emit(this.EVENTS.GALLERY.HIDE);
 
   initRowAndColumns = () => this.updateStateAndViewFast({ currentRow: 0, currentColumn: 0 });
   incRow = () => {
@@ -17,11 +34,11 @@ export class GalleryController extends ModuleController {
 
     const maxRows = this.PARAMS.GALLERY.ROWS;
 
-    if (this.state.currentRow + 1 < maxRows) {
-      this.updateStateAndView({ currentRow: this.state.currentRow + 1 });
-    } else if (this.state.currentPage + 1 < this.state.pages) {
+    if ((this.state.currentRow ?? 0) + 1 < maxRows) {
+      this.updateStateAndView({ currentRow: this.state.currentRow! + 1 });
+    } else if (this.state.currentPage! + 1 < this.state.pages!) {
       this.updateState({ currentRow: 0 });
-      this.updatePageAndType(this.state.currentPage + 1, false, true);
+      this.updatePageAndType(this.state.currentPage! + 1, false, true);
     }
   };
   decRow = () => {
@@ -30,10 +47,10 @@ export class GalleryController extends ModuleController {
     const maxRows = this.PARAMS.GALLERY.ROWS;
 
     if (this.state.currentRow !== 0) {
-      this.updateStateAndView({ currentRow: this.state.currentRow - 1 });
-    } else if (this.state.currentPage > 0) {
+      this.updateStateAndView({ currentRow: this.state.currentRow! - 1 });
+    } else if (this.state.currentPage! > 0) {
       this.updateState({ currentRow: maxRows - 1 });
-      this.updatePageAndType(this.state.currentPage - 1, false, true);
+      this.updatePageAndType(this.state.currentPage! - 1, false, true);
     }
   };
   incColumn = () => {
@@ -41,11 +58,11 @@ export class GalleryController extends ModuleController {
 
     const maxColumns = this.PARAMS.GALLERY.COLUMNS;
 
-    if (this.state.currentColumn + 1 < maxColumns) {
-      this.updateStateAndView({ currentColumn: this.state.currentColumn + 1 });
-    } else if (this.state.currentPage + 1 < this.state.pages) {
+    if ((this.state.currentColumn ?? 0) + 1 < maxColumns) {
+      this.updateStateAndView({ currentColumn: this.state.currentColumn! + 1 });
+    } else if (this.state.currentPage! + 1 < this.state.pages!) {
       this.updateState({ currentColumn: 0 });
-      this.updatePageAndType(this.state.currentPage + 1, false, true);
+      this.updatePageAndType(this.state.currentPage! + 1, false, true);
     }
   };
   decColumn = () => {
@@ -54,40 +71,43 @@ export class GalleryController extends ModuleController {
     const maxColumns = this.PARAMS.GALLERY.COLUMNS;
 
     if (this.state.currentColumn !== 0) {
-      this.updateStateAndView({ currentColumn: this.state.currentColumn - 1 });
-    } else if (this.state.currentPage > 0) {
+      this.updateStateAndView({ currentColumn: this.state.currentColumn! - 1 });
+    } else if (this.state.currentPage! > 0) {
       this.updateState({ currentColumn: maxColumns - 1 });
-      this.updatePageAndType(this.state.currentPage - 1, false, true);
+      this.updatePageAndType(this.state.currentPage! - 1, false, true);
     }
   };
-  accept = () => this.emit(this.EVENTS.GALLERY.CHOOSE, { index: this.state.currentColumn + this.state.currentRow * this.PARAMS.GALLERY.COLUMNS });
+  accept = () =>
+    void this.emit(this.EVENTS.GALLERY.CHOOSE, {
+      index: this.state.currentColumn! + this.state.currentRow! * this.PARAMS.GALLERY.COLUMNS,
+    } satisfies GalleryChoosePayload);
   onPrevTab = () => {
     const keys = Object.keys(this.PARAMS.GALLERY.TABS);
     const currentTypeIndex = keys.findIndex((key) => key === this.state.currentType);
     const type = currentTypeIndex === 0 ? keys[keys.length - 1] : keys[(currentTypeIndex - 1) % keys.length];
 
-    this.emit(this.EVENTS.GALLERY.TYPE_SET, { type });
+    void this.emit(this.EVENTS.GALLERY.TYPE_SET, { type } satisfies GalleryTypeSetPayload);
   };
   onNextTab = () => {
     const keys = Object.keys(this.PARAMS.GALLERY.TABS);
     const currentTypeIndex = keys.findIndex((key) => key === this.state.currentType);
     const type = currentTypeIndex === keys.length - 1 ? keys[0] : keys[(currentTypeIndex + 1) % keys.length];
 
-    this.emit(this.EVENTS.GALLERY.TYPE_SET, { type });
+    void this.emit(this.EVENTS.GALLERY.TYPE_SET, { type } satisfies GalleryTypeSetPayload);
   };
 
   controls = {
-    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decRow,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: this.incColumn,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incRow,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: this.decColumn,
-    [this.CONST.CONTROLS.BUTTONS.TAB_PREV]: this.onPrevTab,
-    [this.CONST.CONTROLS.BUTTONS.TAB_NEXT]: this.onNextTab,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.accept,
-    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.accept,
+    [this.CONST.CONTROLS.BUTTONS.BACK]: () => void this.emitHide(),
+    [this.CONST.CONTROLS.BUTTONS.MENU]: () => void this.emitHide(),
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => void this.emitHide(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => void this.decRow(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.incColumn(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.incRow(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => void this.decColumn(),
+    [this.CONST.CONTROLS.BUTTONS.TAB_PREV]: () => void this.onPrevTab(),
+    [this.CONST.CONTROLS.BUTTONS.TAB_NEXT]: () => void this.onNextTab(),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.accept(),
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.accept(),
   };
   controlsIndex = this.PARAMS.GALLERY.ZINDEX;
 
@@ -118,13 +138,13 @@ export class GalleryController extends ModuleController {
   afterHide = () => this.setDefaultState();
 
   onStarted = () => Object.keys(this.PARAMS.GALLERY.TABS).forEach(this.calcMaxPageCount);
-  onPreload = () => Promise.all([this.loadBgMedia(), this.getItemsInfo(Object.keys(this.PARAMS.GALLERY.TABS)[0], 0).map(this.mapTabContent)]);
+  onPreload = () => Promise.all([this.loadBgMedia(), ...this.getItemsInfo(Object.keys(this.PARAMS.GALLERY.TABS)[0], 0).map(this.mapTabContent)]);
   onMemoryCleared = () => {
     if (!this.state.isShow) return;
 
     const { currentPage = 0, currentType = "" } = this.state;
 
-    const promises = [this.loadBgMedia(), ...this.getItemsInfo(currentType, currentPage).map(this.mapTabContent)];
+    const promises: Promise<unknown>[] = [this.loadBgMedia(), ...this.getItemsInfo(currentType, currentPage).map(this.mapTabContent)];
 
     if (currentPage > 0) promises.push(...this.getItemsInfo(currentType, currentPage - 1).map(this.mapTabContent));
     if (currentPage + 1 < this.maxPagesCount[currentType]) promises.push(...this.getItemsInfo(currentType, currentPage + 1).map(this.mapTabContent));
@@ -134,32 +154,33 @@ export class GalleryController extends ModuleController {
     return Promise.all(promises);
   };
 
-  onPageSet = ({ page } = {}) => page !== this.state.currentPage && this.updatePageAndType(page);
-  onTypeSet = ({ type } = {}) => type !== this.state.currentType && this.updatePageAndType(0, type);
+  onPageSet = ({ page }: GalleryPageSetPayload = {}) => page !== this.state.currentPage && this.updatePageAndType(page);
+  onTypeSet = ({ type }: GalleryTypeSetPayload = {}) => type !== this.state.currentType && this.updatePageAndType(0, type);
 
-  updatePageAndType = async (page, type, isUpdateView = true) => {
+  updatePageAndType = async (page?: number, type?: string | false, isUpdateView = true) => {
     this.updateState({ currentPage: page });
     if (type) this.updateState({ currentType: type, pages: this.maxPagesCount[type], currentColumn: null, currentRow: null });
 
-    const currentItems = await Promise.all(this.getItemsInfo(this.state.currentType, this.state.currentPage).map(this.mapTabContent));
+    const currentItems = await Promise.all(this.getItemsInfo(this.state.currentType!, this.state.currentPage!).map(this.mapTabContent));
 
-    while (currentItems.length < this.itemsOnPage) currentItems.push({ isStub: true });
-    this.updateState({ currentItems });
+    const items: GalleryCurrentItem[] = [...currentItems];
+    while (items.length < this.itemsOnPage) items.push({ isStub: true });
+    this.updateState({ currentItems: items });
     if (isUpdateView) await this.updateViewFast();
 
     this.emit(this.EVENTS.MEMORY.CLEAR);
   };
 
-  mapTabContent = async ({ check, mediaType, name, fullName } = {}) => {
-    const isOpened = await this.emitOne(this.EVENTS.GALLERY.CHECK, { key: check });
+  mapTabContent = async ({ check, mediaType, name, fullName }: GalleryMapTabContentPayload = { check: "", mediaType: "", name: "", fullName: "" }) => {
+    const isOpened = Boolean(await this.emitOne(this.EVENTS.GALLERY.CHECK, { key: check }));
     const src = isOpened ? (await this.loadImageMedia(name, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src : "";
 
     return { isOpened, fullName, src, mediaType };
   };
 
-  getItemsInfo = (type, page) => this.PARAMS.GALLERY.TABS[type].content.slice(page * this.itemsOnPage, (page + 1) * this.itemsOnPage);
+  getItemsInfo = (type: string, page: number) => this.PARAMS.GALLERY.TABS[type].content.slice(page * this.itemsOnPage, (page + 1) * this.itemsOnPage);
 
-  calcMaxPageCount = (type) => {
+  calcMaxPageCount = (type: string) => {
     this.maxPagesCount[type] = Math.ceil(this.PARAMS.GALLERY.TABS[type].content.length / this.itemsOnPage);
   };
 }

package/src/modules/gallery.ts

@@ -0,0 +1,22 @@
+import { Module } from "@vnejs/module";
+
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type { GalleryCheckPayload, GalleryOpenPayload } from "../utils/gallery.js";
+
+const STORAGE_VALUE = 1;
+
+const isEqualStorageValueFunc = (value: unknown) => value === STORAGE_VALUE;
+
+export class Gallery extends Module<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams> {
+  name = "gallery";
+
+  subscribe = () => {
+    this.on(this.EVENTS.GALLERY.OPEN, this.onOpen);
+    this.on(this.EVENTS.GALLERY.CHECK, this.onCheck);
+    this.on(this.EVENTS.GALLERY.CLEAR, this.onClear);
+  };
+
+  onOpen = ({ key }: GalleryOpenPayload = {}) => this.emit(this.EVENTS.STORAGE.SET, { module: this.name, key, value: STORAGE_VALUE });
+  onCheck = ({ key }: GalleryCheckPayload = {}) => this.emitOne(this.EVENTS.STORAGE.GET, { module: this.name, key })!.then(isEqualStorageValueFunc);
+  onClear = () => this.emit(this.EVENTS.STORAGE.RM_ALL, { module: this.name });
+}

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type { GalleryPluginState } from "../utils/gallery.js";
+
+export class GalleryView extends ModuleView<
+  GalleryPluginEvents,
+  GalleryPluginConstants,
+  GalleryPluginSettings,
+  GalleryPluginParams,
+  GalleryPluginState
+> {
+  name = "gallery.view";
+
+  locLabel = this.PARAMS.GALLERY.LOC_LABEL;
+  animationTime = this.PARAMS.GALLERY.TRANSITION;
+  updateEvent = this.EVENTS.GALLERY.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as StoragePluginName, SubscribeEvents as StorageSubscribeEvents } from "@vnejs/plugins.core.storage.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.gallery.contract";
+
+export type GalleryPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<StoragePluginName, StorageSubscribeEvents> &
+  Record<MemoryPluginName, MemorySubscribeEvents> &
+  Record<StatePluginName, StateSubscribeEvents> &
+  Record<SystemPluginName, SystemSubscribeEvents>;
+
+export type GalleryPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type GalleryPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+
+export type GalleryPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/src/utils/gallery.ts

@@ -0,0 +1,54 @@
+import type { Module } from "@vnejs/module";
+
+import type { GalleryTabContent } from "@vnejs/plugins.views.screens.gallery.contract";
+
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+
+export type GalleryCurrentItem = {
+  isStub?: boolean;
+  isOpened?: boolean;
+  fullName?: string;
+  src?: string;
+  mediaType?: string;
+};
+
+export type GalleryPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  locs?: Record<string, string>;
+  bgSrc?: string;
+  currentType?: string;
+  currentPage?: number;
+  pages?: number;
+  currentRow?: number | null;
+  currentColumn?: number | null;
+  currentItems?: GalleryCurrentItem[];
+};
+
+export type GalleryViewContext = {
+  emit: Module<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams, GalleryPluginState>["emit"];
+  EVENTS: GalleryPluginEvents;
+  PARAMS: GalleryPluginParams;
+};
+
+export type GalleryOpenPayload = {
+  key?: string;
+};
+
+export type GalleryCheckPayload = {
+  key?: string;
+};
+
+export type GalleryPageSetPayload = {
+  page?: number;
+};
+
+export type GalleryTypeSetPayload = {
+  type?: string;
+};
+
+export type GalleryChoosePayload = {
+  index?: number;
+};
+
+export type GalleryMapTabContentPayload = GalleryTabContent;

package/src/view/components/GalleryClose.tsx

@@ -0,0 +1,17 @@
+import { useCallback, useMemo } from "react";
+
+import { PositionBox, Svg } from "@vnejs/uis.react";
+
+import type { GalleryViewContext } from "../../utils/gallery.js";
+
+export const GalleryClose = ({ emit, EVENTS, PARAMS }: GalleryViewContext) => {
+  const onClick = useCallback(() => void emit(EVENTS.GALLERY.HIDE), [emit, EVENTS.GALLERY.HIDE]);
+
+  const propsSvg = useMemo(() => ({ ...PARAMS.GALLERY.VIEW_PROPS.close.svg, onClick }), [PARAMS.GALLERY.VIEW_PROPS.close.svg, onClick]);
+
+  return (
+    <PositionBox {...PARAMS.GALLERY.VIEW_PROPS.close.position}>
+      <Svg.Cross {...propsSvg} />
+    </PositionBox>
+  );
+};

package/src/view/components/GalleryControls.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useMemo } from "react";
+
+import { PositionBox, TextControls } from "@vnejs/uis.react";
+
+import type { GalleryViewContext } from "../../utils/gallery.js";
+
+type GalleryControlsProps = GalleryViewContext & {
+  locs: Record<string, string>;
+  currentType: string;
+};
+
+export const GalleryControls = ({ locs, currentType, emit, EVENTS, PARAMS }: GalleryControlsProps) => {
+  const texts = useMemo(
+    () => Object.keys(PARAMS.GALLERY.TABS).map((key) => ({ text: locs[PARAMS.GALLERY.TABS[key].locKey], value: key })),
+    [locs, PARAMS.GALLERY.TABS],
+  );
+  const selectedIndex = useMemo(() => Object.keys(PARAMS.GALLERY.TABS).findIndex((key) => key === currentType), [currentType, PARAMS.GALLERY.TABS]);
+
+  const onClick = useCallback((type?: unknown) => void emit(EVENTS.GALLERY.TYPE_SET, { type }), [emit, EVENTS.GALLERY.TYPE_SET]);
+
+  const propsControls = useMemo(
+    () => ({ ...PARAMS.GALLERY.VIEW_PROPS.controls.controls, selectedIndex, texts, onClick }),
+    [PARAMS.GALLERY.VIEW_PROPS.controls.controls, selectedIndex, texts, onClick],
+  );
+
+  return (
+    <PositionBox {...PARAMS.GALLERY.VIEW_PROPS.controls.position}>
+      <TextControls {...propsControls} />
+    </PositionBox>
+  );
+};

package/src/view/components/GalleryItems.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from "react";
+
+import { Flex, PositionBox, WrapWithContent } from "@vnejs/uis.react";
+
+import type { GalleryCurrentItem, GalleryViewContext } from "../../utils/gallery.js";
+
+type GalleryItemsProps = GalleryViewContext & {
+  currentItems?: GalleryCurrentItem[];
+  selectedIndex?: number;
+};
+
+export const GalleryItems = ({ currentItems = [], selectedIndex = -1, emit, EVENTS, PARAMS }: GalleryItemsProps) => {
+  const onSlotClick = useCallback((index?: unknown) => void emit(EVENTS.GALLERY.CHOOSE, { index: Number(index) }), [emit, EVENTS.GALLERY.CHOOSE]);
+
+  const renderSlot = useCallback(
+    (item: GalleryCurrentItem, i: number) => {
+      if (item.isStub)
+        return (
+          <div
+            {...PARAMS.GALLERY.VIEW_PROPS.items.stub}
+            key={i}
+          />
+        );
+
+      return (
+        <WrapWithContent
+          {...PARAMS.GALLERY.VIEW_PROPS.items.item}
+          key={item.isOpened ? item.src : i}
+          value={i}
+          imageSrc={item.isOpened ? item.src : undefined}
+          isSelected={selectedIndex === i}
+          onClick={item.isOpened ? onSlotClick : undefined}
+        />
+      );
+    },
+    [PARAMS.GALLERY.VIEW_PROPS.items, onSlotClick, selectedIndex],
+  );
+
+  return (
+    <PositionBox {...PARAMS.GALLERY.VIEW_PROPS.items.position}>
+      <Flex {...PARAMS.GALLERY.VIEW_PROPS.items.flex}>{currentItems.map(renderSlot)}</Flex>
+    </PositionBox>
+  );
+};

package/src/view/components/GalleryPages.tsx

@@ -0,0 +1,26 @@
+import { useCallback, useMemo } from "react";
+
+import { PageSelector, PositionBox } from "@vnejs/uis.react";
+
+import type { GalleryViewContext } from "../../utils/gallery.js";
+
+type GalleryPagesProps = GalleryViewContext & {
+  pagesCount?: number;
+  currentPage?: number;
+};
+
+export const GalleryPages = ({ pagesCount, currentPage, emit, EVENTS, PARAMS }: GalleryPagesProps) => {
+  const onPrevPage = useCallback(() => void emit(EVENTS.GALLERY.PAGE_SET, { page: currentPage! - 1 }), [emit, EVENTS.GALLERY.PAGE_SET, currentPage]);
+  const onNextPage = useCallback(() => void emit(EVENTS.GALLERY.PAGE_SET, { page: currentPage! + 1 }), [emit, EVENTS.GALLERY.PAGE_SET, currentPage]);
+
+  const propsSelector = useMemo(
+    () => ({ onPrevPage, onNextPage, pagesCount: pagesCount ?? 0, page: currentPage! + 1, pagesMinCount: 1 }),
+    [onPrevPage, onNextPage, pagesCount, currentPage],
+  );
+
+  return (
+    <PositionBox {...PARAMS.GALLERY.VIEW_PROPS.pages.position}>
+      <PageSelector {...propsSelector} />
+    </PositionBox>
+  );
+};

package/src/view/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./GalleryClose.js";
+export * from "./GalleryControls.js";
+export * from "./GalleryItems.js";
+export * from "./GalleryPages.js";

package/src/view/index.tsx

@@ -0,0 +1,49 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Screen, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type { GalleryPluginState, GalleryViewContext } from "../utils/gallery.js";
+import { GalleryClose, GalleryControls, GalleryItems, GalleryPages } from "./components/index.js";
+
+type GalleryComponentProps = ReactComponentProps<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams, GalleryPluginState>;
+
+const Gallery = ({ store, onMount, PARAMS, emit, EVENTS }: GalleryComponentProps) => {
+  const {
+    isShow = false,
+    isForce = false,
+    locs = {},
+    bgSrc = "",
+    currentType = "",
+    currentItems = [],
+    pages,
+    currentColumn = null,
+    currentRow = null,
+    currentPage,
+  } = useStoreState<GalleryPluginState>(store, onMount);
+
+  const selectedIndex = currentColumn !== null && currentRow !== null ? currentColumn + currentRow * 3 : -1;
+
+  const viewProps = useMemo<GalleryViewContext>(() => ({ emit, EVENTS, PARAMS }), [emit, EVENTS, PARAMS]);
+  const propsScreen = useMemo(
+    () => ({ ...PARAMS.GALLERY.VIEW_PROPS.screen, isShow, isForce, bgSrc }),
+    [isShow, isForce, bgSrc, PARAMS.GALLERY.VIEW_PROPS.screen],
+  );
+  const propsControls = useMemo(() => ({ ...viewProps, currentType, locs }), [viewProps, currentType, locs]);
+  const propsPages = useMemo(() => ({ ...viewProps, pagesCount: pages, currentPage }), [viewProps, pages, currentPage]);
+  const propsItems = useMemo(
+    () => ({ ...viewProps, currentItems, currentType, selectedIndex, locs }),
+    [viewProps, currentItems, currentType, selectedIndex, locs],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      <GalleryControls {...propsControls} />
+      <GalleryPages {...propsPages} />
+      <GalleryItems {...propsItems} />
+      <GalleryClose {...viewProps} />
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<GalleryPluginState> = createRenderFunc(Gallery);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,13 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  OPEN: "vne:gallery:open",
-  CHECK: "vne:gallery:check",
-  CLEAR: "vne:gallery:clear",
-
-  SHOW: "vne:gallery:show",
-  HIDE: "vne:gallery:hide",
-  PAGE_SET: "vne:gallery:page_set",
-  TYPE_SET: "vne:gallery:type_set",
-  UPDATE: "vne:gallery:update",
-  PRELOAD: "vne:gallery:preload",
-  CHOOSE: "vne:gallery:choose",
-};

package/const/params.js

@@ -1,32 +0,0 @@
-export const TABS = {};
-
-export const BACKGROUND = "save";
-
-export const TRANSITION = 300;
-export const ZINDEX = 4000;
-
-export const LOC_LABEL = "gallery";
-
-const [ITEM_WIDTH, ITEM_HEIGHT, ITEM_GAP] = [800, 450, 120];
-
-export const VIEW_PROPS = {
-  screen: { withBackgroundDark: true, zIndex: ZINDEX, transition: TRANSITION },
-  close: {
-    position: { right: 120, top: 90 },
-    svg: { size: 60 },
-  },
-  controls: {
-    position: { top: 240, left: 120 },
-    controls: { flexDirection: "column", flexGap: 60, textSize: 96 },
-  },
-  items: {
-    position: { top: 240, right: 120 },
-    flex: { gap: ITEM_GAP, withWrap: true, width: 2 * ITEM_GAP + 3 * ITEM_WIDTH },
-    stub: { width: ITEM_WIDTH, height: ITEM_HEIGHT },
-    item: { width: ITEM_WIDTH, height: ITEM_HEIGHT, withHover: true },
-  },
-  pages: { position: { bottom: 120, right: 120 } },
-};
-
-export const ROWS = 3;
-export const COLUMNS = 3;

package/index.js

@@ -1,10 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { GalleryController } from "./modules/controller";
-import { Gallery } from "./modules/gallery";
-import { GalleryView } from "./modules/view";
-
-regPlugin("GALLERY", { params, events: SUBSCRIBE_EVENTS }, [GalleryController, Gallery, GalleryView]);

package/modules/gallery.js

@@ -1,19 +0,0 @@
-import { Module } from "@vnejs/module";
-
-const STORAGE_VALUE = 1;
-
-const isEqualStorageValueFunc = (value) => value === STORAGE_VALUE;
-
-export class Gallery extends Module {
-  name = "gallery";
-
-  subscribe = () => {
-    this.on(this.EVENTS.GALLERY.OPEN, this.onOpen);
-    this.on(this.EVENTS.GALLERY.CHECK, this.onCheck);
-    this.on(this.EVENTS.GALLERY.CLEAR, this.onClear);
-  };
-
-  onOpen = ({ key } = {}) => this.emit(this.EVENTS.STORAGE.SET, { module: this.name, key, value: STORAGE_VALUE });
-  onCheck = ({ key } = {}) => this.emitOne(this.EVENTS.STORAGE.GET, { module: this.name, key }).then(isEqualStorageValueFunc);
-  onClear = () => this.emit(this.EVENTS.STORAGE.RM_ALL, { module: this.name });
-}

package/modules/view.js

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

package/view/components/GalleryClose.jsx

@@ -1,15 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-import { PositionBox, Svg } from "@vnejs/uis.react";
-
-export const GalleryClose = (props) => {
-  const onClick = useCallback(() => props.emit(props.EVENTS.GALLERY.HIDE));
-
-  const propsSvg = useMemo(() => ({ ...props.PARAMS.GALLERY.VIEW_PROPS.close.svg, onClick }), []);
-
-  return (
-    <PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.close.position}>
-      <Svg.Cross {...propsSvg} />
-    </PositionBox>
-  );
-};

package/view/components/GalleryControls.jsx

@@ -1,18 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-import { PositionBox, TextControls } from "@vnejs/uis.react";
-
-export const GalleryControls = ({ locs, currentType, ...props } = {}) => {
-  const texts = useMemo(() => Object.keys(props.PARAMS.GALLERY.TABS).map((key) => ({ text: locs[props.PARAMS.GALLERY.TABS[key].locKey], value: key })), [locs]);
-  const selectedIndex = useMemo(() => Object.keys(props.PARAMS.GALLERY.TABS).findIndex((key) => key === currentType), [currentType]);
-
-  const onClick = useCallback((type) => props.emit(props.EVENTS.GALLERY.TYPE_SET, { type }), []);
-
-  const propsControls = useMemo(() => ({ ...props.PARAMS.GALLERY.VIEW_PROPS.controls.controls, selectedIndex, texts, onClick }), [selectedIndex, texts]);
-
-  return (
-    <PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.controls.position}>
-      <TextControls {...propsControls} />
-    </PositionBox>
-  );
-};