extended-dynamic-forms
Version:
Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events
231 lines (229 loc) • 8.9 kB
TypeScript
import { default as React } from 'react';
import { ChoiceWidgetProps, ChoiceWidgetState, ChoiceWidgetConfig, ChoiceOption, AccessibilityConfig, ErrorState, LoadingState, PresentationMode } from '../ChoiceWidget.types';
/**
* Abstract base class for Choice Widget presentation strategies.
* Implements the Strategy Pattern to support different presentation modes
* (dropdown, radio, checkbox) while maintaining consistent behavior,
* accessibility standards, and event handling.
*
* @abstract
* @class PresenterStrategy
*/
export declare abstract class PresenterStrategy {
/**
* The presentation mode this strategy implements
*/
abstract readonly presentationMode: PresentationMode;
/**
* Render the widget UI according to the specific presentation strategy.
* Must integrate with FormEventHub and maintain accessibility standards.
*
* @param props - The widget props including RJSF props and custom configuration
* @param state - The current widget state including options and selection
* @returns React element representing the widget
*/
abstract render(props: ChoiceWidgetProps, state: ChoiceWidgetState): React.ReactElement;
/**
* Handle selection change events and transform values appropriately.
* Must support both single and multi-select scenarios.
*
* @param value - The new value(s) from the UI component
* @param props - The widget props
* @param state - The current widget state
* @returns Array of selected values (normalized)
*/
abstract handleSelectionChange(value: unknown, props: ChoiceWidgetProps, state: ChoiceWidgetState): (string | number | boolean)[];
/**
* Get default configuration specific to this presentation mode.
*
* @returns Partial configuration with mode-specific defaults
*/
abstract getDefaultProps(): Partial<ChoiceWidgetConfig>;
/**
* Validate configuration for this specific presentation mode.
*
* @param config - The widget configuration to validate
* @returns Array of validation error messages, or null if valid
*/
abstract validateProps(config: ChoiceWidgetConfig): string[] | null;
/**
* Generate accessibility properties for the widget.
* Ensures WCAG 2.1 AA compliance.
*
* @param props - The widget props
* @param state - The current widget state
* @param config - Accessibility configuration
* @returns Object containing ARIA attributes
*/
getAccessibilityProps(props: ChoiceWidgetProps, state: ChoiceWidgetState, config?: AccessibilityConfig): Record<string, string | boolean | number>;
/**
* Get the appropriate ARIA role for this presentation mode.
*
* @returns The ARIA role string
*/
protected abstract getAriaRole(): string;
/**
* Handle keyboard navigation events.
* Supports arrow keys, home/end, and type-ahead functionality.
*
* @param event - The keyboard event
* @param props - The widget props
* @param state - The current widget state
* @param callbacks - Callback functions for state updates
*/
handleKeyboardNavigation(event: React.KeyboardEvent, props: ChoiceWidgetProps, state: ChoiceWidgetState, callbacks: {
setFocusedIndex: (index: number) => void;
selectOption: (option: ChoiceOption) => void;
toggleDropdown?: (open: boolean) => void;
}): void;
/**
* Handle type-ahead search functionality.
*
* @param char - The typed character
* @param state - The current widget state
* @param callbacks - Callback functions
*/
private handleTypeAhead;
/**
* Generate props for the loading state display.
*
* @param loading - The loading state
* @param LoadingComponent - Optional custom loading component
* @returns Props for the loading display
*/
getLoadingProps(loading: LoadingState, LoadingComponent?: React.ComponentType<LoadingState>): {
component: React.ComponentType<LoadingState>;
props: LoadingState;
};
/**
* Generate props for the error state display.
*
* @param error - The error state
* @param ErrorComponent - Optional custom error component
* @param fieldId - The field ID for accessibility
* @returns Props for the error display
*/
getErrorProps(error: ErrorState, ErrorComponent?: React.ComponentType<ErrorState>, fieldId?: string): {
component: React.ComponentType<ErrorState>;
props: ErrorState & {
id?: string;
};
};
/**
* Generate props for the empty state display.
*
* @param message - Optional message for empty state
* @param EmptyComponent - Optional custom empty component
* @returns Props for the empty display
*/
getEmptyProps(message?: string, EmptyComponent?: React.ComponentType<{
message?: string;
}>): {
component: React.ComponentType<{
message?: string;
}>;
props: {
message?: string;
};
};
/**
* Transform and normalize values between widget and form data.
* Handles both single and multi-select scenarios.
*
* @param value - The value to transform
* @param multiple - Whether multiple selections are allowed
* @returns Normalized value(s)
*/
normalizeValue(value: unknown, multiple: boolean): (string | number | boolean)[];
/**
* Transform normalized values back to widget format.
*
* @param values - The normalized values
* @param multiple - Whether multiple selections are allowed
* @returns Value in widget format
*/
denormalizeValue(values: (string | number | boolean)[], multiple: boolean): unknown;
/**
* Apply theme and custom styling to the widget.
* Integrates with Ant Design v5 theming system.
*
* @param config - Widget configuration
* @param additionalClasses - Additional CSS classes
* @returns Combined className string
*/
getThemeClasses(config: ChoiceWidgetConfig, additionalClasses?: string): string;
/**
* Get style object with theme integration.
*
* @param config - Widget configuration
* @param additionalStyles - Additional styles
* @returns Combined style object
*/
getThemeStyles(config: ChoiceWidgetConfig, additionalStyles?: React.CSSProperties): React.CSSProperties;
/**
* Default loading component implementation.
*/
protected DefaultLoadingComponent: React.FC<LoadingState>;
/**
* Default error component implementation.
*/
protected DefaultErrorComponent: React.FC<ErrorState & {
id?: string;
}>;
/**
* Default empty component implementation.
*/
protected DefaultEmptyComponent: React.FC<{
message?: string;
}>;
/**
* Create event handlers integrated with FormEventHub.
* This method helps concrete strategies integrate with the central event system.
*
* @param fieldId - The field identifier
* @param schema - The field schema
* @param formData - The current form data
* @param fieldPath - The field path in the form
* @returns Object with event handler methods
*/
protected createEventHandlers(fieldId: string, schema?: any, formData?: any, fieldPath?: string[]): {
fieldId: string;
schema: any;
formData: any;
fieldPath: string[] | undefined;
_hookRequired: true;
};
/**
* Validate option selection against configured rules.
*
* @param values - Selected values
* @param options - Available options
* @param config - Widget configuration
* @returns Validation error message or null if valid
*/
validateSelection(values: (string | number | boolean)[], options: ChoiceOption[], config: ChoiceWidgetConfig): string | null;
/**
* Get size mapping for Ant Design components.
*
* @param size - The size configuration
* @returns Ant Design size value
*/
protected getAntdSize(size?: 'small' | 'middle' | 'large'): 'small' | 'middle' | 'large';
/**
* Check if a value is selected.
*
* @param value - The value to check
* @param selectedValues - Currently selected values
* @returns Whether the value is selected
*/
protected isSelected(value: string | number | boolean, selectedValues: (string | number | boolean)[]): boolean;
/**
* Filter options based on search configuration.
*
* @param options - All available options
* @param searchTerm - The search term
* @param searchConfig - Search configuration
* @returns Filtered options
*/
protected filterOptions(options: ChoiceOption[], searchTerm: string, searchConfig?: ChoiceWidgetConfig['search']): ChoiceOption[];
}