flex-image-viewer 1.0.0

package/dist/hooks/useImageOperations.js

@@ -0,0 +1,113 @@
+import { useCallback } from "react";
+const ZOOM_STEP = 0.1;
+function useImageOperations(state, dispatch) {
+    const arrayIndex = state.currentIndex - 1;
+    const rotateLeft = useCallback(()=>{
+        dispatch({
+            type: 'ROTATE_LEFT',
+            payload: {
+                index: arrayIndex
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    const rotateRight = useCallback(()=>{
+        dispatch({
+            type: 'ROTATE_RIGHT',
+            payload: {
+                index: arrayIndex
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    const setZoom = useCallback((scale)=>{
+        dispatch({
+            type: 'SET_ZOOM',
+            payload: {
+                index: arrayIndex,
+                scale
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    const zoomIn = useCallback((step = ZOOM_STEP)=>{
+        dispatch({
+            type: 'ZOOM_IN',
+            payload: {
+                index: arrayIndex,
+                step
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    const zoomOut = useCallback((step = ZOOM_STEP)=>{
+        dispatch({
+            type: 'ZOOM_OUT',
+            payload: {
+                index: arrayIndex,
+                step
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    const adaptZoom = useCallback((scale)=>{
+        dispatch({
+            type: 'ADAPT_ZOOM',
+            payload: {
+                index: arrayIndex,
+                scale
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    const clear = useCallback(()=>{
+        const file = state.files[arrayIndex];
+        dispatch({
+            type: 'CLEAR_IMAGE',
+            payload: {
+                index: arrayIndex,
+                angle: file?.angle ?? 0,
+                scale: file?.scale ?? 1
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex,
+        state.files
+    ]);
+    const updateCurrentFile = useCallback((file)=>{
+        dispatch({
+            type: 'UPDATE_FILE',
+            payload: {
+                index: arrayIndex,
+                file: file
+            }
+        });
+    }, [
+        dispatch,
+        arrayIndex
+    ]);
+    return {
+        rotateLeft,
+        rotateRight,
+        setZoom,
+        zoomIn,
+        zoomOut,
+        adaptZoom,
+        clear,
+        updateCurrentFile
+    };
+}
+export { useImageOperations };

package/dist/hooks/useImageSource.js

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "react";
+import { DEFAULT_IMAGE } from "../utils/source.js";
+import { getImageOrientation } from "../utils/exif.js";
+function useImageSource(file, getSrc) {
+    const [src, setSrc] = useState(DEFAULT_IMAGE);
+    const [loading, setLoading] = useState(false);
+    const [orientation, setOrientation] = useState(void 0);
+    const requestIdRef = useRef(0);
+    const getSrcRef = useRef(getSrc);
+    getSrcRef.current = getSrc;
+    useEffect(()=>{
+        if (!file) {
+            setSrc(DEFAULT_IMAGE);
+            setLoading(false);
+            setOrientation(void 0);
+            return;
+        }
+        const currentRequestId = ++requestIdRef.current;
+        setOrientation(void 0);
+        const resolveSrc = async ()=>{
+            if (getSrcRef.current) return getSrcRef.current(file);
+            return file.src ?? DEFAULT_IMAGE;
+        };
+        let cancelled = false;
+        setLoading(true);
+        resolveSrc().then((resolvedSrc)=>{
+            if (!cancelled && currentRequestId === requestIdRef.current) {
+                setSrc(resolvedSrc);
+                setLoading(false);
+            }
+            if (resolvedSrc && resolvedSrc !== DEFAULT_IMAGE) getImageOrientation(resolvedSrc).then((ori)=>{
+                if (!cancelled && currentRequestId === requestIdRef.current) setOrientation(ori);
+            });
+        }).catch(()=>{
+            if (!cancelled && currentRequestId === requestIdRef.current) {
+                setSrc(DEFAULT_IMAGE);
+                setLoading(false);
+            }
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        file
+    ]);
+    return {
+        src,
+        loading,
+        orientation
+    };
+}
+export { useImageSource };

package/dist/index.js

@@ -0,0 +1,2 @@
+export { ActionItem } from "./components/index.js";
+export { default as FlexImageViewer } from "./FlexImageViewer/index.js";

package/dist/rspress.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@rspress/core").UserConfig;
+export default _default;

package/dist/src/FlexImageViewer/Content/index.d.ts

@@ -0,0 +1,11 @@
+import type { ImageProps } from '../../components';
+import type { FileData } from '../../types';
+export interface ContentProps<T extends FileData> extends Pick<ImageProps<T>, 'getSrc'> {
+    preload?: boolean;
+    wheelZoom?: boolean;
+    wheelZoomStep?: number;
+    disableRightClick?: boolean;
+    onClose?: () => void;
+}
+declare function Content<T extends FileData>(props: ContentProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Content;

package/dist/src/FlexImageViewer/Footer/Actions.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FileData } from '../../types';
+type ActionKey = 'thumbnail' | 'info' | 'zoomAdapt' | 'zoomSelect' | 'zoomOut' | 'zoomSlider' | 'zoomIn';
+export interface FooterActionsProps<T extends FileData> {
+    zoom?: number;
+    updateCurrentFile?: (file: Partial<T>) => void;
+    renderAction?: (actions: Record<ActionKey, React.ReactNode>, context: {
+        zoom: number;
+        updateCurrentFile: (file: Partial<T>) => void;
+    }) => React.ReactNode;
+}
+declare function Actions<T extends FileData>(props: FooterActionsProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Actions;

package/dist/src/FlexImageViewer/Footer/index.d.ts

@@ -0,0 +1,8 @@
+import type { FileData } from '../../types';
+import type { FooterActionsProps } from './Actions';
+export interface FooterProps<T extends FileData> {
+    renderAction?: FooterActionsProps<T>['renderAction'];
+    updateCurrentFile?: FooterActionsProps<T>['updateCurrentFile'];
+}
+declare function Footer<T extends FileData>({ renderAction, updateCurrentFile }: FooterProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Footer;

package/dist/src/FlexImageViewer/Header/Actions.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FileData } from '../../types';
+type ActionKey = 'rotateLeft' | 'rotateRight' | 'clear' | 'close';
+export interface HeaderActionsProps<T extends FileData> {
+    rotate?: number;
+    updateCurrentFile?: (file: Partial<T>) => void;
+    renderAction?: (actions: Record<ActionKey, React.ReactNode>, context: {
+        rotate: number;
+        updateCurrentFile: (file: Partial<T>) => void;
+    }) => React.ReactNode;
+    onClear?: () => void;
+    onClose?: (e: React.MouseEvent) => void;
+}
+declare function Actions<T extends FileData>(props: HeaderActionsProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Actions;

package/dist/src/FlexImageViewer/Header/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { FileData } from '../../types';
+import type { HeaderActionsProps } from './Actions';
+export interface HeaderProps<T extends FileData> {
+    renderAction?: HeaderActionsProps<T>['renderAction'];
+    onClose?: (e: React.MouseEvent) => void;
+    onClear?: () => void;
+    updateCurrentFile?: HeaderActionsProps<T>['updateCurrentFile'];
+}
+declare function Header<T extends FileData>({ renderAction, onClose, onClear, updateCurrentFile, }: HeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/src/FlexImageViewer/Info/index.d.ts

@@ -0,0 +1,5 @@
+import type { FileData } from '../../types';
+export interface InfoProps {
+    renderInfo?: (file: FileData) => React.ReactNode;
+}
+export default function Info(props: InfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/FlexImageViewer/Thumbnail/index.d.ts

@@ -0,0 +1,5 @@
+import type { ThumbnailImageProps } from '../../components/ThumbnailIamge';
+import type { FileData } from '../../types';
+type ThumbnailProps<T extends FileData> = Pick<ThumbnailImageProps<T>, 'getThumbnail'>;
+export default function Thumbnail<T extends FileData>(props: ThumbnailProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/FlexImageViewer/index.d.ts

@@ -0,0 +1,21 @@
+import type { ImageProps, ModalProps } from '../components';
+import type { FileData } from '../types';
+import type { ThumbnailImageProps } from '../components/ThumbnailIamge';
+import type { HeaderActionsProps } from './Header/Actions';
+import type { FooterActionsProps } from './Footer/Actions';
+import type { InfoProps } from './Info';
+import type { ContentProps } from './Content';
+import 'rc-slider/assets/index.css';
+import 'rc-tooltip/assets/bootstrap.css';
+import './index.css';
+export interface FlexImageViewerProps<T extends FileData> extends Omit<ModalProps, 'children'>, InfoProps, Pick<ThumbnailImageProps<T>, 'getThumbnail'>, Pick<ImageProps<T>, 'getSrc'>, Pick<ContentProps<T>, 'wheelZoom' | 'wheelZoomStep' | 'preload' | 'disableRightClick'> {
+    files?: T[];
+    current?: number;
+    loop?: boolean;
+    onClear?: () => void;
+    onIndexChange?: (index: number) => void;
+    headerProps?: Pick<HeaderActionsProps<T>, 'renderAction'>;
+    footerProps?: Pick<FooterActionsProps<T>, 'renderAction'>;
+}
+declare function FlexImageViewer<T extends FileData>(props: FlexImageViewerProps<T>): import("react/jsx-runtime").JSX.Element;
+export default FlexImageViewer;

package/dist/src/components/ActionItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ActionItemProps {
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+export default function ActionItem({ children, onClick }: ActionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/BaseActions.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type ActionType = 'icon' | 'slider' | 'select';
+export interface BaseActionItem {
+    key: string;
+    type: ActionType;
+    tooltipKey?: string;
+    iconName?: string;
+    tooltipPlacement?: 'topRight' | 'bottomRight' | 'topLeft' | 'bottomLeft';
+    valueKey?: string;
+}
+export interface BaseActionsProps<C extends Record<string, unknown> = Record<string, unknown>> {
+    items: BaseActionItem[];
+    contextValues: C;
+    renderAction?: (actions: Record<string, React.ReactNode>, context: C) => React.ReactNode;
+    onAction: (key: string, value?: unknown, event?: React.MouseEvent) => void;
+}
+export default function BaseActions<C extends Record<string, unknown> = Record<string, unknown>>(props: BaseActionsProps<C>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Icon/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    name: string;
+}
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/src/components/Image.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { FileData } from '../types';
+export interface ImageProps<T extends FileData> {
+    file?: T;
+    angle?: number;
+    scale?: number;
+    getSrc?: (file: T) => Promise<string>;
+    isAdapt?: boolean;
+    onAdapt?: (zoom: number) => void;
+    wheelZoom?: boolean;
+    wheelZoomStep?: number;
+    onWheelZoom?: (scale: number) => void;
+    onOrientation?: (orientation: number) => void;
+    disableRightClick?: boolean;
+    style?: React.CSSProperties;
+}
+declare function Image<T extends FileData>(props: ImageProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Image;

package/dist/src/components/Modal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ModalProps {
+    visible: boolean;
+    onClose?: () => void;
+    children: React.ReactNode;
+    getContainer?: string | (() => HTMLElement | null) | HTMLElement | null;
+}
+export declare const getContainer: string | (() => HTMLElement | null) | HTMLElement | null;
+export default function Modal(props: ModalProps): React.ReactPortal | null;

package/dist/src/components/PercentSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const getScaleValue: (sliderValue: number) => number;
+export declare const getSliderValue: (scale: number) => number;
+export interface PercentOption {
+    value: number;
+    label: string;
+}
+export interface PercentSelectProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    options?: number[];
+}
+declare function PercentSelect({ value, onChange, disabled, className, style, options, }: PercentSelectProps): import("react/jsx-runtime").JSX.Element;
+export default PercentSelect;

package/dist/src/components/ThumbnailIamge.d.ts

@@ -0,0 +1,8 @@
+import type { FileData } from '../types';
+export interface ThumbnailImageProps<T extends FileData> {
+    file?: T;
+    angle?: number;
+    getThumbnail?: (file: T) => Promise<string>;
+}
+declare function ThumbnailImage<T extends FileData>(props: ThumbnailImageProps<T>): import("react/jsx-runtime").JSX.Element;
+export default ThumbnailImage;

package/dist/src/components/index.d.ts

@@ -0,0 +1,13 @@
+import Icon from './Icon';
+import Image from './Image';
+import Modal from './Modal';
+import PercentSelect from './PercentSelect';
+import ActionItem from './ActionItem';
+import BaseActions from './BaseActions';
+import type { IconProps } from './Icon';
+import type { ImageProps } from './Image';
+import type { ModalProps } from './Modal';
+import type { PercentSelectProps } from './PercentSelect';
+import type { ActionItemProps } from './ActionItem';
+import type { BaseActionsProps, BaseActionItem } from './BaseActions';
+export { Icon, IconProps, Image, ImageProps, Modal, ModalProps, PercentSelect, PercentSelectProps, ActionItem, ActionItemProps, BaseActions, BaseActionsProps, BaseActionItem, };

package/dist/src/context/ViewerContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ViewerState, ViewerAction, FileData } from '../types';
+export declare const ViewerStateContext: React.Context<ViewerState<FileData> | null>;
+export declare const ViewerDispatchContext: React.Context<React.Dispatch<ViewerAction<FileData>> | null>;
+export declare function useViewerState<T extends FileData>(): ViewerState<T>;
+export declare function useViewerDispatch(): React.Dispatch<ViewerAction<FileData>>;
+export declare function viewerReducer<T extends FileData>(state: ViewerState<T>, action: ViewerAction<T>): ViewerState<T>;
+export interface ViewerProviderProps {
+    children: React.ReactNode;
+    initialCurrent?: number;
+    initialFilesLength?: number;
+}
+export declare function ViewerProvider({ children, initialCurrent, initialFilesLength, }: ViewerProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/hooks/useImageOperations.d.ts

@@ -0,0 +1,12 @@
+import type { ViewerState, ViewerAction, FileData } from '../types';
+export interface ImageOperations {
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    setZoom: (scale: number) => void;
+    zoomIn: (step?: number) => void;
+    zoomOut: (step?: number) => void;
+    adaptZoom: (scale: number) => void;
+    clear: () => void;
+    updateCurrentFile: (file: Partial<FileData>) => void;
+}
+export declare function useImageOperations<T extends FileData>(state: ViewerState<T>, dispatch: React.Dispatch<ViewerAction<T>>): ImageOperations;

package/dist/src/hooks/useImageSource.d.ts

@@ -0,0 +1,7 @@
+import type { FileData } from '../types';
+export interface UseImageSourceResult {
+    src: string;
+    loading: boolean;
+    orientation?: number;
+}
+export declare function useImageSource<T extends FileData = FileData>(file?: T, getSrc?: (file: T) => Promise<string>): UseImageSourceResult;

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+import { ActionItem } from './components';
+import FlexImageViewer from './FlexImageViewer';
+import type { FileData } from './types';
+import type { FlexImageViewerProps } from './FlexImageViewer';
+import type { ActionItemProps } from './components';
+export { FlexImageViewer, FlexImageViewerProps, ActionItem, ActionItemProps, FileData };

package/dist/src/utils/dict.d.ts

@@ -0,0 +1 @@
+export declare const TOOLTIP_CONFIG: Record<string, string>;

package/dist/src/utils/exif.d.ts

@@ -0,0 +1,2 @@
+export declare function getImageOrientation(source: string | Blob | ArrayBuffer): Promise<number | undefined>;
+export declare function shouldSwapDimensions(orientation?: number): boolean;

package/dist/src/utils/source.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_IMAGE = "data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaWQ9ImJvZHlfMSIgd2lkdGg9IjE5NCIgaGVpZ2h0PSIxOTUiPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzM0IDAgMCAxLjMzMzMzMzQgMCAwKSI+Cgk8aW1hZ2UgIHg9IjAiIHk9IjAiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBTUlBQUFERENBWUFBQURRdmM2VUFBQUFDWEJJV1hNQUFBN0RBQUFPd3dISGI2aGtBQUFHT0VsRVFWUjRuT3pkcTA0a2F3QkZZVjRkaDhQaFFPSEE0WEE0SEE2SncrRjRBQ1kvQ1FrMDA5MUZYMnJ2aGs4c2RVNFlzbmF0cmt2WFpJNWVYMS9md01GZlB3YU8wcjhBT0dnNEJvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1N3UXM3VDA5UGI3ZTN0citEeDhURitzRFVqaENWaVhsNWUzbzZQajM4Tkp5Y244WU90R1NFc0VUTStRZE1INzY1eFZoRENqejhoaEpEL2xIWkdLQkFqaFB3R1FpZ1FJNFQ4QmtJb0VDT0UvQVpDS0JBamhQd0dRdmdGSVp5ZG5iMC9za3cvS2ZMVWFOcmVIcC91T0lTN3U3c3ZQK2Y1K2ZudDh2SXlIb0hIcDBLWTdZd3d2c0ZkOXVYYzZlbXBFQXJPOU00SU00U3c2Z3VybTVzYklSUWM4RUtZSVlSVlAyK2NMVndhNVE5NElUZ2plTVZDQ05sN2hJRjdoUHludmhCbUNtRThMbjE0ZVBoMm8zeDlmUjIvTFBMVVNBaXpmNDh3UHYwdkxpN2VTUi84UW5CR09PaHZsc2ZaWmRlWFUxN0Rkck44Y0NHTVAzOWNWbzF2cUlYZ0h1RlBobkIvZi8vbHI0dnU2bFVOWndSbmhJTUo0ZXJxNnR2dk1tSVFncWRHQjN0RytPbGx6Zm41K2RMZlo1d2xuQkgydDdlWDd2WVV3c2QzQ2xOakdQL2Z1Q2RZTmRhMnIybTROQkxDckdlRXo1YzNVMTY0Ry9jQTR5M1ZLYi9YTm0reUNrRUlzNFh3djAvMmRUZTg0NzlQL2IyMmVaSWtCQ0hNRXNJNDJKZGQzaXo3ZVorZkVQMGtoazJlSkFsQkNIc1BZUnlZNno3WkYyOTRWNzJidEk1Tkhxc0tRUWg3RDJIeEhhTmxqUHVIeGZ1SVRmbnBreVFoQ0dHdklTeis5Y3gxaktjLzY1NFFUV1g4MlVMWTNxUEhwMXVHc0l0UDltMzVPTXM0SXdnaEVzS3FMOERtWnNxVEpKZEd6Z2c3RDJIS0YyQnpNdVd4cWhDRXNOTVFwandoU3JEdVNaSVFoTERURUpvUHFFUDl2ZE80V2Q3Z2dFci82emZyRUlJUVp2bGtQVlNjRVp3UmhDQUVsMGJPQ000STdoRmNHcmswY3JQc0hzRTlncWRHVzkwcysrZGw4NDgwUFQ0dEVQUHhCZFY0UVc2OFNuSElqSGVSUERGeXN4d1BDdjBPZktGV01BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEdjRCQUFELy96VjJpUGdBQUFBR1NVUkJWQU1BbEwzNEprZXVucFlBQUFBQVNVVk9SSzVDWUlJPSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgd2lkdGg9IjE0NS41IiBoZWlnaHQ9IjE0Ni4yNSIvPgo8L2c+Cjwvc3ZnPgo=";

package/dist/utils/dict.js

@@ -0,0 +1,16 @@
+const TOOLTIP_CONFIG = {
+    arrowLeft: '查看上一张图片',
+    arrowRight: '查看下一张图片',
+    clear: '重置图片',
+    close: '关闭',
+    thumbnail: '显示或隐藏缩略图',
+    info: '显示或隐藏图片信息',
+    rotateLeft: '向左旋转图片',
+    rotateRight: '向右旋转图片',
+    zoomAdapt: '自适应缩放',
+    zoomSelect: '选择缩放比例',
+    zoomOut: '缩小图片',
+    zoomSlider: '调整缩放比例',
+    zoomIn: '放大图片'
+};
+export { TOOLTIP_CONFIG };

package/dist/utils/exif.js

@@ -0,0 +1,17 @@
+import exifreader from "exifreader";
+async function getImageOrientation(source) {
+    try {
+        let input;
+        input = 'string' == typeof source ? source : source instanceof Blob ? await source.arrayBuffer() : source;
+        const tags = 'string' == typeof input ? await exifreader.load(input) : await exifreader.load(input);
+        const orientation = tags?.Orientation?.value;
+        if ('number' == typeof orientation) return orientation;
+        return;
+    } catch  {
+        return;
+    }
+}
+function shouldSwapDimensions(orientation) {
+    return 6 === orientation || 8 === orientation;
+}
+export { getImageOrientation, shouldSwapDimensions };

package/dist/utils/source.js

@@ -0,0 +1,2 @@
+const DEFAULT_IMAGE = 'data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaWQ9ImJvZHlfMSIgd2lkdGg9IjE5NCIgaGVpZ2h0PSIxOTUiPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzM0IDAgMCAxLjMzMzMzMzQgMCAwKSI+Cgk8aW1hZ2UgIHg9IjAiIHk9IjAiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBTUlBQUFERENBWUFBQURRdmM2VUFBQUFDWEJJV1hNQUFBN0RBQUFPd3dISGI2aGtBQUFHT0VsRVFWUjRuT3pkcTA0a2F3QkZZVjRkaDhQaFFPSEE0WEE0SEE2SncrRjRBQ1kvQ1FrMDA5MUZYMnJ2aGs4c2RVNFlzbmF0cmt2WFpJNWVYMS9md01GZlB3YU8wcjhBT0dnNEJvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1N3UXM3VDA5UGI3ZTN0citEeDhURitzRFVqaENWaVhsNWUzbzZQajM4Tkp5Y244WU90R1NFc0VUTStRZE1INzY1eFZoRENqejhoaEpEL2xIWkdLQkFqaFB3R1FpZ1FJNFQ4QmtJb0VDT0UvQVpDS0JBamhQd0dRdmdGSVp5ZG5iMC9za3cvS2ZMVWFOcmVIcC91T0lTN3U3c3ZQK2Y1K2ZudDh2SXlIb0hIcDBLWTdZd3d2c0ZkOXVYYzZlbXBFQXJPOU00SU00U3c2Z3VybTVzYklSUWM4RUtZSVlSVlAyK2NMVndhNVE5NElUZ2plTVZDQ05sN2hJRjdoUHludmhCbUNtRThMbjE0ZVBoMm8zeDlmUjIvTFBMVVNBaXpmNDh3UHYwdkxpN2VTUi84UW5CR09PaHZsc2ZaWmRlWFUxN0Rkck44Y0NHTVAzOWNWbzF2cUlYZ0h1RlBobkIvZi8vbHI0dnU2bFVOWndSbmhJTUo0ZXJxNnR2dk1tSVFncWRHQjN0RytPbGx6Zm41K2RMZlo1d2xuQkgydDdlWDd2WVV3c2QzQ2xOakdQL2Z1Q2RZTmRhMnIybTROQkxDckdlRXo1YzNVMTY0Ry9jQTR5M1ZLYi9YTm0reUNrRUlzNFh3djAvMmRUZTg0NzlQL2IyMmVaSWtCQ0hNRXNJNDJKZGQzaXo3ZVorZkVQMGtoazJlSkFsQkNIc1BZUnlZNno3WkYyOTRWNzJidEk1Tkhxc0tRUWg3RDJIeEhhTmxqUHVIeGZ1SVRmbnBreVFoQ0dHdklTeis5Y3gxaktjLzY1NFFUV1g4MlVMWTNxUEhwMXVHc0l0UDltMzVPTXM0SXdnaEVzS3FMOERtWnNxVEpKZEd6Z2c3RDJIS0YyQnpNdVd4cWhDRXNOTVFwandoU3JEdVNaSVFoTERURUpvUHFFUDl2ZE80V2Q3Z2dFci82emZyRUlJUVp2bGtQVlNjRVp3UmhDQUVsMGJPQ000STdoRmNHcmswY3JQc0hzRTlncWRHVzkwcysrZGw4NDgwUFQ0dEVQUHhCZFY0UVc2OFNuSElqSGVSUERGeXN4d1BDdjBPZktGV01BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEb1JRTUFMeURvUlFNQUx5RG9SUU1BTHlEdjRCQUFELy96VjJpUGdBQUFBR1NVUkJWQU1BbEwzNEprZXVucFlBQUFBQVNVVk9SSzVDWUlJPSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgd2lkdGg9IjE0NS41IiBoZWlnaHQ9IjE0Ni4yNSIvPgo8L2c+Cjwvc3ZnPgo=';
+export { DEFAULT_IMAGE };

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "flex-image-viewer",
+  "version": "1.0.0",
+  "type": "module",
+  "author": {
+    "name": "linie1119",
+    "email": "linie_1119@qq.com"
+  },
+  "description": "A React component for image viewer",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib",
+    "build:storybook": "storybook build",
+    "dev": "rslib --watch",
+    "doc": "rspress dev",
+    "doc:build": "rspress build",
+    "doc:preview": "rspress preview",
+    "format": "prettier --write .",
+    "lint": "rslint",
+    "storybook": "storybook dev",
+    "test": "rstest",
+    "test:watch": "rstest --watch"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "2.0.0-rc.3",
+    "@rsbuild/plugin-react": "^1.4.6",
+    "@rsbuild/plugin-svgr": "^1.3.1",
+    "@rslib/core": "^0.21.2",
+    "@rslint/core": "^0.4.2",
+    "@rspress/core": "^2.0.9",
+    "@rspress/plugin-api-docgen": "^2.0.9",
+    "@rspress/plugin-preview": "^2.0.9",
+    "@rstest/adapter-rslib": "^0.2.2",
+    "@rstest/core": "^0.9.7",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-onboarding": "^10.3.5",
+    "@storybook/react": "^10.3.5",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "happy-dom": "^20.9.0",
+    "prettier": "^3.8.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "rsbuild-plugin-workspace-dev": "^0.1.4",
+    "storybook": "^10.3.5",
+    "storybook-addon-rslib": "^3.3.3",
+    "storybook-react-rsbuild": "^3.3.3",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "dependencies": {
+    "ahooks": "^3.9.7",
+    "es-toolkit": "^1.46.0",
+    "exifreader": "^4.41.0",
+    "rc-slider": "^11.1.9",
+    "rc-tooltip": "^6.4.0"
+  }
+}