@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/basic/message/index.js

@@ -0,0 +1,162 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import Box from "@mui/material/Box";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmButton } from "../../form/button";
+import clsx from "clsx";
+const MESSAGE_TYPES = {
+  success: {
+    class: "alert-success",
+    iconClass: "wm-sl-l sl-check"
+  },
+  error: {
+    class: "alert-danger",
+    iconClass: "wi wi-cancel"
+  },
+  warning: {
+    class: "alert-warning",
+    iconClass: "wm-sl-l sl-alarm-bell"
+  },
+  info: {
+    class: "alert-info",
+    iconClass: "wi wi-info"
+  },
+  loading: {
+    class: "alert-info alert-loading",
+    iconClass: "fa fa-spinner fa-spin"
+  }
+};
+const DEFAULT_CLS = "alert app-message";
+const WmMessage = memo(
+  (props) => {
+    const {
+      caption = "Message",
+      type = "success",
+      hideclose = false,
+      close,
+      styles,
+      open,
+      name,
+      variant = "filled:success",
+      animation,
+      className
+    } = props;
+    if (!open) return null;
+    const getMessageType = (type2) => {
+      return MESSAGE_TYPES[type2] || MESSAGE_TYPES.info;
+    };
+    const messageType = getMessageType(type);
+    const messageClass = messageType.class;
+    const iconClass = messageType.iconClass;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        hidden: props.hidden,
+        component: "div",
+        style: styles,
+        className: clsx(
+          DEFAULT_CLS,
+          messageClass,
+          animation ? `animated ${animation}` : "",
+          className
+        ),
+        title: caption,
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "i",
+              "aria-hidden": "true",
+              title: `${type}Alert`,
+              className: `icon ${type} ${iconClass}`
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { component: "span", children: caption || "" }),
+          !hideclose && /* @__PURE__ */ jsx(
+            WmButton,
+            {
+              hint: "Close",
+              type: "button",
+              className: "btn-transparent close",
+              onClick: (e, widget) => close == null ? void 0 : close(e),
+              "aria-label": "Close",
+              listener: {},
+              name: "",
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+            }
+          )
+        ]
+      }
+    );
+  },
+  (prev, next) => {
+    const keys = [
+      "caption",
+      "type",
+      "hideclose",
+      "onClose",
+      "styles",
+      "open",
+      "hidden"
+    ];
+    return keys.every((key) => prev[key] === next[key]);
+  }
+);
+WmMessage.displayName = "WmMessage";
+const WmMessageWrapper = (Component) => {
+  const WrappedComponent = (props) => {
+    const { onClose } = props;
+    const [messageOpen, setMessageOpen] = useState(true);
+    const [messageCaption, setMessageCaption] = useState(props.caption);
+    const hideMessage = () => {
+      setMessageOpen(false);
+    };
+    const showMessage = (caption) => {
+      if (caption) {
+        setMessageCaption(caption);
+      }
+      setMessageOpen(true);
+    };
+    const handleClose = (event) => {
+      hideMessage();
+      onClose == null ? void 0 : onClose(event);
+    };
+    const updatedProps = useMemo(() => {
+      return __spreadValues(__spreadProps(__spreadValues({}, props), {
+        hideMessage,
+        showMessage,
+        close: handleClose,
+        open: messageOpen
+      }), messageCaption !== void 0 && { caption: messageCaption });
+    }, [props, messageOpen, handleClose, messageCaption]);
+    return /* @__PURE__ */ jsx(Component, __spreadValues({}, updatedProps));
+  };
+  return WrappedComponent;
+};
+const WmMessageWithMessageWrapper = WmMessageWrapper(WmMessage);
+WmMessage.displayName = "WmMessage";
+var message_default = WmMessageWrapper(withBaseWrapper(WmMessage));
+export {
+  WmMessageWithMessageWrapper as WmMessage,
+  WmMessage as WmMessageWithoutWrapper,
+  message_default as default
+};

package/components/basic/message/props.d.ts

