@wavemaker/react-runtime 11.14.1-rc.236

package/components/dialogs/dialog-content/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmDialogContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "modal-content";
+var WmDialogContent = exports.WmDialogContent = function WmDialogContent(_ref) {
+  var children = _ref.children,
+    sheet = _ref.sheet,
+    sheetposition = _ref.sheetposition,
+    styles = _ref.styles;
+  return __jsx(_DialogContent["default"], {
+    className: DEFAULT_CLASS,
+    style: _objectSpread(_objectSpread(_objectSpread({}, styles), sheet && {
+      borderRadius: 0
+    }), (sheetposition === "top" || sheetposition === "bottom") && {
+      width: "var(--wm-modal-full-screen-width)"
+    })
+  }, children);
+};
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmDialogContent);

package/components/dialogs/dialog-header/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmDialogHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_ICON_DIMENSIONS = "21px";
+var DEFAULT_CLASS = "app-dialog-header modal-header";
+var WmDialogHeader = exports.WmDialogHeader = function WmDialogHeader(props) {
+  var _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Alert" : _props$title,
+    _props$headinglevel = props.headinglevel,
+    headinglevel = _props$headinglevel === void 0 ? "h4" : _props$headinglevel,
+    iconclass = props.iconclass,
+    iconurl = props.iconurl,
+    _props$iconwidth = props.iconwidth,
+    iconwidth = _props$iconwidth === void 0 ? DEFAULT_ICON_DIMENSIONS : _props$iconwidth,
+    _props$iconheight = props.iconheight,
+    iconheight = _props$iconheight === void 0 ? DEFAULT_ICON_DIMENSIONS : _props$iconheight,
+    iconmargin = props.iconmargin,
+    heading = props.heading,
+    subheading = props.subheading,
+    onClose = props.onClose,
+    titleid = props.titleid,
+    _props$dialogLocale = props.dialogLocale,
+    dialogLocale = _props$dialogLocale === void 0 ? {
+      LABEL_CLOSE: "Close"
+    } : _props$dialogLocale,
+    _props$isDialog = props.isDialog,
+    isDialog = _props$isDialog === void 0 ? true : _props$isDialog;
+  var variant = headinglevel;
+  return __jsx(_material.Box, {
+    className: DEFAULT_CLASS,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }
+  }, __jsx(_material.Typography, {
+    variant: variant,
+    id: titleid,
+    component: variant,
+    sx: {
+      display: "flex",
+      alignItems: "center"
+    },
+    className: "app-dialog-title modal-title"
+  }, isDialog ? iconurl && iconurl !== "" ? __jsx("img", {
+    src: iconurl,
+    alt: "dialog icon",
+    style: {
+      width: iconwidth,
+      height: iconheight,
+      margin: iconmargin
+    }
+  }) : __jsx(_material.Box, {
+    component: "i",
+    className: iconclass,
+    style: {
+      width: iconwidth,
+      height: iconheight,
+      margin: iconmargin
+    }
+  }) : __jsx(_react["default"].Fragment, null), __jsx(_material.Box, {
+    component: "span",
+    className: "dialog-heading",
+    id: props.titleid
+  }, heading), subheading && __jsx(_material.Box, {
+    component: "span",
+    className: "dialog-sub-heading",
+    title: subheading,
+    style: {
+      marginLeft: "8px"
+    }
+  }, subheading)), closable && __jsx(_material.IconButton, {
+    "aria-label": "Close ".concat(title ? title : "", " dialog"),
+    onClick: onClose,
+    title: dialogLocale.LABEL_CLOSE,
+    className: "app-dialog-close close"
+  }, isDialog ? __jsx(_material.Box, {
+    component: "i",
+    className: "app-icon wi wi-clear",
+    "aria-hidden": "true"
+  }) : __jsx(_react["default"].Fragment, null)));
+};
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmDialogHeader);

