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

package/components/data/list/props.d.ts

@@ -0,0 +1,428 @@
+import type { SyntheticEvent } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { DefaultEventHandler } from "./components/props";
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+/**
+ * Navigation types supported by the List component.
+ */
+export type INavigation = "None" | "Basic" | "Pager" | "Classic" | "Advanced" | "Inline" | "On-Demand" | "Scroll";
+/**
+ * Direction types for the List component.
+ */
+export type IDirection = "horizontal" | "vertical";
+/**
+ * Alignment types for the List component.
+ */
+export type IAlignment = "left" | "center" | "right";
+/**
+ * Column alignment types for the List component.
+ */
+export type IColumnAlignment = "start" | "center" | "end";
+/**
+ * Shape of the data for a single list item.
+ */
+export type ListItemData = Record<string, unknown> & {
+    _wmListItemId?: string;
+};
+/**
+ * Per-item disable flag: static boolean or callback evaluated per list row.
+ */
+export type DisableItemProp<T = ListItemData> = boolean | ((item: T, index: number) => boolean);
+export type ListItemEventHandler = (event: React.MouseEvent, widget: unknown) => void;
+export type ListPageEventHandler = (event: React.MouseEvent | null, page: number) => void;
+export type ListReorderEventHandler<T = ListItemData> = (event: React.MouseEvent | null, data: T[], changedItem: T) => void;
+export type ListSelectionLimitExceededHandler = (event: React.MouseEvent | null, widget: unknown) => void;
+export type ListBeforeDataRenderHandler<T = ListItemData> = (widget: unknown, data: T[]) => void;
+export type ListSelectHandler<T = ListItemData> = (widget: unknown, selectedItem: T | null, event?: SyntheticEvent | null) => void;
+export type ListPaginationChangeHandler = (event: React.MouseEvent | null, widget: unknown, index: number) => void;
+export type ListSetRecordHandler<T = ListItemData> = (event: React.MouseEvent | null, widget: unknown, index: number, data: T) => void;
+export type ListRenderItemHandler<T = ListItemData> = (item: T, index: number) => React.ReactNode;
+/**
+ * Props specific to the WmList component.
+ */
+export interface ListProps<T = ListItemData> {
+    /**
+     * Whether to show boundary links in pagination.
+     */
+    boundarylinks?: boolean;
+    /**
+     * Whether the list items are collapsible.
+     */
+    collapsible?: boolean;
+    /**
+     * Date format for list items.
+     */
+    dateformat?: string;
+    /**
+     * The collection of data items to display.
+     */
+    dataset?: T[];
+    /**
+     * The data source for the list.
+     */
+    datasource?: LiveVariableConfig;
+    /**
+     * The layout direction of the list.
+     * @default "vertical"
+     */
+    direction?: IDirection;
+    /**
+     * Whether to disable list items (boolean or per-item callback).
+     */
+    disableitem?: DisableItemProp<T>;
+    /**
+     * Whether to enable reordering of list items.
+     */
+    enablereorder?: boolean;
+    /**
+     * Property name to group the list items by.
+     */
+    groupby?: string;
+    /**
+     * CSS class for the list icon.
+     */
+    iconclass?: string;
+    /**
+     * URL for the list icon (.svg renders inline, other URLs as image).
+     */
+    iconurl?: string;
+    /**
+     * CSS class or function returning a class for each list item.
+     */
+    itemclass?: string | ((item: T) => string | null | undefined);
+    /**
+     * Number of items to show per row in grid layout.
+     */
+    itemsperrow?: string;
+    /**
+     * CSS class for the list container.
+     */
+    listclass?: string;
+    /**
+     * Horizontal alignment of the list.
+     */
+    horizontalalign?: IAlignment;
+    /**
+     * Column alignment of the list items.
+     */
+    columnalign?: IColumnAlignment;
+    /**
+     * Whether to allow multiple items to be selected.
+     */
+    multiselect?: boolean;
+    /**
+     * Message to display while loading data.
+     */
+    loadingdatamsg?: string;
+    /**
+     * Number of skeleton list items shown while loading.
+     * @default 5
+     */
+    skeletonRows?: number;
+    /**
+     * CSS class for the loading icon.
+     */
+    loadingicon?: string;
+    /**
+     * URL for the loading icon (.svg renders inline, other URLs as image).
+     */
+    loadingiconurl?: string;
+    /**
+     * Maximum size of the collection.
+     */
+    maxsize?: number;
+    /**
+     * State persistence handler type.
+     */
+    statehandler?: StorageType;
+    /**
+     * The type of navigation/pagination to use.
+     */
+    navigation?: INavigation;
+    /**
+     * Alignment of the navigation controls.
+     */
+    navigationalign?: IAlignment;
+    /**
+     * Message to display when no data is found.
+     */
+    nodatamessage?: string;
+    /**
+     * Message to display for On-Demand loading.
+     */
+    ondemandmessage?: string;
+    /**
+     * Property name to order the list items by.
+     */
+    orderby?: string;
+    /**
+     * CSS class for the pagination controls.
+     */
+    paginationclass?: string;
+    /**
+     * Number of items per page.
+     */
+    pagesize?: number;
+    /**
+     * Whether to automatically select the first item on load.
+     */
+    selectfirstitem?: boolean;
+    /**
+     * Programmatically selected item.
+     */
+    selecteditem?: T | T[] | null;
+    /**
+     * Maximum number of items that can be selected.
+     */
+    selectionlimit?: number;
+    /**
+     * Whether to show the item count.
+     */
+    showcount?: boolean;
+    /**
+     * Whether to show the record count.
+     */
+    showrecordcount?: boolean;
+    /**
+     * Whether to allow the user to change the page size.
+     */
+    allowpagesizechange?: boolean;
+    /**
+     * Available page size options.
+     */
+    pagesizeoptions?: string;
+    /**
+     * Subheading of the list.
+     */
+    subheading?: string;
+    /**
+     * Title of the list.
+     */
+    title?: string;
+    /**
+     * Whether to hide the horizontal scrollbar.
+     */
+    hidehorizontalscrollbar?: boolean;
+    /**
+     * Widgets for the currently selected item.
+     */
+    selectedItemWidgets?: Array<any> | any;
+    /**
+     * Callback for selection event.
+     */
+    onSelect?: ListSelectHandler<T>;
+    /**
+     * Callback for click event on a list item.
+     */
+    onClick?: ListItemEventHandler;
+    /**
+     * Callback for double click event on a list item.
+     */
+    onDblclick?: ListItemEventHandler;
+    /**
+     * Callback for mouse enter event on a list item.
+     */
+    onMouseEnter?: ListItemEventHandler;
+    /**
+     * Callback for mouse leave event on a list item.
+     */
+    onMouseLeave?: ListItemEventHandler;
+    /**
+     * Callback for reorder event.
+     */
+    onReorder?: ListReorderEventHandler<T>;
+    /**
+     * Callback for when selection limit is exceeded.
+     */
+    onSelectionlimitexceed?: ListSelectionLimitExceededHandler;
+    /**
+     * Callback before data is rendered.
+     */
+    onBeforedatarender?: ListBeforeDataRenderHandler<T>;
+    /**
+     * Callback after data is rendered.
+     */
+    onRender?: ListBeforeDataRenderHandler<T>;
+    /**
+     * Callback for pagination change event.
+     */
+    onPaginationchange?: ListPaginationChangeHandler;
+    /**
+     * Callback for setting a record.
+     */
+    onSetrecord?: ListSetRecordHandler<T>;
+    /**
+     * Callback for page change event.
+     */
+    onPageChange?: ListPageEventHandler;
+    /**
+     * Custom render function for list items.
+     */
+    renderItem?: ListRenderItemHandler<T>;
+    /**
+     * Tab index of the list.
+     */
+    tabIndex?: number;
+    /**
+     * Whether to enable pull-to-refresh functionality.
+     */
+    pulltorefresh?: boolean;
+    /**
+     * Property name to use for the data field.
+     */
+    datafield?: string;
+    /**
+     * Property name to use for the display field.
+     */
+    displayfield?: string;
+    /**
+     * Function to get the display expression for an item.
+     */
+    getDisplayExpression?: (data: T, index?: number) => string;
+    /**
+     * Label for the display field.
+     */
+    displaylabel?: string;
+    /**
+     * Whether to show navigation controls.
+     */
+    showNavigation?: boolean;
+    itemAttrs?: (item: T, index: number) => Record<string, unknown>;
+    layoutClassName?: string;
+    /**
+     * layout props `direction` `"row"` / `"column"` or any of
+     */
+    wrap?: string | boolean;
+    alignment?: string;
+    gap?: string;
+    /** Lowercase attribute name as in Angular/DOM (`columngap`) */
+    columngap?: string;
+    /**
+     * Whether this is a standalone list.
+     */
+    standalone?: boolean;
+    layoutWidth?: string;
+    layoutHeight?: string;
+}
+/**
+ * Props specific to the WmListItem component.
+ */
+export interface ListItemProps<T = ListItemData> {
+    /**
+     * The data item for this list item.
+     */
+    item?: T;
+    /**
+     * Whether this item is disabled.
+     */
+    disableItem?: boolean;
+    /**
+     * CSS class for this list item.
+     */
+    itemClass?: string;
+    /**
+     * Index of this item in the list.
+     */
+    index?: number;
+    /**
+     * Whether this is the first item in the list.
+     */
+    isFirst?: boolean;
+    /**
+     * Whether this is the last item in the list.
+     */
+    isLast?: boolean;
+    /**
+     * Track ID for this list item.
+     */
+    trackId?: string;
+    /**
+     * Callback for click event on the item.
+     */
+    onItemClick?: DefaultEventHandler;
+    /**
+     * Callback for double click event on the item.
+     */
+    onItemDoubleClick?: DefaultEventHandler;
+    /**
+     * Callback for mouse enter event on the item.
+     */
+    onItemMouseEnter?: DefaultEventHandler;
+    /**
+     * Callback for mouse leave event on the item.
+     */
+    onItemMouseLeave?: DefaultEventHandler;
+    /**
+     * Tab index of the item.
+     */
+    tabIndex?: number;
+    /**
+     * Whether this item is currently active.
+     */
+    isActive?: boolean;
+    /**
+     * Whether reordering is enabled for this item.
+     */
+    enableReorder?: boolean;
+    /**
+     * Unique ID for the item.
+     */
+    id?: string;
+    itemLayoutAttrs?: Record<string, unknown>;
+}
+/**
+ * Combined props for the WmList component, including base WaveMaker props.
+ */
+export type WmListProps<T = ListItemData> = Prettify<ListProps<T> & Omit<BaseProps, "onClick" | "onDoubleClick" | "onMouseEnter" | "onMouseLeave">>;
+/**
+ * Combined props for the WmListItem component, including base WaveMaker props.
+ */
+export type WmListItemProps<T = ListItemData> = Prettify<ListItemProps<T> & BaseProps>;
+export interface ListSelectionState<T = ListItemData> {
+    selectedItems: T[];
+    activeItems: Set<T>;
+    firstSelectedItem: T | null;
+}
+export interface ListState {
+    selectedItems: ListItemData[];
+    setSelectedItems: (items: ListItemData[]) => void;
+    activeItems: Set<ListItemData>;
+    setActiveItems: (items: Set<ListItemData>) => void;
+    firstSelectedItem: ListItemData | null;
+    setFirstSelectedItem: (item: ListItemData | null) => void;
+}
+export interface ListWidgetMethods {
+    getItemByIndexOrModel: (val: number | ListItemData) => ListItemData | undefined;
+    selectItem: (val: number | ListItemData, statePersistenceTriggered?: boolean) => void;
+    deselectItem: (val: number | ListItemData) => void;
+    getItem: (index: number) => ListItemData | undefined;
+    getIndex: (item: ListItemData) => number;
+    clear: () => void;
+    getWidgets: (widgetName: string, index?: number) => any;
+    selectPageSize: (newPageSize: number) => void;
+}
+/**
+ * Interface for list widget instance with all properties
+ * This represents the widget proxy object returned by useWidgetProxy
+ */
+export interface ListWidgetInstance<T = ListItemData> {
+    $index?: number;
+    item?: T;
+    context?: {
+        $index: number;
+        $count: number;
+        $implicit: T;
+        item: T;
+    };
+    _wmListItemId?: string;
+    [key: string]: any;
+}
+export interface ListItemContextType<T = ListItemData> {
+    item: T;
+    index: number;
+    itemRef: React.RefObject<HTMLElement | null>;
+    isFirst: boolean;
+    isLast: boolean;
+    currentItemWidgets: Record<string, unknown>;
+}