@@ -0,0 +1,51 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Message types and their associated classes and icons.
+ */
+export interface MessageType {
+    class: string;
+    iconClass: string;
+}
+type VariantType = "filled:info" | "filled:success" | "filled:warning" | "filled:danger" | "filled:loading";
+/**
+ * Base props specific to the WmMessage component.
+ */
+export interface MessageProps {
+    /**
+     * The message content to be displayed.
+     * @default "Message"
+     */
+    caption?: string;
+    /**
+     * The variant of the message.
+     * @default "filled:success"
+     */
+    variant?: VariantType;
+    /**
+     * The type of message: 'success', 'error', 'info', 'warning', 'loading'.
+     * @default "info"
+     */
+    type?: string;
+    /**
+     * If true, the close button will be hidden.
+     * @default false
+     */
+    hideclose?: boolean;
+    /**
+     * Callback function to be called when the message is closed.
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * If true, the message is open.
+     */
+    open?: boolean;
+    /**
+     * Callback function to close the message.
+     */
+    close?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Combined props for the WmMessage component, including base WaveMaker props.
+ */
+export type WmMessageProps = Prettify<MessageProps & BaseProps>;
+export {};

package/components/basic/picture/index.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+import { WmPictureProps } from "./props";
+export declare const WmPicture: React.MemoExoticComponent<(props: WmPictureProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmPicture component is used to display images with support for placeholders,
+ * aspect ratios, and various shapes.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-picture--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-picture--docs)
+ *
+ * @param props - {@link WmPictureProps}
+ */
+declare const _default: React.ComponentType<{
+    picturesource: string;
+    imgSource?: string;
+    variant?: "default:circle" | "default:rounded" | "thumbnail:standard";
+    pictureplaceholder?: string;
+    alttext?: string;
+    encodeurl?: boolean;
+    pictureaspect?: "None" | "H" | "V" | "Both";
+    shape?: string;
+    resizemode?: string;
+    prefabName?: string;
+    id?: string;
+    height?: string;
+    width?: string;
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>, widget: WmPictureProps) => void;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

package/components/basic/picture/index.js

@@ -0,0 +1,180 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import clsx from "clsx";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  useShouldShowSkeleton
+} from "../../common/wm-skeleton";
+import { prefixPrefabResourceUrl } from "../../../utils/resource-url";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const DEFAULT_CLASS = "app-picture";
+const OBJECT_FIT_MODES = ["fill", "cover", "contain"];
+function objectFitClassToken(resizemode) {
+  const raw = (resizemode || "cover").toLowerCase().trim();
+  return OBJECT_FIT_MODES.includes(raw) ? raw : "cover";
+}
+const WmPicture = memo(
+  (props) => {
+    let _a = props, {
+      pictureaspect = "None",
+      resizemode = "fill",
+      pictureplaceholder = "resources/images/imagelists/default-image.png",
+      tabindex = 0,
+      onLoad,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      children,
+      show,
+      ref
+    } = _a, restProps = __objRest(_a, [
+      "pictureaspect",
+      "resizemode",
+      "pictureplaceholder",
+      "tabindex",
+      "onLoad",
+      "onClick",
+      "onDoubleClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "children",
+      "show",
+      "ref"
+    ]);
+    const sourceProp = props.picturesource || props.imgSource;
+    const [imgSource, setImgSource] = useState(sourceProp);
+    const [imageWidth, setImageWidth] = useState(props.width || "auto");
+    const [imageHeight, setImageHeight] = useState(props.height || "auto");
+    const showSkeleton = useShouldShowSkeleton(props.loading, props.showSkeleton);
+    useEffect(() => {
+      let source = sourceProp || "";
+      if (props.encodeurl) {
+        source = encodeURIComponent(source);
+      }
+      const prefixed = prefixPrefabResourceUrl(
+        source || props.pictureplaceholder || "",
+        props.prefabName
+      );
+      setImgSource(prefixed);
+    }, [sourceProp, props.encodeurl, props.pictureplaceholder, props.prefabName]);
+    useEffect(() => {
+      switch (props.pictureaspect) {
+        case "H":
+          setImageWidth(props.width || "100%");
+          setImageHeight("auto");
+          break;
+        case "V":
+          setImageWidth("auto");
+          setImageHeight(props.height || "100%");
+          break;
+        case "Both":
+          setImageWidth(props.height || "100%");
+          setImageHeight(props.height || "100%");
+          break;
+        case "None":
+        default:
+          setImageWidth(props.width);
+          setImageHeight(props.height);
+          break;
+      }
+    }, [props.pictureaspect, props.width, props.height]);
+    const onClickHandler = (event) => {
+      onClick && onClick(event, props);
+    };
+    const onDoubleClickHandler = (event) => {
+      onDoubleClick && onDoubleClick(event, props);
+    };
+    const onMouseEnterHandler = (event) => {
+      onMouseEnter && onMouseEnter(event, props);
+    };
+    const onMouseLeaveHandler = (event) => {
+      onMouseLeave && onMouseLeave(event, props);
+    };
+    if (showSkeleton)
+      return /* @__PURE__ */ jsx(
+        WmSkeleton,
+        __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmPicture"]), {
+          className: props.className,
+          styles: props.styles
+        })
+      );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        __spreadValues(__spreadProps(__spreadValues({}, removeInvalidAttributes(restProps)), {
+          ref,
+          "data-identifier": "img",
+          title: props.hint || props.name,
+          onClick: onClickHandler,
+          onDoubleClick: onDoubleClickHandler,
+          onMouseEnter: onMouseEnterHandler,
+          onMouseLeave: onMouseLeaveHandler,
+          src: imgSource || pictureplaceholder,
+          alt: props.alttext || "image alt text not provided",
+          className: clsx(
+            DEFAULT_CLASS,
+            `wm-picture-object-fit-${objectFitClassToken(resizemode)}`,
+            { [`img-${props.shape}`]: props.shape },
+            props.className
+          ),
+          style: props.styles,
+          height: imageHeight,
+          width: imageWidth,
+          "aria-label": props.arialabel || "Picture content",
+          tabIndex: tabindex
+        }), { name: props.name })
+      ),
+      children
+    ] });
+  },
+  (prev, current) => {
+    const keysToCompare = [
+      "picturesource",
+      "imgSource",
+      "show",
+      "loading",
+      "showSkeleton"
+    ];
+    return keysToCompare.every((key) => prev[key] === current[key]);
+  }
+);
+WmPicture.displayName = "WmPicture";
+var picture_default = withBaseWrapper(WmPicture);
+export {
+  WmPicture,
+  picture_default as default
+};

