@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
78 lines • 3.4 kB
TypeScript
import { ReactNode } from 'react';
import { CollectionCellContext, CollectionColumnDef } from '../../CollectionColumn.types.js';
/**
* CSS classes object for layout styling.
*/
export interface LayoutClasses {
[key: string]: string;
}
/**
* Common props for rendering an item/row in either layout.
*/
export interface ItemProps<T> {
item: T;
index: number;
id: string;
columns: Array<CollectionColumnDef<T>>;
onRemove?: () => void;
removable?: boolean;
draggable?: boolean;
disabled?: boolean;
readOnly?: boolean;
classes: LayoutClasses;
config: ItemRendererConfig<T>;
}
/**
* Function type that renders the content specific to each layout.
* Horizontal layout renders cells in a row, vertical layout renders stacked fields.
*/
export type ItemContentRenderer<T> = (item: T, index: number, columns: Array<CollectionColumnDef<T>>, cellContext: CollectionCellContext<T>, classes: LayoutClasses) => ReactNode;
/**
* Function type that renders content with inline drag handle for draggable items.
* Used by layouts that want the drag handle integrated into the content (e.g., vertical layout).
*/
export type DraggableContentRenderer<T> = (item: T, index: number, columns: Array<CollectionColumnDef<T>>, cellContext: CollectionCellContext<T>, classes: LayoutClasses, dragHandleProps: {
setActivatorNodeRef: (element: HTMLElement | null) => void;
listeners: any;
attributes: any;
}) => ReactNode;
/**
* Configuration for creating layout-specific item renderers.
*/
export interface ItemRendererConfig<T> {
/** The content rendering function specific to the layout */
renderContent: ItemContentRenderer<T>;
/** The container style selector ('row' for horizontal, 'item' for vertical) */
containerSelector: string;
/** Optional: whether to render drag handle and remove button inline with content (used by horizontal layout) */
inlineControls?: boolean;
/**
* Optional: custom content renderer for draggable items that integrates the drag handle.
* If provided, this is used instead of the default drag handle + renderContent pattern.
* Used by vertical layout to place drag handle alongside the field stack.
*/
renderDraggableContent?: DraggableContentRenderer<T>;
}
/**
* Creates a set of item renderers (draggable, static, disabled) for a layout.
* This eliminates the duplication of three nearly identical component variants.
* The renderers are stable function references that don't capture variables in closures.
*/
export declare const createItemRenderers: <T>() => {
DraggableItem: (props: ItemProps<T>) => import("react/jsx-runtime").JSX.Element;
StaticItem: (props: ItemProps<T>) => import("react/jsx-runtime").JSX.Element;
DisabledItem: (props: ItemProps<T>) => import("react/jsx-runtime").JSX.Element;
};
/**
* Maps items to their appropriate renderer components based on state.
*/
export declare const mapItemsToComponents: <T>(items: T[], renderers: ReturnType<typeof createItemRenderers<T>>, config: ItemRendererConfig<T>, classes: LayoutClasses, options: {
getItemId?: (item: T, index: number) => string;
onRemove?: (index: number) => void;
removable?: boolean;
draggable?: boolean;
disabled?: boolean;
readOnly?: boolean;
columns: Array<CollectionColumnDef<T>>;
}) => ReactNode[];
//# sourceMappingURL=itemRenderer.d.ts.map