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

package/components/data/live-filter/props.d.ts

@@ -0,0 +1,96 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export interface LiveFilterProps {
+    /**
+     * Error message to display.
+     */
+    errormessage?: string;
+    /**
+     * Position of the captions.
+     */
+    captionposition?: string;
+    /**
+     * Title of the live filter.
+     */
+    title?: string;
+    /**
+     * Encoding type.
+     */
+    enctype?: string;
+    /**
+     * HTTP method.
+     */
+    method?: string;
+    /**
+     * Alignment of captions.
+     */
+    captionalign?: string;
+    /**
+     * Subheading of the live filter.
+     */
+    subheading?: string;
+    /**
+     * CSS class for the icon.
+     */
+    iconclass?: string;
+    /**
+     * Whether to enable autocomplete.
+     */
+    autocomplete?: boolean;
+    /**
+     * Whether the filter is collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the filter is expanded by default.
+     */
+    expanded?: boolean;
+    /**
+     * Data source for the form.
+     */
+    formdatasource?: string;
+    /**
+     * Number of fields.
+     */
+    numberoffields?: number;
+    /**
+     * Page size for results.
+     */
+    pagesize?: number;
+    /**
+     * Whether to automatically update results.
+     */
+    autoupdate?: boolean;
+    /**
+     * Whether to enable empty filter.
+     */
+    enableemptyfilter?: string;
+    /**
+     * The data source for the filter.
+     */
+    dataSource?: string;
+    /**
+     * Order results by field.
+     */
+    orderBy?: string;
+    /**
+     * Success callback.
+     */
+    onSuccess?: (data: any) => void;
+    /**
+     * Before service call callback.
+     */
+    onBeforeservicecall?: (filterFields: any) => any;
+    /**
+     * Toggle message function.
+     */
+    toggleMessage?: (state: boolean, msg: any, type: string, header: string) => void;
+    /**
+     * Result callback.
+     */
+    onResultCb?: (err: any, success: boolean) => void;
+}
+/**
+ * Combined props for the WmLiveFilter component, including base WaveMaker props.
+ */
+export type WmLiveFilterProps = Prettify<LiveFilterProps & BaseProps>;
+export declare const DEFAULT_PROPS: Partial<WmLiveFilterProps>;

package/components/data/live-filter/props.js

@@ -0,0 +1,9 @@
+const DEFAULT_PROPS = {
+  iconclass: "wi wi-filter-list",
+  pagesize: 20,
+  autoupdate: true,
+  enableemptyfilter: " "
+};
+export {
+  DEFAULT_PROPS
+};

package/components/data/live-form/index.d.ts

