@vnejs/plugins.views.screens.gallery 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.js +7 -0
- package/dist/modules/controller.d.ts +61 -0
- package/dist/modules/controller.js +144 -0
- package/dist/modules/gallery.d.ts +10 -0
- package/dist/modules/gallery.js +14 -0
- package/dist/modules/view.d.ts +11 -0
- package/dist/modules/view.js +10 -0
- package/dist/types.d.ts +12 -0
- package/dist/types.js +1 -0
- package/dist/utils/gallery.d.ts +43 -0
- package/dist/utils/gallery.js +1 -0
- package/dist/view/components/GalleryClose.d.ts +2 -0
- package/dist/view/components/GalleryClose.js +8 -0
- package/dist/view/components/GalleryControls.d.ts +7 -0
- package/dist/view/components/GalleryControls.js +10 -0
- package/dist/view/components/GalleryItems.d.ts +7 -0
- package/dist/view/components/GalleryItems.js +13 -0
- package/dist/view/components/GalleryPages.d.ts +7 -0
- package/dist/view/components/GalleryPages.js +9 -0
- package/dist/view/components/index.d.ts +4 -0
- package/dist/view/components/index.js +4 -0
- package/dist/view/index.d.ts +3 -0
- package/dist/view/index.js +14 -0
- package/package.json +40 -6
- package/src/index.ts +10 -0
- package/{modules/controller.js → src/modules/controller.ts} +64 -43
- package/src/modules/gallery.ts +22 -0
- package/src/modules/view.ts +22 -0
- package/src/types.ts +21 -0
- package/src/utils/gallery.ts +54 -0
- package/src/view/components/GalleryClose.tsx +17 -0
- package/src/view/components/GalleryControls.tsx +31 -0
- package/src/view/components/GalleryItems.tsx +44 -0
- package/src/view/components/GalleryPages.tsx +26 -0
- package/src/view/components/index.ts +4 -0
- package/src/view/index.tsx +49 -0
- package/tsconfig.json +10 -0
- package/const/events.js +0 -13
- package/const/params.js +0 -32
- package/index.js +0 -10
- package/modules/gallery.js +0 -19
- package/modules/view.js +0 -14
- package/view/components/GalleryClose.jsx +0 -15
- package/view/components/GalleryControls.jsx +0 -18
- package/view/components/GalleryItems.jsx +0 -37
- package/view/components/GalleryPages.jsx +0 -16
- package/view/components/index.js +0 -4
- package/view/index.jsx +0 -33
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { useCallback } from "react";
|
|
2
|
-
|
|
3
|
-
import { Flex, PositionBox, WrapWithContent } from "@vnejs/uis.react";
|
|
4
|
-
|
|
5
|
-
export const GalleryItems = ({ currentItems = [], selectedIndex = -1, ...props } = {}) => {
|
|
6
|
-
const onSlotClick = useCallback((index) => props.emit(props.EVENTS.GALLERY.CHOOSE, { index }), []);
|
|
7
|
-
|
|
8
|
-
const renderSlot = useCallback(
|
|
9
|
-
(item, i) => {
|
|
10
|
-
if (item.isStub)
|
|
11
|
-
return (
|
|
12
|
-
<div
|
|
13
|
-
{...props.PARAMS.GALLERY.VIEW_PROPS.items.stub}
|
|
14
|
-
key={i}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<WrapWithContent
|
|
20
|
-
{...props.PARAMS.GALLERY.VIEW_PROPS.items.item}
|
|
21
|
-
key={item.isOpened ? item.src : i}
|
|
22
|
-
value={i}
|
|
23
|
-
imageSrc={item.isOpened && item.src}
|
|
24
|
-
isSelected={selectedIndex === i}
|
|
25
|
-
onClick={item.isOpened ? onSlotClick : undefined}
|
|
26
|
-
/>
|
|
27
|
-
);
|
|
28
|
-
},
|
|
29
|
-
[selectedIndex],
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.items.position}>
|
|
34
|
-
<Flex {...props.PARAMS.GALLERY.VIEW_PROPS.items.flex}>{currentItems.map(renderSlot)}</Flex>
|
|
35
|
-
</PositionBox>
|
|
36
|
-
);
|
|
37
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { useCallback, useMemo } from "react";
|
|
2
|
-
|
|
3
|
-
import { PageSelector, PositionBox } from "@vnejs/uis.react";
|
|
4
|
-
|
|
5
|
-
export const GalleryPages = ({ pagesCount, currentPage, ...props } = {}) => {
|
|
6
|
-
const onPrevPage = useCallback(() => props.emit(props.EVENTS.GALLERY.PAGE_SET, { page: currentPage - 1 }), []);
|
|
7
|
-
const onNextPage = useCallback(() => props.emit(props.EVENTS.GALLERY.PAGE_SET, { page: currentPage + 1 }), []);
|
|
8
|
-
|
|
9
|
-
const propsSelector = useMemo(() => ({ onPrevPage, onNextPage, pagesCount, page: currentPage + 1, pagesMinCount: 1 }), [currentPage, pagesCount]);
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<PositionBox {...props.PARAMS.GALLERY.VIEW_PROPS.pages.position}>
|
|
13
|
-
<PageSelector {...propsSelector} />
|
|
14
|
-
</PositionBox>
|
|
15
|
-
);
|
|
16
|
-
};
|
package/view/components/index.js
DELETED
package/view/index.jsx
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { useEffect, useMemo, useState } from "react";
|
|
2
|
-
import { createRoot } from "react-dom/client";
|
|
3
|
-
|
|
4
|
-
import { Screen } from "@vnejs/uis.react";
|
|
5
|
-
|
|
6
|
-
import { GalleryClose, GalleryControls, GalleryItems, GalleryPages } from "./components";
|
|
7
|
-
|
|
8
|
-
const Gallery = ({ store, onMount, ...props } = {}) => {
|
|
9
|
-
const [state, setState] = useState({});
|
|
10
|
-
|
|
11
|
-
const { isShow = false, isForce = false, locs = {}, bgSrc = "" } = state;
|
|
12
|
-
const { currentType = "", currentItems = [], pages, currentColumn = null, currentRow = null, currentPage } = state;
|
|
13
|
-
const selectedIndex = currentColumn !== null && currentRow !== null ? currentColumn + currentRow * 3 : -1;
|
|
14
|
-
|
|
15
|
-
useEffect(() => store.subscribe(setState), []);
|
|
16
|
-
useEffect(() => void onMount(), []);
|
|
17
|
-
|
|
18
|
-
const propsScreen = useMemo(() => ({ ...props.PARAMS.GALLERY.VIEW_PROPS.screen, isShow, isForce, bgSrc }), [isShow, isForce, bgSrc]);
|
|
19
|
-
const propsControls = useMemo(() => ({ ...props, currentType, locs }), [currentType, locs]);
|
|
20
|
-
const propsPages = useMemo(() => ({ ...props, pagesCount: pages, currentPage }), [pages, currentPage]);
|
|
21
|
-
const propsItems = useMemo(() => ({ ...props, currentItems, currentType, selectedIndex, locs }), [currentItems, currentType, selectedIndex, locs]);
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<Screen {...propsScreen}>
|
|
25
|
-
<GalleryControls {...propsControls} />
|
|
26
|
-
<GalleryPages {...propsPages} />
|
|
27
|
-
<GalleryItems {...propsItems} />
|
|
28
|
-
<GalleryClose {...props} />
|
|
29
|
-
</Screen>
|
|
30
|
-
);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export const render = (props, root) => createRoot(root).render(<Gallery {...props} />);
|