44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
|
|
import "./Island.scss";
|
|
|
|
import type { ViewportUIDock, ViewportUIName } from "../types";
|
|
|
|
type IslandProps = {
|
|
children: React.ReactNode;
|
|
padding?: number;
|
|
className?: string | boolean;
|
|
style?: object;
|
|
/** marks the island as a canvas-occluding UI surface measured by
|
|
* `getViewportOffsets` (see {@link ViewportUIDock}) */
|
|
"data-viewport-ui"?: ViewportUIDock;
|
|
/** identifies the surface so `getViewportOffsets` can reserve space for
|
|
* it while hidden (see {@link ViewportUIName}) */
|
|
"data-viewport-ui-name"?: ViewportUIName;
|
|
};
|
|
|
|
export const Island = React.forwardRef<HTMLDivElement, IslandProps>(
|
|
(
|
|
{
|
|
children,
|
|
padding,
|
|
className,
|
|
style,
|
|
"data-viewport-ui": viewportUI,
|
|
"data-viewport-ui-name": viewportUIName,
|
|
},
|
|
ref,
|
|
) => (
|
|
<div
|
|
className={clsx("Island", className)}
|
|
style={{ "--padding": padding, ...style }}
|
|
data-viewport-ui={viewportUI}
|
|
data-viewport-ui-name={viewportUIName}
|
|
ref={ref}
|
|
>
|
|
{children}
|
|
</div>
|
|
),
|
|
);
|