@@ -0,0 +1,15 @@
+import { WmLiveFormProps } from "./props";
+declare const WmLiveForm: {
+    (prop: WmLiveFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmLiveForm component is used to create and manage forms with live data.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-form--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-form--docs)
+ *
+ * @param props - {@link WmLiveFormProps}
+ */
+export default WmLiveForm;

package/components/data/live-form/index.js

@@ -0,0 +1,120 @@
+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 { createElement } from "react";
+import { DEFAULT_PROPS } from "./props";
+import Form from "../form";
+import { isDataSetWidget } from "../utils/field-data-utils";
+import replace from "lodash-es/replace";
+import { useCallback, useEffect, useRef } from "react";
+import { findOperationType } from "../utils";
+const WmLiveForm = (prop) => {
+  const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), prop);
+  const dynamicFieldsRef = useRef([]);
+  const isDataSourceUpdatedRef = useRef(false);
+  const formFieldsRef = useRef([]);
+  const dataSource = props.datasource;
+  function formSubmit(formData, success, error, operation) {
+    const primaryKeys = dataSource.execute("getPrimaryKey");
+    const operationType = operation != null ? operation : findOperationType(formData, primaryKeys);
+    if (dynamicFieldsRef.current.length > 0) {
+      dynamicFieldsRef.current.forEach((field) => {
+        const item = field.formKey;
+        formData[item] = field.dataset[formData[item] - 1];
+      });
+    }
+    const successWithOperationType = (res) => {
+      const payload = res && typeof res === "object" ? __spreadProps(__spreadValues({}, res), { operationType }) : { operationType };
+      if (typeof success === "function") {
+        success(payload);
+      }
+      return payload;
+    };
+    if (operationType === "delete") {
+      formData = __spreadProps(__spreadValues({}, formData), { row: formData });
+    } else {
+      formData = { inputFields: formData };
+    }
+    if (props.onBeforeservicecall) {
+      const event = new Event("submit");
+      props.onBeforeservicecall(event, operationType, formData, dataSource.options);
+    }
+    props.formSubmit(formData, operationType, successWithOperationType, error);
+  }
+  function getRelatedTableData(formField) {
+    const formKey = formField.formKey;
+    dataSource && dataSource.execute("getRelatedTableData", {
+      relatedField: formKey,
+      pagesize: formField.limit,
+      orderBy: formField.orderby ? replace(formField.orderby, /:/g, " ") : "",
+      filterFields: {},
+      filterExpr: formField.filterexpressions ? formField.filterexpressions : {}
+    }).then((response) => {
+      const primaryKeys = dataSource.execute("getRelatedTablePrimaryKeys", formKey);
+      const displayField = primaryKeys.length < 0 ? void 0 : primaryKeys[0];
+      const currentField = formFieldsRef.current.find((f) => f.formKey === formKey);
+      if (currentField && typeof currentField.updateFormWidgetDataset === "function") {
+        currentField.updateFormWidgetDataset(response, displayField);
+      }
+      dynamicFieldsRef.current.push({
+        formKey,
+        dataset: response.data,
+        displayField
+      });
+    });
+  }
+  const onDataSourceChange = useCallback((formFields) => {
+    formFieldsRef.current = formFields;
+    if (isDataSourceUpdatedRef.current) return;
+    formFields.forEach((field) => {
+      if (isDataSetWidget(field.widget) && field["isRelated"]) {
+        getRelatedTableData(field);
+        if (typeof field.setIsDataSetBound === "function") {
+          field.setIsDataSetBound(true);
+        }
+      }
+    });
+    if (formFields.length > 0) {
+      isDataSourceUpdatedRef.current = true;
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (props.destroy) {
+        props.destroy([props.name]);
+      }
+      isDataSourceUpdatedRef.current = false;
+    };
+  }, [props.destroy, props.name]);
+  return /* @__PURE__ */ createElement(
+    Form,
+    __spreadProps(__spreadValues({}, props), {
+      formSubmit,
+      onDataSourceChange,
+      widgettype: "live-form",
+      key: `live-form-${props.name}`
+    }),
+    props.children
+  );
+};
+WmLiveForm.displayName = "WmLiveForm";
+var live_form_default = WmLiveForm;
+export {
+  live_form_default as default
+};

package/components/data/live-form/props.d.ts

@@ -0,0 +1,50 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { FormProps } from "@wavemaker-ai/react-runtime/components/data/form/props";
+export interface LiveFormProps extends FormProps {
+    /**
+     * Type of validation to use for the form.
+     * @default "default"
+     */
+    validationtype?: string;
+    /**
+     * Layout type for the form.
+     * @default "inline"
+     */
+    formlayout?: string;
+    /**
+     * Message to show when a record is successfully inserted.
+     * @default "Record added successfully"
+     */
+    insertmessage?: string;
+    /**
+     * Message to show when a record is successfully updated.
+     * @default "Record updated successfully"
+     */
+    updatemessage?: string;
+    /**
+     * Message to show when a record is successfully deleted.
+     * @default "Record deleted successfully"
+     */
+    deletemessage?: string;
+    /**
+     * Data source for the live form.
+     */
+    datasource?: any;
+    /**
+     * Function to handle form submission.
+     */
+    formSubmit?: any;
+    /**
+     * Function to destroy the widget.
+     */
+    destroy?: (names: string[]) => void;
+    /**
+     * Before service call callback.
+     */
+    onBeforeservicecall?: (event: Event, operationType: string, formData: any, options: any) => void;
+}
+/**
+ * Combined props for the WmLiveForm component, including base WaveMaker props.
+ */
+export type WmLiveFormProps = Prettify<LiveFormProps & BaseProps>;
+export declare const DEFAULT_PROPS: Partial<WmLiveFormProps>;

package/components/data/live-form/props.js

@@ -0,0 +1,13 @@
+const DEFAULT_PROPS = {
+  validationtype: "default",
+  defaultmode: "view",
+  formlayout: "inline",
+  insertmessage: "Record added successfully",
+  updatemessage: "Record updated successfully",
+  deletemessage: "Record deleted successfully",
+  errormessage: "An error occured. Please try again!",
+  messagelayout: "Toaster"
+};
+export {
+  DEFAULT_PROPS
+};

package/components/data/pagination/components/BasicPagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { BasicPaginationProps } from "./props";
+export declare const BasicPagination: React.FC<BasicPaginationProps>;

package/components/data/pagination/components/BasicPagination.js

