cecomponent 2.0.48 → 2.0.50

package/dist/components/Common/DataGrid/CEDataGridDynamicsTable.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { CustomAction } from '../../../types/customActions';
 export type ComponentType = "text-input" | "number-input" | "auto-suggest" | "date-picker" | "label-text" | "drop-down-input";
 export interface ColumnConfig {
     id: string;
@@ -104,6 +105,12 @@ interface CEDataGridDynamicTableProps {
      * Receives the row data. If omitted, all rows are enabled.
      */
     getRowDisabled?: (row: any) => boolean;
+    /**
+     * Array of custom action icons to render in the action column.
+     * Developers can add their own icons with custom onclick functionality.
+     * @default []
+     */
+    customActions?: CustomAction[];
 }
 declare const CEDataGridDynamicTable: React.FC<CEDataGridDynamicTableProps>;
 export default CEDataGridDynamicTable;

package/dist/types/customActions.d.ts

@@ -0,0 +1,386 @@
+/**
+ * Custom Actions Type Definitions for CEDataGridDynamicTable
+ *
+ * This file contains all type definitions needed to implement custom actions
+ * in the CEDataGridDynamicTable component.
+ *
+ * @author Development Team
+ * @version 1.0
+ * @date 2026-03-02
+ */
+/**
+ * Configuration for a custom action icon in the action column
+ *
+ * @template T - The row data type (defaults to any)
+ *
+ * @example
+ * const action: CustomAction = {
+ *   id: "export",
+ *   icon: "/icons/export.svg",
+ *   title: "Export Row",
+ *   onClick: (row, rowIndex) => {
+ *     console.log("Exporting row:", row);
+ *   },
+ * };
+ */
+export interface CustomAction<T = any> {
+    /**
+     * Unique identifier for this action
+     *
+     * Used internally for React key rendering and debugging.
+     * Should be unique within the customActions array.
+     * Use kebab-case convention: "export-item", "send-email", etc.
+     *
+     * @example "export-row"
+     * @example "approve-item"
+     * @example "send-notification"
+     */
+    id: string;
+    /**
+     * Path to the icon image
+     *
+     * Relative path to an icon file in the public folder.
+     * Supported formats: SVG (recommended), PNG, WebP, JPG
+     *
+     * Icons are rendered at 20x20 pixels.
+     * For best results, use SVG format for crisp scaling.
+     *
+     * @example "/icons/export.svg"
+     * @example "/icons/actions/approve.svg"
+     * @example "/public-assets/buttons/delete.png"
+     */
+    icon: string;
+    /**
+     * Tooltip text shown on hover
+     *
+     * Should be concise and descriptive of what the action does.
+     * Displayed when user hovers over the icon.
+     * Keep to 1-3 words for better UX.
+     *
+     * @example "Export Row"
+     * @example "Send Email"
+     * @example "Archive Item"
+     * @example "Delete Permanently"
+     */
+    title: string;
+    /**
+     * Click handler callback function
+     *
+     * Called when the user clicks the action icon.
+     *
+     * @param row - The complete row data object containing all column values
+     * @param rowIndex - The 0-based index of the row in the current page
+     *
+     * @example
+     * onClick: (row, rowIndex) => {
+     *   console.log(`Clicked row ${rowIndex}:`, row);
+     * }
+     *
+     * @example
+     * onClick: async (row) => {
+     *   await updateItemStatus(row.id, 'approved');
+     * }
+     *
+     * @example
+     * onClick: (row, rowIndex) => {
+     *   setSelectedRow(row);
+     *   setShowModal(true);
+     * }
+     */
+    onClick: (row: T, rowIndex: number) => void | Promise<void>;
+    /**
+     * Optional condition to show/hide the action
+     *
+     * When provided, the action is only rendered if the condition returns true.
+     * Useful for role-based, status-based, or permission-based actions.
+     *
+     * Return type:
+     * - true: Action is displayed and clickable
+     * - false: Action is hidden (not rendered at all)
+     *
+     * Called for each row, so can be used to show different actions per row.
+     *
+     * @param row - The row data to evaluate
+     * @returns boolean - true to show the action, false to hide it
+     *
+     * @example
+     * condition: (row) => row.status === "pending"
+     * // Only show for rows with pending status
+     *
+     * @example
+     * condition: (row) => row.isOwner && row.draft === true
+     * // Show only if user is owner and row is draft
+     *
+     * @example
+     * condition: (row) => !row.archived
+     * // Hide if row is already archived
+     */
+    condition?: (row: T) => boolean;
+}
+/**
+ * Array of custom actions for the data grid
+ * @type {CustomAction[]}
+ */
+export type CustomActions<T = any> = CustomAction<T>[];
+/**
+ * Component props for custom actions feature
+ *
+ * This interface extends the CEDataGridDynamicTableProps
+ */
+export interface CustomActionsProps<T = any> {
+    /**
+     * Array of custom action configurations
+     *
+     * These actions will be rendered in the action column
+     * after the built-in action icons (Edit, Delete, Copy, View, etc.)
+     *
+     * Multiple custom actions are supported. Icons are arranged
+     * horizontally in the action cell using flexbox.
+     *
+     * @default []
+     * @example
+     * customActions={[
+     *   {
+     *     id: "export",
+     *     icon: "/icons/export.svg",
+     *     title: "Export",
+     *     onClick: handleExport
+     *   }
+     * ]}
+     */
+    customActions?: CustomAction<T>[];
+}
+/**
+ * Extended CEDataGridDynamicTableProps including custom actions
+ *
+ * (This is a partial interface showing the custom actions property)
+ */
+export interface CEDataGridDynamicTablePropsWithCustomActions<T = any> extends CustomActionsProps<T> {
+    jsonData: T[];
+    columnList?: any[];
+}
+/**
+ * Handler function signature for custom action clicks
+ *
+ * @template T - The row data type
+ * @param row - The complete row object
+ * @param rowIndex - Zero-based index of the row
+ *
+ * @example
+ * type CustomActionHandler<User> = (row: User, rowIndex: number) => void;
+ *
+ * const handleApprove: CustomActionHandler<User> = (user, idx) => {
+ *   console.log(`Approving user ${user.id}`);
+ * };
+ */
+export type CustomActionHandler<T = any> = (row: T, rowIndex: number) => void | Promise<void>;
+/**
+ * Condition predicate function signature
+ *
+ * @template T - The row data type
+ * @param row - The row to evaluate
+ * @returns boolean - true if action should be shown
+ *
+ * @example
+ * type ActionCondition<User> = (row: User) => boolean;
+ *
+ * const isAdmin: ActionCondition<User> = (user) => user.role === 'admin';
+ */
+export type ActionCondition<T = any> = (row: T) => boolean;
+/**
+ * Builder helper for creating custom actions
+ *
+ * Provides type-safe way to build custom actions
+ *
+ * @template T - The row data type
+ *
+ * @example
+ * class CustomActionBuilder<User> {
+ *   private action: CustomAction<User> = { id: '', icon: '', title: '', onClick: () => {} };
+ *
+ *   withId(id: string): this {
+ *     this.action.id = id;
+ *     return this;
+ *   }
+ *
+ *   build(): CustomAction<User> {
+ *     return this.action;
+ *   }
+ * }
+ *
+ * const action = new CustomActionBuilder<User>()
+ *   .withId('approve')
+ *   .build();
+ */
+declare class CustomActionBuilder<T = any> {
+    private action;
+    setId(id: string): this;
+    setIcon(icon: string): this;
+    setTitle(title: string): this;
+    setHandler(handler: CustomActionHandler<T>): this;
+    setCondition(condition: ActionCondition<T>): this;
+    build(): CustomAction<T>;
+}
+/**
+ * Common icon paths
+ *
+ * Centralized constants for common action icons
+ *
+ * @example
+ * import { ICON_PATHS } from './types';
+ *
+ * const action: CustomAction = {
+ *   id: 'export',
+ *   icon: ICON_PATHS.EXPORT,
+ *   title: 'Export',
+ *   onClick: handleExport,
+ * };
+ */
+declare const ICON_PATHS: {
+    readonly EXPORT: "/icons/actions/export.svg";
+    readonly IMPORT: "/icons/actions/import.svg";
+    readonly DUPLICATE: "/icons/actions/duplicate.svg";
+    readonly ARCHIVE: "/icons/actions/archive.svg";
+    readonly RESTORE: "/icons/actions/restore.svg";
+    readonly VIEW: "/icons/navigation/view.svg";
+    readonly EXPAND: "/icons/navigation/expand.svg";
+    readonly COLLAPSE: "/icons/navigation/collapse.svg";
+    readonly APPROVE: "/icons/status/approve.svg";
+    readonly REJECT: "/icons/status/reject.svg";
+    readonly PENDING: "/icons/status/pending.svg";
+    readonly EMAIL: "/icons/communication/email.svg";
+    readonly NOTIFY: "/icons/communication/notify.svg";
+    readonly SHARE: "/icons/communication/share.svg";
+    readonly COPY: "/icons/utility/copy.svg";
+    readonly PASTE: "/icons/utility/paste.svg";
+    readonly DOWNLOAD: "/icons/utility/download.svg";
+};
+/**
+ * Common action conditions
+ *
+ * Pre-built condition functions for common scenarios
+ *
+ * @example
+ * import { ACTION_CONDITIONS } from './types';
+ *
+ * const action: CustomAction = {
+ *   id: 'approve',
+ *   icon: ICON_PATHS.APPROVE,
+ *   title: 'Approve',
+ *   onClick: handleApprove,
+ *   condition: ACTION_CONDITIONS.isPending,
+ * };
+ */
+declare const ACTION_CONDITIONS: {
+    /** Only show for pending items */
+    readonly isPending: (row: any) => boolean;
+    /** Only show for active items */
+    readonly isActive: (row: any) => boolean;
+    /** Only show for inactive items */
+    readonly isInactive: (row: any) => boolean;
+    /** Only show if not archived */
+    readonly isNotArchived: (row: any) => boolean;
+    /** Only show if archived */
+    readonly isArchived: (row: any) => boolean;
+    /** Only show if has ID */
+    readonly hasId: (row: any) => boolean;
+    /** Only show if draft */
+    readonly isDraft: (row: any) => boolean;
+    /** Only show if not draft */
+    readonly isNotDraft: (row: any) => boolean;
+    /** Always show */
+    readonly always: () => boolean;
+    /** Never show */
+    readonly never: () => boolean;
+    /**
+     * Combine multiple conditions with AND logic
+     * @example
+     * condition: ACTION_CONDITIONS.and(
+     *   ACTION_CONDITIONS.isPending,
+     *   ACTION_CONDITIONS.isNotArchived
+     * )
+     */
+    readonly and: (...conditions: ActionCondition[]) => (row: any) => boolean;
+    /**
+     * Combine multiple conditions with OR logic
+     * @example
+     * condition: ACTION_CONDITIONS.or(
+     *   (r) => r.status === 'pending',
+     *   (r) => r.status === 'draft'
+     * )
+     */
+    readonly or: (...conditions: ActionCondition[]) => (row: any) => boolean;
+    /**
+     * Negate a condition
+     * @example
+     * condition: ACTION_CONDITIONS.not(ACTION_CONDITIONS.isArchived)
+     */
+    readonly not: (condition: ActionCondition) => (row: any) => boolean;
+};
+/**
+ * Utility functions for custom actions
+ */
+declare const CustomActionUtils: {
+    /**
+     * Create a simple action without condition
+     *
+     * @example
+     * const action = CustomActionUtils.create({
+     *   id: 'export',
+     *   icon: '/icons/export.svg',
+     *   title: 'Export',
+     *   onClick: (row) => console.log(row),
+     * });
+     */
+    create<T = any>(config: Omit<CustomAction<T>, "condition">): CustomAction<T>;
+    /**
+     * Create a conditional action
+     *
+     * @example
+     * const action = CustomActionUtils.createConditional({
+     *   id: 'approve',
+     *   icon: '/icons/approve.svg',
+     *   title: 'Approve',
+     *   onClick: (row) => approve(row),
+     *   condition: (row) => row.status === 'pending',
+     * });
+     */
+    createConditional<T = any>(config: CustomAction<T>): CustomAction<T>;
+    /**
+     * Filter actions based on a condition
+     *
+     * @example
+     * const visibleActions = CustomActionUtils.filterByCondition(
+     *   customActions,
+     *   currentRow
+     * );
+     */
+    filterByCondition<T = any>(actions: CustomAction<T>[], row: T): CustomAction<T>[];
+    /**
+     * Check if an action should be shown for a specific row
+     *
+     * @example
+     * if (CustomActionUtils.shouldShow(action, row)) {
+     *   // Render action
+     * }
+     */
+    shouldShow<T = any>(action: CustomAction<T>, row: T): boolean;
+    /**
+     * Validate all required fields are set
+     *
+     * @example
+     * CustomActionUtils.validate(action); // throws if invalid
+     */
+    validate<T = any>(action: CustomAction<T>): void;
+    /**
+     * Validate all actions in an array
+     *
+     * @example
+     * CustomActionUtils.validateAll(customActions);
+     */
+    validateAll<T = any>(actions: CustomAction<T>[]): void;
+};
+/**
+ * Export utilities (types are already exported inline via export interface/type)
+ */
+export { CustomActionBuilder, ICON_PATHS, ACTION_CONDITIONS, CustomActionUtils, };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cecomponent",
   "description": "A React component library for building modern UIs for Cleanearth",
-  "version": "2.0.48",
+  "version": "2.0.50",
   "main": "dist/ce-component-lib.js",
   "module": "dist/ce-component-lib.mjs",
   "types": "dist/idex.d.ts",