@fluido/react-components
Version:
Fluido webapp components
87 lines (85 loc) • 3.21 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 StyledInfinityContainer = styled_components_1.default.div `
--grid-line: var(--on-surface-divider);
--grid-main-line: var(--secondary);
background-color: var(--background);
background-image: linear-gradient(0deg, var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
linear-gradient(0deg, var(--grid-line) 2px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 2px, transparent 1px);
background-size: var(--grid-space, 1rem) var(--grid-space, 1rem),
var(--grid-space, 1rem) var(--grid-space, 1rem),
calc(var(--grid-space, 1rem) * 10) calc(var(--grid-space, 1rem) * 10),
calc(var(--grid-space, 1rem) * 10) calc(var(--grid-space, 1rem) * 10);
background-repeat: repeat;
background-position-x: var(--move-parent-x, 0);
background-position-y: var(--move-parent-y, 0);
border-left: 1px solid var(--on-surface-divider);
position: relative;
z-index: 0;
height: 100%;
width: 100%;
overflow: hidden;
will-change: transform, background-position-x, background-position-y;
&::before,
&::after {
content: '';
display: block;
pointer-events: none;
position: absolute;
z-index: -1;
background-color: var(--grid-main-line);
}
&::before {
top: -1px;
left: 0;
transform: translate3d(0, calc(var(--move-parent-y, 0) - 1px), 0);
height: 2px;
width: 100%;
}
&::after {
top: 0;
left: -1px;
transform: translate3d(calc(var(--move-parent-x, 0) - 1px), 0, 0);
height: 100%;
width: 2px;
}
`;
const DragArea = styled_components_1.default.div `
position: absolute;
width: 100%;
height: 100%;
`;
const InfinityContainer = ({ children, 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('parent', parent, {
x: initialX,
y: initialY,
});
const obj = interactjs_1.default(node).draggable({
autoScroll: true,
cursorChecker: true,
allowFrom: false,
maxPerElement: 1,
listeners: { move: dragMove },
});
return () => {
obj.unset();
};
}, [node, parent]);
return (jsx_runtime_1.jsxs(StyledInfinityContainer, Object.assign({ ref: (node) => setParent(node) }, { children: [jsx_runtime_1.jsx(DragArea, { ref: (node) => setNode(node) }, void 0), children] }), void 0));
};
exports.default = InfinityContainer;