tiefen_space_app/context/ImageViewProvider.jsx

38 lines
984 B
JavaScript

import React, { useState, createContext, useContext } from "react";
import { ImageViewer } from "../components/ImageViewer";
const ImageViewerContext = createContext();
export const ImageViewerProvider = ({ children }) => {
const [imageViewerProps, setImageViewerProps] = useState(null);
const showImageViewer = (props) => {
setImageViewerProps({ ...props, isShow: true });
};
const closeImageViewer = () => {
setImageViewerProps(null);
};
const changeImageViewerIndex = (index) => {
setImageViewerProps((prev) => {
return { ...prev, index: index };
});
};
return (
<ImageViewerContext.Provider value={{ showImageViewer }}>
{children}
{imageViewerProps && (
<ImageViewer
{...imageViewerProps}
onClose={closeImageViewer}
onChange={changeImageViewerIndex}
/>
)}
</ImageViewerContext.Provider>
);
};
export const useImageViewer = () => useContext(ImageViewerContext);