@progress/kendo-react-layout 11.0.0-develop.2 → 11.0.0-develop.21
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/actionsheet/ActionSheet.js +1 -1
- package/actionsheet/ActionSheet.mjs +30 -30
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +34 -2
- package/index.d.ts +34 -2
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +9 -9
- package/tilelayout/InternalTile.js +1 -1
- package/tilelayout/InternalTile.mjs +109 -86
- package/tilelayout/TileLayout.js +1 -1
- package/tilelayout/TileLayout.mjs +61 -48
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,26 +15,27 @@ 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
|
|
31
|
-
|
|
32
|
-
const d = o.col +
|
|
33
|
-
|
|
34
|
-
const e = o.colSpan +
|
|
35
|
-
|
|
36
|
-
const
|
|
37
|
-
s &&
|
|
31
|
+
const c = this.state.positions.map((f) => Object.assign({}, f)), o = c[i], u = c.find((f) => f.order === o.order + n);
|
|
32
|
+
u && u !== o && (o.order += n, u.order += -n, m = !0);
|
|
33
|
+
const d = o.col + a;
|
|
34
|
+
a !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
|
|
35
|
+
const e = o.colSpan + p;
|
|
36
|
+
p && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
|
|
37
|
+
const l = o.rowSpan + s;
|
|
38
|
+
s && l >= 1 && (o.rowSpan = l, m = !0), m && (this.setState({ positions: c }), y(this.props.onReposition, {}, this, { value: c }));
|
|
38
39
|
};
|
|
39
40
|
}
|
|
40
41
|
/**
|
|
@@ -46,59 +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
|
-
rowHeight:
|
|
65
|
+
rowHeight: p = "1fr",
|
|
65
66
|
style: m,
|
|
66
|
-
autoFlow:
|
|
67
|
+
autoFlow: c = "column",
|
|
67
68
|
items: o = []
|
|
68
|
-
} = this.props,
|
|
69
|
-
gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof
|
|
70
|
-
gridAutoRows: `minmax(0px, ${typeof
|
|
71
|
-
gap:
|
|
72
|
-
padding:
|
|
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 = {
|
|
70
|
+
gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof a == "number" ? a + "px" : a}))`,
|
|
71
|
+
gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
|
|
72
|
+
gap: u,
|
|
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[
|
|
83
|
+
className: w("k-tilelayout k-pos-relative", k[c], i),
|
|
83
84
|
style: d,
|
|
84
85
|
id: this.props.id,
|
|
85
|
-
|
|
86
|
-
|
|
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",
|
|
87
107
|
{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
index: u,
|
|
91
|
-
resizable: e.resizable,
|
|
92
|
-
reorderable: e.reorderable,
|
|
93
|
-
style: e.style,
|
|
94
|
-
className: e.className,
|
|
95
|
-
hintClassName: e.hintClassName,
|
|
96
|
-
hintStyle: e.hintStyle,
|
|
97
|
-
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"
|
|
98
110
|
},
|
|
99
|
-
e.
|
|
100
|
-
)))
|
|
101
|
-
|
|
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" } })
|
|
102
115
|
);
|
|
103
116
|
}
|
|
104
117
|
};
|
|
@@ -118,7 +131,7 @@ h.propTypes = {
|
|
|
118
131
|
onReposition: t.func,
|
|
119
132
|
ignoreDrag: t.func
|
|
120
133
|
}, h.displayName = "KendoTileLayout";
|
|
121
|
-
let
|
|
134
|
+
let g = h;
|
|
122
135
|
export {
|
|
123
|
-
|
|
136
|
+
g as TileLayout
|
|
124
137
|
};
|