@laser-ui/components 0.0.1

package/hooks/useNestedPopup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { DraftFunction } from '@laser-ui/hooks/useImmer';
+interface PopupId<ID> {
+    id: ID;
+    visible: boolean;
+}
+export declare function useNestedPopup<ID>(): {
+    popupIdsRef: import("react").MutableRefObject<PopupId<ID>[]>;
+    setPopupIds: (value: PopupId<ID>[] | DraftFunction<PopupId<ID>[]>) => void;
+    addPopupId: (id: ID) => void;
+    removePopupId: (id: ID) => void;
+};
+export {};

package/hooks/useNestedPopup.js

@@ -0,0 +1,37 @@
+import { useForceUpdate } from '@laser-ui/hooks';
+import { freeze, produce } from 'immer';
+import { isFunction } from 'lodash';
+import { useRef } from 'react';
+export function useNestedPopup() {
+    const forceUpdate = useForceUpdate();
+    const popupIdsRef = useRef([]);
+    const setPopupIds = (value) => {
+        popupIdsRef.current = isFunction(value) ? produce(popupIdsRef.current, value) : freeze(value);
+        forceUpdate();
+    };
+    return {
+        popupIdsRef,
+        setPopupIds,
+        addPopupId: (id) => {
+            setPopupIds((draft) => {
+                if (draft.findIndex((v) => v.id === id) === -1) {
+                    draft.push({ id, visible: true });
+                }
+            });
+        },
+        removePopupId: (id) => {
+            setPopupIds((draft) => {
+                const index = draft.findIndex((v) => v.id === id);
+                if (index !== -1) {
+                    draft[index].visible = false;
+                    for (let index = draft.length - 1; index >= 0; index--) {
+                        if (draft[index].visible) {
+                            break;
+                        }
+                        draft.pop();
+                    }
+                }
+            });
+        },
+    };
+}

package/hooks/useNextTick.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useNextTick(): import("react").MutableRefObject<boolean>;

package/hooks/useNextTick.js

@@ -0,0 +1,9 @@
+import { useMount } from '@laser-ui/hooks';
+import { useRef } from 'react';
+export function useNextTick() {
+    const nextTick = useRef(false);
+    useMount(() => {
+        nextTick.current = true;
+    });
+    return nextTick;
+}

package/hooks/useScopedProps.d.ts

@@ -0,0 +1,8 @@
+import type { Size } from '../types';
+export declare function useScopedProps(props: {
+    size?: Size;
+    disabled?: boolean;
+}): {
+    size: Size;
+    disabled: boolean;
+};

package/hooks/useScopedProps.js

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { LContext } from '../context';
+export function useScopedProps(props) {
+    var _a, _b;
+    const context = useContext(LContext);
+    return { size: (_b = (_a = props.size) !== null && _a !== void 0 ? _a : context.componentSize) !== null && _b !== void 0 ? _b : 'medium', disabled: props.disabled || context.componentDisabled };
+}

package/hooks/useStyled.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export type Styled<C extends {
+    [index: string]: string;
+}> = (...args: (keyof C | {
+    [K in keyof C]?: any;
+})[]) => {
+    className: string;
+    style: React.CSSProperties;
+};
+export declare function useStyled<C extends {
+    [index: string]: string;
+}>(classes: C, styleProvider: {
+    [index: string]: string | undefined;
+}, styleOverrides?: {
+    [K in keyof C]?: {
+        remove?: boolean;
+        className?: string;
+        style?: React.CSSProperties;
+    };
+}): Styled<C>;

package/hooks/useStyled.js