@@ -0,0 +1,153 @@
+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 } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import Pagination from "@mui/material/Pagination";
+import PaginationItem from "@mui/material/PaginationItem";
+const CUSTOM_CLASSES = [
+  "active",
+  "disabled",
+  "pagination-page",
+  "pagination-prev",
+  "pagination-next",
+  "pagination-first",
+  "pagination-last",
+  "page-item"
+];
+const PAGE_ITEM_CLASS = "page-item";
+const PAGE_LINK_CLASS = "page-link";
+const ICON_TO_CLASS_MAP = {
+  NavigateBeforeIcon: "pagination-prev",
+  KeyboardArrowLeftIcon: "pagination-prev",
+  NavigateNextIcon: "pagination-next",
+  KeyboardArrowRightIcon: "pagination-next",
+  FirstPageIcon: "pagination-first",
+  LastPageIcon: "pagination-last"
+};
+const BasicPagination = ({
+  pageCount,
+  currentPage,
+  dataSize,
+  maxResults,
+  boundarylinks = false,
+  directionlinks = true,
+  navigationsize,
+  navigationClass,
+  maxsize = 5,
+  onPageChange
+}) => {
+  const paginationRef = useRef(null);
+  const addNavigationClasses = useCallback(
+    (li, anchor, testId, isDisabled) => {
+      if (!testId || !ICON_TO_CLASS_MAP[testId]) return;
+      const paginationClass = ICON_TO_CLASS_MAP[testId];
+      li.classList.add(paginationClass, PAGE_ITEM_CLASS);
+      if (isDisabled) {
+        li.classList.add("disabled");
+      }
+    },
+    []
+  );
+  const updateClasses = useCallback(() => {
+    if (!paginationRef.current) return;
+    const allLis = paginationRef.current.querySelectorAll(".MuiPagination-ul > li");
+    allLis.forEach((li) => {
+      var _a;
+      li.classList.remove(...CUSTOM_CLASSES);
+      const anchor = li.querySelector("a");
+      if (!anchor) return;
+      const isNavigationButton = anchor.classList.contains("MuiPaginationItem-previousNext");
+      const isPageButton = anchor.classList.contains("MuiPaginationItem-page");
+      const isDisabled = anchor.classList.contains("Mui-disabled");
+      const isSelected = anchor.classList.contains("Mui-selected");
+      if (isNavigationButton) {
+        const svg = anchor.querySelector("svg");
+        const testId = (_a = svg == null ? void 0 : svg.getAttribute("data-testid")) != null ? _a : null;
+        addNavigationClasses(li, anchor, testId, isDisabled);
+      } else if (isPageButton) {
+        li.classList.add("pagination-page", PAGE_ITEM_CLASS);
+        if (isSelected) {
+          li.classList.add("active");
+        }
+      }
+      if (!anchor.classList.contains(PAGE_LINK_CLASS)) {
+        anchor.classList.add(PAGE_LINK_CLASS);
+      }
+    });
+  }, [addNavigationClasses]);
+  useEffect(() => {
+    updateClasses();
+    const rafId = requestAnimationFrame(() => {
+      updateClasses();
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [currentPage, pageCount, updateClasses]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: paginationRef,
+      component: "nav",
+      role: "navigation",
+      className: "pagination basic",
+      "aria-label": `Showing Page ${currentPage} of ${pageCount} pages`,
+      sx: {
+        // Hide MUI SVG icons for navigation buttons since CSS ::before will provide the icons
+        "& .MuiPaginationItem-previousNext .MuiPaginationItem-icon": {
+          display: "none"
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          count: pageCount,
+          page: currentPage,
+          onChange: onPageChange,
+          showFirstButton: boundarylinks,
+          showLastButton: boundarylinks,
+          hidePrevButton: !directionlinks,
+          hideNextButton: !directionlinks,
+          size: navigationsize === "small" ? "small" : "medium",
+          siblingCount: Math.floor(maxsize / 2),
+          classes: {
+            ul: clsx("pagination", "basic", navigationClass)
+          },
+          renderItem: (item) => /* @__PURE__ */ jsx(
+            PaginationItem,
+            __spreadProps(__spreadValues({}, item), {
+              sx: {
+                cursor: "pointer"
+              },
+              component: "a",
+              "aria-current": item.selected ? "true" : void 0,
+              "aria-disabled": item.disabled ? "true" : void 0
+            })
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  BasicPagination
+};

package/components/data/pagination/components/ClassicPagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ClassicPaginationProps } from "./props";
+export declare const ClassicPagination: React.FC<ClassicPaginationProps>;

package/components/data/pagination/components/ClassicPagination.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import InputBase from "@mui/material/InputBase";
+import { styled } from "@mui/material/styles";
+import { APP_LOCALE } from "../../list/utils/constants";
+const StyledPaginationList = styled("ul")(() => ({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  padding: 0,
+  margin: 0,
+  listStyle: "none"
+}));
+const StyledPaginationItem = styled("li")(() => ({
+  margin: "0 2px",
+  "&.disabled": {
+    opacity: 0.38,
+    pointerEvents: "none"
+  }
+}));
+const StyledPageInput = styled(InputBase)(() => ({
+  width: "50px",
+  textAlign: "center",
+  "& input": {
+    textAlign: "center",
+    padding: "0 4px"
+  }
+}));
+const ClassicPagination = ({
+  currentPage,
+  pageCount,
+  dataSize,
+  maxResults,
+  navigationClass,
+  showrecordcount = false,
+  isDisableFirst,
+  isDisablePrevious,
+  isDisableNext,
+  isDisableLast,
+  isDisableCurrent,
+  isDisableCount,
+  onNavigate,
+  onInputChange,
+  onModelChange,
+  onKeyDown
+}) => {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs(StyledPaginationList, { className: clsx("pagination", "advanced", navigationClass), children: [
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx({ disabled: isDisableFirst }), children: /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        title: APP_LOCALE.LABEL_FIRST,
+        name: "first",
+        onClick: (e) => onNavigate("first", e),
+        disabled: isDisableFirst,
+        "aria-disabled": isDisableFirst ? "true" : "false",
+        size: "small",
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "wi wi-first-page" }) }),
+          /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
+            "Go to first page ",
+            isDisableFirst ? " , Disabled" : ""
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx({ disabled: isDisablePrevious }), children: /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        title: APP_LOCALE.LABEL_PREVIOUS,
+        name: "prev",
+        onClick: (e) => onNavigate("prev", e),
+        disabled: isDisablePrevious,
+        "aria-disabled": isDisablePrevious ? "true" : "false",
+        size: "small",
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-left" }) }),
+          /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
+            "Go to previous page ",
+            isDisablePrevious ? ", Disabled" : ""
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: "pagecount", children: /* @__PURE__ */ jsx(Box, { component: "span", "aria-label": "Change Page Number", children: /* @__PURE__ */ jsx(
+      StyledPageInput,
+      {
+        value: currentPage,
+        onChange: onInputChange,
+        onBlur: onModelChange,
+        onKeyDown,
+        disabled: isDisableCurrent,
+        inputProps: {
+          "aria-label": `Showing Page ${currentPage} of ${pageCount}`,
+          type: "number",
+          min: 1,
+          max: pageCount
+        },
+        inputRef
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: "disabled", children: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { mx: 1 }, hidden: isDisableCount, children: [
+      "/ ",
+      pageCount
+    ] }) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx({ disabled: isDisableNext }), children: /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        title: APP_LOCALE.LABEL_NEXT,
+        name: "next",
+        onClick: (e) => onNavigate("next", e),
+        disabled: isDisableNext,
+        "aria-disabled": isDisableNext ? "true" : "false",
+        size: "small",
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-right" }) }),
+          /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
+            "Go to next page ",
+            isDisableNext ? " , Disabled" : ""
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx({ disabled: isDisableLast }), children: /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        title: APP_LOCALE.LABEL_LAST,
+        name: "last",
+        onClick: (e) => onNavigate("last", e),
+        disabled: isDisableLast,
+        "aria-disabled": isDisableLast ? "true" : "false",
+        size: "small",
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", { className: "wi wi-last-page" }) }),
+          /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
+            "Go to last page ",
+            isDisableLast ? " , Disabled" : ""
+          ] })
+        ]
+      }
+    ) }),
+    showrecordcount && /* @__PURE__ */ jsx(StyledPaginationItem, { className: "totalcount disabled", children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "span",
+        tabIndex: -1,
+        "aria-disabled": "true",
+        sx: {
+          display: "block",
+          padding: "6px 12px",
+          fontSize: "14px",
+          userSelect: "none"
+        },
+        children: [
+          APP_LOCALE.LABEL_TOTAL_RECORDS,
+          ": ",
+          dataSize
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  ClassicPagination
+};

package/components/data/pagination/components/InlinePagination.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const InlineNavigation: React.FC<{
+    navigation: string;
+    currentPage: number;
+    totalPages: number;
+    noDataFound: boolean;
+    onPageChange: (page: number) => void;
+    children: React.ReactNode;
+    isLoading?: boolean;
+    showNavigation?: boolean;
+}>;