mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
87 lines
3.6 KiB
JavaScript
87 lines
3.6 KiB
JavaScript
"use client";
|
|
import { useOptionalContainer, useOptionalPopupGroup } from "../../player/context.js";
|
|
import { useLatestRef } from "../../utils/use-latest-ref.js";
|
|
import { useDestroy } from "../../utils/use-destroy.js";
|
|
import { useSafeId } from "../../utils/use-safe-id.js";
|
|
import { useOptionalControlsContext } from "../controls/context.js";
|
|
import { usePositionedState } from "../hooks/use-positioned-state.js";
|
|
import { PopoverContextProvider } from "./context.js";
|
|
import { createPopover, createTransition } from "@videojs/core/dom";
|
|
import { useSnapshot } from "@videojs/store/react";
|
|
import { useEffect, useState } from "react";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { isUndefined } from "@videojs/utils/predicate";
|
|
import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
|
|
//#region src/ui/popover/popover-root.tsx
|
|
function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, boundary = "container", children, ...coreProps }) {
|
|
const container = useOptionalContainer();
|
|
const popupGroup = useOptionalPopupGroup();
|
|
const controls = useOptionalControlsContext();
|
|
const [core] = useState(() => new PopoverCore(coreProps));
|
|
core.setProps(coreProps);
|
|
const isControlled = !isUndefined(controlledOpen);
|
|
const onOpenChangeRef = useLatestRef(onOpenChangeProp);
|
|
const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
|
|
const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
|
|
const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);
|
|
const openOnHoverRef = useLatestRef(openOnHover);
|
|
const delayRef = useLatestRef(delay);
|
|
const closeDelayRef = useLatestRef(closeDelay);
|
|
const popupGroupRef = useLatestRef(popupGroup);
|
|
const [popover] = useState(() => {
|
|
const instance = createPopover({
|
|
transition: createTransition(),
|
|
onOpenChange: (nextOpen, details) => {
|
|
onOpenChangeRef.current?.(nextOpen, details);
|
|
},
|
|
onOpenChangeComplete: (nextOpen) => {
|
|
onOpenChangeCompleteRef.current?.(nextOpen);
|
|
},
|
|
closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,
|
|
closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
|
|
openOnHover: () => openOnHoverRef.current,
|
|
delay: () => delayRef.current,
|
|
closeDelay: () => closeDelayRef.current,
|
|
group: () => popupGroupRef.current
|
|
});
|
|
if (!isControlled && defaultOpen) instance.open("click");
|
|
return instance;
|
|
});
|
|
const anchorName = useSafeId();
|
|
const popupId = useSafeId("popup");
|
|
useEffect(() => {
|
|
if (isUndefined(controlledOpen)) return;
|
|
const { active: inputOpen } = popover.input.current;
|
|
if (controlledOpen === inputOpen) return;
|
|
if (controlledOpen) popover.open("click");
|
|
else popover.close("click");
|
|
}, [controlledOpen, popover]);
|
|
useEffect(() => {
|
|
if (isUndefined(controls?.state.visible)) return;
|
|
if (controls.state.visible) return;
|
|
popover.close("imperative-action");
|
|
}, [controls?.state.visible, popover]);
|
|
useDestroy(popover);
|
|
const input = useSnapshot(popover.input);
|
|
core.setInput(input);
|
|
const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
|
|
return /* @__PURE__ */ jsx(PopoverContextProvider, {
|
|
value: {
|
|
core,
|
|
popover,
|
|
state,
|
|
preferredSide,
|
|
setPositionedSide,
|
|
stateAttrMap: PopoverDataAttrs,
|
|
anchorName,
|
|
popupId,
|
|
boundary,
|
|
container
|
|
},
|
|
children
|
|
});
|
|
}
|
|
//#endregion
|
|
export { PopoverRoot };
|
|
|
|
//# sourceMappingURL=popover-root.js.map
|