@@ -0,0 +1,82 @@
+import { isString, isUndefined } from 'lodash';
+import { useContext, useRef } from 'react';
+import { LContext } from '../context';
+export function useStyled(classes, styleProvider, styleOverrides) {
+    const context = useContext(LContext);
+    const classRoot = {};
+    Object.keys(styleProvider).forEach((key) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        classRoot[key] = isUndefined(styleProvider[key]) ? `${context.namespace}-${key}` : styleProvider[key];
+    });
+    const prevClassRoot = useRef(classRoot);
+    const cache = useRef({});
+    for (const key of Object.keys(classRoot)) {
+        if (prevClassRoot.current[key] !== classRoot[key]) {
+            prevClassRoot.current = classRoot;
+            cache.current = {};
+            break;
+        }
+    }
+    const replace = (className) => {
+        if (className in cache.current) {
+            return cache.current[className];
+        }
+        const res = (() => {
+            if (className.startsWith('^')) {
+                for (const key of Object.keys(classRoot)) {
+                    const prefix = '^' + key;
+                    if (className.startsWith(prefix)) {
+                        if (className.length === prefix.length) {
+                            return classRoot[key] + className.slice(prefix.length);
+                        }
+                        else {
+                            const joiner = className.slice(prefix.length, prefix.length + 2);
+                            if (['--', '__'].includes(joiner)) {
+                                return classRoot[key] + className.slice(prefix.length);
+                            }
+                        }
+                    }
+                }
+            }
+            return className;
+        })();
+        cache.current[className] = res;
+        return res;
+    };
+    return (...args) => {
+        const className = [];
+        const style = {};
+        const handleKey = (classKey) => {
+            let remove = false;
+            if (styleOverrides && styleOverrides[classKey]) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const styleOverride = styleOverrides[classKey];
+                if (styleOverride.remove) {
+                    remove = true;
+                }
+                if (styleOverride.className) {
+                    className.push(styleOverride.className);
+                }
+                if (styleOverride.style) {
+                    Object.assign(style, styleOverride.style);
+                }
+            }
+            if (!remove) {
+                className.push(replace(classes[classKey]));
+            }
+        };
+        args.forEach((classKey) => {
+            if (isString(classKey)) {
+                handleKey(classKey);
+            }
+            else {
+                Object.keys(classKey).forEach((key) => {
+                    if (classKey[key]) {
+                        handleKey(key);
+                    }
+                });
+            }
+        });
+        return { className: className.join(' '), style };
+    };
+}

package/hooks/useTranslation.d.ts

@@ -0,0 +1,4 @@
+export declare function useTranslation(): {
+    t: (...path: string[]) => any;
+    lang: import("../types").Lang;
+};

package/hooks/useTranslation.js

@@ -0,0 +1,17 @@
+import { get } from 'lodash';
+import { useContext } from 'react';
+import { RootContext } from '../root/vars';
+export function useTranslation() {
+    const context = useContext(RootContext);
+    const lang = context.i18nLang;
+    return {
+        t: (...path) => {
+            if (path.length === 1) {
+                path = ['Common', path[0]];
+            }
+            path.unshift(lang);
+            return get(context.i18nResources, path, path.join('.'));
+        },
+        lang,
+    };
+}

package/icon/Icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from './types';
+export declare function Icon(props: IconProps): JSX.Element | null;

package/icon/Icon.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isArray, isNumber, isUndefined } from 'lodash';
+import { cloneElement } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useNamespace, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Icon(props) {
+    const _a = useComponentProps('Icon', props), { children, styleOverrides, styleProvider, size = '1em', theme, rotate, spin, spinSpeed = 1 } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "size", "theme", "rotate", "spin", "spinSpeed"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { icon: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.icon }, styleOverrides);
+    const [width, height] = isArray(size) ? size : [size, size];
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('icon', { [`icon.t-${theme}`]: theme }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: cloneElement(children, Object.assign(Object.assign({}, children.props), { style: Object.assign(Object.assign({}, children.props.style), { transform: isUndefined(rotate) ? undefined : `rotate(${rotate}deg)`, animation: spin ? `${namespace}-spin ${spinSpeed}${isNumber(spinSpeed) ? 's' : ''} linear infinite` : undefined }), fill: 'currentColor', width,
+            height })) })));
+}

package/icon/index.d.ts

@@ -0,0 +1,2 @@
+export type { IconProps } from './types';
+export { Icon } from './Icon';

package/icon/index.js

@@ -0,0 +1 @@
+export { Icon } from './Icon';