package/components/data/list/templates/media-template.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const MediaWmListtemplate: React.FC;

package/components/data/list/templates/media-template.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Typography, Button } from "@mui/material";
+import { useContext } from "react";
+import { ListItemContext } from "../components/ListItem";
+import Image from "next/image";
+const MediaWmListtemplate = () => {
+  const context = useContext(ListItemContext);
+  const item = (context == null ? void 0 : context.item) || {};
+  return /* @__PURE__ */ jsxs(Box, { component: "div", className: "media", children: [
+    /* @__PURE__ */ jsx(Box, { component: "div", className: "media-left", children: /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: (item == null ? void 0 : item.picurl) || "/placeholder.png",
+        alt: "Profile",
+        className: "media-object wm-img-circle",
+        width: 32,
+        height: 32
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Box, { component: "div", className: "media-body", children: [
+      /* @__PURE__ */ jsx(Typography, { className: "media-heading", variant: "h6", children: (item == null ? void 0 : item.title) || "No Name" }),
+      /* @__PURE__ */ jsx(Typography, { className: "text-muted", variant: "body2", children: (item == null ? void 0 : item.description) || "No Description" })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { component: "div", className: "media-right media-top", children: /* @__PURE__ */ jsx(Button, { className: "btn-transparent", "aria-label": "Share", children: /* @__PURE__ */ jsx("i", { className: "wi wi-share fa-2x" }) }) })
+  ] });
+};
+export {
+  MediaWmListtemplate
+};

package/components/data/list/utils/constants.d.ts

@@ -0,0 +1,51 @@
+import { IPaginationMeta } from "../components/props";
+/**
+ * Default classes and constants for the List component
+ */
+export declare const DEFAULT_CLS: "app-livelist app-panel";
+export declare const LIST_DEFAULTS: {
+    readonly PAGESIZE: 20;
+    readonly PAGESIZE_FOR_MODAL_VARIABLE: 20;
+    readonly MAX_SIZE: 5;
+    readonly BOUNDARY_LINKS: false;
+    readonly COLLAPSIBLE: false;
+    readonly MULTISELECT: false;
+    readonly SELECT_FIRST_ITEM: false;
+    readonly SELECTION_LIMIT: 0;
+    readonly SHOW_COUNT: false;
+    readonly SHOW_RECORD_COUNT: false;
+};
+export declare const APP_LOCALE: {
+    readonly LABEL_FIRST: "First";
+    readonly LABEL_PREVIOUS: "Previous";
+    readonly LABEL_NEXT: "Next";
+    readonly LABEL_LAST: "Last";
+    readonly LABEL_TOTAL_RECORDS: "Total Records";
+    readonly LABEL_ICON: "Icon";
+    readonly LABEL_ITEMS_PER_PAGE: "Items per page";
+};
+export declare const LIST_MESSAGES: {
+    readonly LOADING: "Loading...";
+    readonly NO_DATA: "No data found";
+    readonly LOAD_MORE: "Load More";
+};
+export declare const LIST_NAVIGATION_TYPES: {
+    readonly NONE: "None";
+    readonly BASIC: "Basic";
+    readonly PAGER: "Pager";
+    readonly CLASSIC: "Classic";
+    readonly ADVANCED: "Advanced";
+    readonly INLINE: "Inline";
+    readonly ON_DEMAND: "On-Demand";
+    readonly SCROLL: "Scroll";
+};
+export declare const LIST_DIRECTION: {
+    readonly VERTICAL: "vertical";
+    readonly HORIZONTAL: "horizontal";
+};
+export declare const LIST_ALIGN: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+    readonly RIGHT: "right";
+};
+export declare const DEFAULT_PAGINATION_META: IPaginationMeta;

package/components/data/list/utils/constants.js

@@ -0,0 +1,68 @@
+const DEFAULT_CLS = "app-livelist app-panel";
+const LIST_DEFAULTS = {
+  // updated to 20 from 10 as per angular code
+  PAGESIZE: 20,
+  PAGESIZE_FOR_MODAL_VARIABLE: 20,
+  MAX_SIZE: 5,
+  BOUNDARY_LINKS: false,
+  COLLAPSIBLE: false,
+  MULTISELECT: false,
+  SELECT_FIRST_ITEM: false,
+  SELECTION_LIMIT: 0,
+  SHOW_COUNT: false,
+  SHOW_RECORD_COUNT: false
+};
+const APP_LOCALE = {
+  LABEL_FIRST: "First",
+  LABEL_PREVIOUS: "Previous",
+  LABEL_NEXT: "Next",
+  LABEL_LAST: "Last",
+  LABEL_TOTAL_RECORDS: "Total Records",
+  LABEL_ICON: "Icon",
+  LABEL_ITEMS_PER_PAGE: "Items per page"
+};
+const LIST_MESSAGES = {
+  LOADING: "Loading...",
+  NO_DATA: "No data found",
+  LOAD_MORE: "Load More"
+};
+const LIST_NAVIGATION_TYPES = {
+  NONE: "None",
+  BASIC: "Basic",
+  PAGER: "Pager",
+  CLASSIC: "Classic",
+  ADVANCED: "Advanced",
+  INLINE: "Inline",
+  ON_DEMAND: "On-Demand",
+  SCROLL: "Scroll"
+};
+const LIST_DIRECTION = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+};
+const LIST_ALIGN = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+};
+const DEFAULT_PAGINATION_META = {
+  totalPages: 1,
+  totalElements: 0,
+  last: true,
+  sort: [],
+  numberOfElements: 0,
+  first: true,
+  size: 0,
+  number: 0,
+  empty: true
+};
+export {
+  APP_LOCALE,
+  DEFAULT_CLS,
+  DEFAULT_PAGINATION_META,
+  LIST_ALIGN,
+  LIST_DEFAULTS,
+  LIST_DIRECTION,
+  LIST_MESSAGES,
+  LIST_NAVIGATION_TYPES
+};