package/components/dialogs/iframe-dialog/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _dialogs = require("@wavemaker/react-runtime/components/dialogs");
+var _dialogHeader = require("@wavemaker/react-runtime/components/dialogs/dialog-header");
+var _dialogContent = require("@wavemaker/react-runtime/components/dialogs/dialog-content");
+var _dialogActions = require("@wavemaker/react-runtime/components/dialogs/dialog-actions");
+var _button = require("@wavemaker/react-runtime/components/form/button");
+var _iframe = require("@wavemaker/react-runtime/components/basic/iframe");
+var _withDialogWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/components/dialogs/withDialogWrapper"));
+var _dialogBody = require("../dialog-body");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-dialog modal-dialog";
+var WmIframeDialog = function WmIframeDialog(props) {
+  var _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "External Content" : _props$title,
+    _props$headinglevel = props.headinglevel,
+    headinglevel = _props$headinglevel === void 0 ? "h4" : _props$headinglevel,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? "wi wi-globe" : _props$iconclass,
+    iconurl = props.iconurl,
+    iconwidth = props.iconwidth,
+    iconheight = props.iconheight,
+    iconmargin = props.iconmargin,
+    _props$oktext = props.oktext,
+    oktext = _props$oktext === void 0 ? "OK" : _props$oktext,
+    _props$showheader = props.showheader,
+    showheader = _props$showheader === void 0 ? true : _props$showheader,
+    _props$showactions = props.showactions,
+    showactions = _props$showactions === void 0 ? true : _props$showactions,
+    _props$url = props.url,
+    url = _props$url === void 0 ? "//www.wavemaker.com" : _props$url,
+    _props$encodeurl = props.encodeurl,
+    encodeurl = _props$encodeurl === void 0 ? false : _props$encodeurl,
+    hint = props.hint,
+    onClose = props.onClose,
+    onOk = props.onOk;
+  var handleClose = (0, _react.useCallback)(function (event) {
+    var _props$close;
+    if (onClose) {
+      onClose(event);
+    }
+    props === null || props === void 0 || (_props$close = props.close) === null || _props$close === void 0 || _props$close.call(props, event);
+  }, [onClose]);
+  var handleOk = (0, _react.useCallback)(function (event) {
+    if (onOk) {
+      onOk(event);
+    }
+    if (onClose) {
+      onClose();
+    }
+    props === null || props === void 0 || props.close();
+  }, [onOk, onClose]);
+  return __jsx(_dialogs.WmDialog, (0, _extends2["default"])({}, props, {
+    open: props.isopen,
+    onClose: handleClose,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className),
+    "data-role": "iframe-dialog",
+    "aria-labelledby": "iframe-dialog-".concat(title),
+    "aria-describedby": "iframe-dialog-".concat(title, "-description")
+  }), __jsx(_dialogContent.WmDialogContent, {
+    name: "",
+    listener: {}
+  }, showheader && __jsx(_dialogHeader.WmDialogHeader, {
+    closable: closable,
+    iconclass: iconclass,
+    iconurl: iconurl,
+    iconwidth: iconwidth,
+    iconheight: iconheight,
+    iconmargin: iconmargin,
+    heading: title,
+    headinglevel: headinglevel,
+    title: title,
+    titleid: "iframe-dialog-".concat(props.widgetId),
+    onClose: handleClose,
+    name: "",
+    listener: {}
+  }), __jsx(_dialogBody.WmDialogBody, {
+    name: "",
+    listener: {}
+  }, __jsx(_iframe.WmIframe, {
+    name: "",
+    listener: {},
+    iframesrc: url,
+    encodeurl: encodeurl,
+    width: props.width,
+    height: props.height,
+    hint: hint
+  })), showactions && __jsx(_dialogActions.WmDialogFooter, {
+    name: "",
+    listener: {}
+  }, __jsx(_button.WmButton, {
+    onClick: props.onOkClick || handleOk,
+    caption: oktext,
+    "aria-label": oktext,
+    className: "btn-primary ok-action",
+    name: "",
+    listener: {}
+  }))));
+};
+WmIframeDialog.displayName = "WmIframeDialog";
+var _default = exports["default"] = (0, _withDialogWrapper["default"])((0, _withBaseWrapper.withBaseWrapper)(WmIframeDialog));

