@vx-oss/docs-react 1.0.3 → 1.0.5
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/README.md +3 -3
- package/css/generated/docs.css +1 -1
- package/css/generated/flux.css +1 -1
- package/css/generated/glass.css +1 -1
- package/css/generated/home.css +1 -1
- package/css/generated/notebook.css +1 -1
- package/css/generated/shared.css +1 -1
- package/css/lib/base.css +0 -127
- package/css/preset.css +1 -2
- package/css/style.css +1 -0
- package/dist/components/accordion.js +1 -68
- package/dist/components/banner.js +1 -85
- package/dist/components/callout.js +1 -60
- package/dist/components/card.js +1 -39
- package/dist/components/codeblock.js +1 -126
- package/dist/components/codeblock.rsc.js +1 -22
- package/dist/components/dialog/search-algolia.js +2 -64
- package/dist/components/dialog/search-default.js +2 -66
- package/dist/components/dialog/search-orama.js +2 -69
- package/dist/components/dialog/search.js +1 -351
- package/dist/components/dynamic-codeblock.core.js +1 -51
- package/dist/components/dynamic-codeblock.js +1 -17
- package/dist/components/files.js +1 -40
- package/dist/components/github-info.js +1 -75
- package/dist/components/heading.js +1 -38
- package/dist/components/image-zoom.js +1 -32
- package/dist/components/inline-toc.js +1 -28
- package/dist/components/sidebar/base.js +1 -277
- package/dist/components/sidebar/link-item.js +1 -37
- package/dist/components/sidebar/page-tree.js +1 -69
- package/dist/components/sidebar/tabs/dropdown.js +1 -83
- package/dist/components/sidebar/tabs/index.js +1 -46
- package/dist/components/steps.js +1 -16
- package/dist/components/tabs.js +1 -95
- package/dist/components/toc/clerk.js +1 -227
- package/dist/components/toc/default.js +1 -260
- package/dist/components/toc/index.js +1 -45
- package/dist/components/type-table.js +1 -117
- package/dist/components/ui/accordion.js +1 -42
- package/dist/components/ui/button.js +1 -20
- package/dist/components/ui/collapsible.js +1 -21
- package/dist/components/ui/popover.js +1 -20
- package/dist/components/ui/scroll-area.js +1 -34
- package/dist/components/ui/tabs.js +1 -102
- package/dist/contexts/i18n.js +1 -37
- package/dist/contexts/search.js +1 -68
- package/dist/contexts/tree.js +1 -91
- package/dist/i18n.js +1 -38
- package/dist/index.js +1 -0
- package/dist/layouts/docs/index.js +1 -23
- package/dist/layouts/docs/page/index.js +1 -124
- package/dist/layouts/docs/page/slots/breadcrumb.js +1 -44
- package/dist/layouts/docs/page/slots/container.js +1 -22
- package/dist/layouts/docs/page/slots/footer.js +1 -56
- package/dist/layouts/docs/page/slots/toc.js +1 -182
- package/dist/layouts/docs/slots/container.js +1 -36
- package/dist/layouts/docs/slots/header.js +1 -38
- package/dist/layouts/docs/slots/sidebar.js +1 -268
- package/dist/layouts/flux/index.js +1 -146
- package/dist/layouts/flux/page/index.js +1 -104
- package/dist/layouts/flux/page/slots/breadcrumb.js +1 -44
- package/dist/layouts/flux/page/slots/container.js +1 -22
- package/dist/layouts/flux/page/slots/footer.js +1 -56
- package/dist/layouts/flux/page/slots/toc.js +1 -181
- package/dist/layouts/flux/slots/container.js +1 -13
- package/dist/layouts/flux/slots/sidebar.js +1 -243
- package/dist/layouts/flux/slots/tab-dropdown.js +1 -88
- package/dist/layouts/glass/index.js +1 -70
- package/dist/layouts/glass/page/index.js +1 -92
- package/dist/layouts/glass/page/slots/breadcrumb.js +1 -44
- package/dist/layouts/glass/page/slots/footer.js +1 -56
- package/dist/layouts/glass/page/slots/toc.js +1 -108
- package/dist/layouts/glass/slots/header.js +1 -68
- package/dist/layouts/glass/slots/sidebar.js +1 -267
- package/dist/layouts/home/index.js +1 -40
- package/dist/layouts/home/navbar.js +1 -34
- package/dist/layouts/home/not-found.js +1 -41
- package/dist/layouts/home/slots/container.js +1 -13
- package/dist/layouts/home/slots/header.js +1 -239
- package/dist/layouts/notebook/index.js +1 -23
- package/dist/layouts/notebook/page/index.js +1 -124
- package/dist/layouts/notebook/page/slots/breadcrumb.js +1 -44
- package/dist/layouts/notebook/page/slots/container.js +1 -22
- package/dist/layouts/notebook/page/slots/footer.js +1 -56
- package/dist/layouts/notebook/page/slots/toc.js +1 -181
- package/dist/layouts/notebook/slots/container.js +1 -38
- package/dist/layouts/notebook/slots/header.js +1 -204
- package/dist/layouts/notebook/slots/sidebar.js +1 -240
- package/dist/layouts/shared/index.js +1 -98
- package/dist/layouts/shared/slots/language-select.js +1 -43
- package/dist/layouts/shared/slots/search-trigger.js +1 -53
- package/dist/layouts/shared/slots/theme-switch.js +1 -70
- package/dist/mdx.d.ts +2 -44
- package/dist/mdx.js +2 -70
- package/dist/mdx.server.js +2 -20
- package/dist/og/takumi.js +1 -91
- package/dist/og.js +1 -91
- package/dist/page.js +1 -33
- package/dist/primitives/accordion.js +1 -0
- package/dist/primitives/collapsible.js +1 -0
- package/dist/primitives/dialog.js +1 -0
- package/dist/primitives/direction-provider.js +1 -0
- package/dist/primitives/drawer.js +1 -0
- package/dist/primitives/navigation-menu.js +1 -0
- package/dist/primitives/popover.js +1 -0
- package/dist/primitives/scroll-area.js +1 -0
- package/dist/primitives/shared.js +1 -0
- package/dist/primitives/tabs.js +1 -0
- package/dist/provider/astro.js +1 -20
- package/dist/provider/base.js +1 -73
- package/dist/provider/next.js +1 -17
- package/dist/provider/react-router.js +1 -17
- package/dist/provider/tanstack.js +1 -17
- package/dist/provider/waku.js +1 -17
- package/dist/style.css +11577 -310
- package/dist/utils/use-copy-button.js +1 -26
- package/dist/utils/use-footer-items.js +1 -24
- package/dist/utils/use-is-scroll-top.js +1 -20
- package/package.json +28 -66
- package/css/preset-legacy.css +0 -43
- package/dist/.translations/index.d.ts +0 -55
- package/dist/.translations/keys.js +0 -55
- package/dist/_virtual/_rolldown/runtime.js +0 -13
- package/dist/components/accordion.d.ts +0 -10
- package/dist/components/banner.d.ts +0 -25
- package/dist/components/callout.d.ts +0 -21
- package/dist/components/card.d.ts +0 -13
- package/dist/components/codeblock.d.ts +0 -45
- package/dist/components/codeblock.rsc.d.ts +0 -15
- package/dist/components/dialog/search-algolia.d.ts +0 -27
- package/dist/components/dialog/search-default.d.ts +0 -29
- package/dist/components/dialog/search-orama.d.ts +0 -32
- package/dist/components/dialog/search.d.ts +0 -76
- package/dist/components/dynamic-codeblock.core.d.ts +0 -26
- package/dist/components/dynamic-codeblock.d.ts +0 -8
- package/dist/components/files.d.ts +0 -21
- package/dist/components/github-info.d.ts +0 -20
- package/dist/components/heading.d.ts +0 -9
- package/dist/components/image-zoom.d.ts +0 -18
- package/dist/components/inline-toc.d.ts +0 -10
- package/dist/components/sidebar/base.d.ts +0 -85
- package/dist/components/sidebar/link-item.d.ts +0 -12
- package/dist/components/sidebar/page-tree.d.ts +0 -20
- package/dist/components/sidebar/tabs/dropdown.d.ts +0 -15
- package/dist/components/sidebar/tabs/index.d.ts +0 -8
- package/dist/components/steps.d.ts +0 -10
- package/dist/components/tabs.d.ts +0 -33
- package/dist/components/toc/clerk.d.ts +0 -11
- package/dist/components/toc/default.d.ts +0 -13
- package/dist/components/toc/index.d.ts +0 -10
- package/dist/components/type-table.d.ts +0 -37
- package/dist/components/ui/accordion.d.ts +0 -10
- package/dist/components/ui/button.d.ts +0 -10
- package/dist/components/ui/collapsible.d.ts +0 -11
- package/dist/components/ui/navigation-menu.d.ts +0 -14
- package/dist/components/ui/navigation-menu.js +0 -41
- package/dist/components/ui/popover.d.ts +0 -9
- package/dist/components/ui/scroll-area.d.ts +0 -9
- package/dist/components/ui/tabs.d.ts +0 -23
- package/dist/contexts/i18n.d.ts +0 -34
- package/dist/contexts/search.d.ts +0 -64
- package/dist/contexts/tree.d.ts +0 -29
- package/dist/i18n.d.ts +0 -15
- package/dist/layouts/docs/client.d.ts +0 -33
- package/dist/layouts/docs/client.js +0 -94
- package/dist/layouts/docs/index.d.ts +0 -32
- package/dist/layouts/docs/page/index.d.ts +0 -76
- package/dist/layouts/docs/page/slots/breadcrumb.d.ts +0 -7
- package/dist/layouts/docs/page/slots/container.d.ts +0 -5
- package/dist/layouts/docs/page/slots/footer.d.ts +0 -16
- package/dist/layouts/docs/page/slots/toc.d.ts +0 -47
- package/dist/layouts/docs/slots/container.d.ts +0 -5
- package/dist/layouts/docs/slots/header.d.ts +0 -5
- package/dist/layouts/docs/slots/sidebar.d.ts +0 -22
- package/dist/layouts/flux/index.d.ts +0 -61
- package/dist/layouts/flux/page/index.d.ts +0 -67
- package/dist/layouts/flux/page/slots/breadcrumb.d.ts +0 -7
- package/dist/layouts/flux/page/slots/container.d.ts +0 -5
- package/dist/layouts/flux/page/slots/footer.d.ts +0 -16
- package/dist/layouts/flux/page/slots/toc.d.ts +0 -29
- package/dist/layouts/flux/slots/container.d.ts +0 -5
- package/dist/layouts/flux/slots/sidebar.d.ts +0 -16
- package/dist/layouts/flux/slots/tab-dropdown.d.ts +0 -10
- package/dist/layouts/glass/index.d.ts +0 -39
- package/dist/layouts/glass/layout-tabs.js +0 -54
- package/dist/layouts/glass/page/index.d.ts +0 -31
- package/dist/layouts/glass/page/slots/breadcrumb.d.ts +0 -7
- package/dist/layouts/glass/page/slots/footer.d.ts +0 -16
- package/dist/layouts/glass/page/slots/toc.d.ts +0 -19
- package/dist/layouts/glass/slots/header.d.ts +0 -6
- package/dist/layouts/glass/slots/sidebar.d.ts +0 -21
- package/dist/layouts/home/index.d.ts +0 -27
- package/dist/layouts/home/navbar.d.ts +0 -9
- package/dist/layouts/home/not-found.d.ts +0 -7
- package/dist/layouts/home/slots/container.d.ts +0 -5
- package/dist/layouts/home/slots/header.d.ts +0 -8
- package/dist/layouts/notebook/client.d.ts +0 -35
- package/dist/layouts/notebook/client.js +0 -69
- package/dist/layouts/notebook/index.d.ts +0 -26
- package/dist/layouts/notebook/page/index.d.ts +0 -76
- package/dist/layouts/notebook/page/slots/breadcrumb.d.ts +0 -7
- package/dist/layouts/notebook/page/slots/container.d.ts +0 -5
- package/dist/layouts/notebook/page/slots/footer.d.ts +0 -16
- package/dist/layouts/notebook/page/slots/toc.d.ts +0 -47
- package/dist/layouts/notebook/slots/container.d.ts +0 -5
- package/dist/layouts/notebook/slots/header.d.ts +0 -5
- package/dist/layouts/notebook/slots/sidebar.d.ts +0 -23
- package/dist/layouts/shared/client.d.ts +0 -37
- package/dist/layouts/shared/client.js +0 -85
- package/dist/layouts/shared/index.d.ts +0 -169
- package/dist/layouts/shared/page-actions.d.ts +0 -27
- package/dist/layouts/shared/page-actions.js +0 -199
- package/dist/layouts/shared/slots/language-select.d.ts +0 -12
- package/dist/layouts/shared/slots/search-trigger.d.ts +0 -13
- package/dist/layouts/shared/slots/theme-switch.d.ts +0 -8
- package/dist/legacy/layout.d.ts +0 -29
- package/dist/legacy/layout.js +0 -44
- package/dist/legacy/sidebar.d.ts +0 -14
- package/dist/legacy/sidebar.js +0 -34
- package/dist/mdx.server.d.ts +0 -14
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/controlled.d.ts +0 -30
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/controlled.js +0 -461
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/index.d.ts +0 -3
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts +0 -6
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.js +0 -17
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/adjust-svg-ids.js +0 -53
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/compute-positioned-style.js +0 -25
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/element-tests.js +0 -12
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-div-img-style.js +0 -45
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-img-alt.js +0 -10
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-img-object-fit-style.js +0 -57
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-img-regular-style.js +0 -21
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-img-src.js +0 -14
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-modal-img-transform.js +0 -22
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-scale.js +0 -27
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-style-ghost.js +0 -31
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-style-modal-img.js +0 -75
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/get-target-dimension.js +0 -4
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/parse-position.js +0 -7
- package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/test-has-scalable-src.js +0 -5
- package/dist/og/takumi.d.ts +0 -15
- package/dist/og.d.ts +0 -16
- package/dist/page.d.ts +0 -29
- package/dist/provider/astro.d.ts +0 -29
- package/dist/provider/base.d.ts +0 -48
- package/dist/provider/next.d.ts +0 -16
- package/dist/provider/react-router.d.ts +0 -16
- package/dist/provider/tanstack.d.ts +0 -16
- package/dist/provider/waku.d.ts +0 -16
- package/dist/utils/cn.js +0 -2
- package/dist/utils/merge-refs.js +0 -11
- package/dist/utils/urls.js +0 -15
- package/dist/utils/use-copy-button.d.ts +0 -5
- package/dist/utils/use-footer-items.d.ts +0 -8
- package/dist/utils/use-is-scroll-top.d.ts +0 -6
package/dist/legacy/sidebar.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { usePathname } from "@vx-oss/docs-core/framework";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
import { createContext, use, useMemo, useRef, useState } from "react";
|
|
5
|
-
import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
|
|
6
|
-
//#region src/legacy/sidebar.tsx
|
|
7
|
-
const SidebarContext = createContext(null);
|
|
8
|
-
function useSidebar() {
|
|
9
|
-
const ctx = use(SidebarContext);
|
|
10
|
-
if (!ctx) throw new Error("the component must be wrapped under <SidebarProvider /> (@vx-oss/docs-react/legacy/sidebar)");
|
|
11
|
-
return ctx;
|
|
12
|
-
}
|
|
13
|
-
function SidebarProvider({ children }) {
|
|
14
|
-
const [open, setOpen] = useState(false);
|
|
15
|
-
const [collapsed, setCollapsed] = useState(false);
|
|
16
|
-
const closeOnRedirect = useRef(true);
|
|
17
|
-
const pathname = usePathname();
|
|
18
|
-
useOnChange(pathname, () => {
|
|
19
|
-
if (closeOnRedirect.current) setOpen(false);
|
|
20
|
-
else closeOnRedirect.current = true;
|
|
21
|
-
});
|
|
22
|
-
return /* @__PURE__ */ jsx(SidebarContext, {
|
|
23
|
-
value: useMemo(() => ({
|
|
24
|
-
closeOnRedirect,
|
|
25
|
-
collapsed,
|
|
26
|
-
open,
|
|
27
|
-
setCollapsed,
|
|
28
|
-
setOpen
|
|
29
|
-
}), [open, collapsed]),
|
|
30
|
-
children
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
//#endregion
|
|
34
|
-
export { SidebarProvider, useSidebar };
|
package/dist/mdx.server.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import defaultMdxComponents from "./mdx.js";
|
|
2
|
-
import { ComponentProps, FC } from "react";
|
|
3
|
-
import { LoaderConfig, LoaderOutput, Page } from "@vx-oss/docs-core/source";
|
|
4
|
-
//#region src/mdx.server.d.ts
|
|
5
|
-
/**
|
|
6
|
-
* Extend the default Link component to resolve relative file paths in `href`.
|
|
7
|
-
*
|
|
8
|
-
* @param page the current page
|
|
9
|
-
* @param source the source object
|
|
10
|
-
* @param OverrideLink The component to override from
|
|
11
|
-
*/
|
|
12
|
-
declare function createRelativeLink<C extends LoaderConfig>(source: LoaderOutput<C>, page: Page | C['page'], OverrideLink?: FC<ComponentProps<'a'>>): FC<ComponentProps<'a'>>;
|
|
13
|
-
//#endregion
|
|
14
|
-
export { createRelativeLink, defaultMdxComponents as default };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/controlled.d.ts
|
|
3
|
-
type ModalState = 'LOADED' | 'LOADING' | 'UNLOADED' | 'UNLOADING';
|
|
4
|
-
interface ControlledProps {
|
|
5
|
-
a11yNameButtonUnzoom?: string;
|
|
6
|
-
a11yNameButtonZoom?: string;
|
|
7
|
-
canSwipeToUnzoom?: boolean;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
classDialog?: string;
|
|
10
|
-
IconUnzoom?: React.ElementType;
|
|
11
|
-
IconZoom?: React.ElementType;
|
|
12
|
-
isDisabled?: boolean;
|
|
13
|
-
isZoomed: boolean;
|
|
14
|
-
onZoomChange?: (value: boolean, data: {
|
|
15
|
-
event: React.SyntheticEvent | Event;
|
|
16
|
-
}) => void;
|
|
17
|
-
swipeToUnzoomThreshold?: number;
|
|
18
|
-
wrapElement?: 'div' | 'span';
|
|
19
|
-
ZoomContent?: (data: {
|
|
20
|
-
buttonUnzoom: React.ReactElement<HTMLButtonElement>;
|
|
21
|
-
img: React.ReactElement | null;
|
|
22
|
-
isZoomImgLoaded: boolean;
|
|
23
|
-
modalState: ModalState;
|
|
24
|
-
onUnzoom: (e: Event) => void;
|
|
25
|
-
}) => React.ReactElement;
|
|
26
|
-
zoomImg?: React.ImgHTMLAttributes<HTMLImageElement>;
|
|
27
|
-
zoomMargin?: number;
|
|
28
|
-
}
|
|
29
|
-
//#endregion
|
|
30
|
-
export { ControlledProps };
|
|
@@ -1,461 +0,0 @@
|
|
|
1
|
-
import { adjustSvgIDs } from "./utils/adjust-svg-ids.js";
|
|
2
|
-
import { testDiv, testImg, testImgLoaded, testSvg } from "./utils/element-tests.js";
|
|
3
|
-
import { getImgAlt } from "./utils/get-img-alt.js";
|
|
4
|
-
import { getImgSrc } from "./utils/get-img-src.js";
|
|
5
|
-
import { getStyleGhost } from "./utils/get-style-ghost.js";
|
|
6
|
-
import { getStyleModalImg } from "./utils/get-style-modal-img.js";
|
|
7
|
-
import React from "react";
|
|
8
|
-
import ReactDOM from "react-dom";
|
|
9
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/controlled.js
|
|
10
|
-
const IMAGE_QUERY = [
|
|
11
|
-
"img",
|
|
12
|
-
"svg",
|
|
13
|
-
"[role=\"img\"]",
|
|
14
|
-
"[data-zoom]"
|
|
15
|
-
].map((x) => `${x}:not([aria-hidden="true"])`).join(",");
|
|
16
|
-
const defaultBodyAttrs = {
|
|
17
|
-
overflow: "",
|
|
18
|
-
width: ""
|
|
19
|
-
};
|
|
20
|
-
function getDialogContainer() {
|
|
21
|
-
const existing = document.querySelector("[data-rmiz-portal]");
|
|
22
|
-
if (existing != null) return existing;
|
|
23
|
-
const el = document.createElement("div");
|
|
24
|
-
el.setAttribute("data-rmiz-portal", "");
|
|
25
|
-
document.body.appendChild(el);
|
|
26
|
-
return el;
|
|
27
|
-
}
|
|
28
|
-
function handleDialogCancelStatic(e) {
|
|
29
|
-
e.preventDefault();
|
|
30
|
-
}
|
|
31
|
-
function Controlled(props) {
|
|
32
|
-
return React.createElement(ControlledBase, { ...props });
|
|
33
|
-
}
|
|
34
|
-
var ControlledBase = class extends React.Component {
|
|
35
|
-
constructor() {
|
|
36
|
-
super(...arguments);
|
|
37
|
-
this.state = {
|
|
38
|
-
id: "",
|
|
39
|
-
isZoomImgLoaded: false,
|
|
40
|
-
loadedImgEl: void 0,
|
|
41
|
-
modalState: "UNLOADED",
|
|
42
|
-
shouldRefresh: false,
|
|
43
|
-
styleGhost: {}
|
|
44
|
-
};
|
|
45
|
-
this.refContent = React.createRef();
|
|
46
|
-
this.refDialog = React.createRef();
|
|
47
|
-
this.refModalContent = React.createRef();
|
|
48
|
-
this.refModalImg = React.createRef();
|
|
49
|
-
this.refWrap = React.createRef();
|
|
50
|
-
this.imgEl = null;
|
|
51
|
-
this.isScaling = false;
|
|
52
|
-
this.prevBodyAttrs = defaultBodyAttrs;
|
|
53
|
-
this.styleModalImg = {};
|
|
54
|
-
this.handleModalStateChange = (prevModalState) => {
|
|
55
|
-
const { state: { modalState } } = this;
|
|
56
|
-
if (prevModalState !== "LOADING" && modalState === "LOADING") {
|
|
57
|
-
this.isScaling = false;
|
|
58
|
-
this.loadZoomImg();
|
|
59
|
-
window.addEventListener("resize", this.handleResize, { passive: true });
|
|
60
|
-
window.addEventListener("touchstart", this.handleTouchStart, { passive: true });
|
|
61
|
-
window.addEventListener("touchmove", this.handleTouchMove, { passive: true });
|
|
62
|
-
window.addEventListener("touchend", this.handleTouchEnd, { passive: true });
|
|
63
|
-
window.addEventListener("touchcancel", this.handleTouchCancel, { passive: true });
|
|
64
|
-
document.addEventListener("keydown", this.handleKeyDown, true);
|
|
65
|
-
} else if (prevModalState !== "LOADED" && modalState === "LOADED") window.addEventListener("wheel", this.handleWheel, { passive: true });
|
|
66
|
-
else if (prevModalState !== "UNLOADING" && modalState === "UNLOADING") {
|
|
67
|
-
this.ensureImgTransitionEnd();
|
|
68
|
-
window.removeEventListener("wheel", this.handleWheel);
|
|
69
|
-
window.removeEventListener("touchstart", this.handleTouchStart);
|
|
70
|
-
window.removeEventListener("touchmove", this.handleTouchMove);
|
|
71
|
-
window.removeEventListener("touchend", this.handleTouchEnd);
|
|
72
|
-
window.removeEventListener("touchcancel", this.handleTouchCancel);
|
|
73
|
-
document.removeEventListener("keydown", this.handleKeyDown, true);
|
|
74
|
-
} else if (prevModalState !== "UNLOADED" && modalState === "UNLOADED") {
|
|
75
|
-
this.bodyScrollEnable();
|
|
76
|
-
window.removeEventListener("resize", this.handleResize);
|
|
77
|
-
this.refDialog.current?.close();
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
this.setId = () => {
|
|
81
|
-
const gen4 = () => Math.random().toString(16).slice(-4);
|
|
82
|
-
this.setState({ id: gen4() + gen4() + gen4() });
|
|
83
|
-
};
|
|
84
|
-
this.setAndTrackImg = () => {
|
|
85
|
-
const { refContent: { current: contentEl } } = this;
|
|
86
|
-
if (contentEl == null) return;
|
|
87
|
-
this.imgEl = contentEl.querySelector(IMAGE_QUERY);
|
|
88
|
-
if (this.imgEl !== null) {
|
|
89
|
-
this.contentNotFoundChangeObserver?.disconnect();
|
|
90
|
-
this.imgEl.addEventListener("load", this.handleImgLoad);
|
|
91
|
-
this.imgEl.addEventListener("click", this.handleZoom);
|
|
92
|
-
if (this.state.loadedImgEl == null) this.handleImgLoad();
|
|
93
|
-
this.imgElResizeObserver = new ResizeObserver((entries) => {
|
|
94
|
-
const [entry] = entries;
|
|
95
|
-
if (entry?.target !== void 0) {
|
|
96
|
-
this.imgEl = entry.target;
|
|
97
|
-
this.setState({ styleGhost: getStyleGhost(this.imgEl) });
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
this.imgElResizeObserver.observe(this.imgEl);
|
|
101
|
-
if (this.contentChangeObserver == null) {
|
|
102
|
-
this.contentChangeObserver = new MutationObserver(() => {
|
|
103
|
-
this.setState({ styleGhost: getStyleGhost(this.imgEl) });
|
|
104
|
-
});
|
|
105
|
-
this.contentChangeObserver.observe(contentEl, {
|
|
106
|
-
attributes: true,
|
|
107
|
-
childList: true,
|
|
108
|
-
subtree: true
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
} else if (this.contentNotFoundChangeObserver == null) {
|
|
112
|
-
this.contentNotFoundChangeObserver = new MutationObserver(this.setAndTrackImg);
|
|
113
|
-
this.contentNotFoundChangeObserver.observe(contentEl, {
|
|
114
|
-
childList: true,
|
|
115
|
-
subtree: true
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
this.handleIfZoomChanged = (prevIsZoomed) => {
|
|
120
|
-
const { props: { isZoomed } } = this;
|
|
121
|
-
if (!prevIsZoomed && isZoomed) this.zoom();
|
|
122
|
-
else if (prevIsZoomed && !isZoomed) this.unzoom();
|
|
123
|
-
};
|
|
124
|
-
this.handleImgLoad = () => {
|
|
125
|
-
const imgSrc = getImgSrc(this.imgEl);
|
|
126
|
-
if (imgSrc == null || imgSrc === "") return;
|
|
127
|
-
const img = new Image();
|
|
128
|
-
const { imgEl } = this;
|
|
129
|
-
if (testImg(imgEl)) {
|
|
130
|
-
const { sizes, srcset, crossOrigin } = imgEl;
|
|
131
|
-
img.sizes = sizes;
|
|
132
|
-
img.srcset = srcset;
|
|
133
|
-
img.crossOrigin = crossOrigin;
|
|
134
|
-
}
|
|
135
|
-
img.src = imgSrc;
|
|
136
|
-
const setLoaded = () => {
|
|
137
|
-
this.setState({
|
|
138
|
-
loadedImgEl: img,
|
|
139
|
-
styleGhost: getStyleGhost(this.imgEl)
|
|
140
|
-
});
|
|
141
|
-
};
|
|
142
|
-
img.decode().then(setLoaded).catch(() => {
|
|
143
|
-
if (testImgLoaded(img)) {
|
|
144
|
-
setLoaded();
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
147
|
-
img.onload = setLoaded;
|
|
148
|
-
});
|
|
149
|
-
};
|
|
150
|
-
this.handleZoom = (e) => {
|
|
151
|
-
if (this.props.isDisabled !== true && this.hasImage()) this.props.onZoomChange?.(true, { event: e });
|
|
152
|
-
};
|
|
153
|
-
this.handleUnzoom = (e) => {
|
|
154
|
-
if (this.props.isDisabled !== true) this.props.onZoomChange?.(false, { event: e });
|
|
155
|
-
};
|
|
156
|
-
this.handleBtnUnzoomClick = (e) => {
|
|
157
|
-
e.preventDefault();
|
|
158
|
-
e.stopPropagation();
|
|
159
|
-
this.handleUnzoom(e);
|
|
160
|
-
};
|
|
161
|
-
this.handleDialogClick = (e) => {
|
|
162
|
-
if (e.target === this.refModalContent.current || e.target === this.refModalImg.current) {
|
|
163
|
-
e.stopPropagation();
|
|
164
|
-
this.handleUnzoom(e);
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
this.handleDialogClose = (e) => {
|
|
168
|
-
e.stopPropagation();
|
|
169
|
-
this.handleUnzoom(e);
|
|
170
|
-
};
|
|
171
|
-
this.handleKeyDown = (e) => {
|
|
172
|
-
if (e.key === "Escape") {
|
|
173
|
-
e.preventDefault();
|
|
174
|
-
e.stopPropagation();
|
|
175
|
-
this.handleUnzoom(e);
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
this.handleWheel = (e) => {
|
|
179
|
-
if (e.ctrlKey) return;
|
|
180
|
-
if (this.isScaling) return;
|
|
181
|
-
if ((window.visualViewport?.scale ?? 1) > 1) return;
|
|
182
|
-
e.stopPropagation();
|
|
183
|
-
queueMicrotask(() => {
|
|
184
|
-
this.handleUnzoom(e);
|
|
185
|
-
});
|
|
186
|
-
};
|
|
187
|
-
this.handleTouchStart = (e) => {
|
|
188
|
-
if (e.touches.length > 1) {
|
|
189
|
-
this.isScaling = true;
|
|
190
|
-
return;
|
|
191
|
-
}
|
|
192
|
-
const { changedTouches } = e;
|
|
193
|
-
const [changedTouch] = changedTouches;
|
|
194
|
-
if (changedTouches.length === 1 && changedTouch !== void 0) {
|
|
195
|
-
const { screenY } = changedTouch;
|
|
196
|
-
this.touchYStart = screenY;
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
this.handleTouchMove = (e) => {
|
|
200
|
-
const browserScale = window.visualViewport?.scale ?? 1;
|
|
201
|
-
const { changedTouches: changedTouchesMove } = e;
|
|
202
|
-
const [changedTouchMove] = changedTouchesMove;
|
|
203
|
-
if (this.props.canSwipeToUnzoom && !this.isScaling && browserScale <= 1 && this.touchYStart != null && changedTouchMove !== void 0) {
|
|
204
|
-
const { screenY } = changedTouchMove;
|
|
205
|
-
this.touchYEnd = screenY;
|
|
206
|
-
const max = Math.max(this.touchYStart, this.touchYEnd);
|
|
207
|
-
const min = Math.min(this.touchYStart, this.touchYEnd);
|
|
208
|
-
if (Math.abs(max - min) > this.props.swipeToUnzoomThreshold) {
|
|
209
|
-
this.touchYStart = void 0;
|
|
210
|
-
this.touchYEnd = void 0;
|
|
211
|
-
this.handleUnzoom(e);
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
this.handleTouchEnd = () => {
|
|
216
|
-
this.touchYStart = void 0;
|
|
217
|
-
this.touchYEnd = void 0;
|
|
218
|
-
};
|
|
219
|
-
this.handleTouchCancel = () => {
|
|
220
|
-
this.touchYStart = void 0;
|
|
221
|
-
this.touchYEnd = void 0;
|
|
222
|
-
};
|
|
223
|
-
this.handleResize = () => {
|
|
224
|
-
this.setState({ shouldRefresh: true });
|
|
225
|
-
};
|
|
226
|
-
this.hasImage = () => this.imgEl !== null && (this.state.loadedImgEl !== void 0 || testSvg(this.imgEl)) && window.getComputedStyle(this.imgEl).display !== "none";
|
|
227
|
-
this.zoom = () => {
|
|
228
|
-
this.bodyScrollDisable();
|
|
229
|
-
this.refDialog.current?.showModal();
|
|
230
|
-
this.setState({ modalState: "LOADING" });
|
|
231
|
-
};
|
|
232
|
-
this.unzoom = () => {
|
|
233
|
-
this.setState({ modalState: "UNLOADING" });
|
|
234
|
-
};
|
|
235
|
-
this.handleImgTransitionEnd = () => {
|
|
236
|
-
clearTimeout(this.timeoutTransitionEnd);
|
|
237
|
-
if (this.state.modalState === "LOADING") this.setState({ modalState: "LOADED" });
|
|
238
|
-
else if (this.state.modalState === "UNLOADING") this.setState({
|
|
239
|
-
shouldRefresh: false,
|
|
240
|
-
modalState: "UNLOADED"
|
|
241
|
-
});
|
|
242
|
-
};
|
|
243
|
-
this.ensureImgTransitionEnd = () => {
|
|
244
|
-
if (this.refModalImg.current !== null) {
|
|
245
|
-
const { transitionDuration: td } = window.getComputedStyle(this.refModalImg.current);
|
|
246
|
-
const tdFloat = parseFloat(td);
|
|
247
|
-
if (tdFloat !== 0 && !Number.isNaN(tdFloat)) {
|
|
248
|
-
const tdMs = tdFloat * (td.endsWith("ms") ? 1 : 1e3) + 50;
|
|
249
|
-
this.timeoutTransitionEnd = setTimeout(this.handleImgTransitionEnd, tdMs);
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
};
|
|
253
|
-
this.bodyScrollDisable = () => {
|
|
254
|
-
const bodyStyle = document.body.style;
|
|
255
|
-
this.prevBodyAttrs = {
|
|
256
|
-
overflow: bodyStyle.overflow,
|
|
257
|
-
width: bodyStyle.width
|
|
258
|
-
};
|
|
259
|
-
const clientWidth = document.body.clientWidth;
|
|
260
|
-
bodyStyle.overflow = "hidden";
|
|
261
|
-
bodyStyle.width = `${clientWidth}px`;
|
|
262
|
-
};
|
|
263
|
-
this.bodyScrollEnable = () => {
|
|
264
|
-
const bodyStyle = document.body.style;
|
|
265
|
-
const prev = this.prevBodyAttrs;
|
|
266
|
-
bodyStyle.width = prev.width;
|
|
267
|
-
bodyStyle.overflow = prev.overflow;
|
|
268
|
-
this.prevBodyAttrs = defaultBodyAttrs;
|
|
269
|
-
};
|
|
270
|
-
this.loadZoomImg = () => {
|
|
271
|
-
const { props: { zoomImg } } = this;
|
|
272
|
-
if (zoomImg == null) return;
|
|
273
|
-
const { src: zoomImgSrc } = zoomImg;
|
|
274
|
-
if (zoomImgSrc !== void 0 && zoomImgSrc !== "") {
|
|
275
|
-
const img = new Image();
|
|
276
|
-
img.sizes = zoomImg.sizes ?? "";
|
|
277
|
-
img.srcset = zoomImg.srcSet ?? "";
|
|
278
|
-
img.crossOrigin = zoomImg.crossOrigin ?? void 0;
|
|
279
|
-
img.src = zoomImgSrc;
|
|
280
|
-
const setLoaded = () => {
|
|
281
|
-
this.setState({ isZoomImgLoaded: true });
|
|
282
|
-
};
|
|
283
|
-
img.decode().then(setLoaded).catch(() => {
|
|
284
|
-
if (testImgLoaded(img)) {
|
|
285
|
-
setLoaded();
|
|
286
|
-
return;
|
|
287
|
-
}
|
|
288
|
-
img.onload = setLoaded;
|
|
289
|
-
});
|
|
290
|
-
}
|
|
291
|
-
};
|
|
292
|
-
this.UNSAFE_handleSvg = () => {
|
|
293
|
-
const { imgEl, refModalImg, styleModalImg } = this;
|
|
294
|
-
if (testSvg(imgEl)) {
|
|
295
|
-
const svgEl = imgEl.cloneNode(true);
|
|
296
|
-
adjustSvgIDs(svgEl);
|
|
297
|
-
svgEl.style.width = `${styleModalImg.width ?? 0}px`;
|
|
298
|
-
svgEl.style.height = `${styleModalImg.height ?? 0}px`;
|
|
299
|
-
svgEl.addEventListener("click", this.handleUnzoom);
|
|
300
|
-
refModalImg.current?.firstChild?.remove();
|
|
301
|
-
refModalImg.current?.appendChild(svgEl);
|
|
302
|
-
}
|
|
303
|
-
};
|
|
304
|
-
}
|
|
305
|
-
render() {
|
|
306
|
-
const { handleBtnUnzoomClick, handleDialogClick, handleDialogClose, handleUnzoom, handleZoom, imgEl, props: { a11yNameButtonUnzoom, a11yNameButtonZoom, children, classDialog, IconUnzoom, IconZoom, wrapElement: WrapElement, ZoomContent, zoomImg, zoomMargin }, refContent, refDialog, refModalContent, refModalImg, refWrap, state: { id, isZoomImgLoaded, loadedImgEl, modalState, shouldRefresh, styleGhost } } = this;
|
|
307
|
-
const idModal = `rmiz-modal-${id}`;
|
|
308
|
-
const idModalImg = `rmiz-modal-img-${id}`;
|
|
309
|
-
const isDiv = testDiv(imgEl);
|
|
310
|
-
const isImg = testImg(imgEl);
|
|
311
|
-
const isSvg = testSvg(imgEl);
|
|
312
|
-
const imgAlt = getImgAlt(imgEl);
|
|
313
|
-
const imgSrc = getImgSrc(imgEl);
|
|
314
|
-
const imgSizes = isImg ? imgEl.sizes : void 0;
|
|
315
|
-
const imgSrcSet = isImg ? imgEl.srcset : void 0;
|
|
316
|
-
const imgCrossOrigin = isImg ? imgEl.crossOrigin : void 0;
|
|
317
|
-
const hasZoomImg = zoomImg?.src !== void 0 && zoomImg.src !== "";
|
|
318
|
-
const hasImage = this.hasImage();
|
|
319
|
-
const labelBtnZoom = imgAlt !== void 0 && imgAlt !== "" ? `${a11yNameButtonZoom}: ${imgAlt}` : a11yNameButtonZoom;
|
|
320
|
-
const isModalActive = modalState === "LOADING" || modalState === "LOADED";
|
|
321
|
-
const dataContentState = hasImage ? "found" : "not-found";
|
|
322
|
-
const dataOverlayState = modalState === "UNLOADED" || modalState === "UNLOADING" ? "hidden" : "visible";
|
|
323
|
-
const styleContent = { visibility: modalState === "UNLOADED" ? "visible" : "hidden" };
|
|
324
|
-
this.styleModalImg = hasImage && imgEl !== null ? getStyleModalImg({
|
|
325
|
-
hasZoomImg,
|
|
326
|
-
imgSrc,
|
|
327
|
-
isSvg,
|
|
328
|
-
isZoomed: isModalActive,
|
|
329
|
-
loadedImgEl,
|
|
330
|
-
offset: zoomMargin,
|
|
331
|
-
shouldRefresh,
|
|
332
|
-
targetEl: imgEl
|
|
333
|
-
}) : {};
|
|
334
|
-
let modalContent = null;
|
|
335
|
-
if (hasImage) {
|
|
336
|
-
const modalImg = isImg || isDiv ? React.createElement("img", {
|
|
337
|
-
alt: imgAlt,
|
|
338
|
-
crossOrigin: imgCrossOrigin,
|
|
339
|
-
sizes: imgSizes,
|
|
340
|
-
src: imgSrc,
|
|
341
|
-
srcSet: imgSrcSet,
|
|
342
|
-
...isZoomImgLoaded && modalState === "LOADED" ? zoomImg : {},
|
|
343
|
-
"data-rmiz-modal-img": "",
|
|
344
|
-
height: this.styleModalImg.height ?? void 0,
|
|
345
|
-
id: idModalImg,
|
|
346
|
-
onTransitionEnd: this.handleImgTransitionEnd,
|
|
347
|
-
ref: refModalImg,
|
|
348
|
-
style: this.styleModalImg,
|
|
349
|
-
width: this.styleModalImg.width ?? void 0
|
|
350
|
-
}) : isSvg ? React.createElement("div", {
|
|
351
|
-
"data-rmiz-modal-img": true,
|
|
352
|
-
onTransitionEnd: this.handleImgTransitionEnd,
|
|
353
|
-
ref: refModalImg,
|
|
354
|
-
style: this.styleModalImg
|
|
355
|
-
}) : null;
|
|
356
|
-
const modalBtnUnzoom = React.createElement("button", {
|
|
357
|
-
"aria-label": a11yNameButtonUnzoom,
|
|
358
|
-
"data-rmiz-btn-unzoom": "",
|
|
359
|
-
onClick: handleBtnUnzoomClick,
|
|
360
|
-
type: "button"
|
|
361
|
-
}, React.createElement(IconUnzoom, null));
|
|
362
|
-
modalContent = ZoomContent == null ? React.createElement(React.Fragment, null, modalImg, modalBtnUnzoom) : React.createElement(ZoomContent, {
|
|
363
|
-
buttonUnzoom: modalBtnUnzoom,
|
|
364
|
-
modalState,
|
|
365
|
-
img: modalImg,
|
|
366
|
-
isZoomImgLoaded,
|
|
367
|
-
onUnzoom: handleUnzoom
|
|
368
|
-
});
|
|
369
|
-
}
|
|
370
|
-
return React.createElement(WrapElement, {
|
|
371
|
-
"data-rmiz": "",
|
|
372
|
-
ref: refWrap
|
|
373
|
-
}, React.createElement(WrapElement, {
|
|
374
|
-
"data-rmiz-content": dataContentState,
|
|
375
|
-
ref: refContent,
|
|
376
|
-
style: styleContent
|
|
377
|
-
}, children), hasImage && React.createElement(WrapElement, {
|
|
378
|
-
"data-rmiz-ghost": "",
|
|
379
|
-
style: styleGhost
|
|
380
|
-
}, React.createElement("button", {
|
|
381
|
-
"aria-label": labelBtnZoom,
|
|
382
|
-
"data-rmiz-btn-zoom": "",
|
|
383
|
-
onClick: handleZoom,
|
|
384
|
-
type: "button"
|
|
385
|
-
}, React.createElement(IconZoom, null))), hasImage && ReactDOM.createPortal(React.createElement("dialog", {
|
|
386
|
-
"aria-labelledby": idModalImg,
|
|
387
|
-
"aria-modal": "true",
|
|
388
|
-
className: classDialog,
|
|
389
|
-
"data-rmiz-modal": "",
|
|
390
|
-
id: idModal,
|
|
391
|
-
onClick: handleDialogClick,
|
|
392
|
-
onClose: handleDialogClose,
|
|
393
|
-
onCancel: handleDialogCancelStatic,
|
|
394
|
-
ref: refDialog,
|
|
395
|
-
role: "dialog"
|
|
396
|
-
}, React.createElement("div", { "data-rmiz-modal-overlay": dataOverlayState }), React.createElement("div", {
|
|
397
|
-
"data-rmiz-modal-content": "",
|
|
398
|
-
ref: refModalContent
|
|
399
|
-
}, modalContent)), getDialogContainer()));
|
|
400
|
-
}
|
|
401
|
-
componentDidMount() {
|
|
402
|
-
this.setId();
|
|
403
|
-
this.setAndTrackImg();
|
|
404
|
-
this.handleImgLoad();
|
|
405
|
-
this.UNSAFE_handleSvg();
|
|
406
|
-
}
|
|
407
|
-
componentWillUnmount() {
|
|
408
|
-
if (this.state.modalState !== "UNLOADED") this.bodyScrollEnable();
|
|
409
|
-
this.contentChangeObserver?.disconnect();
|
|
410
|
-
this.contentNotFoundChangeObserver?.disconnect();
|
|
411
|
-
this.imgElResizeObserver?.disconnect();
|
|
412
|
-
this.imgEl?.removeEventListener("load", this.handleImgLoad);
|
|
413
|
-
this.imgEl?.removeEventListener("click", this.handleZoom);
|
|
414
|
-
clearTimeout(this.timeoutTransitionEnd);
|
|
415
|
-
window.removeEventListener("wheel", this.handleWheel);
|
|
416
|
-
window.removeEventListener("touchstart", this.handleTouchStart);
|
|
417
|
-
window.removeEventListener("touchmove", this.handleTouchMove);
|
|
418
|
-
window.removeEventListener("touchend", this.handleTouchEnd);
|
|
419
|
-
window.removeEventListener("touchcancel", this.handleTouchCancel);
|
|
420
|
-
window.removeEventListener("resize", this.handleResize);
|
|
421
|
-
document.removeEventListener("keydown", this.handleKeyDown, true);
|
|
422
|
-
}
|
|
423
|
-
componentDidUpdate(prevProps, prevState) {
|
|
424
|
-
this.handleModalStateChange(prevState.modalState);
|
|
425
|
-
this.UNSAFE_handleSvg();
|
|
426
|
-
this.handleIfZoomChanged(prevProps.isZoomed);
|
|
427
|
-
}
|
|
428
|
-
};
|
|
429
|
-
ControlledBase.defaultProps = {
|
|
430
|
-
a11yNameButtonUnzoom: "Minimize image",
|
|
431
|
-
a11yNameButtonZoom: "Expand image",
|
|
432
|
-
canSwipeToUnzoom: true,
|
|
433
|
-
IconUnzoom: ICompress,
|
|
434
|
-
IconZoom: IEnlarge,
|
|
435
|
-
isDisabled: false,
|
|
436
|
-
swipeToUnzoomThreshold: 10,
|
|
437
|
-
wrapElement: "div",
|
|
438
|
-
zoomMargin: 0
|
|
439
|
-
};
|
|
440
|
-
function ICompress() {
|
|
441
|
-
return React.createElement("svg", {
|
|
442
|
-
"aria-hidden": "true",
|
|
443
|
-
"data-rmiz-btn-unzoom-icon": true,
|
|
444
|
-
fill: "currentColor",
|
|
445
|
-
focusable: "false",
|
|
446
|
-
viewBox: "0 0 16 16",
|
|
447
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
448
|
-
}, React.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" }));
|
|
449
|
-
}
|
|
450
|
-
function IEnlarge() {
|
|
451
|
-
return React.createElement("svg", {
|
|
452
|
-
"aria-hidden": "true",
|
|
453
|
-
"data-rmiz-btn-zoom-icon": true,
|
|
454
|
-
fill: "currentColor",
|
|
455
|
-
focusable: "false",
|
|
456
|
-
viewBox: "0 0 16 16",
|
|
457
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
458
|
-
}, React.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" }));
|
|
459
|
-
}
|
|
460
|
-
//#endregion
|
|
461
|
-
export { Controlled };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { ControlledProps } from "./controlled.js";
|
|
2
|
-
import React from "react";
|
|
3
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.d.ts
|
|
4
|
-
type UncontrolledProps = Omit<ControlledProps, 'isZoomed'>;
|
|
5
|
-
//#endregion
|
|
6
|
-
export { UncontrolledProps };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Controlled } from "./controlled.js";
|
|
2
|
-
import React from "react";
|
|
3
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/uncontrolled.js
|
|
4
|
-
function Uncontrolled({ onZoomChange, ...props }) {
|
|
5
|
-
const [isZoomed, setIsZoomed] = React.useState(false);
|
|
6
|
-
const handleZoomChange = React.useCallback((value, { event }) => {
|
|
7
|
-
setIsZoomed(value);
|
|
8
|
-
onZoomChange?.(value, { event });
|
|
9
|
-
}, [onZoomChange]);
|
|
10
|
-
return React.createElement(Controlled, {
|
|
11
|
-
...props,
|
|
12
|
-
isZoomed,
|
|
13
|
-
onZoomChange: handleZoomChange
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
//#endregion
|
|
17
|
-
export { Uncontrolled };
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/adjust-svg-ids.js
|
|
2
|
-
const adjustSvgIDs = (svgEl) => {
|
|
3
|
-
const newIdSuffix = "-zoom";
|
|
4
|
-
const attrs = [
|
|
5
|
-
"clip-path",
|
|
6
|
-
"fill",
|
|
7
|
-
"mask",
|
|
8
|
-
"marker-start",
|
|
9
|
-
"marker-mid",
|
|
10
|
-
"marker-end"
|
|
11
|
-
];
|
|
12
|
-
const idMap = /* @__PURE__ */ new Map();
|
|
13
|
-
if (svgEl.hasAttribute("id")) {
|
|
14
|
-
const { id: oldId } = svgEl;
|
|
15
|
-
const newId = oldId + newIdSuffix;
|
|
16
|
-
idMap.set(oldId, newId);
|
|
17
|
-
const svgNode = svgEl;
|
|
18
|
-
svgNode.id = newId;
|
|
19
|
-
}
|
|
20
|
-
svgEl.querySelectorAll("[id]").forEach((el) => {
|
|
21
|
-
const { id: oldId } = el;
|
|
22
|
-
const newId = oldId + newIdSuffix;
|
|
23
|
-
idMap.set(oldId, newId);
|
|
24
|
-
const node = el;
|
|
25
|
-
node.id = newId;
|
|
26
|
-
});
|
|
27
|
-
const urlAttrSelector = attrs.map((attr) => `[${attr}]`).join(", ");
|
|
28
|
-
svgEl.querySelectorAll(urlAttrSelector).forEach((el) => {
|
|
29
|
-
for (const attr of attrs) {
|
|
30
|
-
const val = el.getAttribute(attr);
|
|
31
|
-
if (val?.startsWith("url(#") === true) {
|
|
32
|
-
const oldId = val.slice(5, -1);
|
|
33
|
-
const newId = idMap.get(oldId);
|
|
34
|
-
if (newId !== void 0) el.setAttribute(attr, `url(#${newId})`);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
svgEl.querySelectorAll("style").forEach((styleEl) => {
|
|
39
|
-
const { textContent } = styleEl;
|
|
40
|
-
if (textContent !== "") {
|
|
41
|
-
let updated = textContent;
|
|
42
|
-
idMap.forEach((newId, oldId) => {
|
|
43
|
-
updated = updated.replaceAll(`#${oldId}`, `#${newId}`);
|
|
44
|
-
});
|
|
45
|
-
if (updated !== textContent) {
|
|
46
|
-
const styleNode = styleEl;
|
|
47
|
-
styleNode.textContent = updated;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
//#endregion
|
|
53
|
-
export { adjustSvgIDs };
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { getScale } from "./get-scale.js";
|
|
2
|
-
import { parsePosition } from "./parse-position.js";
|
|
3
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/compute-positioned-style.js
|
|
4
|
-
const computePositionedStyle = ({ containerHeight, containerLeft, containerTop, containerWidth, hasScalableSrc, offset, position, targetHeight, targetWidth, visibleHeight, visibleWidth }) => {
|
|
5
|
-
const [posLeft = "50%", posTop = "50%"] = position.split(" ");
|
|
6
|
-
const posX = parsePosition(posLeft, containerWidth - visibleWidth);
|
|
7
|
-
const posY = parsePosition(posTop, containerHeight - visibleHeight);
|
|
8
|
-
const scale = getScale({
|
|
9
|
-
containerHeight: visibleHeight,
|
|
10
|
-
containerWidth: visibleWidth,
|
|
11
|
-
hasScalableSrc,
|
|
12
|
-
offset,
|
|
13
|
-
targetHeight,
|
|
14
|
-
targetWidth
|
|
15
|
-
});
|
|
16
|
-
return {
|
|
17
|
-
top: containerTop + posY,
|
|
18
|
-
left: containerLeft + posX,
|
|
19
|
-
width: visibleWidth * scale,
|
|
20
|
-
height: visibleHeight * scale,
|
|
21
|
-
initialTransform: `translate(0,0) scale(${1 / scale})`
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
//#endregion
|
|
25
|
-
export { computePositionedStyle };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
//#region ../../node_modules/.pnpm/react-medium-image-zoom@5.4.9_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-medium-image-zoom/dist/utils/element-tests.js
|
|
2
|
-
function isElement(el) {
|
|
3
|
-
if (typeof Element === "undefined") return false;
|
|
4
|
-
return el instanceof Element;
|
|
5
|
-
}
|
|
6
|
-
const testElType = (type, el) => isElement(el) && el.tagName.toUpperCase() === type;
|
|
7
|
-
const testDiv = (el) => testElType("DIV", el) || testElType("SPAN", el);
|
|
8
|
-
const testImg = (el) => testElType("IMG", el);
|
|
9
|
-
const testImgLoaded = (el) => el.complete && el.naturalHeight !== 0;
|
|
10
|
-
const testSvg = (el) => testElType("SVG", el);
|
|
11
|
-
//#endregion
|
|
12
|
-
export { testDiv, testImg, testImgLoaded, testSvg };
|