@wavemaker/react-runtime 11.14.1-rc.236

package/components/advanced/carousel/index.js

@@ -0,0 +1,456 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _lodashEs = require("lodash-es");
+var _excluded = ["name", "animation", "animationinterval", "controls", "nodatamessage", "height", "width", "children", "className", "styles", "render", "onChange"];
+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 = "app-carousel carousel";
+var StyledCarousel = (0, _styles.styled)(_Box["default"], {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !["ownerState"].includes(prop);
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState;
+  var height = ownerState.height,
+    width = ownerState.width,
+    isAnimating = ownerState.isAnimating;
+  return {
+    position: "relative",
+    width: width || "100%",
+    height: height || "480px",
+    overflow: "hidden",
+    "& .carousel-inner": {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    },
+    "& .carousel-item": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      opacity: 1,
+      transition: isAnimating ? "transform 0.6s ease-in-out" : "none",
+      transform: "translate3d(0, 0, 0)",
+      WebkitTransform: "translate3d(0, 0, 0)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&.active": {
+        opacity: 1,
+        transform: "translate3d(0, 0, 0)",
+        WebkitTransform: "translate3d(0, 0, 0)",
+        zIndex: 2
+      },
+      "&.carousel-item-left": {
+        transform: "translate3d(-100%, 0, 0)",
+        WebkitTransform: "translate3d(-100%, 0, 0)",
+        zIndex: 1
+      },
+      "&.carousel-item-right": {
+        transform: "translate3d(100%, 0, 0)",
+        WebkitTransform: "translate3d(100%, 0, 0)",
+        zIndex: 1
+      },
+      "&.carousel-item-prev": {
+        transform: "translate3d(-100%, 0, 0)",
+        WebkitTransform: "translate3d(-100%, 0, 0)",
+        zIndex: 1,
+        "&.carousel-item-left": {
+          transform: "translate3d(0, 0, 0)",
+          WebkitTransform: "translate3d(0, 0, 0)",
+          zIndex: 2
+        }
+      },
+      "&.carousel-item-next": {
+        transform: "translate3d(100%, 0, 0)",
+        WebkitTransform: "translate3d(100%, 0, 0)",
+        zIndex: 1,
+        "&.carousel-item-right": {
+          transform: "translate3d(0, 0, 0)",
+          WebkitTransform: "translate3d(0, 0, 0)",
+          zIndex: 2
+        }
+      },
+      // Special handling for active items during animation
+      "&.active.carousel-item-left": {
+        transform: "translate3d(-100%, 0, 0)",
+        WebkitTransform: "translate3d(-100%, 0, 0)",
+        zIndex: 1
+      },
+      "&.active.carousel-item-right": {
+        transform: "translate3d(100%, 0, 0)",
+        WebkitTransform: "translate3d(100%, 0, 0)",
+        zIndex: 1
+      }
+    },
+    // Navigation controls
+    "& .carousel-control": {
+      zIndex: 5,
+      height: "inherit"
+    },
+    // Hide controls based on controls prop
+    "&.hide-navs .carousel-control": {
+      display: "none"
+    },
+    "&.hide-indicators .carousel-indicators": {
+      display: "none"
+    },
+    "&.hide-both .carousel-control, &.hide-both .carousel-indicators": {
+      display: "none"
+    }
+  };
+});
+var WmCarousel = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    _props$animation = props.animation,
+    animation = _props$animation === void 0 ? "auto" : _props$animation,
+    _props$animationinter = props.animationinterval,
+    animationinterval = _props$animationinter === void 0 ? 3 : _props$animationinter,
+    _props$controls = props.controls,
+    controls = _props$controls === void 0 ? "both" : _props$controls,
+    _props$nodatamessage = props.nodatamessage,
+    nodatamessage = _props$nodatamessage === void 0 ? "No Data Found" : _props$nodatamessage,
+    _props$height = props.height,
+    height = _props$height === void 0 ? "480px" : _props$height,
+    _props$width = props.width,
+    width = _props$width === void 0 ? "100%" : _props$width,
+    children = props.children,
+    className = props.className,
+    styles = props.styles,
+    render = props.render,
+    onChange = props.onChange,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var dataset = props.dataset || [];
+  var _useState = (0, _react.useState)(0),
+    activeIndex = _useState[0],
+    setActiveIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isAnimating = _useState2[0],
+    setIsAnimating = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isPaused = _useState3[0],
+    setIsPaused = _useState3[1];
+  var _useState4 = (0, _react.useState)("right"),
+    direction = _useState4[0],
+    setDirection = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    prevActiveIndex = _useState5[0],
+    setPrevActiveIndex = _useState5[1];
+  var intervalRef = (0, _react.useRef)(undefined);
+  var carouselRef = (0, _react.useRef)(null);
+  dataset = (0, _lodashEs.isPlainObject)(dataset) ? [dataset] : dataset;
+
+  // Determine if it's a dynamic carousel (has dataset) or static (has children)
+  var isDynamic = dataset && dataset.length > 0;
+  var items = isDynamic ? dataset : _react["default"].Children.toArray(children || []);
+  var itemCount = items.length;
+  var ownerState = (0, _react.useMemo)(function () {
+    return {
+      height: height,
+      width: width,
+      isAnimating: isAnimating
+    };
+  }, [height, width, isAnimating]);
+
+  // Auto-play functionality
+  var startAutoPlay = (0, _react.useCallback)(function () {
+    if (animation === "auto" && animationinterval > 0 && itemCount > 1) {
+      intervalRef.current = setInterval(function () {
+        if (!isPaused) {
+          setActiveIndex(function (prevIndex) {
+            var newIndex = (prevIndex + 1) % itemCount;
+            setDirection("right");
+            setPrevActiveIndex(prevIndex);
+            setIsAnimating(true);
+            setTimeout(function () {
+              return setIsAnimating(false);
+            }, 600);
+            return newIndex;
+          });
+        }
+      }, animationinterval * 1000);
+    }
+  }, [animation, animationinterval, itemCount, isPaused]);
+  var stopAutoPlay = (0, _react.useCallback)(function () {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+  }, []);
+
+  // Start/stop auto-play based on props
+  (0, _react.useEffect)(function () {
+    if (animation === "auto" && !isPaused) {
+      startAutoPlay();
+    } else {
+      stopAutoPlay();
+    }
+    return function () {
+      return stopAutoPlay();
+    };
+  }, [animation, startAutoPlay, stopAutoPlay, isPaused]);
+
+  // Navigation functions
+  var goToSlide = (0, _react.useCallback)(function (index, slideDirection) {
+    if (index >= 0 && index < itemCount && index !== activeIndex) {
+      setIsAnimating(true);
+      var oldIndex = activeIndex;
+
+      // Determine slide direction
+      var dir = slideDirection;
+      if (!dir) {
+        // Handle circular navigation properly
+        if (index === 0 && activeIndex === itemCount - 1) {
+          dir = "right"; // Last to first
+        } else if (index === itemCount - 1 && activeIndex === 0) {
+          dir = "left"; // First to last
+        } else if (index > activeIndex) {
+          dir = "right";
+        } else {
+          dir = "left";
+        }
+      }
+      setDirection(dir);
+      setPrevActiveIndex(activeIndex);
+
+      // Set new active index
+      setActiveIndex(index);
+
+      // Call onChange callback
+      onChange === null || onChange === void 0 || onChange(null, props, index, oldIndex);
+
+      // Reset animation state after transition
+      setTimeout(function () {
+        return setIsAnimating(false);
+      }, 600);
+    }
+  }, [activeIndex, itemCount, onChange, props]);
+  var goToPrevious = (0, _react.useCallback)(function () {
+    var newIndex = activeIndex === 0 ? itemCount - 1 : activeIndex - 1;
+    goToSlide(newIndex, "left");
+  }, [activeIndex, itemCount, goToSlide]);
+  var goToNext = (0, _react.useCallback)(function () {
+    var newIndex = (activeIndex + 1) % itemCount;
+    goToSlide(newIndex, "right");
+  }, [activeIndex, itemCount, goToSlide]);
+
+  // Mouse event handlers for pause/resume
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    var _props$onMouseEnter;
+    setIsPaused(true);
+    (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+  }, [props]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    var _props$onMouseLeave;
+    setIsPaused(false);
+    (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 || _props$onMouseLeave.call(props, event, props);
+  }, [props]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var _props$onClick;
+    (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, props);
+  }, [props]);
+  var handleDoubleClick = (0, _react.useCallback)(function (event) {
+    var _props$onDoubleClick;
+    (_props$onDoubleClick = props.onDoubleClick) === null || _props$onDoubleClick === void 0 || _props$onDoubleClick.call(props, event, props);
+  }, [props]);
+
+  // Keyboard navigation
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        goToPrevious();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        goToNext();
+        break;
+      case " ":
+        // Space key
+        event.preventDefault();
+        setIsPaused(function (prev) {
+          return !prev;
+        });
+        break;
+    }
+  }, [goToPrevious, goToNext]);
+
+  // Get navigation class based on controls prop
+  var getNavigationClass = function getNavigationClass() {
+    switch (controls) {
+      case "indicators":
+        return "hide-navs";
+      case "navs":
+        return "hide-indicators";
+      case "none":
+        return "hide-both";
+      default:
+        return "";
+    }
+  };
+
+  // Render carousel items
+  var renderCarouselItems = function renderCarouselItems() {
+    if (itemCount === 0) {
+      return __jsx("div", {
+        className: "carousel-item active"
+      }, __jsx(_Typography["default"], {
+        variant: "body1",
+        sx: {
+          textAlign: "center",
+          color: "text.secondary"
+        }
+      }, nodatamessage));
+    }
+    return items.map(function (item, index) {
+      var isActive = index === activeIndex;
+      var isPrevious = index === prevActiveIndex;
+      var getItemClasses = function getItemClasses() {
+        var classes = "carousel-item";
+        if (isActive && !isAnimating) {
+          classes += " active";
+        } else if (isAnimating) {
+          if (isActive) {
+            // New active item coming in
+            if (direction === "left") {
+              classes += " carousel-item-prev carousel-item-left";
+            } else {
+              classes += " carousel-item-next carousel-item-right";
+            }
+          } else if (isPrevious) {
+            // Previous active item going out
+            if (direction === "left") {
+              classes += " active carousel-item-right";
+            } else {
+              classes += " active carousel-item-left";
+            }
+          } else {
+            // Position other items off-screen
+            if (index < activeIndex) {
+              classes += " carousel-item-left";
+            } else {
+              classes += " carousel-item-right";
+            }
+          }
+        } else {
+          // Default positioning when not animating
+          if (isActive) {
+            classes += " active";
+          } else if (index < activeIndex) {
+            classes += " carousel-item-left";
+          } else if (index > activeIndex) {
+            classes += " carousel-item-right";
+          }
+        }
+        return classes;
+      };
+      return __jsx("div", {
+        key: index,
+        className: getItemClasses(),
+        "aria-hidden": index !== activeIndex && !isAnimating
+      }, isDynamic && render ? render(item, index) : item);
+    });
+  };
+
+  // Render navigation controls
+  var renderNavControls = function renderNavControls() {
+    if (controls === "indicators" || controls === "none") return null;
+    return __jsx(_react["default"].Fragment, null, __jsx("div", {
+      "aria-disabled": itemCount <= 1,
+      className: "left carousel-control carousel-control-prev app-anchor",
+      tabIndex: 0,
+      onClick: goToPrevious,
+      "aria-label": "".concat(activeIndex + 1, " of ").concat(itemCount),
+      name: name,
+      disabled: itemCount <= 1
+    }, __jsx("span", {
+      "aria-hidden": "true",
+      className: "icon-prev carousel-control-prev-icon"
+    })), __jsx("div", {
+      "aria-disabled": itemCount <= 1,
+      className: "right carousel-control carousel-control-next app-anchor",
+      tabIndex: 0,
+      onClick: goToNext,
+      "aria-label": "Next slide",
+      name: name,
+      disabled: itemCount <= 1
+    }, __jsx("span", {
+      "aria-hidden": "true",
+      className: "icon-next carousel-control-next-icon"
+    })));
+  };
+
+  // Render indicators
+  var renderIndicators = function renderIndicators() {
+    if (controls === "navs" || controls === "none" || itemCount <= 1) return null;
+    return __jsx("ul", {
+      className: "carousel-indicators",
+      role: "tablist"
+    }, items.map(function (_, index) {
+      return __jsx("li", {
+        key: index,
+        className: (0, _clsx["default"])({
+          active: index === activeIndex
+        }),
+        onClick: function onClick() {
+          return goToSlide(index);
+        },
+        role: "tab",
+        "aria-label": "Slide ".concat(index + 1),
+        "aria-selected": index === activeIndex
+      });
+    }));
+  };
+  return __jsx(StyledCarousel, (0, _extends2["default"])({
+    ref: carouselRef,
+    ownerState: ownerState,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, getNavigationClass(), props.className),
+    sx: props.styles,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick,
+    onDoubleClick: handleDoubleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: props.tabindex || 0,
+    role: "region",
+    "aria-label": props.arialabel || "Carousel",
+    "aria-live": animation === "auto" ? "polite" : "off"
+  }, rest), __jsx("div", {
+    className: "carousel slide",
+    style: _objectSpread({}, styles)
+  }, __jsx("div", {
+    className: "carousel-inner",
+    role: "group"
+  }, renderCarouselItems()), renderNavControls(), renderIndicators()));
+}, function (prevProps, nextProps) {
+  // Custom comparison for memoization
+  var keysToCompare = ["dataset", "animation", "animationinterval", "controls", "children", "className", "styles"];
+  return keysToCompare.every(function (key) {
+    if (key === "dataset") {
+      return JSON.stringify(prevProps[key]) === JSON.stringify(nextProps[key]);
+    }
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmCarousel.displayName = "WmCarousel";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmCarousel);

package/components/advanced/carousel/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/advanced/carousel/template.js

@@ -0,0 +1,72 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _excluded = ["name", "horizontalalign", "children", "className", "styles", "item", "index"];
+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 = "app-carousel-item";
+var WmCarouselTemplate = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    _props$horizontalalig = props.horizontalalign,
+    horizontalalign = _props$horizontalalig === void 0 ? "center" : _props$horizontalalig,
+    children = props.children,
+    className = props.className,
+    styles = props.styles,
+    item = props.item,
+    index = props.index,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var getAlignmentStyles = function getAlignmentStyles() {
+    switch (horizontalalign) {
+      case "left":
+        return {
+          justifyContent: "flex-start",
+          textAlign: "left"
+        };
+      case "right":
+        return {
+          justifyContent: "flex-end",
+          textAlign: "right"
+        };
+      case "center":
+      default:
+        return {
+          justifyContent: "center",
+          textAlign: "center"
+        };
+    }
+  };
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    sx: _objectSpread(_objectSpread({
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center"
+    }, getAlignmentStyles()), styles)
+  }, rest), children);
+}, function (prevProps, nextProps) {
+  // Custom comparison for memoization
+  var keysToCompare = ["horizontalalign", "children", "className", "styles", "item", "index"];
+  return keysToCompare.every(function (key) {
+    if (key === "item") {
+      return JSON.stringify(prevProps[key]) === JSON.stringify(nextProps[key]);
+    }
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmCarouselTemplate.displayName = "WmCarouselTemplate";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmCarouselTemplate);