@fluido/react-components
Version:
Fluido webapp components
63 lines (62 loc) • 2.4 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const interactjs_1 = __importDefault(require("interactjs"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const tool_1 = require("../tool");
const StyledDraggable = styled_components_1.default.div `
position: absolute;
min-width: 16rem;
padding-bottom: 0.5rem;
border: 1px solid var(--on-surface-divider);
background-color: var(--surface);
color: var(--on-surface-high-emphasis);
top: 0;
left: 0;
will-change: transform;
transform: translate3d(
calc(var(--move-parent-x, 0px) + var(--move-child-x, 0px)),
calc(var(--move-parent-y, 0px) + var(--move-child-y, 0px)),
0
);
cursor: default;
`;
const DragArea = styled_components_1.default.div `
width: 100%;
min-height: 3rem;
padding: 0 0.25rem 0 1rem;
background-color: var(--surface);
color: var(--on-surface-high-emphasis);
border-bottom: 1px solid var(--on-surface-divider);
display: flex;
align-items: center;
flex-wrap: nowrap;
`;
const Draggable = ({ children, title, initialX = 0, initialY = 0, }) => {
const [parent, setParent] = react_1.useState(null);
const [node, setNode] = react_1.useState(null);
react_1.useLayoutEffect(() => {
if (!node || !parent)
return;
const dragMove = tool_1.buildDragMoveListener('child', parent, {
x: initialX,
y: initialY,
});
const nodeObj = interactjs_1.default(node).draggable({
autoScroll: true,
listeners: { move: dragMove },
});
const parentObj = interactjs_1.default(parent).resizable({});
return () => {
nodeObj.unset();
parentObj.unset();
};
}, [node, parent]);
return (jsx_runtime_1.jsxs(StyledDraggable, Object.assign({ ref: (node) => setParent(node) }, { children: [jsx_runtime_1.jsx(DragArea, Object.assign({ ref: (node) => setNode(node) }, { children: title }), void 0),
jsx_runtime_1.jsx("div", { children: children }, void 0)] }), void 0));
};
exports.default = Draggable;