@progress/kendo-react-grid 10.2.0 → 10.3.0-develop.1

package/components/GridEditDialog.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),q=require("react-dom"),I=require("@progress/kendo-react-layout"),s=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-react-labels"),x=require("@progress/kendo-react-intl"),M=require("@progress/kendo-react-dateinputs"),_=require("@progress/kendo-react-common"),m=require("@progress/kendo-svg-icons"),L=require("@progress/kendo-react-inputs"),T=require("@progress/kendo-react-data-tools"),R=require("@progress/kendo-react-dialogs"),r=require("@progress/kendo-react-form"),A=require("../GridClientWrapper.js"),i=require("../messages/index.js"),w=l=>{var p;const S=x.useLocalization(),E=_.useAdaptiveModeContext(),n=e.useContext(A.GridContext),u=(a,t)=>{n.onDialogEditSubmit&&n.onDialogEditSubmit({dataItem:a,syntheticEvent:t})},c=a=>{n.onDialogEditCancel&&n.onDialogEditCancel({syntheticEvent:a})},N=a=>{const{validationMessage:t,visited:z,id:v,valid:O,editor:F,value:b,label:f,...k}=a,C=n.mobileMode?"large":"medium";switch(F){case"numeric":return e.createElement(e.Fragment,null,e.createElement(o.Label,{editorId:v,className:"k-form-label"},f,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(L.NumericTextBox,{...k,size:C,value:b,[T.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(o.Error,null,t)));case"date":return e.createElement(e.Fragment,null,e.createElement(o.Label,{editorId:v,className:"k-form-label"},f,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(M.DatePicker,{valid:!0,...k,value:b,adaptive:n.mobileMode,size:C,[T.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(o.Error,null,t)));case"boolean":return e.createElement("div",{className:"k-form-field-wrap"},e.createElement(o.Label,{editorId:v,className:"k-form-label"},f,":  ",e.createElement(L.Checkbox,{...k,size:C,value:b,[T.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(o.Error,null,t)));default:return e.createElement(e.Fragment,null,e.createElement(o.Label,{editorId:v,className:"k-form-label"},f,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(L.TextBox,{...k,size:C,value:b||"",[T.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(o.Error,null,t)))}},D=S.toLanguageString(i.editDialogTitle,i.messages[i.editDialogTitle]),h=S.toLanguageString(i.editDialogSaveButtonTitle,i.messages[i.editDialogSaveButtonTitle]),B=S.toLanguageString(i.editDialogCancelButtonTitle,i.messages[i.editDialogCancelButtonTitle]),y={animation:!0,navigatable:!1,navigatableElements:[],expand:!0,title:n.adpativeTitle||D,suffixActions:e.createElement(s.Button,{svgIcon:m.xIcon,onClick:c,fillMode:"flat"}),animationStyles:E&&n.adaptiveColumnMenuRef<=E.small?{top:0,width:"100%",height:"100%"}:void 0,className:"k-adaptive-actionsheet",position:E&&n.adaptiveColumnMenuRef<=E.small?"fullscreen":void 0},{customEditDialog:g}=l,d=(p=l.columns)==null?void 0:p.filter(a=>a.editable);return e.createElement(e.Fragment,null,q.createPortal(e.createElement(e.Fragment,null,n.mobileMode?e.createElement(e.Fragment,null,g?e.createElement(g,{columns:l.columns,dataItem:l.dataItem,onSubmit:u,onCancel:c}):e.createElement(r.Form,{initialValues:l.dataItem,onSubmit:u,id:"kendo-grid-edit-dialog",render:a=>e.createElement(I.ActionSheet,{...y},e.createElement(I.ActionSheetContent,null,e.createElement(r.FormElement,null,d==null?void 0:d.map(t=>e.createElement(r.FieldWrapper,{key:t.field},e.createElement(r.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t==null?void 0:t.validator}))))),e.createElement(I.ActionSheetFooter,null,e.createElement(s.Button,{onClick:c,type:"reset",icon:"cancel",size:"large",svgIcon:m.cancelIcon},B),e.createElement(s.Button,{type:"submit",themeColor:"primary",size:"large",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:m.saveIcon},h)))})):g?e.createElement(g,{columns:l.columns,dataItem:l.dataItem,onSubmit:u,onCancel:c}):e.createElement(r.Form,{initialValues:l.dataItem,onSubmit:u,id:"kendo-grid-edit-dialog",render:a=>e.createElement(R.Dialog,{title:D,width:450,onClose:t=>c(t.syntheticEvent)},e.createElement(r.FormElement,null,d==null?void 0:d.map(t=>e.createElement(r.FieldWrapper,{key:t.field},e.createElement(r.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t==null?void 0:t.validator})))),e.createElement(R.DialogActionsBar,{layout:"start"},e.createElement(s.Button,{type:"submit",themeColor:"primary",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:m.saveIcon},h),e.createElement(s.Button,{onClick:c,type:"reset",icon:"cancel",svgIcon:m.cancelIcon},B)))})),document.body))};exports.GridEditDialog=w;