package/components/basic/picture/props.d.ts

@@ -0,0 +1,57 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+type VariantType = "default:circle" | "default:rounded" | "thumbnail:standard";
+/**
+ * Base props specific to the WmPicture component.
+ */
+export interface PictureProps {
+    /**
+     * The URL of the image source.
+     */
+    picturesource: string;
+    imgSource?: string;
+    /**
+     * The variant of the picture.
+     * @default "default:rounded"
+     */
+    variant?: VariantType;
+    /**
+     * The URL of the placeholder image to show while loading or if source fails.
+     */
+    pictureplaceholder?: string;
+    /**
+     * The alternative text for the image.
+     */
+    alttext?: string;
+    /**
+     * If true, the image source URL will be encoded.
+     */
+    encodeurl?: boolean;
+    /**
+     * The aspect ratio of the picture.
+     */
+    pictureaspect?: "None" | "H" | "V" | "Both";
+    /**
+     * The shape of the picture (e.g., 'circle', 'rounded').
+     */
+    shape?: string;
+    /**
+     * The resize mode for the image (e.g., 'cover', 'contain').
+     */
+    resizemode?: string;
+    prefabName?: string;
+    /**
+     * The unique ID for the picture element.
+     */
+    id?: string;
+    height?: string;
+    width?: string;
+    /**
+     * Callback fired when the image successfully loadsocal.
+     */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>, widget: WmPictureProps) => void;
+}
+/**
+ * Combined props for the WmPicture component, including base WaveMaker props.
+ */
+export type WmPictureProps = Prettify<PictureProps & BaseProps>;
+export {};

package/components/basic/progress-bar/index.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { WmProgressBarProps } from "@wavemaker-ai/react-runtime/components/basic/progress-bar/props";
+export declare const WmProgressBar: React.MemoExoticComponent<(props: WmProgressBarProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmProgressBar component is used to display the progress of a task.
+ * It supports different types (colors), striped variations, and custom captions.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-progressbar--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-progressbar--docs)
+ *
+ * @param props - {@link WmProgressBarProps}
+ */
+declare const _default: React.ComponentType<{
+    type?: import("@wavemaker-ai/react-runtime/components/basic/progress-bar/props").ProgressBarType;
+    displayformat?: string;
+    minvalue?: number;
+    maxvalue?: number;
+    captionplacement?: import("@wavemaker-ai/react-runtime/components/basic/progress-bar/props").CaptionPlacement;
+    id?: string;
+    onStart?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, widget: WmProgressBarProps) => void;
+    onComplete?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, widget: WmProgressBarProps) => void;
+    onBeforeupdate?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, widget: WmProgressBarProps) => void;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;