package/icon/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface IconProps extends BaseProps<'icon', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
+    size?: number | string | [number | string, number | string];
+    theme?: 'primary' | 'success' | 'warning' | 'danger';
+    rotate?: number;
+    spin?: boolean;
+    spinSpeed?: number | string;
+}

package/icon/types.js

@@ -0,0 +1 @@
+export {};

package/icon/vars.d.ts

@@ -0,0 +1,7 @@
+export declare const CLASSES: {
+    icon: string;
+    'icon.t-primary': string;
+    'icon.t-success': string;
+    'icon.t-warning': string;
+    'icon.t-danger': string;
+};

package/icon/vars.js

@@ -0,0 +1,7 @@
+export const CLASSES = {
+    icon: '^icon',
+    'icon.t-primary': 't-primary',
+    'icon.t-success': 't-success',
+    'icon.t-warning': 't-warning',
+    'icon.t-danger': 't-danger',
+};

package/image/Image.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ImageProps } from './types';
+import { ImageAction } from './ImageAction';
+import { ImagePreview } from './ImagePreview';
+export declare const Image: {
+    (props: ImageProps): JSX.Element | null;
+    Action: typeof ImageAction;
+    Preview: typeof ImagePreview;
+};

package/image/Image.js

@@ -0,0 +1,50 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForceUpdate } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { Children, useRef } from 'react';
+import { ImageAction } from './ImageAction';
+import { ImagePreview } from './ImagePreview';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const Image = (props) => {
+    const _a = useComponentProps('Image', props), { styleOverrides, styleProvider, src, loading, error, actions, imgProps } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "src", "loading", "error", "actions", "imgProps"]);
+    const styled = useStyled(CLASSES, { image: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.image }, styleOverrides);
+    const forceUpdate = useForceUpdate();
+    const dataRef = useRef({
+        isLoading: true,
+        isError: false,
+    });
+    if (src !== dataRef.current.prevSrc) {
+        dataRef.current.prevSrc = src;
+        dataRef.current.isLoading = true;
+        dataRef.current.isError = false;
+    }
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: [dataRef.current.isLoading && checkNodeExist(loading) && loading, dataRef.current.isError && checkNodeExist(error) && error, actions && _jsx("div", Object.assign({}, styled('image__actions'), { children: Children.map(actions, (action) => action) })), _jsx("img", Object.assign({}, imgProps, mergeCS(styled('image__img'), {
+                className: imgProps === null || imgProps === void 0 ? void 0 : imgProps.className,
+                style: Object.assign(Object.assign({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), { display: (dataRef.current.isLoading && loading) || (dataRef.current.isError && error) ? 'none' : undefined }),
+            }), { src: src, onLoadStart: (e) => {
+                    var _a;
+                    // https://bugs.chromium.org/p/chromium/issues/detail?id=458851
+                    (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoadStart) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
+                    dataRef.current.isLoading = true;
+                    forceUpdate();
+                }, onLoad: (e) => {
+                    var _a;
+                    (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
+                    dataRef.current.isLoading = false;
+                    forceUpdate();
+                }, onError: (e) => {
+                    var _a;
+                    (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
+                    dataRef.current.isLoading = false;
+                    dataRef.current.isError = true;
+                    forceUpdate();
+                } }))] })));
+};
+Image.Action = ImageAction;
+Image.Preview = ImagePreview;

package/image/ImageAction.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ImageActionProps } from './types';
+export declare const ImageAction: import("react").ForwardRefExoticComponent<ImageActionProps & import("react").RefAttributes<HTMLButtonElement>>;

package/image/ImageAction.js

@@ -0,0 +1,15 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const ImageAction = forwardRef((props, ref) => {
+    var _a;
+    const _b = useComponentProps('ImageAction', props), { children, styleOverrides, styleProvider } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider"]);
+    const styled = useStyled(CLASSES, { image: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.image }, styleOverrides);
+    return (_jsx("button", Object.assign({}, restProps, mergeCS(styled('image__action'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: ref, type: (_a = restProps['type']) !== null && _a !== void 0 ? _a : 'button', children: children })));
+});

package/image/ImagePreview.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ImagePreviewProps } from './types';
+export declare function ImagePreview(props: ImagePreviewProps): JSX.Element | null;