package/components/data/list/utils/list-helpers.d.ts

@@ -0,0 +1,46 @@
+import { DisableItemProp, IAlignment, IDirection, ListItemData } from "../props";
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+/**
+ * Get items per row CSS classes based on configuration
+ * @param itemsperrow - Items per row configuration
+ * @param direction - List direction
+ * @returns CSS class string
+ */
+export declare const getItemsPerRowClass: (itemsperrow?: string, direction?: IDirection) => string;
+/**
+ * Get text alignment class
+ * @param align - Alignment value
+ * @returns CSS class string
+ */
+export declare const getTextAlignClass: (align: IAlignment) => string;
+export declare function hasListGroupAutoLayoutClass(layoutProps: {
+    direction?: string;
+    wrap?: unknown;
+    alignment?: unknown;
+    gap?: unknown;
+    columngap?: unknown;
+}): boolean;
+/**
+ * Resolves disableitem prop to a boolean for a single list row.
+ */
+export declare const resolveDisableItem: <T extends ListItemData>(disableitem: DisableItemProp<T> | undefined, item: T, index: number) => boolean;
+/**
+ * Get safe dataset ensuring it's always an array
+ * @param dataset - Input dataset of any type
+ * @param datasource - When set, non-array param snapshots (before invoke) are treated as empty
+ * @returns Array dataset with proper typing
+ */
+export declare const getSafeDataset: <T extends ListItemData = ListItemData>(dataset: unknown, datasource?: unknown) => T[];
+export interface ListStateData {
+    pagination: number;
+    pagesize?: number;
+    actualpagesize?: number;
+    selectedItem: Array<{
+        page: number;
+        index: number;
+    }>;
+}
+export declare const saveListState: (name: string, storage: StorageType, stateToSave: Partial<ListStateData>) => void;
+export declare const getListState: (name: string, storage: StorageType) => ListStateData | null;
+export declare const clearListState: (name: string, storage: StorageType) => void;
+export declare const getSelectedItemWidgets: (event: React.MouseEvent<Element> | null, listener: any, name: string, item: ListItemData | null, Widgets: Record<string, any>) => void;