package/components/GridEditDialog.mjs

@@ -0,0 +1,207 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import e from "react";
+import _ from "react-dom";
+import { ActionSheet as O, ActionSheetContent as V, ActionSheetFooter as G } from "@progress/kendo-react-layout";
+import { Button as r } from "@progress/kendo-react-buttons";
+import { Label as v, Error as b } from "@progress/kendo-react-labels";
+import { useLocalization as W } from "@progress/kendo-react-intl";
+import { DatePicker as j } from "@progress/kendo-react-dateinputs";
+import { useAdaptiveModeContext as q } from "@progress/kendo-react-common";
+import { xIcon as H, cancelIcon as D, saveIcon as N } from "@progress/kendo-svg-icons";
+import { TextBox as J, Checkbox as K, NumericTextBox as P } from "@progress/kendo-react-inputs";
+import { TABLE_PREVENT_SELECTION_ELEMENT as p } from "@progress/kendo-react-data-tools";
+import { Dialog as Q, DialogActionsBar as U } from "@progress/kendo-react-dialogs";
+import { Form as T, FormElement as F, FieldWrapper as M, Field as w } from "@progress/kendo-react-form";
+import { GridContext as X } from "../GridClientWrapper.mjs";
+import { editDialogTitle as z, messages as S, editDialogSaveButtonTitle as B, editDialogCancelButtonTitle as L } from "../messages/index.mjs";
+const fe = (l) => {
+  var y;
+  const C = W(), m = q(), i = e.useContext(X), c = (a, t) => {
+    i.onDialogEditSubmit && i.onDialogEditSubmit({ dataItem: a, syntheticEvent: t });
+  }, n = (a) => {
+    i.onDialogEditCancel && i.onDialogEditCancel({ syntheticEvent: a });
+  }, k = (a) => {
+    const { validationMessage: t, visited: Y, id: s, valid: Z, editor: R, value: E, label: u, ...f } = a, g = i.mobileMode ? "large" : "medium";
+    switch (R) {
+      case "numeric":
+        return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(v, { editorId: s, className: "k-form-label" }, u, ":"), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+          P,
+          {
+            ...f,
+            size: g,
+            value: E,
+            [p]: !0
+          }
+        ), t && /* @__PURE__ */ e.createElement(b, null, t)));
+      case "date":
+        return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(v, { editorId: s, className: "k-form-label" }, u, ":"), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+          j,
+          {
+            valid: !0,
+            ...f,
+            value: E,
+            adaptive: i.mobileMode,
+            size: g,
+            [p]: !0
+          }
+        ), t && /* @__PURE__ */ e.createElement(b, null, t)));
+      case "boolean":
+        return /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(v, { editorId: s, className: "k-form-label" }, u, ":  ", /* @__PURE__ */ e.createElement(
+          K,
+          {
+            ...f,
+            size: g,
+            value: E,
+            [p]: !0
+          }
+        ), t && /* @__PURE__ */ e.createElement(b, null, t)));
+      default:
+        return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(v, { editorId: s, className: "k-form-label" }, u, ":"), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
+          J,
+          {
+            ...f,
+            size: g,
+            value: E || "",
+            [p]: !0
+          }
+        ), t && /* @__PURE__ */ e.createElement(b, null, t)));
+    }
+  }, I = C.toLanguageString(z, S[z]), h = C.toLanguageString(
+    B,
+    S[B]
+  ), x = C.toLanguageString(
+    L,
+    S[L]
+  ), A = {
+    animation: !0,
+    navigatable: !1,
+    navigatableElements: [],
+    expand: !0,
+    title: i.adpativeTitle || I,
+    suffixActions: /* @__PURE__ */ e.createElement(r, { svgIcon: H, onClick: n, fillMode: "flat" }),
+    animationStyles: m && i.adaptiveColumnMenuRef <= m.small ? { top: 0, width: "100%", height: "100%" } : void 0,
+    className: "k-adaptive-actionsheet",
+    position: m && i.adaptiveColumnMenuRef <= m.small ? "fullscreen" : void 0
+  }, { customEditDialog: d } = l, o = (y = l.columns) == null ? void 0 : y.filter((a) => a.editable);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, _.createPortal(
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    /* @__PURE__ */ e.createElement(e.Fragment, null, i.mobileMode ? (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      /* @__PURE__ */ e.createElement(e.Fragment, null, d ? /* @__PURE__ */ e.createElement(
+        d,
+        {
+          columns: l.columns,
+          dataItem: l.dataItem,
+          onSubmit: c,
+          onCancel: n
+        }
+      ) : /* @__PURE__ */ e.createElement(
+        T,
+        {
+          initialValues: l.dataItem,
+          onSubmit: c,
+          id: "kendo-grid-edit-dialog",
+          render: (a) => /* @__PURE__ */ e.createElement(O, { ...A }, /* @__PURE__ */ e.createElement(V, null, /* @__PURE__ */ e.createElement(F, null, o == null ? void 0 : o.map((t) => /* @__PURE__ */ e.createElement(M, { key: t.field }, /* @__PURE__ */ e.createElement(
+            w,
+            {
+              name: t.field,
+              id: t.field,
+              editor: t.editor,
+              component: k,
+              label: t.title || t.field,
+              validator: t == null ? void 0 : t.validator
+            }
+          ))))), /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
+            r,
+            {
+              onClick: n,
+              type: "reset",
+              icon: "cancel",
+              size: "large",
+              svgIcon: D
+            },
+            x
+          ), /* @__PURE__ */ e.createElement(
+            r,
+            {
+              type: "submit",
+              themeColor: "primary",
+              size: "large",
+              disabled: !a.allowSubmit || !a.valid,
+              onClick: a.onSubmit,
+              icon: "save",
+              svgIcon: N
+            },
+            h
+          )))
+        }
+      ))
+    ) : d ? /* @__PURE__ */ e.createElement(
+      d,
+      {
+        columns: l.columns,
+        dataItem: l.dataItem,
+        onSubmit: c,
+        onCancel: n
+      }
+    ) : /* @__PURE__ */ e.createElement(
+      T,
+      {
+        initialValues: l.dataItem,
+        onSubmit: c,
+        id: "kendo-grid-edit-dialog",
+        render: (a) => /* @__PURE__ */ e.createElement(
+          Q,
+          {
+            title: I,
+            width: 450,
+            onClose: (t) => n(t.syntheticEvent)
+          },
+          /* @__PURE__ */ e.createElement(F, null, o == null ? void 0 : o.map((t) => /* @__PURE__ */ e.createElement(M, { key: t.field }, /* @__PURE__ */ e.createElement(
+            w,
+            {
+              name: t.field,
+              id: t.field,
+              editor: t.editor,
+              component: k,
+              label: t.title || t.field,
+              validator: t == null ? void 0 : t.validator
+            }
+          )))),
+          /* @__PURE__ */ e.createElement(U, { layout: "start" }, /* @__PURE__ */ e.createElement(
+            r,
+            {
+              type: "submit",
+              themeColor: "primary",
+              disabled: !a.allowSubmit || !a.valid,
+              onClick: a.onSubmit,
+              icon: "save",
+              svgIcon: N
+            },
+            h
+          ), /* @__PURE__ */ e.createElement(
+            r,
+            {
+              onClick: n,
+              type: "reset",
+              icon: "cancel",
+              svgIcon: D
+            },
+            x
+          ))
+        )
+      }
+    )),
+    document.body
+  ));
+};
+export {
+  fe as GridEditDialog
+};