@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
215 lines (214 loc) • 9.26 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as p from "react";
import l from "prop-types";
import { canUseDOM as u, classNames as g, Draggable as y } from "@progress/kendo-react-common";
import { ResizeHandlers as b } from "./ResizeHandlers.mjs";
const m = 200, h = class h extends p.Component {
constructor() {
super(...arguments), this.state = {
rtl: !1
}, this.oldSize = {}, this.draggable = null, this.dragging = !1, this.resizing = !1, this.element = null, this.hintElement = null, this.ignoreDrag = !1, this.pressOffset = { x: 0, y: 0 }, this.pressXY = { x: 0, y: 0 }, this.currentTranslate = { x: 0, y: 0 }, this.preventDataOps = void 0, this.handleResize = (t, e) => {
if (e.end) {
this.handleRelease();
return;
}
if (!this.element || !this.hintElement)
return;
const i = t.clientX, n = t.clientY;
this.resizing = !0;
const a = (e.direction !== "ns" ? i - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1), s = e.direction !== "ew" ? n - this.pressXY.y : 0;
if (this.dragElement && (this.state.rtl ? this.dragElement.style.marginLeft = -a + "px" : this.dragElement.style.marginRight = -a + "px", this.dragElement.style.height = `calc(100% + ${s}px)`), this.hintElement.classList.add("k-layout-item-hint-resize"), this.preventDataOps)
return;
let r = 0, o = 0;
const d = this.element.getBoundingClientRect();
a > d.width / this.props.defaultPosition.colSpan / 3 && (r = 1), a < -d.width / this.props.defaultPosition.colSpan / 1.25 && (r = -1), s > d.height / this.props.defaultPosition.rowSpan / 3 && (o = 1), s < -d.height / this.props.defaultPosition.rowSpan / 1.25 && (o = -1), (r !== 0 || o !== 0) && this.props.update(this.props.index, 0, 0, o, r);
}, this.handlePress = (t) => {
if (!this.dragElement)
return;
if (this.pressXY = {
x: t.event.clientX,
y: t.event.clientY
}, this.ignoreDrag = !1, this.props.ignoreDrag && this.props.ignoreDrag(t.event.originalEvent)) {
this.ignoreDrag = !0;
return;
}
this.element && this.hintElement && (this.element.style.zIndex = "10", this.hintElement.style.display = "block"), this.dragElement.classList.remove("k-cursor-grab"), this.dragElement.classList.add("k-cursor-grabbing");
const e = this.dragElement.getBoundingClientRect();
this.pressOffset = {
x: t.event.clientX - e.x,
y: t.event.clientY - e.y
};
}, this.handleDrag = (t) => {
if (this.ignoreDrag)
return;
const e = this.dragElement;
if (t.event.originalEvent.defaultPrevented || !e)
return;
this.dragging = !0, t.event.originalEvent.preventDefault();
const i = e.getBoundingClientRect();
if (this.currentTranslate = {
x: t.event.clientX - i.x - this.pressOffset.x + this.currentTranslate.x,
y: t.event.clientY - i.y - this.pressOffset.y + this.currentTranslate.y
}, e.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`, e.style.transition = "transform 0s", this.preventDataOps)
return;
let n = 0, a = 0;
this.currentTranslate.y > 0.7 * i.height / this.props.defaultPosition.rowSpan && (a = 1), this.currentTranslate.y < 0.7 * -i.height / this.props.defaultPosition.rowSpan && (a = -1), this.currentTranslate.x > 0.7 * i.width / this.props.defaultPosition.colSpan && (n = 1), this.currentTranslate.x < 0.7 * -i.width / this.props.defaultPosition.colSpan && (n = -1), this.props.update(this.props.index, a, this.state.rtl ? -n : n, 0, 0);
}, this.handleRelease = () => {
this.dragging = this.resizing = !1, this.currentTranslate = { x: 0, y: 0 }, this.element && this.hintElement && (this.element.style.zIndex = "1", this.hintElement.classList.remove("k-layout-item-hint-resize"), this.hintElement.style.display = "none");
const t = this.dragElement;
t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${m}ms cubic-bezier(0.2, 0, 0, 1) 0s`, t.style.marginRight = "0px", t.style.marginLeft = "0px", t.style.height = "100%", t.classList.remove("k-cursor-grabbing"), t.classList.add("k-cursor-grab"));
};
}
get reorderable() {
return this.props.reorderable !== void 0 ? this.props.reorderable : h.defaultProps.reorderable;
}
get dragElement() {
return this.draggable ? this.draggable.element : void 0;
}
componentDidMount() {
this.element && (getComputedStyle(this.element).direction === "rtl" && this.setState({
rtl: !0
}), this.hintElement && (this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px"));
}
render() {
u && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), this.preventDataOps = window.setTimeout(() => {
this.preventDataOps = void 0;
}, 200));
const t = this.props.defaultPosition, e = this.props.resizable !== void 0 ? this.props.resizable : h.defaultProps.resizable, i = {
gridColumnStart: t.col,
gridColumnEnd: `span ${t.colSpan}`,
gridRowStart: t.row,
gridRowEnd: `span ${t.rowSpan}`,
outline: "none",
order: t.order,
display: "none",
...this.props.hintStyle
}, n = {
gridColumnStart: t.col,
gridColumnEnd: `span ${t.colSpan}`,
gridRowStart: t.row,
gridRowEnd: `span ${t.rowSpan}`,
order: t.order
}, a = /* @__PURE__ */ p.createElement(
"div",
{
ref: (s) => {
this.draggable = s ? { element: s } : null;
},
className: g(
"k-tilelayout-item k-card",
{ "k-cursor-grab": this.reorderable },
this.props.className
),
style: { height: "100%", ...n, ...this.props.style }
},
this.props.children,
/* @__PURE__ */ p.createElement(
b,
{
onPress: this.handlePress,
onResize: this.handleResize,
resizable: e,
rtl: this.state.rtl
}
)
);
return /* @__PURE__ */ p.createElement(
"div",
{
ref: (s) => {
this.element = s;
},
style: n
},
/* @__PURE__ */ p.createElement(
"div",
{
ref: (s) => {
this.hintElement = s;
},
style: { position: "absolute", ...i },
className: g("k-layout-item-hint", this.props.hintClassName)
}
),
/* @__PURE__ */ p.createElement(
y,
{
ref: (s) => {
this.draggable = s;
},
onDrag: this.props.reorderable ? this.handleDrag : void 0,
onRelease: this.props.reorderable ? this.handleRelease : void 0,
onPress: this.props.reorderable ? this.handlePress : void 0
},
a
)
);
}
/**
* @hidden
*/
getSnapshotBeforeUpdate(t) {
return this.oldSize = {}, this.dragElement && (this.oldSize = this.dragElement.getBoundingClientRect()), null;
}
/**
* @hidden
*/
componentDidUpdate(t) {
const e = this.dragElement;
if (!e)
return;
const i = e.getBoundingClientRect(), n = this.oldSize;
if (this.resizing) {
const r = i.width - n.width;
if (this.state.rtl) {
const c = parseFloat(e.style.marginLeft || "0");
e.style.marginLeft = c - r + "px";
} else {
const c = parseFloat(e.style.marginRight || "0");
e.style.marginRight = c + r + "px";
}
this.pressXY.x += this.state.rtl ? -r : r;
const o = i.height - n.height, d = parseFloat(e.style.height.substring(12));
e.style.height = `calc(100% + ${d + o}px)`, this.pressXY.y += o;
}
const a = n.left - i.left, s = n.top - i.top;
if (!(a === 0 && s === 0)) {
if (this.dragging) {
(t.defaultPosition.order !== this.props.defaultPosition.order || t.defaultPosition.col !== this.props.defaultPosition.col) && (this.currentTranslate.x = 0, this.currentTranslate.y = 0, e.style.transform = "");
return;
}
Math.abs(s) < 15 && Math.abs(a) < 15 || requestAnimationFrame(() => {
const r = this.element;
r && (r.style.transform = `translate(${a}px, ${s}px)`, r.style.transition = "transform 0s", requestAnimationFrame(() => {
r.style.transform = "", r.style.transition = `transform ${m}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
}));
});
}
}
};
h.propTypes = {
defaultPosition: l.object.isRequired,
style: l.object,
className: l.string,
hintStyle: l.object,
hintClassName: l.string,
header: l.any,
body: l.any,
item: l.any,
resizable: l.oneOf(["horizontal", "vertical", !0, !1]),
reorderable: l.bool
}, h.displayName = "KendoTileLayoutItem", h.defaultProps = {
resizable: !0,
reorderable: !0
};
let f = h;
export {
f as InternalTile
};