@progress/kendo-react-layout 11.0.0-develop.9 → 11.0.1-develop.1

package/tilelayout/TileLayout.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
+import * as r from "react";
 import t from "prop-types";
 import { dispatchEvent as y, classNames as w, getter as b } from "@progress/kendo-react-common";
 import { InternalTile as S } from "./InternalTile.mjs";
@@ -15,26 +15,27 @@ const k = {
   "column dense": "k-grid-flow-col-dense",
   "row dense": "k-grid-flow-row-dense",
   unset: "k-grid-flow-unset"
-}, h = class h extends a.Component {
+}, h = class h extends r.Component {
   constructor() {
     super(...arguments), this._element = null, this.state = {
       positions: (this.props.items || []).map(
-        (r, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, r.defaultPosition)
-      )
+        (i, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
+      ),
+      activeHint: !1
     }, this.focus = () => {
       this._element && this._element.focus();
-    }, this.update = (r, n, i, s = 0, l = 0) => {
-      if (n === 0 && i === 0 && !l && !s)
+    }, this.update = (i, n, a, s = 0, p = 0) => {
+      if (n === 0 && a === 0 && !p && !s)
         return;
       let m = !1;
-      const p = this.state.positions.map((g) => Object.assign({}, g)), o = p[r], c = p.find((g) => g.order === o.order + n);
-      c && c !== o && (o.order += n, c.order += -n, m = !0);
-      const d = o.col + i;
-      i !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
-      const e = o.colSpan + l;
-      l && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
-      const u = o.rowSpan + s;
-      s && u >= 1 && (o.rowSpan = u, m = !0), m && (this.setState({ positions: p }), y(this.props.onReposition, {}, this, { value: p }));
+      const c = this.state.positions.map((f) => Object.assign({}, f)), o = c[i], u = c.find((f) => f.order === o.order + n);
+      u && u !== o && (o.order += n, u.order += -n, m = !0);
+      const d = o.col + a;
+      a !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
+      const e = o.colSpan + p;
+      p && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
+      const l = o.rowSpan + s;
+      s && l >= 1 && (o.rowSpan = l, m = !0), m && (this.setState({ positions: c }), y(this.props.onReposition, {}, this, { value: c }));
     };
   }
   /**
@@ -46,59 +47,71 @@ const k = {
   /**
    * @hidden
    */
-  static getDerivedStateFromProps(r, n) {
-    return r.positions ? {
-      positions: r.positions.map((i, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, i))
-    } : r.items && (!n.positions || r.items.length !== n.positions.length) ? {
-      positions: r.items.map(
-        (i, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
+  static getDerivedStateFromProps(i, n) {
+    return i.positions ? {
+      positions: i.positions.map((a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a))
+    } : i.items && (!n.positions || i.items.length !== n.positions.length) ? {
+      positions: i.items.map(
+        (a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a.defaultPosition)
       )
     } : null;
   }
   render() {
     const {
-      className: r,
+      className: i,
       columns: n = 3,
-      columnWidth: i = "1fr",
+      columnWidth: a = "1fr",
       gap: s,
-      rowHeight: l = "1fr",
+      rowHeight: p = "1fr",
       style: m,
-      autoFlow: p = "column",
+      autoFlow: c = "column",
       items: o = []
-    } = this.props, c = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
-      gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof i == "number" ? i + "px" : i}))`,
-      gridAutoRows: `minmax(0px, ${typeof l == "number" ? l + "px" : l})`,
-      gap: c,
-      padding: c,
+    } = this.props, u = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
+      gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof a == "number" ? a + "px" : a}))`,
+      gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
+      gap: u,
+      padding: u,
       ...m
     };
-    return /* @__PURE__ */ a.createElement(
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
         ref: (e) => {
           this._element = e;
         },
         dir: this.props.dir,
-        className: w("k-tilelayout k-pos-relative", k[p], r),
+        className: w("k-tilelayout k-pos-relative", k[c], i),
         style: d,
         id: this.props.id,
-        children: o.map((e, u) => /* @__PURE__ */ a.createElement(a.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : u }, /* @__PURE__ */ a.createElement(
-          S,
+        role: "list"
+      },
+      o.map((e, l) => /* @__PURE__ */ r.createElement(r.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : l }, /* @__PURE__ */ r.createElement(
+        S,
+        {
+          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 : /* @__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(
+          "div",
           {
-            update: this.update,
-            defaultPosition: this.state.positions[u],
-            index: u,
-            resizable: e.resizable,
-            reorderable: e.reorderable,
-            style: e.style,
-            className: e.className,
-            hintClassName: e.hintClassName,
-            hintStyle: e.hintStyle,
-            ignoreDrag: this.props.ignoreDrag
+            id: typeof e.header == "string" ? e.header : this.props.id ? `tilelayout-${this.props.id}-${l}` : `tilelayout-${l}`,
+            className: "k-card-title"
           },
-          e.item ? e.item : /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, a.isValidElement(e.header) ? e.header : /* @__PURE__ */ a.createElement("h5", { className: "k-card-title" }, e.header)), /* @__PURE__ */ a.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
-        )))
-      }
+          e.header
+        )), /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
+      ))),
+      !this.state.activeHint && /* @__PURE__ */ r.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
     );
   }
 };
@@ -118,7 +131,7 @@ h.propTypes = {
   onReposition: t.func,
   ignoreDrag: t.func
 }, h.displayName = "KendoTileLayout";
-let f = h;
+let g = h;
 export {
-  f as TileLayout
+  g as TileLayout
 };