package/image/ImagePreview.js

@@ -0,0 +1,261 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEvent, useImmer, useRefExtra } from '@laser-ui/hooks';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
+import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import { ReactComponent as Rotate90DegreesCwOutlined } from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg';
+import { ReactComponent as ZoomInOutlined } from '@material-design-icons/svg/outlined/zoom_in.svg';
+import { ReactComponent as ZoomOutOutlined } from '@material-design-icons/svg/outlined/zoom_out.svg';
+import { isNull, isUndefined } from 'lodash';
+import { useRef, useState } from 'react';
+import { PREVIEW_CLASSES } from './vars';
+import { Button } from '../button';
+import { useComponentProps, useControlled, useLockScroll, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { Input } from '../input';
+import { Mask } from '../internal/mask';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { ROOT_DATA } from '../root/vars';
+import { mergeCS } from '../utils';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function ImagePreview(props) {
+    var _a, _b, _c;
+    const _d = useComponentProps('ImagePreview', props), { styleOverrides, styleProvider, list, visible, active: activeProp, defaultActive, escClosable = true, zIndex: zIndexProp, onActiveChange, onClose, afterVisibleChange } = _d, restProps = __rest(_d, ["styleOverrides", "styleProvider", "list", "visible", "active", "defaultActive", "escClosable", "zIndex", "onActiveChange", "onClose", "afterVisibleChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(PREVIEW_CLASSES, { 'image-preview': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['image-preview'] }, styleOverrides);
+    const previewRef = useRef(null);
+    const windowRef = useRefExtra(() => window);
+    const dataRef = useRef({
+        prevActiveEl: null,
+        eventData: {},
+    });
+    const [active, changeActive] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : 0, activeProp, onActiveChange);
+    const activeSrc = list[active].src;
+    const [offset, setOffset] = useState(() => {
+        if (ROOT_DATA.windowSize.width) {
+            return ~~((ROOT_DATA.windowSize.width - 108) / 120);
+        }
+        return 3;
+    });
+    useEvent(windowRef, 'resize', () => {
+        setOffset(~~((ROOT_DATA.windowSize.width - 108) / 120));
+    }, {}, !visible);
+    let startIndex = Math.max(active - offset, 0);
+    const endIndex = Math.min(startIndex + offset * 2, list.length - 1);
+    startIndex = Math.max(endIndex - offset * 2, 0);
+    const [isDragging, setIsDragging] = useState(false);
+    const listenDragEvent = visible && isDragging;
+    const [position, setPosition] = useImmer(new Map());
+    const activePosition = (_a = position.get(activeSrc)) !== null && _a !== void 0 ? _a : { top: 0, left: 0 };
+    const [rotate, setRotate] = useImmer(new Map());
+    const activeRotate = (_b = rotate.get(activeSrc)) !== null && _b !== void 0 ? _b : 0;
+    const [scale, setScale] = useImmer(new Map());
+    const activeScale = (_c = scale.get(activeSrc)) !== null && _c !== void 0 ? _c : 1;
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    useLockScroll(visible);
+    const handleMove = () => {
+        const { initMove, currentMove, initScale, currentScale } = dataRef.current.eventData;
+        if (initMove && currentMove) {
+            const movementX = currentMove.x - initMove.x;
+            const movementY = currentMove.y - initMove.y;
+            setPosition((draft) => {
+                var _a;
+                const oldPosition = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : { top: 0, left: 0 };
+                draft.set(activeSrc, {
+                    top: oldPosition.top + movementY,
+                    left: oldPosition.left + movementX,
+                });
+            });
+            dataRef.current.eventData.initMove = currentMove;
+            dataRef.current.eventData.currentMove = undefined;
+        }
+        if (initScale && currentScale) {
+            const initLength = Math.sqrt(Math.pow(initScale.x0 - initScale.x1, 2) + Math.pow(initScale.y0 - initScale.y1, 2));
+            const currentLength = Math.sqrt(Math.pow(currentScale.x0 - currentScale.x1, 2) + Math.pow(currentScale.y0 - currentScale.y1, 2));
+            setScale((draft) => {
+                var _a;
+                const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
+                draft.set(activeSrc, Math.max(oldScale + (currentLength - initLength) / 100, 1));
+            });
+            dataRef.current.eventData.initScale = currentScale;
+            dataRef.current.eventData.currentScale = undefined;
+        }
+    };
+    useEvent(windowRef, 'touchmove', (e) => {
+        e.preventDefault();
+        if (e.touches.length === 2) {
+            dataRef.current.eventData.initMove = dataRef.current.eventData.currentMove = undefined;
+            const newScale = {
+                x0: e.touches[0].clientX,
+                y0: e.touches[0].clientY,
+                x1: e.touches[1].clientX,
+                y1: e.touches[1].clientY,
+            };
+            if (isUndefined(dataRef.current.eventData.initScale)) {
+                dataRef.current.eventData.initScale = newScale;
+            }
+            else {
+                dataRef.current.eventData.currentScale = newScale;
+            }
+        }
+        else {
+            dataRef.current.eventData.initScale = dataRef.current.eventData.currentScale = undefined;
+            const newMove = {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+            if (isUndefined(dataRef.current.eventData.initMove)) {
+                dataRef.current.eventData.initMove = newMove;
+            }
+            else {
+                dataRef.current.eventData.currentMove = newMove;
+            }
+        }
+        handleMove();
+    }, { passive: false }, !listenDragEvent);
+    useEvent(windowRef, 'mousemove', (e) => {
+        e.preventDefault();
+        const newMove = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        if (isUndefined(dataRef.current.eventData.initMove)) {
+            dataRef.current.eventData.initMove = newMove;
+        }
+        else {
+            dataRef.current.eventData.currentMove = newMove;
+        }
+        handleMove();
+    }, {}, !listenDragEvent);
+    useEvent(windowRef, 'mouseup', () => {
+        setIsDragging(false);
+    }, {}, !listenDragEvent);
+    return (_jsx(Portal, { selector: () => {
+            let el = document.getElementById(`${namespace}-image-preview-root`);
+            if (!el) {
+                el = document.createElement('div');
+                el.id = `${namespace}-image-preview-root`;
+                document.body.appendChild(el);
+            }
+            return el;
+        }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, destroyWhenLeaved: true, afterEnter: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                dataRef.current.prevActiveEl = document.activeElement;
+                if (previewRef.current) {
+                    previewRef.current.focus({ preventScroll: true });
+                }
+            }, afterLeave: () => {
+                afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                if (dataRef.current.prevActiveEl) {
+                    dataRef.current.prevActiveEl.focus({ preventScroll: true });
+                }
+            }, children: (state) => {
+                let transitionStyle = {};
+                switch (state) {
+                    case 'enter':
+                        transitionStyle = { transform: 'scale(0.3)', opacity: 0 };
+                        break;
+                    case 'entering':
+                        transitionStyle = {
+                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+                        };
+                        break;
+                    case 'leaving':
+                        transitionStyle = {
+                            transform: 'scale(0.3)',
+                            opacity: 0,
+                            transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+                        };
+                        break;
+                    default:
+                        break;
+                }
+                return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('image-preview'), {
+                    className: restProps.className,
+                    style: Object.assign(Object.assign(Object.assign({}, restProps.style), transitionStyle), { display: state === 'leaved' ? 'none' : undefined, zIndex }),
+                }), { ref: previewRef, tabIndex: -1, onKeyDown: (e) => {
+                        var _a;
+                        (_a = restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                        if (visible && escClosable && e.code === 'Escape') {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                        }
+                    }, children: [_jsx("button", Object.assign({}, styled('image-preview__navigation-button', 'image-preview__navigation-button--prev'), { onClick: () => {
+                                changeActive((prevActive) => {
+                                    return prevActive === 0 ? list.length - 1 : prevActive - 1;
+                                });
+                            }, children: _jsx(Icon, { children: _jsx(KeyboardArrowLeftOutlined, {}) }) })), _jsx("button", Object.assign({}, styled('image-preview__navigation-button', 'image-preview__navigation-button--next'), { onClick: () => {
+                                changeActive((prevActive) => {
+                                    return prevActive === list.length - 1 ? 0 : prevActive + 1;
+                                });
+                            }, children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) })), _jsxs("ul", Object.assign({}, styled('image-preview__toolbar'), { children: [_jsxs("li", Object.assign({}, styled('image-preview__toolbar-page'), { children: [_jsx(Input.Number, Object.assign({}, styled('image-preview__toolbar-page-input'), { model: active + 1, min: 1, max: list.length, integer: true, onModelChange: (val) => {
+                                                if (!isNull(val)) {
+                                                    changeActive(val - 1);
+                                                }
+                                            } })), _jsx("span", { children: "/" }), _jsx("span", { children: list.length })] })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-rotate'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(Rotate90DegreesCwOutlined, {}) }), onClick: () => {
+                                            setRotate((draft) => {
+                                                var _a;
+                                                const oldRotate = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 0;
+                                                draft.set(activeSrc, oldRotate + 90);
+                                            });
+                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-out'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomOutOutlined, {}) }), onClick: () => {
+                                            setScale((draft) => {
+                                                var _a;
+                                                const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
+                                                draft.set(activeSrc, Math.max(oldScale / 1.3, 1));
+                                            });
+                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom'), { children: _jsx(Input.Number, Object.assign({}, styled('image-preview__toolbar-zoom-input'), { model: Math.round(activeScale * 100), min: 100, step: 10, integer: true, onModelChange: (val) => {
+                                            if (!isNull(val)) {
+                                                setScale((draft) => {
+                                                    draft.set(activeSrc, val / 100);
+                                                });
+                                            }
+                                        } })) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-in'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomInOutlined, {}) }), onClick: () => {
+                                            setScale((draft) => {
+                                                var _a;
+                                                const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
+                                                draft.set(activeSrc, oldScale * 1.3);
+                                            });
+                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-close'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }), onClick: () => {
+                                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                                        } }) }))] })), _jsx("img", Object.assign({}, list[active], mergeCS(styled('image-preview__img'), {
+                            style: {
+                                transform: `translate(${activePosition.left}px, ${activePosition.top}px) rotate(${activeRotate}deg) scale(${activeScale})`,
+                            },
+                        }), { tabIndex: -1, onMouseDown: (e) => {
+                                if (e.button === 0) {
+                                    e.preventDefault();
+                                    e.currentTarget.focus({ preventScroll: true });
+                                    dataRef.current.eventData = {};
+                                    setIsDragging(true);
+                                }
+                            }, onMouseUp: (e) => {
+                                if (e.button === 0) {
+                                    e.preventDefault();
+                                }
+                            }, onTouchStart: (e) => {
+                                e.currentTarget.focus({ preventScroll: true });
+                                dataRef.current.eventData = {};
+                                setIsDragging(true);
+                            }, onTouchEnd: () => {
+                                setIsDragging(false);
+                            }, onWheel: (e) => {
+                                setScale((draft) => {
+                                    var _a;
+                                    const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
+                                    draft.set(activeSrc, e.deltaY < 0 ? oldScale + 0.1 : Math.max(oldScale - 0.1, 1));
+                                });
+                            } })), _jsx("ul", Object.assign({}, styled('image-preview__thumbnail-list'), { children: list.map((imgProps, index) => index >= startIndex &&
+                                index <= endIndex && (_createElement("li", Object.assign({}, styled('image-preview__thumbnail', {
+                                'image-preview__thumbnail.is-active': active === index,
+                            }), { key: index, onClick: () => {
+                                    changeActive(index);
+                                } }),
+                                _jsx("img", Object.assign({}, imgProps, styled('image-preview__thumbnail-img')))))) })), _jsx(Mask, { visible: true })] })));
+            } }) }));
+}

package/image/index.d.ts

@@ -0,0 +1,2 @@
+export type { ImageProps, ImageActionProps, ImagePreviewProps } from './types';
+export { Image } from './Image';

package/image/index.js

@@ -0,0 +1 @@
+export { Image } from './Image';