package/components/dialogs/index.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmDialog = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _Slide = _interopRequireDefault(require("@mui/material/Slide"));
+var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
+var _clsx = _interopRequireDefault(require("clsx"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "modal fade in";
+var Transition = /*#__PURE__*/_react["default"].forwardRef(function Transition(props, ref) {
+  return __jsx(_Slide["default"], (0, _extends2["default"])({
+    direction: "down",
+    ref: ref
+  }, props, {
+    timeout: {
+      enter: 500,
+      exit: 400
+    },
+    easing: {
+      enter: "cubic-bezier(0.4, 0, 0.2, 1)",
+      exit: "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  }));
+});
+var FadeTransition = /*#__PURE__*/_react["default"].forwardRef(function FadeTransition(props, ref) {
+  return __jsx(_Fade["default"], (0, _extends2["default"])({
+    ref: ref
+  }, props, {
+    timeout: {
+      enter: 300,
+      exit: 0
+    },
+    easing: {
+      enter: "cubic-bezier(0.4, 0, 0.2, 1)",
+      exit: "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  }), props.children);
+});
+var WmDialog = exports.WmDialog = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var children = props.children,
+    className = props.className,
+    _props$open = props.open,
+    open = _props$open === void 0 ? false : _props$open,
+    onClose = props.onClose,
+    _props$modal = props.modal,
+    modal = _props$modal === void 0 ? false : _props$modal,
+    onTransitionEntered = props.onTransitionEntered;
+  var transitionType = FadeTransition;
+  var pageRef = document.getElementsByClassName("app-page")[0] || null;
+  var handleClose = function handleClose(event, reason) {
+    // Block backdrop click only when modal || Block escape only when modal and explicitly not closable
+    if (reason === "backdropClick" && modal || reason === "escapeKeyDown" && modal && props.closable === false) {
+      return;
+    }
+
+    // Otherwise, call the onClose callback
+    if (onClose) {
+      onClose(event);
+    }
+  };
+  if (!open) {
+    return null;
+  }
+  var sheetPositionStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.sheetposition === "top" && {
+    position: "absolute",
+    top: 0
+  }), props.sheetposition === "bottom" && {
+    position: "absolute",
+    bottom: 0
+  }), props.sheetposition === "left" && {
+    alignItems: "flex-start",
+    height: "var(--wm-modal-full-screen-height)",
+    maxHeight: "var(--wm-modal-full-screen-height)"
+  }), props.sheetposition === "right" && {
+    alignItems: "flex-end",
+    height: "var(--wm-modal-full-screen-height)",
+    maxHeight: "var(--wm-modal-full-screen-height)"
+  });
+  return __jsx(_Dialog["default"], {
+    name: props.name,
+    open: open,
+    onClose: handleClose,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    TransitionComponent: transitionType,
+    TransitionProps: {
+      onEntered: onTransitionEntered
+    },
+    "aria-modal": modal,
+    style: _objectSpread(_objectSpread({}, props.styles), {}, {
+      minHeight: "var(--wm-modal-full-screen-height)",
+      display: "block"
+    }, props.sheetposition && {
+      padding: 0
+    }),
+    container: pageRef,
+    disableEscapeKeyDown: modal && props.closable === false,
+    fullWidth: true,
+    keepMounted: true,
+    sx: {
+      "& .MuiDialog-scrollPaper": _objectSpread({}, props.sheet && {
+        borderRadius: 0
+      }),
+      "& .MuiBackdrop-root": {
+        backgroundColor: "transparent"
+      },
+      "& .MuiDialog-paper": _objectSpread({
+        margin: "0 !important",
+        padding: "0 !important",
+        borderRadius: "0 !important"
+      }, props.sheetposition && _objectSpread({
+        width: "var(--wm-modal-full-screen-width)",
+        maxWidth: "var(--wm-modal-full-screen-width)"
+      }, sheetPositionStyles))
+    }
+  }, children);
+});
+WmDialog.displayName = "WmDialog";
+var _default = exports["default"] = WmDialog;