@grandlinex/react-components
Version:
83 lines (82 loc) • 3.76 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditSidePanel = void 0;
const react_1 = __importStar(require("react"));
const util_1 = require("../../../util");
const EditSidePanel = ({ className, children, initSize, onResize, defaultOffsetWidth, defaultMinWidth, defaultWidth, }) => {
// START RESIZE PARTS
const xWidth = defaultWidth || 500;
const xMinWith = defaultMinWidth || 300;
const xOffsetWidth = defaultOffsetWidth || 50;
const [size, setSize] = (0, react_1.useState)(initSize || xWidth);
const [drag, setDrag] = (0, react_1.useState)(false);
const windowResize = () => {
if (window.innerWidth - xOffsetWidth <= size &&
window.innerWidth > xWidth) {
setSize(xWidth);
onResize?.(xWidth);
}
};
(0, react_1.useEffect)(() => {
window.addEventListener('resize', windowResize);
return () => {
window.removeEventListener('resize', windowResize);
};
});
// END RESIZE PARTS
return (react_1.default.createElement("div", { className: (0, util_1.cnx)(className, 'edit-side-panel'), style: { width: window.innerWidth < size ? window.innerWidth : size } },
react_1.default.createElement("div", { role: "none", className: (0, util_1.cnx)('edit-side-panel--resize', [
!drag,
'edit-side-panel--drag',
'glx-no-select',
]), onMouseDown: (event) => {
const startPosition = event.pageX;
setDrag(true);
let newSize = 0;
function onMouseMove(mouseMoveEvent) {
newSize = size + startPosition - mouseMoveEvent.pageX;
if (newSize >= xMinWith &&
newSize <= window.innerWidth - xOffsetWidth) {
setSize(newSize);
}
if (newSize < xMinWith) {
newSize = xMinWith;
}
if (newSize > window.innerWidth - xOffsetWidth) {
newSize = window.innerWidth - xOffsetWidth;
}
}
function onMouseUp() {
setDrag(false);
onResize?.(newSize);
document.body.removeEventListener('mousemove', onMouseMove);
}
document.body.addEventListener('mousemove', onMouseMove);
document.body.addEventListener('mouseup', onMouseUp, { once: true });
} }),
react_1.default.createElement("div", { className: "edit-side-panel--content" }, children)));
};
exports.EditSidePanel = EditSidePanel;