import { VelcronComponentDescriptor } from "./VelcronDescriptors"; import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents"; import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes"; import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VerticalAlignments } from "./Enums"; import { ColorSchema, useVelcronThemingStore } from ".."; export interface ResolvedComponentRenderer { component: unknown; definition: VelcronDefinition; customComponent?: boolean; } export interface BuiltInComponentRenderers { "View": unknown; "Card": unknown; "Text": unknown; "Image": unknown; "Button": unknown; "TextInput": unknown; "ProgressCircle": unknown; "WebView": unknown; "CustomComponent": unknown; "Dialog": unknown; "Icon": unknown; "Chip": unknown; "Slot": unknown; } export interface ColorSchemaReference { name: string; schema: string; } export type DynamicState = object; export interface OnItemRenderedHookResult { cssClass: string; containerRenderer?: VelcronContainerRenderer; } export interface VelcronRenderContext { id?: string; rootContext: DynamicState; currentContext: DynamicState; theming?: ReturnType; colorSchemaType?: string; colorSchema?: ColorSchema; actions?: { [name: string]: []; }; components?: Array; properties?: { [name: string]: VelcronPrimitiveType | VelcroncomponentArrayType; }; computed?: { [name: string]: []; }; parent?: VelcronRenderContext; hooks?: VelcronRenderContextHooks; eventHandlers?: VelcronRenderContextEventHandlers; } export interface VelcronRenderContextEventHandlers { receiving?: { [name: string]: (...args: any[]) => void; }; emitting?: (emitter: (i: T) => T) => T; } export interface VelcronRenderContextHooks { dialogVisibilityChanged?: ((visible: boolean) => void); onItemSelected?: ((item: VelcronDefinition) => void); onItemRendered?: ((item: VelcronDefinition) => OnItemRenderedHookResult); } export interface VelcronContainerRenderer { definition: VelcronDefinition; renderContext: VelcronRenderContext; component: JSX.Element; } export interface VelcronAction extends VelcronRenderContext { type: VelcronActionTypes; } export interface VelcronActionGetOrSetValue extends VelcronAction { value?: unknown; path: string; id: string; assignOperator?: AssignOperators; } export interface VelcronActionWithAutoAwait extends VelcronActionGetOrSetValue { nowait: boolean; action: string; } export interface VelcronActionWithCondition extends VelcronActionWithAutoAwait { condition: string; trueAction: VelcronAction; falseAction: VelcronAction; } /** * Velcron definition base */ export interface VelcronDefinitionBase { /** * The component type */ type: string; /** * Custom friendly name of the definition */ name?: string; /** * Used for render cache if not specified we auto set it. */ key?: string; } export interface VelcronCustomThemeSettings { colorSchema?: string; color?: string; opacity?: number; } export interface VelcronDefinition extends VelcronDefinitionBase { body?: Array; style?: VelcronStyling; foreach?: string; if?: string; events?: VelcronEvent; } export interface VelcronStyling { margin?: number; marginTop?: number; marginRight?: number; marginBottom?: number; marginLeft?: number; padding?: number; paddingTop?: number; paddingRight?: number; paddingBottom?: number; paddingLeft?: number; height?: number | string; width?: number | string; } export interface VelcronCardStyling extends VelcronStyling { elevation: number; } export interface VelcronSpacing { top: number; right: number; bottom: number; left: number; } export interface VelcronIcon { type: VelcronIconTypes; name: string; } export interface VelcronAppDefinition extends VelcronDefinitionBase { type: "Velcron"; body?: Array; events?: VelcronOnLoadEvent & VelcronOnPressEvent; actions?: { [name: string]: []; }; components?: Array; state?: TState; computed?: { [name: string]: []; }; } export interface VelcronComponentDefinition extends VelcronDefinition { type: string; events: VelcronOnPressEvent; } /*** Built-in Components *********************************************************************/ export interface VelcronViewDefinition extends VelcronDefinition, VelcronCustomThemeSettings { type: "View"; events?: VelcronOnPressEvent; column?: boolean; body: Array; columnStyle?: object; horizontalAlignment?: VelcronHorizontalAlignments; verticalAlignment?: VerticalAlignments; grow?: number; border?: VelcronBorder; borderRadius?: VelcronDimensions; width: string; } export interface VelcronCardDefinition extends VelcronDefinition, VelcronCustomThemeSettings { type: "Card"; style?: VelcronCardStyling; footer?: Array; events?: VelcronOnPressEvent; } export interface VelcronTextDefinition extends VelcronDefinition { type: "Text"; text: string; color?: string; lineClamp: number; noWrap: boolean; typography?: string; events?: VelcronOnPressEvent; } export declare enum VelcronImageRatios { square = 1, landscape = 2 } export interface VelcronImageDefinition extends VelcronDefinition { type: "Image"; source: string; ratio: VelcronImageRatios; borderRadius?: VelcronDimensions; events?: VelcronOnPressEvent; } export interface VelcronButtonDefinition extends VelcronDefinition { type: "Button"; text: string; color: string; icon?: VelcronIcon; disabled?: boolean; events?: VelcronOnPressEvent; } export interface VelcronTextInputDefinition extends VelcronDefinition { type: "TextInput"; label?: string; bind: string; initialValue?: string; events: VelcronOnChangedEvent; } export interface VelcronProgressCircleDefinition extends VelcronDefinition { type: "ProgressCircle"; events?: VelcronOnPressEvent; } export interface VelcronWebViewDefinition extends VelcronDefinition { type: "WebView"; source: string; } export interface VelcronDialogDefinition extends VelcronDefinition { type: "Dialog"; title: string; visible: string; events?: VelcronOnCloseRequestedEvent & VelcronOnClosedEvent; } export interface VelcronIconDefinition extends VelcronDefinition, VelcronCustomThemeSettings { type: "Icon"; icon: string; background?: boolean; size?: number; events?: VelcronOnPressEvent; } export interface VelcronDimensions { top: number; right: number; bottom: number; left: number; } export interface VelcronBorder extends VelcronDimensions { color: string; } export interface VelcronChipDefinition extends VelcronDefinition, VelcronCustomThemeSettings { type: "Chip"; text: string; icon?: VelcronIcon; disabled?: boolean; events?: VelcronOnPressEvent; } export interface VelcronSlotDefinition extends VelcronDefinition, VelcronCustomThemeSettings { type: "Slot"; bind: string; value: VelcroncomponentArrayType; } /*** Custom Components ***********************************************************************/ export type VelcronCustomComponentDefinition = VelcronComponentDescriptor & VelcronComponentDefinition; export type VelcronRenderProps = { definition: TDefinition; renderContext: VelcronRenderContext; };