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

package/components/input/default/switch/prop.d.ts

@@ -0,0 +1,155 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents a single item in the switch dataset.
+ */
+export interface DataSetItem {
+    /** Unique key identifying the item. */
+    key: string;
+    /** Value of the item. */
+    value: string | number | boolean;
+    /** Display label for the item. */
+    label: string;
+    /** Whether the item is currently selected. */
+    selected?: boolean;
+    /** The original data object. */
+    dataObject?: Record<string, unknown>;
+    /** Icon CSS class for the item. */
+    icon?: string;
+    /** Allow dynamic property access for display fields. */
+    [key: string]: unknown;
+}
+/**
+ * Props specific to the WmSwitch component.
+ */
+export interface SwitchProps {
+    /**
+     * The data source bound to the switch (comma-separated string).
+     */
+    dataset?: string;
+    /**
+     * Transformed dataset items (injected by HOC).
+     */
+    datasetItems?: DataSetItem[];
+    /**
+     * The field from the dataset to use as the data value.
+     */
+    datafield?: string;
+    /**
+     * Source for binding data values.
+     */
+    datavaluesource?: Record<string, unknown>;
+    /**
+     * The currently selected data value.
+     */
+    datavalue?: string;
+    /**
+     * Expression used to compute the display text.
+     */
+    displayExpression?: string;
+    /**
+     * The field from the dataset to display as the label.
+     */
+    displayfield?: string;
+    /**
+     * Display label override.
+     */
+    displaylabel?: string;
+    /**
+     * The field from the dataset to use as the display image.
+     */
+    displayimagesrc?: string;
+    /**
+     * Field(s) to order items by.
+     */
+    orderby?: string;
+    /**
+     * The field to group items by.
+     */
+    groupby?: string;
+    /**
+     * Field used for comparing values.
+     */
+    compareby?: string;
+    /**
+     * Whether to use keys as values.
+     */
+    usekeys?: boolean;
+    /**
+     * Whether to allow empty/no selection.
+     */
+    allowempty?: boolean;
+    /**
+     * Whether the value accepts an array.
+     */
+    acceptsArray?: boolean;
+    /**
+     * Whether multiple selections are allowed.
+     */
+    multiple?: boolean;
+    /**
+     * Whether the switch is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether a selection is required.
+     */
+    required?: boolean;
+    /**
+     * The unique name of the switch widget (required).
+     */
+    name: string;
+    /**
+     * CSS class for the switch icon.
+     */
+    iconclass?: string;
+    iconurl?: string;
+    /**
+     * CSS class for the checked state icon.
+     */
+    checkediconclass?: string;
+    checkediconurl?: string;
+    /**
+     * The current value of the switch.
+     */
+    value?: string | string[];
+    /**
+     * Value pending processing.
+     */
+    toBeProcessedValue?: string | string[];
+    /**
+     * Callback invoked when the switch value changes.
+     */
+    onChange?: (event: React.MouseEvent, widget: Record<string, unknown>, newVal: string | string[], oldVal: string | string[]) => void;
+    /**
+     * Callback invoked on blur.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback invoked when the switch is clicked.
+     */
+    onClick?: (event: React.MouseEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the switch.
+     */
+    onMouseEnter?: (event: React.MouseEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the switch.
+     */
+    onMouseLeave?: (event: React.MouseEvent, widget: Record<string, unknown>) => void;
+    /**
+     * Formatted display value.
+     */
+    displayValue?: string;
+    /**
+     * Data path for nested data access.
+     */
+    dataPath?: string;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+}
+/**
+ * Combined props for the WmSwitch component, including base WaveMaker props.
+ */
+export type WmSwitchProps = Prettify<SwitchProps & BaseProps>;

package/components/input/epoch/date/components/DatePickerPopover.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DatePickerPopoverProps } from "../props";
+declare const DatePickerPopover: React.FC<DatePickerPopoverProps>;
+export default DatePickerPopover;

package/components/input/epoch/date/components/DatePickerPopover.js

@@ -0,0 +1,267 @@
+var __defProp = Object.defineProperty;
+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 __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 { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { Popover, Paper, Box, Button } from "@mui/material";
+import moment from "moment-timezone";
+import { StyledDateCalendar, StyledYearCalendar } from "../styled";
+const DatePickerPopover = (props) => {
+  const _a = props, {
+    open,
+    anchorEl,
+    onClose,
+    adaptiveposition,
+    showbuttonbar,
+    todaybutton,
+    clearbutton,
+    todaybuttonlabel,
+    clearbuttonlabel,
+    isNavigationDisabled,
+    getDateObj,
+    viewmode,
+    calendarViewMode,
+    calendarDate,
+    selectedDate,
+    selectfromothermonth,
+    showweeks,
+    isDateDisabled,
+    handleYearChange,
+    handleMonthChange,
+    handleCalendarChange,
+    setCalendarViewMode,
+    setCalendarDate,
+    handleTodayClick,
+    handleClearClick,
+    selectedLocale
+  } = _a, restProps = __objRest(_a, [
+    "open",
+    "anchorEl",
+    "onClose",
+    "adaptiveposition",
+    "showbuttonbar",
+    "todaybutton",
+    "clearbutton",
+    "todaybuttonlabel",
+    "clearbuttonlabel",
+    "isNavigationDisabled",
+    "getDateObj",
+    "viewmode",
+    "calendarViewMode",
+    "calendarDate",
+    "selectedDate",
+    "selectfromothermonth",
+    "showweeks",
+    "isDateDisabled",
+    "handleYearChange",
+    "handleMonthChange",
+    "handleCalendarChange",
+    "setCalendarViewMode",
+    "setCalendarDate",
+    "handleTodayClick",
+    "handleClearClick",
+    "selectedLocale"
+  ]);
+  const currentLocale = useMemo(() => selectedLocale || "en", [selectedLocale]);
+  useEffect(() => {
+    moment.updateLocale(currentLocale, {
+      monthsShort: Array.from({ length: 12 }, (_, i) => moment().month(i).format("MMM")),
+      months: Array.from({ length: 12 }, (_, i) => moment().month(i).format("MMMM"))
+    });
+    return () => {
+      moment.locale(currentLocale);
+    };
+  }, [currentLocale]);
+  const renderCalendarView = () => {
+    const minDateMoment = restProps.mindate ? moment(getDateObj(restProps.mindate)) : void 0;
+    const maxDateMoment = restProps.maxdate ? moment(getDateObj(restProps.maxdate)) : void 0;
+    const isAtMinMonth = (minDateMoment == null ? void 0 : minDateMoment.isValid()) && calendarDate.isValid() && calendarDate.clone().startOf("month").isSameOrBefore(minDateMoment.clone().startOf("month"));
+    const isAtMaxMonth = (maxDateMoment == null ? void 0 : maxDateMoment.isValid()) && calendarDate.isValid() && calendarDate.clone().startOf("month").isSameOrAfter(maxDateMoment.clone().startOf("month"));
+    const commonProps = {
+      minDate: minDateMoment,
+      maxDate: maxDateMoment,
+      disabled: isNavigationDisabled
+    };
+    const dateCalendarSlotProps = {
+      previousIconButton: { disabled: isAtMinMonth },
+      nextIconButton: { disabled: isAtMaxMonth }
+    };
+    switch (viewmode) {
+      case "year":
+        return /* @__PURE__ */ jsx(
+          StyledYearCalendar,
+          __spreadValues({
+            value: selectedDate || calendarDate,
+            onChange: handleYearChange
+          }, commonProps)
+        );
+      case "month":
+        switch (calendarViewMode) {
+          case "year":
+            return /* @__PURE__ */ jsx(
+              StyledYearCalendar,
+              __spreadValues({
+                value: calendarDate,
+                onChange: handleYearChange
+              }, commonProps)
+            );
+          default:
+            const monthViewDate = calendarDate.isValid() ? calendarDate : moment();
+            return /* @__PURE__ */ jsx(
+              StyledDateCalendar,
+              __spreadValues({
+                value: monthViewDate,
+                onChange: handleMonthChange,
+                views: ["month"],
+                view: "month",
+                openTo: "month",
+                referenceDate: monthViewDate,
+                onViewChange: (newView) => {
+                  if (!isNavigationDisabled && newView) {
+                    setCalendarViewMode(newView);
+                  }
+                },
+                dayOfWeekFormatter: (date) => {
+                  return date.locale(currentLocale).format("ddd");
+                },
+                slotProps: dateCalendarSlotProps
+              }, commonProps)
+            );
+        }
+      default:
+        switch (calendarViewMode) {
+          case "year":
+            return /* @__PURE__ */ jsx(
+              StyledYearCalendar,
+              __spreadValues({
+                value: calendarDate,
+                onChange: handleYearChange
+              }, commonProps)
+            );
+          case "month":
+            return /* @__PURE__ */ jsx(
+              StyledDateCalendar,
+              __spreadValues({
+                value: calendarDate,
+                onChange: handleMonthChange,
+                views: ["month"],
+                view: "month",
+                onViewChange: (newView) => {
+                  if (!isNavigationDisabled && newView) {
+                    setCalendarViewMode(newView);
+                  }
+                },
+                dayOfWeekFormatter: (date) => {
+                  return date.locale(currentLocale).format("ddd");
+                },
+                slotProps: dateCalendarSlotProps
+              }, commonProps)
+            );
+          default:
+            return /* @__PURE__ */ jsx(
+              StyledDateCalendar,
+              __spreadValues({
+                value: calendarDate,
+                onChange: handleCalendarChange,
+                showDaysOutsideCurrentMonth: selectfromothermonth,
+                displayWeekNumber: showweeks,
+                views: ["day", "year", "month"],
+                view: calendarViewMode,
+                slotProps: dateCalendarSlotProps,
+                onViewChange: (newView) => {
+                  if (!isNavigationDisabled && newView) {
+                    setCalendarViewMode(newView);
+                  }
+                },
+                onYearChange: (date) => {
+                  if (!isNavigationDisabled && date) {
+                    setCalendarDate(date);
+                  }
+                },
+                onMonthChange: (date) => {
+                  if (!isNavigationDisabled && date) {
+                    setCalendarDate(date);
+                  }
+                },
+                shouldDisableDate: isDateDisabled,
+                dayOfWeekFormatter: (date) => {
+                  return date.locale(currentLocale).format("ddd");
+                }
+              }, commonProps)
+            );
+        }
+    }
+  };
+  const calendarWidthVar = showweeks ? { "--wm-datepicker-calendar-width": "420px" } : { "--wm-datepicker-calendar-width": "370px" };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open,
+      anchorEl,
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: adaptiveposition ? "right" : "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: adaptiveposition ? "right" : "left"
+      },
+      className: "app-date wm-datepicker-popover",
+      style: calendarWidthVar,
+      children: /* @__PURE__ */ jsxs(Paper, { elevation: 0, className: "wm-datepicker-popover-paper", children: [
+        renderCalendarView(),
+        showbuttonbar && (todaybutton || clearbutton) && /* @__PURE__ */ jsxs(Box, { className: "wm-datepicker-button-bar", children: [
+          todaybutton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              onClick: handleTodayClick,
+              className: "btn  today-btn wm-datepicker-bar-btn",
+              disabled: isNavigationDisabled && !moment().isSame(moment(getDateObj(restProps.mindate)), "day"),
+              children: todaybuttonlabel
+            }
+          ),
+          clearbutton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              onClick: handleClearClick,
+              className: "btn  clear-btn wm-datepicker-bar-btn",
+              children: clearbuttonlabel
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+var DatePickerPopover_default = DatePickerPopover;
+export {
+  DatePickerPopover_default as default
+};

package/components/input/epoch/date/index.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+declare const WmDateStandalone: React.ComponentType<import("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper").BaseProps & import("@wavemaker-ai/react-runtime/higherOrder/BaseDateTime").CustomProps & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
+export { WmDateStandalone as WmDate };
+/**
+ * The WmDate component provides a date picker input with calendar popup and formatting.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/input-date--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/input-date--docs)
+ *
+ * @param props - {@link WmDateProps}
+ */
+declare const _default: React.ComponentType<{
+    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;
+    id?: string;
+    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;
+    formControlName?: string;
+    required?: boolean;
+    outputformat?: string;
+    mindate?: string | Date;
+    maxdate?: string | Date;
+    excludedays?: number[];
+    excludedates?: string[] | Date[];
+    dataentrymode?: "date" | "time" | "datetime";
+    datepattern?: string;
+    timepattern?: string;
+    showweeks?: boolean;
+    selectfromothermonth?: boolean;
+    todaybutton?: boolean;
+    clearbutton?: boolean;
+    todaybuttonlabel?: string;
+    clearbuttonlabel?: string;
+    showcustompicker?: boolean;
+    adaptiveposition?: boolean;
+    widgetSubType?: string;
+    context?: import("@wavemaker-ai/react-runtime/higherOrder/BaseDateTime").DateTimeContext;
+    invokeEventCallback?: (eventName: string, payload: any) => void;
+    formControlRegistry?: import("@wavemaker-ai/react-runtime/higherOrder/BaseDateTime").FormControlRegistry;
+}>;
+export default _default;