dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
82 lines (81 loc) • 2.18 kB
TypeScript
import { RenderCallbackContent } from '../types/cell-content';
/**
* Options for creating a React cell
*/
export interface ReactCellOptions {
/**
* React component to render
* Uses any to support different React type versions across projects
*/
component: any;
/**
* Props to pass to the component
*/
props?: Record<string, any>;
/**
* Event listeners to attach to the component
* @example
* {
* click: (e) => console.log('clicked', e),
* change: (value) => console.log('changed', value)
* }
*/
on?: Record<string, (...args: any[]) => void>;
/**
* Children to pass to the component
*/
children?: any;
}
/**
* Create a datatable cell that renders a React component
*
* This helper manages the React component lifecycle, mounting and unmounting
* the component when the cell is added/removed from the table.
*
* @param options - React cell options
* @returns Render callback content for the datatable
*
* @example
* ```typescript
* import { createReactCell } from 'dap-design-system/helpers/react'
* import StatusBadge from './StatusBadge'
*
* const columns = [
* {
* id: 'status',
* header: 'Status',
* cell: (row) => createReactCell({
* component: StatusBadge,
* props: {
* status: row.status,
* variant: 'success'
* },
* on: {
* click: () => console.log('Badge clicked')
* }
* })
* }
* ]
* ```
*/
export declare function createReactCell(options: ReactCellOptions): RenderCallbackContent;
export declare function createReactCell(component: any, props?: Record<string, any>): RenderCallbackContent;
/**
* Type helper for creating type-safe cell renderers
*
* @example
* ```typescript
* import type { ReactCellRenderer } from 'dap-design-system/helpers/react'
*
* interface User {
* id: number
* status: string
* }
*
* const statusCell: ReactCellRenderer<User> = (row) => createReactCell({
* component: StatusBadge,
* props: { status: row.status }
* })
* ```
*/
export type ReactCellRenderer<TData = any> = (row: TData) => RenderCallbackContent;