@wavemaker/react-runtime 11.14.1-rc.236

package/components/form/button/index.js

@@ -0,0 +1,216 @@
+"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.WmButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _image = _interopRequireDefault(require("next/image"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _excluded = ["iconurl", "iconclass", "iconwidth", "iconheight", "iconmargin", "iconposition", "caption", "badgevalue", "children", "styles", "conditionalstyles", "className", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onKeydown", "onKeyup", "listener", "name", "disabled", "type", "shortcutkey", "arialabel", "show"];
+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 = "btn app-button";
+var WmButton = exports.WmButton = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _listener$appLocale;
+  var iconurl = props.iconurl,
+    iconclass = props.iconclass,
+    iconwidth = props.iconwidth,
+    iconheight = props.iconheight,
+    iconmargin = props.iconmargin,
+    _props$iconposition = props.iconposition,
+    iconposition = _props$iconposition === void 0 ? "left" : _props$iconposition,
+    caption = props.caption,
+    badgevalue = props.badgevalue,
+    children = props.children,
+    styles = props.styles,
+    conditionalstyles = props.conditionalstyles,
+    className = props.className,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeydown = props.onKeydown,
+    onKeyup = props.onKeyup,
+    listener = props.listener,
+    name = props.name,
+    disabled = props.disabled,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "button" : _props$type,
+    shortcutkey = props.shortcutkey,
+    _props$arialabel = props.arialabel,
+    arialabel = _props$arialabel === void 0 ? caption : _props$arialabel,
+    _props$show = props.show,
+    show = _props$show === void 0 ? "true" : _props$show,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var btnRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!shortcutkey) return;
+    var handleGlobalKeyDown = function handleGlobalKeyDown(e) {
+      if (e.altKey && e.key.toLowerCase() === shortcutkey.toLowerCase()) {
+        var _btnRef$current;
+        e.preventDefault();
+        (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 || _btnRef$current.focus();
+      }
+    };
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return function () {
+      return window.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, [shortcutkey]);
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClick === null || onClick === void 0 || onClick(event, props);
+  }
+  function handleOnBlur(event) {
+    event.preventDefault();
+    onBlur === null || onBlur === void 0 || onBlur(event, props);
+  }
+  function handleOnFocus(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onFocus === null || onFocus === void 0 || onFocus(event, props);
+  }
+  function handleMouseEnter(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, props);
+  }
+  function handleMouseLeave(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, props);
+  }
+  function handleDoubleClick(event) {
+    event.preventDefault();
+    onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(event, props);
+  }
+  function handleKeyDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onKeydown === null || onKeydown === void 0 || onKeydown(event, props);
+  }
+  function handleKeyUp(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onKeyup === null || onKeyup === void 0 || onKeyup(event, props);
+  }
+  var EVENTS = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onBlur && {
+    onBlur: handleOnBlur
+  }), onFocus && {
+    onFocus: handleOnFocus
+  }), onMouseEnter && {
+    onMouseEnter: handleMouseEnter
+  }), onMouseLeave && {
+    onMouseLeave: handleMouseLeave
+  }), onDoubleClick && {
+    onDoubleClick: handleDoubleClick
+  }), onKeydown && {
+    onKeyDown: handleKeyDown
+  }), onKeyup && {
+    onKeyUp: handleKeyUp
+  }), onClick && {
+    onClick: handleClick
+  });
+  return __jsx(_Button["default"], (0, _extends2["default"])({
+    sx: {
+      all: "initial",
+      position: "relative",
+      boxSizing: "border-box"
+    },
+    style: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    disableFocusRipple: true,
+    disableRipple: true,
+    disableElevation: true,
+    disableTouchRipple: true,
+    "icon-position": props.iconposition,
+    name: name,
+    id: name,
+    type: type,
+    ref: btnRef,
+    caption: caption,
+    disabled: disabled,
+    "aria-label": arialabel,
+    title: props.hint,
+    show: show === null || show === void 0 ? void 0 : show.toString()
+  }, restProps, EVENTS), iconurl && __jsx(_image["default"], {
+    "data-identifier": "img",
+    alt: "button image",
+    src: iconurl,
+    className: "button-image-icon",
+    width: parseInt(iconwidth || "24", 10),
+    height: parseInt(iconheight || "24", 10),
+    style: {
+      width: iconwidth || "auto",
+      height: iconheight || "auto",
+      margin: iconmargin || "0 4"
+    }
+  }), iconclass && __jsx(_react["default"].Fragment, null, __jsx("i", {
+    className: (0, _clsx["default"])("app-icon", iconclass),
+    "aria-hidden": "true",
+    style: {
+      width: iconwidth || "auto",
+      height: iconheight || "auto",
+      margin: iconmargin || "0 4",
+      fontSize: iconheight || "24"
+    }
+  }), __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, caption, " ", listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_ICON)), __jsx(_Box["default"], {
+    component: "span",
+    className: "btn-caption",
+    dangerouslySetInnerHTML: {
+      __html: caption || ""
+    },
+    sx: {
+      color: "inherit",
+      fontSize: "inherit",
+      fontFamily: "inherit",
+      fontStyle: "inherit"
+    }
+  }), children, badgevalue && __jsx(_Badge["default"], {
+    sx: {
+      all: "initial",
+      lineHeight: "inherit",
+      letterSpacing: "inherit",
+      fontSize: "inherit"
+    },
+    badgeContent: badgevalue,
+    slotProps: {
+      badge: {
+        className: "badge pull-right",
+        style: {
+          position: "absolute",
+          right: "0em",
+          top: "0em",
+          height: "inherit",
+          fontFamily: "initial",
+          width: "inherit"
+        }
+      }
+    }
+  }));
+}, function (prev, current) {
+  var keys = ["iconurl", "iconclass", "icon", "width", "iconheight", "iconmargin", "caption", "badgevalue", "disabled"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmButton.displayName = "WmButton";
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper.withBaseWrapper)(WmButton));

package/components/form/button-group/index.js

@@ -0,0 +1,60 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _excluded = ["name", "vertical", "show", "horizontalalign", "children", "styles", "className"];
+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 = "btn-group app-button-group";
+var StyledButtonGroup = (0, _styles.styled)("div")(function (_ref) {
+  var vertical = _ref.vertical,
+    horizontalalign = _ref.horizontalalign;
+  return _objectSpread(_objectSpread(_objectSpread({
+    display: "inline-flex"
+  }, vertical ? {
+    flexDirection: "column"
+  } : {}), horizontalalign === "center" ? {
+    justifyContent: "center"
+  } : {}), horizontalalign === "right" ? {
+    justifyContent: "flex-end"
+  } : {});
+});
+function WmButtonGroup(props) {
+  var name = props.name,
+    vertical = props.vertical,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    horizontalalign = props.horizontalalign,
+    children = props.children,
+    styles = props.styles,
+    className = props.className,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var listItemStyles = _objectSpread(_objectSpread({}, styles), {}, {
+    display: show ? "inline-flex" : "none"
+  });
+  return __jsx(StyledButtonGroup, (0, _extends2["default"])({
+    style: listItemStyles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    vertical: vertical,
+    horizontalalign: horizontalalign,
+    hint: name,
+    title: name,
+    id: name,
+    name: name
+  }, restProps), children);
+}
+WmButtonGroup.displayName = "WmButtonGroup";
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)((0, _withBaseWrapper.withBaseWrapper)(WmButtonGroup));