@code-editor/preview-pip/dist/pip.js

A Resizable Picture-in-Picture component.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_draggable_1 = __importDefault(require("react-draggable"));
const styled_1 = __importDefault(require("@emotion/styled"));
const unit = (u) => {
    if (typeof u === "number") {
        return `${u}px`;
    }
    return u;
};
function PIP({ children, zIndex = 100, boxShadow = "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)", borderRadius = "0.3rem", hoverCursor = "grab", draggingCursor = "grabbing", backgroundColor = "#242d36", draggingStyle = {
    outline: "-webkit-focus-ring-color auto 1px",
    outlineColor: "-webkit-focus-ring-color",
    outlineStyle: "auto",
    outlineWidth: 1,
}, }) {
    return (react_1.default.createElement(react_draggable_1.default, null,
        react_1.default.createElement(PipWindow, { borderRadius: borderRadius, boxShadow: boxShadow, zIndex: zIndex, hoverCursor: hoverCursor, draggingCursor: draggingCursor, draggingStyle: draggingStyle, backgroundColor: backgroundColor }, children)));
}
const PipWindow = styled_1.default.div `
  background-color: ${(props) => props.backgroundColor};
  z-index: ${(props) => props.zIndex};
  position: fixed;
  color: rgb(248, 248, 249);
  box-sizing: content-box;
  box-shadow: ${(props) => props.boxShadow};
  border-radius: ${(props) => unit(props.boxShadow)};

  :hover {
    cursor: ${(props) => props.hoverCursor};
  }

  :active {
    cursor: ${(props) => props.draggingCursor};
    outline: ${(props) => props.draggingStyle.outline};
    outline-color: ${(props) => props.draggingStyle.outlineColor};
    outline-style: ${(props) => props.draggingStyle.outlineStyle};
    outline-width: ${(props) => unit(props.draggingStyle.outlineWidth)};
  }
`;
exports.default = PIP;