@progress/kendo-react-layout 11.0.0-develop.17 → 11.0.0-develop.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +2 -0
- package/index.d.ts +2 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/tilelayout/InternalTile.js +1 -1
- package/tilelayout/InternalTile.mjs +105 -86
- package/tilelayout/TileLayout.js +1 -1
- package/tilelayout/TileLayout.mjs +50 -46
package/index.d.mts
CHANGED
|
@@ -5597,6 +5597,7 @@ export declare class TileLayout extends React_2.Component<TileLayoutProps, TileL
|
|
|
5597
5597
|
rowSpan: number;
|
|
5598
5598
|
colSpan: number;
|
|
5599
5599
|
} & TilePosition)[];
|
|
5600
|
+
activeHint: boolean;
|
|
5600
5601
|
};
|
|
5601
5602
|
/**
|
|
5602
5603
|
* Gets the HTML element of the TileLayout component.
|
|
@@ -5859,6 +5860,7 @@ export declare interface TileLayoutRepositionEvent extends BaseEvent<TileLayout>
|
|
|
5859
5860
|
*/
|
|
5860
5861
|
export declare interface TileLayoutState {
|
|
5861
5862
|
positions: TileStrictPosition[];
|
|
5863
|
+
activeHint?: boolean;
|
|
5862
5864
|
}
|
|
5863
5865
|
|
|
5864
5866
|
/**
|
package/index.d.ts
CHANGED
|
@@ -5597,6 +5597,7 @@ export declare class TileLayout extends React_2.Component<TileLayoutProps, TileL
|
|
|
5597
5597
|
rowSpan: number;
|
|
5598
5598
|
colSpan: number;
|
|
5599
5599
|
} & TilePosition)[];
|
|
5600
|
+
activeHint: boolean;
|
|
5600
5601
|
};
|
|
5601
5602
|
/**
|
|
5602
5603
|
* Gets the HTML element of the TileLayout component.
|
|
@@ -5859,6 +5860,7 @@ export declare interface TileLayoutRepositionEvent extends BaseEvent<TileLayout>
|
|
|
5859
5860
|
*/
|
|
5860
5861
|
export declare interface TileLayoutState {
|
|
5861
5862
|
positions: TileStrictPosition[];
|
|
5863
|
+
activeHint?: boolean;
|
|
5862
5864
|
}
|
|
5863
5865
|
|
|
5864
5866
|
/**
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1747637428,version:"11.0.0-develop.19",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "11.0.0-develop.
|
|
13
|
+
publishDate: 1747637428,
|
|
14
|
+
version: "11.0.0-develop.19",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-layout",
|
|
3
|
-
"version": "11.0.0-develop.
|
|
3
|
+
"version": "11.0.0-develop.19",
|
|
4
4
|
"description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.6.0",
|
|
29
|
-
"@progress/kendo-react-animation": "11.0.0-develop.
|
|
30
|
-
"@progress/kendo-react-buttons": "11.0.0-develop.
|
|
31
|
-
"@progress/kendo-react-common": "11.0.0-develop.
|
|
32
|
-
"@progress/kendo-react-intl": "11.0.0-develop.
|
|
33
|
-
"@progress/kendo-react-popup": "11.0.0-develop.
|
|
34
|
-
"@progress/kendo-react-progressbars": "11.0.0-develop.
|
|
29
|
+
"@progress/kendo-react-animation": "11.0.0-develop.19",
|
|
30
|
+
"@progress/kendo-react-buttons": "11.0.0-develop.19",
|
|
31
|
+
"@progress/kendo-react-common": "11.0.0-develop.19",
|
|
32
|
+
"@progress/kendo-react-intl": "11.0.0-develop.19",
|
|
33
|
+
"@progress/kendo-react-popup": "11.0.0-develop.19",
|
|
34
|
+
"@progress/kendo-react-progressbars": "11.0.0-develop.19",
|
|
35
35
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
36
36
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
37
37
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"package": {
|
|
77
77
|
"productName": "KendoReact",
|
|
78
78
|
"productCode": "KENDOUIREACT",
|
|
79
|
-
"publishDate":
|
|
79
|
+
"publishDate": 1747637428,
|
|
80
80
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
81
81
|
}
|
|
82
82
|
},
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),a=require("prop-types"),u=require("@progress/kendo-react-common"),b=require("./ResizeHandlers.js");function E(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>c[e]})}}return t.default=c,Object.freeze(t)}const d=E(y),f=200,p=class p extends d.Component{constructor(){super(...arguments),this.state={rtl:!1,visibleHint:!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 s=t.clientX,l=t.clientY;this.resizing=!0;const r=(e.direction!=="ns"?s-this.pressXY.x:0)*(this.state.rtl?-1:1),i=e.direction!=="ew"?l-this.pressXY.y:0;if(this.dragElement&&(this.state.rtl?this.dragElement.style.marginLeft=-r+"px":this.dragElement.style.marginRight=-r+"px",this.dragElement.style.height=`calc(100% + ${i}px)`),this.hintElement.classList.add("k-layout-item-hint-resize"),this.preventDataOps)return;let n=0,o=0;const h=this.element.getBoundingClientRect();r>h.width/this.props.defaultPosition.colSpan/3&&(n=1),r<-h.width/this.props.defaultPosition.colSpan/1.25&&(n=-1),i>h.height/this.props.defaultPosition.rowSpan/3&&(o=1),i<-h.height/this.props.defaultPosition.rowSpan/1.25&&(o=-1),(n!==0||o!==0)&&this.props.update(this.props.index,0,0,o,n)},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.element.style.zIndex="10",this.setState({visibleHint:!0})),this.dragElement.classList.remove("k-cursor-move"),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.props.onPress()},this.handleDrag=t=>{var n;if(this.ignoreDrag)return;const e=this.dragElement;if(t.event.originalEvent.defaultPrevented||!e)return;this.dragging=!0,t.event.originalEvent.preventDefault();const s=e.getBoundingClientRect();if(this.currentTranslate={x:t.event.clientX-s.x-this.pressOffset.x+this.currentTranslate.x,y:t.event.clientY-s.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 l=0,r=0;this.currentTranslate.y>.7*s.height/this.props.defaultPosition.rowSpan&&(r=1),this.currentTranslate.y<.7*-s.height/this.props.defaultPosition.rowSpan&&(r=-1),this.currentTranslate.x>.7*s.width/this.props.defaultPosition.colSpan&&(l=1),this.currentTranslate.x<.7*-s.width/this.props.defaultPosition.colSpan&&(l=-1),this.props.update(this.props.index,r,this.state.rtl?-l:l,0,0);const i=(n=this.element)==null?void 0:n.closest(".k-tilelayout");if(i&&this.hintElement){const o=i.getBoundingClientRect(),h=u.getScrollbarWidth()||50;t.event.clientX<o.left-h||t.event.clientX>o.right-h||t.event.clientY<o.top||t.event.clientY>o.bottom?this.hintElement.style.display="none":this.hintElement.style.display="block"}},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.setState({visibleHint:!1}));const t=this.dragElement;t&&(t.style.transform="translate(0px, 0px)",t.style.transition=`transform ${f}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-move")),this.props.onRelease()},this.handleMouseDown=()=>{this.setInitialHintPosition()},this.handleMouseUp=()=>{setTimeout(()=>{this.setInitialHintPosition()},100)},this.calcNewHintPosition=()=>{if(!this.dragElement||!this.hintElement)return;const t=this.dragElement.getBoundingClientRect(),e=t.top+this.currentTranslate.y,s=t.left+this.currentTranslate.x;this.hintElement.style.top=`${e}px`,this.hintElement.style.left=`${s}px`,this.hintElement.style.display="block"}}get reorderable(){return this.props.reorderable!==void 0?this.props.reorderable:p.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.canUseDOM&&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:p.defaultProps.resizable,s={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,outline:"none",order:t.order,display:"block",...this.props.hintStyle},l={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,order:t.order},r=d.createElement("div",{ref:i=>{this.draggable=i?{element:i}:null},role:"listitem",tabIndex:0,"aria-labelledby":typeof this.props.header=="string"?this.props.header:`tile-${this.props.index}`,"aria-keyshortcuts":"Enter",className:u.classNames("k-tilelayout-item k-card",{"k-cursor-move":this.reorderable},this.props.className),style:{height:"100%",...l,...this.props.style},onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp},this.props.children,d.createElement(b.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,resizable:e,rtl:this.state.rtl}));return d.createElement(d.Fragment,null,this.state.visibleHint&&d.createElement("div",{ref:i=>{this.hintElement=i},style:{position:"fixed",...s},className:u.classNames("k-layout-item-hint",this.props.hintClassName)}),d.createElement(u.Draggable,{ref:i=>{this.draggable=i,this.element=i?i.element:null},onDrag:this.props.reorderable?this.handleDrag:void 0,onRelease:this.props.reorderable?this.handleRelease:void 0,onPress:this.props.reorderable?this.handlePress:void 0},r))}getSnapshotBeforeUpdate(t){return this.oldSize={},this.dragElement&&(this.oldSize=this.dragElement.getBoundingClientRect()),null}setInitialHintPosition(){if(this.element&&this.hintElement){const t=this.element.getBoundingClientRect();this.hintElement.style.top=t.top+"px",this.hintElement.style.left=t.left+"px",this.hintElement.style.height=this.element.offsetHeight+"px",this.hintElement.style.width=this.element.offsetWidth+"px"}}componentDidUpdate(t){const e=this.dragElement;if(!e)return;const s=e.getBoundingClientRect(),l=this.oldSize;if(this.resizing){const n=s.width-l.width;if(this.state.rtl){const g=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=g-n+"px"}else{const g=parseFloat(e.style.marginRight||"0");e.style.marginRight=g+n+"px"}this.pressXY.x+=this.state.rtl?-n:n;const o=s.height-l.height,h=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${h+o}px)`,this.pressXY.y+=o}const r=l.left-s.left,i=l.top-s.top;if(!(r===0&&i===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="",this.calcNewHintPosition());return}Math.abs(i)<15&&Math.abs(r)<15||requestAnimationFrame(()=>{const n=this.element;n&&(n.style.transform=`translate(${r}px, ${i}px)`,n.style.transition="transform 0s",requestAnimationFrame(()=>{n.style.transform="",n.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))})}}};p.propTypes={defaultPosition:a.object.isRequired,style:a.object,className:a.string,hintStyle:a.object,hintClassName:a.string,header:a.any,body:a.any,item:a.any,resizable:a.oneOf(["horizontal","vertical",!0,!1]),reorderable:a.bool},p.displayName="KendoTileLayoutItem",p.defaultProps={resizable:!0,reorderable:!0};let m=p;exports.InternalTile=m;
|
|
@@ -5,14 +5,15 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import
|
|
10
|
-
import { canUseDOM as
|
|
11
|
-
import { ResizeHandlers as
|
|
12
|
-
const
|
|
8
|
+
import * as d from "react";
|
|
9
|
+
import a from "prop-types";
|
|
10
|
+
import { getScrollbarWidth as f, canUseDOM as y, classNames as m, Draggable as x } from "@progress/kendo-react-common";
|
|
11
|
+
import { ResizeHandlers as E } from "./ResizeHandlers.mjs";
|
|
12
|
+
const g = 200, p = class p extends d.Component {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments), this.state = {
|
|
15
|
-
rtl: !1
|
|
15
|
+
rtl: !1,
|
|
16
|
+
visibleHint: !1
|
|
16
17
|
}, 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) => {
|
|
17
18
|
if (e.end) {
|
|
18
19
|
this.handleRelease();
|
|
@@ -20,14 +21,14 @@ const m = 200, h = class h extends p.Component {
|
|
|
20
21
|
}
|
|
21
22
|
if (!this.element || !this.hintElement)
|
|
22
23
|
return;
|
|
23
|
-
const
|
|
24
|
+
const n = t.clientX, l = t.clientY;
|
|
24
25
|
this.resizing = !0;
|
|
25
|
-
const
|
|
26
|
-
if (this.dragElement && (this.state.rtl ? this.dragElement.style.marginLeft = -
|
|
26
|
+
const r = (e.direction !== "ns" ? n - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1), s = e.direction !== "ew" ? l - this.pressXY.y : 0;
|
|
27
|
+
if (this.dragElement && (this.state.rtl ? this.dragElement.style.marginLeft = -r + "px" : this.dragElement.style.marginRight = -r + "px", this.dragElement.style.height = `calc(100% + ${s}px)`), this.hintElement.classList.add("k-layout-item-hint-resize"), this.preventDataOps)
|
|
27
28
|
return;
|
|
28
|
-
let
|
|
29
|
-
const
|
|
30
|
-
|
|
29
|
+
let i = 0, o = 0;
|
|
30
|
+
const h = this.element.getBoundingClientRect();
|
|
31
|
+
r > h.width / this.props.defaultPosition.colSpan / 3 && (i = 1), r < -h.width / this.props.defaultPosition.colSpan / 1.25 && (i = -1), s > h.height / this.props.defaultPosition.rowSpan / 3 && (o = 1), s < -h.height / this.props.defaultPosition.rowSpan / 1.25 && (o = -1), (i !== 0 || o !== 0) && this.props.update(this.props.index, 0, 0, o, i);
|
|
31
32
|
}, this.handlePress = (t) => {
|
|
32
33
|
if (!this.dragElement)
|
|
33
34
|
return;
|
|
@@ -38,35 +39,52 @@ const m = 200, h = class h extends p.Component {
|
|
|
38
39
|
this.ignoreDrag = !0;
|
|
39
40
|
return;
|
|
40
41
|
}
|
|
41
|
-
this.element &&
|
|
42
|
+
this.element && (this.element.style.zIndex = "10", this.setState({ visibleHint: !0 })), this.dragElement.classList.remove("k-cursor-move"), this.dragElement.classList.add("k-cursor-grabbing");
|
|
42
43
|
const e = this.dragElement.getBoundingClientRect();
|
|
43
44
|
this.pressOffset = {
|
|
44
45
|
x: t.event.clientX - e.x,
|
|
45
46
|
y: t.event.clientY - e.y
|
|
46
|
-
};
|
|
47
|
+
}, this.props.onPress();
|
|
47
48
|
}, this.handleDrag = (t) => {
|
|
49
|
+
var i;
|
|
48
50
|
if (this.ignoreDrag)
|
|
49
51
|
return;
|
|
50
52
|
const e = this.dragElement;
|
|
51
53
|
if (t.event.originalEvent.defaultPrevented || !e)
|
|
52
54
|
return;
|
|
53
55
|
this.dragging = !0, t.event.originalEvent.preventDefault();
|
|
54
|
-
const
|
|
56
|
+
const n = e.getBoundingClientRect();
|
|
55
57
|
if (this.currentTranslate = {
|
|
56
|
-
x: t.event.clientX -
|
|
57
|
-
y: t.event.clientY -
|
|
58
|
+
x: t.event.clientX - n.x - this.pressOffset.x + this.currentTranslate.x,
|
|
59
|
+
y: t.event.clientY - n.y - this.pressOffset.y + this.currentTranslate.y
|
|
58
60
|
}, e.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`, e.style.transition = "transform 0s", this.preventDataOps)
|
|
59
61
|
return;
|
|
60
|
-
let
|
|
61
|
-
this.currentTranslate.y > 0.7 *
|
|
62
|
+
let l = 0, r = 0;
|
|
63
|
+
this.currentTranslate.y > 0.7 * n.height / this.props.defaultPosition.rowSpan && (r = 1), this.currentTranslate.y < 0.7 * -n.height / this.props.defaultPosition.rowSpan && (r = -1), this.currentTranslate.x > 0.7 * n.width / this.props.defaultPosition.colSpan && (l = 1), this.currentTranslate.x < 0.7 * -n.width / this.props.defaultPosition.colSpan && (l = -1), this.props.update(this.props.index, r, this.state.rtl ? -l : l, 0, 0);
|
|
64
|
+
const s = (i = this.element) == null ? void 0 : i.closest(".k-tilelayout");
|
|
65
|
+
if (s && this.hintElement) {
|
|
66
|
+
const o = s.getBoundingClientRect(), h = f() || 50;
|
|
67
|
+
t.event.clientX < o.left - h || t.event.clientX > o.right - h || t.event.clientY < o.top || t.event.clientY > o.bottom ? this.hintElement.style.display = "none" : this.hintElement.style.display = "block";
|
|
68
|
+
}
|
|
62
69
|
}, this.handleRelease = () => {
|
|
63
|
-
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.
|
|
70
|
+
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.setState({ visibleHint: !1 }));
|
|
64
71
|
const t = this.dragElement;
|
|
65
|
-
t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${
|
|
72
|
+
t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${g}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-move")), this.props.onRelease();
|
|
73
|
+
}, this.handleMouseDown = () => {
|
|
74
|
+
this.setInitialHintPosition();
|
|
75
|
+
}, this.handleMouseUp = () => {
|
|
76
|
+
setTimeout(() => {
|
|
77
|
+
this.setInitialHintPosition();
|
|
78
|
+
}, 100);
|
|
79
|
+
}, this.calcNewHintPosition = () => {
|
|
80
|
+
if (!this.dragElement || !this.hintElement)
|
|
81
|
+
return;
|
|
82
|
+
const t = this.dragElement.getBoundingClientRect(), e = t.top + this.currentTranslate.y, n = t.left + this.currentTranslate.x;
|
|
83
|
+
this.hintElement.style.top = `${e}px`, this.hintElement.style.left = `${n}px`, this.hintElement.style.display = "block";
|
|
66
84
|
};
|
|
67
85
|
}
|
|
68
86
|
get reorderable() {
|
|
69
|
-
return this.props.reorderable !== void 0 ? this.props.reorderable :
|
|
87
|
+
return this.props.reorderable !== void 0 ? this.props.reorderable : p.defaultProps.reorderable;
|
|
70
88
|
}
|
|
71
89
|
get dragElement() {
|
|
72
90
|
return this.draggable ? this.draggable.element : void 0;
|
|
@@ -77,25 +95,25 @@ const m = 200, h = class h extends p.Component {
|
|
|
77
95
|
}), this.hintElement && (this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px"));
|
|
78
96
|
}
|
|
79
97
|
render() {
|
|
80
|
-
|
|
98
|
+
y && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), this.preventDataOps = window.setTimeout(() => {
|
|
81
99
|
this.preventDataOps = void 0;
|
|
82
100
|
}, 200));
|
|
83
|
-
const t = this.props.defaultPosition, e = this.props.resizable !== void 0 ? this.props.resizable :
|
|
101
|
+
const t = this.props.defaultPosition, e = this.props.resizable !== void 0 ? this.props.resizable : p.defaultProps.resizable, n = {
|
|
84
102
|
gridColumnStart: t.col,
|
|
85
103
|
gridColumnEnd: `span ${t.colSpan}`,
|
|
86
104
|
gridRowStart: t.row,
|
|
87
105
|
gridRowEnd: `span ${t.rowSpan}`,
|
|
88
106
|
outline: "none",
|
|
89
107
|
order: t.order,
|
|
90
|
-
display: "
|
|
108
|
+
display: "block",
|
|
91
109
|
...this.props.hintStyle
|
|
92
|
-
},
|
|
110
|
+
}, l = {
|
|
93
111
|
gridColumnStart: t.col,
|
|
94
112
|
gridColumnEnd: `span ${t.colSpan}`,
|
|
95
113
|
gridRowStart: t.row,
|
|
96
114
|
gridRowEnd: `span ${t.rowSpan}`,
|
|
97
115
|
order: t.order
|
|
98
|
-
},
|
|
116
|
+
}, r = /* @__PURE__ */ d.createElement(
|
|
99
117
|
"div",
|
|
100
118
|
{
|
|
101
119
|
ref: (s) => {
|
|
@@ -105,16 +123,18 @@ const m = 200, h = class h extends p.Component {
|
|
|
105
123
|
tabIndex: 0,
|
|
106
124
|
"aria-labelledby": typeof this.props.header == "string" ? this.props.header : `tile-${this.props.index}`,
|
|
107
125
|
"aria-keyshortcuts": "Enter",
|
|
108
|
-
className:
|
|
126
|
+
className: m(
|
|
109
127
|
"k-tilelayout-item k-card",
|
|
110
|
-
{ "k-cursor-
|
|
128
|
+
{ "k-cursor-move": this.reorderable },
|
|
111
129
|
this.props.className
|
|
112
130
|
),
|
|
113
|
-
style: { height: "100%", ...
|
|
131
|
+
style: { height: "100%", ...l, ...this.props.style },
|
|
132
|
+
onMouseDown: this.handleMouseDown,
|
|
133
|
+
onMouseUp: this.handleMouseUp
|
|
114
134
|
},
|
|
115
135
|
this.props.children,
|
|
116
|
-
/* @__PURE__ */
|
|
117
|
-
|
|
136
|
+
/* @__PURE__ */ d.createElement(
|
|
137
|
+
E,
|
|
118
138
|
{
|
|
119
139
|
onPress: this.handlePress,
|
|
120
140
|
onResize: this.handleResize,
|
|
@@ -123,37 +143,27 @@ const m = 200, h = class h extends p.Component {
|
|
|
123
143
|
}
|
|
124
144
|
)
|
|
125
145
|
);
|
|
126
|
-
return /* @__PURE__ */
|
|
146
|
+
return /* @__PURE__ */ d.createElement(d.Fragment, null, this.state.visibleHint && /* @__PURE__ */ d.createElement(
|
|
127
147
|
"div",
|
|
128
148
|
{
|
|
129
149
|
ref: (s) => {
|
|
130
|
-
this.
|
|
150
|
+
this.hintElement = s;
|
|
131
151
|
},
|
|
132
|
-
style: n
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
style: { position: "absolute", ...i },
|
|
141
|
-
className: g("k-layout-item-hint", this.props.hintClassName)
|
|
142
|
-
}
|
|
143
|
-
),
|
|
144
|
-
/* @__PURE__ */ p.createElement(
|
|
145
|
-
y,
|
|
146
|
-
{
|
|
147
|
-
ref: (s) => {
|
|
148
|
-
this.draggable = s;
|
|
149
|
-
},
|
|
150
|
-
onDrag: this.props.reorderable ? this.handleDrag : void 0,
|
|
151
|
-
onRelease: this.props.reorderable ? this.handleRelease : void 0,
|
|
152
|
-
onPress: this.props.reorderable ? this.handlePress : void 0
|
|
152
|
+
style: { position: "fixed", ...n },
|
|
153
|
+
className: m("k-layout-item-hint", this.props.hintClassName)
|
|
154
|
+
}
|
|
155
|
+
), /* @__PURE__ */ d.createElement(
|
|
156
|
+
x,
|
|
157
|
+
{
|
|
158
|
+
ref: (s) => {
|
|
159
|
+
this.draggable = s, this.element = s ? s.element : null;
|
|
153
160
|
},
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
161
|
+
onDrag: this.props.reorderable ? this.handleDrag : void 0,
|
|
162
|
+
onRelease: this.props.reorderable ? this.handleRelease : void 0,
|
|
163
|
+
onPress: this.props.reorderable ? this.handlePress : void 0
|
|
164
|
+
},
|
|
165
|
+
r
|
|
166
|
+
));
|
|
157
167
|
}
|
|
158
168
|
/**
|
|
159
169
|
* @hidden
|
|
@@ -161,6 +171,15 @@ const m = 200, h = class h extends p.Component {
|
|
|
161
171
|
getSnapshotBeforeUpdate(t) {
|
|
162
172
|
return this.oldSize = {}, this.dragElement && (this.oldSize = this.dragElement.getBoundingClientRect()), null;
|
|
163
173
|
}
|
|
174
|
+
/**
|
|
175
|
+
* @hidden
|
|
176
|
+
*/
|
|
177
|
+
setInitialHintPosition() {
|
|
178
|
+
if (this.element && this.hintElement) {
|
|
179
|
+
const t = this.element.getBoundingClientRect();
|
|
180
|
+
this.hintElement.style.top = t.top + "px", this.hintElement.style.left = t.left + "px", this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px";
|
|
181
|
+
}
|
|
182
|
+
}
|
|
164
183
|
/**
|
|
165
184
|
* @hidden
|
|
166
185
|
*/
|
|
@@ -168,51 +187,51 @@ const m = 200, h = class h extends p.Component {
|
|
|
168
187
|
const e = this.dragElement;
|
|
169
188
|
if (!e)
|
|
170
189
|
return;
|
|
171
|
-
const
|
|
190
|
+
const n = e.getBoundingClientRect(), l = this.oldSize;
|
|
172
191
|
if (this.resizing) {
|
|
173
|
-
const
|
|
192
|
+
const i = n.width - l.width;
|
|
174
193
|
if (this.state.rtl) {
|
|
175
194
|
const c = parseFloat(e.style.marginLeft || "0");
|
|
176
|
-
e.style.marginLeft = c -
|
|
195
|
+
e.style.marginLeft = c - i + "px";
|
|
177
196
|
} else {
|
|
178
197
|
const c = parseFloat(e.style.marginRight || "0");
|
|
179
|
-
e.style.marginRight = c +
|
|
198
|
+
e.style.marginRight = c + i + "px";
|
|
180
199
|
}
|
|
181
|
-
this.pressXY.x += this.state.rtl ? -
|
|
182
|
-
const o =
|
|
183
|
-
e.style.height = `calc(100% + ${
|
|
200
|
+
this.pressXY.x += this.state.rtl ? -i : i;
|
|
201
|
+
const o = n.height - l.height, h = parseFloat(e.style.height.substring(12));
|
|
202
|
+
e.style.height = `calc(100% + ${h + o}px)`, this.pressXY.y += o;
|
|
184
203
|
}
|
|
185
|
-
const
|
|
186
|
-
if (!(
|
|
204
|
+
const r = l.left - n.left, s = l.top - n.top;
|
|
205
|
+
if (!(r === 0 && s === 0)) {
|
|
187
206
|
if (this.dragging) {
|
|
188
|
-
(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 = "");
|
|
207
|
+
(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 = "", this.calcNewHintPosition());
|
|
189
208
|
return;
|
|
190
209
|
}
|
|
191
|
-
Math.abs(s) < 15 && Math.abs(
|
|
192
|
-
const
|
|
193
|
-
|
|
194
|
-
|
|
210
|
+
Math.abs(s) < 15 && Math.abs(r) < 15 || requestAnimationFrame(() => {
|
|
211
|
+
const i = this.element;
|
|
212
|
+
i && (i.style.transform = `translate(${r}px, ${s}px)`, i.style.transition = "transform 0s", requestAnimationFrame(() => {
|
|
213
|
+
i.style.transform = "", i.style.transition = `transform ${g}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
|
|
195
214
|
}));
|
|
196
215
|
});
|
|
197
216
|
}
|
|
198
217
|
}
|
|
199
218
|
};
|
|
200
|
-
|
|
201
|
-
defaultPosition:
|
|
202
|
-
style:
|
|
203
|
-
className:
|
|
204
|
-
hintStyle:
|
|
205
|
-
hintClassName:
|
|
206
|
-
header:
|
|
207
|
-
body:
|
|
208
|
-
item:
|
|
209
|
-
resizable:
|
|
210
|
-
reorderable:
|
|
211
|
-
},
|
|
219
|
+
p.propTypes = {
|
|
220
|
+
defaultPosition: a.object.isRequired,
|
|
221
|
+
style: a.object,
|
|
222
|
+
className: a.string,
|
|
223
|
+
hintStyle: a.object,
|
|
224
|
+
hintClassName: a.string,
|
|
225
|
+
header: a.any,
|
|
226
|
+
body: a.any,
|
|
227
|
+
item: a.any,
|
|
228
|
+
resizable: a.oneOf(["horizontal", "vertical", !0, !1]),
|
|
229
|
+
reorderable: a.bool
|
|
230
|
+
}, p.displayName = "KendoTileLayoutItem", p.defaultProps = {
|
|
212
231
|
resizable: !0,
|
|
213
232
|
reorderable: !0
|
|
214
233
|
};
|
|
215
|
-
let
|
|
234
|
+
let u = p;
|
|
216
235
|
export {
|
|
217
|
-
|
|
236
|
+
u as InternalTile
|
|
218
237
|
};
|
package/tilelayout/TileLayout.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),t=require("prop-types"),y=require("@progress/kendo-react-common"),S=require("./InternalTile.js");function k(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const s in d)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(d,s);Object.defineProperty(o,s,n.get?n:{enumerable:!0,get:()=>d[s]})}}return o.default=d,Object.freeze(o)}const a=k(w),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),t=require("prop-types"),y=require("@progress/kendo-react-common"),S=require("./InternalTile.js");function k(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const s in d)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(d,s);Object.defineProperty(o,s,n.get?n:{enumerable:!0,get:()=>d[s]})}}return o.default=d,Object.freeze(o)}const a=k(w),v={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:"k-grid-flow-unset"},g=class g extends a.Component{constructor(){super(...arguments),this._element=null,this.state={positions:(this.props.items||[]).map((o,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},o.defaultPosition)),activeHint:!1},this.focus=()=>{this._element&&this._element.focus()},this.update=(o,s,n,r=0,c=0)=>{if(s===0&&n===0&&!c&&!r)return;let p=!1;const m=this.state.positions.map(f=>Object.assign({},f)),i=m[o],u=m.find(f=>f.order===i.order+s);u&&u!==i&&(i.order+=s,u.order+=-s,p=!0);const h=i.col+n;n!==0&&h>=1&&h+i.colSpan<=(this.props.columns||3)+1&&(i.col=h,p=!0);const e=i.colSpan+c;c&&e>=1&&e+i.col<=(this.props.columns||3)+1&&(i.colSpan=e,p=!0);const l=i.rowSpan+r;r&&l>=1&&(i.rowSpan=l,p=!0),p&&(this.setState({positions:m}),y.dispatchEvent(this.props.onReposition,{},this,{value:m}))}}get element(){return this._element}static getDerivedStateFromProps(o,s){return o.positions?{positions:o.positions.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n))}:o.items&&(!s.positions||o.items.length!==s.positions.length)?{positions:o.items.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n.defaultPosition))}:null}render(){const{className:o,columns:s=3,columnWidth:n="1fr",gap:r,rowHeight:c="1fr",style:p,autoFlow:m="column",items:i=[]}=this.props,u=r?`${typeof r.rows=="number"?r.rows+"px":r.rows} ${typeof r.columns=="number"?r.columns+"px":r.columns}`:16,h={gridTemplateColumns:`repeat(${s}, minmax(0px, ${typeof n=="number"?n+"px":n}))`,gridAutoRows:`minmax(0px, ${typeof c=="number"?c+"px":c})`,gap:u,padding:u,...p};return a.createElement("div",{ref:e=>{this._element=e},dir:this.props.dir,className:y.classNames("k-tilelayout k-pos-relative",v[m],o),style:h,id:this.props.id,role:"list"},i.map((e,l)=>a.createElement(a.Fragment,{key:this.props.dataItemKey?y.getter(this.props.dataItemKey)(e):l},a.createElement(S.InternalTile,{update:this.update,defaultPosition:this.state.positions[l],index:l,resizable:e.resizable,reorderable:e.reorderable,style:e.style,header:e.header,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:this.props.ignoreDrag,onPress:()=>this.setState({activeHint:!0}),onRelease:()=>this.setState({activeHint:!1})},e.item?e.item:a.createElement(a.Fragment,null,a.createElement("div",{className:"k-tilelayout-item-header k-card-header"},a.isValidElement(e.header)?e.header:a.createElement("div",{id:typeof e.header=="string"?e.header:this.props.id?`tilelayout-${this.props.id}-${l}`:`tilelayout-${l}`,className:"k-card-title"},e.header)),a.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body))))),!this.state.activeHint&&a.createElement("div",{className:"k-layout-item-hint",style:{display:"none",zIndex:"1",height:"auto"}}))}};g.propTypes={id:t.string,style:t.object,className:t.string,dir:t.string,gap:t.object,columns:t.number,columnWidth:t.oneOfType([t.number,t.string]),rowHeight:t.oneOfType([t.number,t.string]),dataItemKey:t.string,items:t.array,positions:t.array,autoFlow:t.oneOf(["column","row","column dense","row dense","unset"]),onReposition:t.func,ignoreDrag:t.func},g.displayName="KendoTileLayout";let b=g;exports.TileLayout=b;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as r from "react";
|
|
9
9
|
import t from "prop-types";
|
|
10
10
|
import { dispatchEvent as y, classNames as w, getter as b } from "@progress/kendo-react-common";
|
|
11
11
|
import { InternalTile as S } from "./InternalTile.mjs";
|
|
@@ -15,22 +15,23 @@ const k = {
|
|
|
15
15
|
"column dense": "k-grid-flow-col-dense",
|
|
16
16
|
"row dense": "k-grid-flow-row-dense",
|
|
17
17
|
unset: "k-grid-flow-unset"
|
|
18
|
-
}, h = class h extends
|
|
18
|
+
}, h = class h extends r.Component {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments), this._element = null, this.state = {
|
|
21
21
|
positions: (this.props.items || []).map(
|
|
22
|
-
(
|
|
23
|
-
)
|
|
22
|
+
(i, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
|
|
23
|
+
),
|
|
24
|
+
activeHint: !1
|
|
24
25
|
}, this.focus = () => {
|
|
25
26
|
this._element && this._element.focus();
|
|
26
|
-
}, this.update = (
|
|
27
|
-
if (n === 0 &&
|
|
27
|
+
}, this.update = (i, n, a, s = 0, p = 0) => {
|
|
28
|
+
if (n === 0 && a === 0 && !p && !s)
|
|
28
29
|
return;
|
|
29
30
|
let m = !1;
|
|
30
|
-
const c = this.state.positions.map((
|
|
31
|
+
const c = this.state.positions.map((f) => Object.assign({}, f)), o = c[i], u = c.find((f) => f.order === o.order + n);
|
|
31
32
|
u && u !== o && (o.order += n, u.order += -n, m = !0);
|
|
32
|
-
const d = o.col +
|
|
33
|
-
|
|
33
|
+
const d = o.col + a;
|
|
34
|
+
a !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
|
|
34
35
|
const e = o.colSpan + p;
|
|
35
36
|
p && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
|
|
36
37
|
const l = o.rowSpan + s;
|
|
@@ -46,68 +47,71 @@ const k = {
|
|
|
46
47
|
/**
|
|
47
48
|
* @hidden
|
|
48
49
|
*/
|
|
49
|
-
static getDerivedStateFromProps(
|
|
50
|
-
return
|
|
51
|
-
positions:
|
|
52
|
-
} :
|
|
53
|
-
positions:
|
|
54
|
-
(
|
|
50
|
+
static getDerivedStateFromProps(i, n) {
|
|
51
|
+
return i.positions ? {
|
|
52
|
+
positions: i.positions.map((a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a))
|
|
53
|
+
} : i.items && (!n.positions || i.items.length !== n.positions.length) ? {
|
|
54
|
+
positions: i.items.map(
|
|
55
|
+
(a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a.defaultPosition)
|
|
55
56
|
)
|
|
56
57
|
} : null;
|
|
57
58
|
}
|
|
58
59
|
render() {
|
|
59
60
|
const {
|
|
60
|
-
className:
|
|
61
|
+
className: i,
|
|
61
62
|
columns: n = 3,
|
|
62
|
-
columnWidth:
|
|
63
|
+
columnWidth: a = "1fr",
|
|
63
64
|
gap: s,
|
|
64
65
|
rowHeight: p = "1fr",
|
|
65
66
|
style: m,
|
|
66
67
|
autoFlow: c = "column",
|
|
67
68
|
items: o = []
|
|
68
69
|
} = this.props, u = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
|
|
69
|
-
gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof
|
|
70
|
+
gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof a == "number" ? a + "px" : a}))`,
|
|
70
71
|
gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
|
|
71
72
|
gap: u,
|
|
72
73
|
padding: u,
|
|
73
74
|
...m
|
|
74
75
|
};
|
|
75
|
-
return /* @__PURE__ */
|
|
76
|
+
return /* @__PURE__ */ r.createElement(
|
|
76
77
|
"div",
|
|
77
78
|
{
|
|
78
79
|
ref: (e) => {
|
|
79
80
|
this._element = e;
|
|
80
81
|
},
|
|
81
82
|
dir: this.props.dir,
|
|
82
|
-
className: w("k-tilelayout k-pos-relative", k[c],
|
|
83
|
+
className: w("k-tilelayout k-pos-relative", k[c], i),
|
|
83
84
|
style: d,
|
|
84
85
|
id: this.props.id,
|
|
85
|
-
role: "list"
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
role: "list"
|
|
87
|
+
},
|
|
88
|
+
o.map((e, l) => /* @__PURE__ */ r.createElement(r.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : l }, /* @__PURE__ */ r.createElement(
|
|
89
|
+
S,
|
|
90
|
+
{
|
|
91
|
+
update: this.update,
|
|
92
|
+
defaultPosition: this.state.positions[l],
|
|
93
|
+
index: l,
|
|
94
|
+
resizable: e.resizable,
|
|
95
|
+
reorderable: e.reorderable,
|
|
96
|
+
style: e.style,
|
|
97
|
+
header: e.header,
|
|
98
|
+
className: e.className,
|
|
99
|
+
hintClassName: e.hintClassName,
|
|
100
|
+
hintStyle: e.hintStyle,
|
|
101
|
+
ignoreDrag: this.props.ignoreDrag,
|
|
102
|
+
onPress: () => this.setState({ activeHint: !0 }),
|
|
103
|
+
onRelease: () => this.setState({ activeHint: !1 })
|
|
104
|
+
},
|
|
105
|
+
e.item ? e.item : /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, r.isValidElement(e.header) ? e.header : /* @__PURE__ */ r.createElement(
|
|
106
|
+
"div",
|
|
88
107
|
{
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
index: l,
|
|
92
|
-
resizable: e.resizable,
|
|
93
|
-
reorderable: e.reorderable,
|
|
94
|
-
style: e.style,
|
|
95
|
-
header: e.header,
|
|
96
|
-
className: e.className,
|
|
97
|
-
hintClassName: e.hintClassName,
|
|
98
|
-
hintStyle: e.hintStyle,
|
|
99
|
-
ignoreDrag: this.props.ignoreDrag
|
|
108
|
+
id: typeof e.header == "string" ? e.header : this.props.id ? `tilelayout-${this.props.id}-${l}` : `tilelayout-${l}`,
|
|
109
|
+
className: "k-card-title"
|
|
100
110
|
},
|
|
101
|
-
e.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
className: "k-card-title"
|
|
106
|
-
},
|
|
107
|
-
e.header
|
|
108
|
-
)), /* @__PURE__ */ a.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
|
|
109
|
-
)))
|
|
110
|
-
}
|
|
111
|
+
e.header
|
|
112
|
+
)), /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
|
|
113
|
+
))),
|
|
114
|
+
!this.state.activeHint && /* @__PURE__ */ r.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
|
|
111
115
|
);
|
|
112
116
|
}
|
|
113
117
|
};
|
|
@@ -127,7 +131,7 @@ h.propTypes = {
|
|
|
127
131
|
onReposition: t.func,
|
|
128
132
|
ignoreDrag: t.func
|
|
129
133
|
}, h.displayName = "KendoTileLayout";
|
|
130
|
-
let
|
|
134
|
+
let g = h;
|
|
131
135
|
export {
|
|
132
|
-
|
|
136
|
+
g as TileLayout
|
|
133
137
|
};
|