devextreme-react
Version:
DevExtreme React UI and Visualization Components
1,156 lines (1,155 loc) • 74.1 kB
TypeScript
/*!
* devextreme-react
* Version: 25.2.3
* Build date: Fri Dec 12 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-react
*/
import * as React from "react";
import { Ref, ReactElement } from "react";
import dxScheduler, { Properties } from "devextreme/ui/scheduler";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AppointmentFormProperties, AppointmentFormIconsShowMode, SchedulerPredefinedToolbarItem, DateNavigatorItemProperties, SchedulerPredefinedDateNavigatorItem, dxSchedulerToolbarItem, AllDayPanelMode, AppointmentCollectorTemplateData, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling } from "devextreme/ui/scheduler";
import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button";
import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, FormItemType, FormPredefinedButtonItem, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form";
import type { ContentReadyEvent as ButtonGroupContentReadyEvent, DisposingEvent as ButtonGroupDisposingEvent, InitializedEvent as ButtonGroupInitializedEvent, OptionChangedEvent as ButtonGroupOptionChangedEvent, dxButtonGroupItem, ItemClickEvent, SelectionChangedEvent } from "devextreme/ui/button_group";
import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, ItemClickEvent as TabPanelItemClickEvent, SelectionChangedEvent as TabPanelSelectionChangedEvent, dxTabPanelItem, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel";
import type { event } from "devextreme/events/events.types";
import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, ButtonStyle, template, ButtonType, ComparisonOperator, Mode, ToolbarItemLocation, ToolbarItemComponent, SingleMultipleOrNone, ScrollMode, TabsIconPosition, TabsStyle, Position, FirstDayOfWeek, Orientation } from "devextreme/common";
import type { AIIntegration } from "devextreme/common/ai-integration";
import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar";
import type { DataSourceOptions } from "devextreme/data/data_source";
import type { Store } from "devextreme/data/store";
import type dxSortable from "devextreme/ui/sortable";
import type dxDraggable from "devextreme/ui/draggable";
import type dxForm from "devextreme/ui/form";
import type DataSource from "devextreme/data/data_source";
import type * as CommonTypes from "devextreme/common";
type ReplaceFieldTypes<TSource, TReplacement> = {
[P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type ISchedulerOptionsNarrowedEvents = {
onAppointmentAdded?: ((e: AppointmentAddedEvent) => void);
onAppointmentAdding?: ((e: AppointmentAddingEvent) => void);
onAppointmentClick?: ((e: AppointmentClickEvent) => void);
onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void);
onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void);
onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void);
onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void);
onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void);
onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void);
onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void);
onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void);
onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void);
onCellClick?: ((e: CellClickEvent) => void);
onCellContextMenu?: ((e: CellContextMenuEvent) => void);
onContentReady?: ((e: ContentReadyEvent) => void);
onDisposing?: ((e: DisposingEvent) => void);
onInitialized?: ((e: InitializedEvent) => void);
};
type ISchedulerOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ISchedulerOptionsNarrowedEvents> & IHtmlOptions & {
appointmentCollectorRender?: (...params: any) => React.ReactNode;
appointmentCollectorComponent?: React.ComponentType<any>;
appointmentRender?: (...params: any) => React.ReactNode;
appointmentComponent?: React.ComponentType<any>;
appointmentTooltipRender?: (...params: any) => React.ReactNode;
appointmentTooltipComponent?: React.ComponentType<any>;
dataCellRender?: (...params: any) => React.ReactNode;
dataCellComponent?: React.ComponentType<any>;
dateCellRender?: (...params: any) => React.ReactNode;
dateCellComponent?: React.ComponentType<any>;
resourceCellRender?: (...params: any) => React.ReactNode;
resourceCellComponent?: React.ComponentType<any>;
timeCellRender?: (...params: any) => React.ReactNode;
timeCellComponent?: React.ComponentType<any>;
defaultCurrentDate?: Date | number | string;
defaultCurrentView?: string | ViewType;
onCurrentDateChange?: (value: Date | number | string) => void;
onCurrentViewChange?: (value: string | ViewType) => void;
}>;
interface SchedulerRef {
instance: () => dxScheduler;
}
declare const Scheduler: (props: React.PropsWithChildren<ISchedulerOptions> & {
ref?: Ref<SchedulerRef>;
}) => ReactElement | null;
type IAIOptionsProps = React.PropsWithChildren<{
disabled?: boolean;
instruction?: string | undefined;
}>;
declare const AIOptions: ((props: IAIOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
disabled?: boolean | undefined;
instruction?: string | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAppointmentDraggingProps = React.PropsWithChildren<{
autoScroll?: boolean;
data?: any | undefined;
group?: string | undefined;
onAdd?: ((e: {
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
toData: any;
}) => void);
onDragEnd?: ((e: {
cancel: boolean;
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
toData: any;
toItemData: any;
}) => void);
onDragMove?: ((e: {
cancel: boolean;
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
toData: any;
}) => void);
onDragStart?: ((e: {
cancel: boolean;
component: dxScheduler;
event: event;
fromData: any;
itemData: any;
itemElement: any;
}) => void);
onRemove?: ((e: {
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
}) => void);
scrollSensitivity?: number;
scrollSpeed?: number;
}>;
declare const AppointmentDragging: ((props: IAppointmentDraggingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
autoScroll?: boolean | undefined;
data?: any | undefined;
group?: string | undefined;
onAdd?: ((e: {
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
toData: any;
}) => void) | undefined;
onDragEnd?: ((e: {
cancel: boolean;
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
toData: any;
toItemData: any;
}) => void) | undefined;
onDragMove?: ((e: {
cancel: boolean;
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
toData: any;
}) => void) | undefined;
onDragStart?: ((e: {
cancel: boolean;
component: dxScheduler;
event: event;
fromData: any;
itemData: any;
itemElement: any;
}) => void) | undefined;
onRemove?: ((e: {
component: dxScheduler;
event: event;
fromComponent: dxSortable | dxDraggable;
fromData: any;
itemData: any;
itemElement: any;
toComponent: dxSortable | dxDraggable;
}) => void) | undefined;
scrollSensitivity?: number | undefined;
scrollSpeed?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IAsyncRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
message?: string;
reevaluate?: boolean;
type?: ValidationRuleType;
validationCallback?: ((options: {
column: Record<string, any>;
data: Record<string, any>;
formItem: Record<string, any>;
rule: Record<string, any>;
validator: Record<string, any>;
value: string | number;
}) => any);
}>;
declare const AsyncRule: ((props: IAsyncRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
ignoreEmptyValue?: boolean | undefined;
message?: string | undefined;
reevaluate?: boolean | undefined;
type?: ValidationRuleType | undefined;
validationCallback?: ((options: {
column: Record<string, any>;
data: Record<string, any>;
formItem: Record<string, any>;
rule: Record<string, any>;
validator: Record<string, any>;
value: string | number;
}) => any) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IButtonItemProps = React.PropsWithChildren<{
buttonOptions?: dxButtonOptions | undefined;
colSpan?: number | undefined;
cssClass?: string | undefined;
horizontalAlignment?: HorizontalAlignment;
itemType?: FormItemType;
name?: FormPredefinedButtonItem | string | undefined;
verticalAlignment?: VerticalAlignment;
visible?: boolean;
visibleIndex?: number | undefined;
}>;
declare const ButtonItem: ((props: IButtonItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
buttonOptions?: dxButtonOptions | undefined;
colSpan?: number | undefined;
cssClass?: string | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
itemType?: FormItemType | undefined;
name?: FormPredefinedButtonItem | string | undefined;
verticalAlignment?: VerticalAlignment | undefined;
visible?: boolean | undefined;
visibleIndex?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IButtonOptionsProps = React.PropsWithChildren<{
accessKey?: string | undefined;
activeStateEnabled?: boolean;
disabled?: boolean;
elementAttr?: Record<string, any>;
focusStateEnabled?: boolean;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean;
icon?: string;
onClick?: ((e: ClickEvent) => void);
onContentReady?: ((e: ButtonContentReadyEvent) => void);
onDisposing?: ((e: ButtonDisposingEvent) => void);
onInitialized?: ((e: ButtonInitializedEvent) => void);
onOptionChanged?: ((e: OptionChangedEvent) => void);
rtlEnabled?: boolean;
stylingMode?: ButtonStyle;
tabIndex?: number;
template?: ((buttonData: {
icon: string;
text: string;
}, contentElement: any) => string | any) | template;
text?: string;
type?: ButtonType | string;
useSubmitBehavior?: boolean;
validationGroup?: string | undefined;
visible?: boolean;
width?: number | string | undefined;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const ButtonOptions: ((props: IButtonOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
accessKey?: string | undefined;
activeStateEnabled?: boolean | undefined;
disabled?: boolean | undefined;
elementAttr?: Record<string, any> | undefined;
focusStateEnabled?: boolean | undefined;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean | undefined;
icon?: string | undefined;
onClick?: ((e: ClickEvent) => void) | undefined;
onContentReady?: ((e: ButtonContentReadyEvent) => void) | undefined;
onDisposing?: ((e: ButtonDisposingEvent) => void) | undefined;
onInitialized?: ((e: ButtonInitializedEvent) => void) | undefined;
onOptionChanged?: ((e: OptionChangedEvent) => void) | undefined;
rtlEnabled?: boolean | undefined;
stylingMode?: ButtonStyle | undefined;
tabIndex?: number | undefined;
template?: template | ((buttonData: {
icon: string;
text: string;
}, contentElement: any) => string | any) | undefined;
text?: string | undefined;
type?: string | undefined;
useSubmitBehavior?: boolean | undefined;
validationGroup?: string | undefined;
visible?: boolean | undefined;
width?: number | string | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IColCountByScreenProps = React.PropsWithChildren<{
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
}>;
declare const ColCountByScreen: ((props: IColCountByScreenProps) => React.FunctionComponentElement<React.PropsWithChildren<{
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICompareRuleProps = React.PropsWithChildren<{
comparisonTarget?: (() => any);
comparisonType?: ComparisonOperator;
ignoreEmptyValue?: boolean;
message?: string;
type?: ValidationRuleType;
}>;
declare const CompareRule: ((props: ICompareRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
comparisonTarget?: (() => any) | undefined;
comparisonType?: ComparisonOperator | undefined;
ignoreEmptyValue?: boolean | undefined;
message?: string | undefined;
type?: ValidationRuleType | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICustomRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
message?: string;
reevaluate?: boolean;
type?: ValidationRuleType;
validationCallback?: ((options: {
column: Record<string, any>;
data: Record<string, any>;
formItem: Record<string, any>;
rule: Record<string, any>;
validator: Record<string, any>;
value: string | number;
}) => boolean);
}>;
declare const CustomRule: ((props: ICustomRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
ignoreEmptyValue?: boolean | undefined;
message?: string | undefined;
reevaluate?: boolean | undefined;
type?: ValidationRuleType | undefined;
validationCallback?: ((options: {
column: Record<string, any>;
data: Record<string, any>;
formItem: Record<string, any>;
rule: Record<string, any>;
validator: Record<string, any>;
value: string | number;
}) => boolean) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEditingProps = React.PropsWithChildren<{
allowAdding?: boolean;
allowDeleting?: boolean;
allowDragging?: boolean;
allowResizing?: boolean;
allowTimeZoneEditing?: boolean;
allowUpdating?: boolean;
form?: AppointmentFormProperties;
popup?: Record<string, any>;
}>;
declare const Editing: ((props: IEditingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
allowAdding?: boolean | undefined;
allowDeleting?: boolean | undefined;
allowDragging?: boolean | undefined;
allowResizing?: boolean | undefined;
allowTimeZoneEditing?: boolean | undefined;
allowUpdating?: boolean | undefined;
form?: AppointmentFormProperties | undefined;
popup?: Record<string, any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEmailRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
message?: string;
type?: ValidationRuleType;
}>;
declare const EmailRule: ((props: IEmailRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
ignoreEmptyValue?: boolean | undefined;
message?: string | undefined;
type?: ValidationRuleType | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEmptyItemProps = React.PropsWithChildren<{
colSpan?: number | undefined;
cssClass?: string | undefined;
itemType?: FormItemType;
name?: string | undefined;
visible?: boolean;
visibleIndex?: number | undefined;
}>;
declare const EmptyItem: ((props: IEmptyItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
colSpan?: number | undefined;
cssClass?: string | undefined;
itemType?: FormItemType | undefined;
name?: string | undefined;
visible?: boolean | undefined;
visibleIndex?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IFormProps = React.PropsWithChildren<{
accessKey?: string | undefined;
activeStateEnabled?: boolean;
aiIntegration?: AIIntegration | undefined;
alignItemLabels?: boolean;
alignItemLabelsInAllGroups?: boolean;
colCount?: Mode | number;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
};
customizeItem?: ((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void);
disabled?: boolean;
elementAttr?: Record<string, any>;
focusStateEnabled?: boolean;
formData?: any;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean;
iconsShowMode?: AppointmentFormIconsShowMode;
isDirty?: boolean;
items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
labelLocation?: LabelLocation;
labelMode?: FormLabelMode;
minColWidth?: number;
onContentReady?: ((e: FormContentReadyEvent) => void);
onDisposing?: ((e: FormDisposingEvent) => void);
onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
onInitialized?: ((e: FormInitializedEvent) => void);
onOptionChanged?: ((e: FormOptionChangedEvent) => void);
onSmartPasted?: ((e: SmartPastedEvent) => void);
onSmartPasting?: ((e: SmartPastingEvent) => void);
optionalMark?: string;
readOnly?: boolean;
requiredMark?: string;
requiredMessage?: string;
rtlEnabled?: boolean;
screenByWidth?: (() => void);
scrollingEnabled?: boolean;
showColonAfterLabel?: boolean;
showOptionalMark?: boolean;
showRequiredMark?: boolean;
showValidationSummary?: boolean;
tabIndex?: number;
validationGroup?: string | undefined;
visible?: boolean;
width?: number | string | undefined;
defaultFormData?: any;
onFormDataChange?: (value: any) => void;
}>;
declare const Form: ((props: IFormProps) => React.FunctionComponentElement<React.PropsWithChildren<{
accessKey?: string | undefined;
activeStateEnabled?: boolean | undefined;
aiIntegration?: AIIntegration | undefined;
alignItemLabels?: boolean | undefined;
alignItemLabelsInAllGroups?: boolean | undefined;
colCount?: number | "auto" | undefined;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
} | undefined;
customizeItem?: ((item: dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem) => void) | undefined;
disabled?: boolean | undefined;
elementAttr?: Record<string, any> | undefined;
focusStateEnabled?: boolean | undefined;
formData?: any;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean | undefined;
iconsShowMode?: AppointmentFormIconsShowMode | undefined;
isDirty?: boolean | undefined;
items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
labelLocation?: LabelLocation | undefined;
labelMode?: FormLabelMode | undefined;
minColWidth?: number | undefined;
onContentReady?: ((e: FormContentReadyEvent) => void) | undefined;
onDisposing?: ((e: FormDisposingEvent) => void) | undefined;
onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
onFieldDataChanged?: ((e: FieldDataChangedEvent) => void) | undefined;
onInitialized?: ((e: FormInitializedEvent) => void) | undefined;
onOptionChanged?: ((e: FormOptionChangedEvent) => void) | undefined;
onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
optionalMark?: string | undefined;
readOnly?: boolean | undefined;
requiredMark?: string | undefined;
requiredMessage?: string | undefined;
rtlEnabled?: boolean | undefined;
screenByWidth?: (() => void) | undefined;
scrollingEnabled?: boolean | undefined;
showColonAfterLabel?: boolean | undefined;
showOptionalMark?: boolean | undefined;
showRequiredMark?: boolean | undefined;
showValidationSummary?: boolean | undefined;
tabIndex?: number | undefined;
validationGroup?: string | undefined;
visible?: boolean | undefined;
width?: number | string | undefined;
defaultFormData?: any;
onFormDataChange?: ((value: any) => void) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IGroupItemProps = React.PropsWithChildren<{
alignItemLabels?: boolean;
caption?: string | undefined;
captionTemplate?: ((data: {
caption: string;
component: dxForm;
name: string;
}, itemElement: any) => string | any) | template;
colCount?: number;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
};
colSpan?: number | undefined;
cssClass?: string | undefined;
items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
itemType?: FormItemType;
name?: string | undefined;
template?: ((data: {
component: dxForm;
formData: Record<string, any>;
}, itemElement: any) => string | any) | template;
visible?: boolean;
visibleIndex?: number | undefined;
captionRender?: (...params: any) => React.ReactNode;
captionComponent?: React.ComponentType<any>;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const GroupItem: ((props: IGroupItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
alignItemLabels?: boolean | undefined;
caption?: string | undefined;
captionTemplate?: template | ((data: {
caption: string;
component: dxForm;
name: string;
}, itemElement: any) => string | any) | undefined;
colCount?: number | undefined;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
} | undefined;
colSpan?: number | undefined;
cssClass?: string | undefined;
items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
itemType?: FormItemType | undefined;
name?: string | undefined;
template?: template | ((data: {
component: dxForm;
formData: Record<string, any>;
}, itemElement: any) => string | any) | undefined;
visible?: boolean | undefined;
visibleIndex?: number | undefined;
captionRender?: ((...params: any) => React.ReactNode) | undefined;
captionComponent?: React.ComponentType<any> | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IItemProps = React.PropsWithChildren<{
badge?: string;
disabled?: boolean;
html?: string;
icon?: string;
tabTemplate?: (() => string | any) | template;
template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
text?: string;
title?: string;
visible?: boolean;
aiOptions?: Record<string, any> | {
disabled?: boolean;
instruction?: string | undefined;
};
colSpan?: number | undefined;
cssClass?: string | undefined;
dataField?: string | undefined;
editorOptions?: any | undefined;
editorType?: FormItemComponent;
helpText?: string | undefined;
isRequired?: boolean | undefined;
itemType?: FormItemType;
label?: Record<string, any> | {
alignment?: HorizontalAlignment;
location?: LabelLocation;
showColon?: boolean;
template?: ((itemData: {
component: dxForm;
dataField: string;
editorOptions: any;
editorType: string;
name: string;
text: string;
}, itemElement: any) => string | any) | template;
text?: string | undefined;
visible?: boolean;
};
name?: string | undefined | FormPredefinedButtonItem | SchedulerPredefinedToolbarItem;
validationRules?: Array<CommonTypes.ValidationRule>;
visibleIndex?: number | undefined;
alignItemLabels?: boolean;
caption?: string | undefined;
captionTemplate?: ((data: {
caption: string;
component: dxForm;
name: string;
}, itemElement: any) => string | any) | template;
colCount?: number;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
};
items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
tabPanelOptions?: dxTabPanelOptions | undefined;
tabs?: Array<Record<string, any>> | {
alignItemLabels?: boolean;
badge?: string | undefined;
colCount?: number;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
};
disabled?: boolean;
icon?: string | undefined;
items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
title?: string | undefined;
}[];
buttonOptions?: dxButtonOptions | undefined;
horizontalAlignment?: HorizontalAlignment;
verticalAlignment?: VerticalAlignment;
locateInMenu?: LocateInMenuMode;
location?: ToolbarItemLocation;
menuItemTemplate?: (() => string | any) | template;
options?: DateNavigatorItemProperties | Record<string, any>;
showText?: ShowTextMode;
widget?: ToolbarItemComponent;
elementAttr?: Record<string, any>;
hint?: string;
type?: ButtonType | string;
tabRender?: (...params: any) => React.ReactNode;
tabComponent?: React.ComponentType<any>;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
captionRender?: (...params: any) => React.ReactNode;
captionComponent?: React.ComponentType<any>;
menuItemRender?: (...params: any) => React.ReactNode;
menuItemComponent?: React.ComponentType<any>;
}>;
declare const Item: ((props: IItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
badge?: string | undefined;
disabled?: boolean | undefined;
html?: string | undefined;
icon?: string | undefined;
tabTemplate?: template | (() => string | any) | undefined;
template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
text?: string | undefined;
title?: string | undefined;
visible?: boolean | undefined;
aiOptions?: Record<string, any> | {
disabled?: boolean | undefined;
instruction?: string | undefined;
} | undefined;
colSpan?: number | undefined;
cssClass?: string | undefined;
dataField?: string | undefined;
editorOptions?: any | undefined;
editorType?: FormItemComponent | undefined;
helpText?: string | undefined;
isRequired?: boolean | undefined;
itemType?: FormItemType | undefined;
label?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
location?: LabelLocation | undefined;
showColon?: boolean | undefined;
template?: template | ((itemData: {
component: dxForm;
dataField: string;
editorOptions: any;
editorType: string;
name: string;
text: string;
}, itemElement: any) => string | any) | undefined;
text?: string | undefined;
visible?: boolean | undefined;
} | undefined;
name?: string | undefined | FormPredefinedButtonItem | SchedulerPredefinedToolbarItem;
validationRules?: CommonTypes.ValidationRule[] | undefined;
visibleIndex?: number | undefined;
alignItemLabels?: boolean | undefined;
caption?: string | undefined;
captionTemplate?: template | ((data: {
caption: string;
component: dxForm;
name: string;
}, itemElement: any) => string | any) | undefined;
colCount?: number | undefined;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
} | undefined;
items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
tabPanelOptions?: dxTabPanelOptions | undefined;
tabs?: Record<string, any>[] | {
alignItemLabels?: boolean | undefined;
badge?: string | undefined;
colCount?: number | undefined;
colCountByScreen?: Record<string, any> | {
lg?: number | undefined;
md?: number | undefined;
sm?: number | undefined;
xs?: number | undefined;
} | undefined;
disabled?: boolean | undefined;
icon?: string | undefined;
items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
tabTemplate?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
template?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
title?: string | undefined;
}[] | undefined;
buttonOptions?: dxButtonOptions | undefined;
horizontalAlignment?: HorizontalAlignment | undefined;
verticalAlignment?: VerticalAlignment | undefined;
locateInMenu?: LocateInMenuMode | undefined;
location?: ToolbarItemLocation | undefined;
menuItemTemplate?: template | (() => string | any) | undefined;
options?: Record<string, any> | DateNavigatorItemProperties | undefined;
showText?: ShowTextMode | undefined;
widget?: ToolbarItemComponent | undefined;
elementAttr?: Record<string, any> | undefined;
hint?: string | undefined;
type?: string | undefined;
tabRender?: ((...params: any) => React.ReactNode) | undefined;
tabComponent?: React.ComponentType<any> | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
captionRender?: ((...params: any) => React.ReactNode) | undefined;
captionComponent?: React.ComponentType<any> | undefined;
menuItemRender?: ((...params: any) => React.ReactNode) | undefined;
menuItemComponent?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ILabelProps = React.PropsWithChildren<{
alignment?: HorizontalAlignment;
location?: LabelLocation;
showColon?: boolean;
template?: ((itemData: {
component: dxForm;
dataField: string;
editorOptions: any;
editorType: string;
name: string;
text: string;
}, itemElement: any) => string | any) | template;
text?: string | undefined;
visible?: boolean;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const Label: ((props: ILabelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
alignment?: HorizontalAlignment | undefined;
location?: LabelLocation | undefined;
showColon?: boolean | undefined;
template?: template | ((itemData: {
component: dxForm;
dataField: string;
editorOptions: any;
editorType: string;
name: string;
text: string;
}, itemElement: any) => string | any) | undefined;
text?: string | undefined;
visible?: boolean | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type INumericRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
message?: string;
type?: ValidationRuleType;
}>;
declare const NumericRule: ((props: INumericRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
ignoreEmptyValue?: boolean | undefined;
message?: string | undefined;
type?: ValidationRuleType | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IOptionsProps = React.PropsWithChildren<{
accessKey?: string | undefined;
activeStateEnabled?: boolean;
buttonTemplate?: ((buttonData: any, buttonContent: any) => string | any) | template;
disabled?: boolean;
elementAttr?: Record<string, any>;
focusStateEnabled?: boolean;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean;
items?: Array<dxButtonGroupItem | SchedulerPredefinedDateNavigatorItem>;
keyExpr?: (() => void) | string;
onContentReady?: ((e: ButtonGroupContentReadyEvent) => void);
onDisposing?: ((e: ButtonGroupDisposingEvent) => void);
onInitialized?: ((e: ButtonGroupInitializedEvent) => void);
onItemClick?: ((e: ItemClickEvent) => void);
onOptionChanged?: ((e: ButtonGroupOptionChangedEvent) => void);
onSelectionChanged?: ((e: SelectionChangedEvent) => void);
rtlEnabled?: boolean;
selectedItemKeys?: Array<any>;
selectedItems?: Array<any>;
selectionMode?: SingleMultipleOrNone;
stylingMode?: ButtonStyle;
tabIndex?: number;
visible?: boolean;
width?: number | string | undefined;
defaultSelectedItemKeys?: Array<any>;
onSelectedItemKeysChange?: (value: Array<any>) => void;
defaultSelectedItems?: Array<any>;
onSelectedItemsChange?: (value: Array<any>) => void;
buttonRender?: (...params: any) => React.ReactNode;
buttonComponent?: React.ComponentType<any>;
}>;
declare const Options: ((props: IOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
accessKey?: string | undefined;
activeStateEnabled?: boolean | undefined;
buttonTemplate?: template | ((buttonData: any, buttonContent: any) => string | any) | undefined;
disabled?: boolean | undefined;
elementAttr?: Record<string, any> | undefined;
focusStateEnabled?: boolean | undefined;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean | undefined;
items?: (dxButtonGroupItem | SchedulerPredefinedDateNavigatorItem)[] | undefined;
keyExpr?: string | (() => void) | undefined;
onContentReady?: ((e: ButtonGroupContentReadyEvent) => void) | undefined;
onDisposing?: ((e: ButtonGroupDisposingEvent) => void) | undefined;
onInitialized?: ((e: ButtonGroupInitializedEvent) => void) | undefined;
onItemClick?: ((e: ItemClickEvent) => void) | undefined;
onOptionChanged?: ((e: ButtonGroupOptionChangedEvent) => void) | undefined;
onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
rtlEnabled?: boolean | undefined;
selectedItemKeys?: any[] | undefined;
selectedItems?: any[] | undefined;
selectionMode?: SingleMultipleOrNone | undefined;
stylingMode?: ButtonStyle | undefined;
tabIndex?: number | undefined;
visible?: boolean | undefined;
width?: number | string | undefined;
defaultSelectedItemKeys?: any[] | undefined;
onSelectedItemKeysChange?: ((value: Array<any>) => void) | undefined;
defaultSelectedItems?: any[] | undefined;
onSelectedItemsChange?: ((value: Array<any>) => void) | undefined;
buttonRender?: ((...params: any) => React.ReactNode) | undefined;
buttonComponent?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IOptionsItemProps = React.PropsWithChildren<{
disabled?: boolean;
elementAttr?: Record<string, any>;
hint?: string;
icon?: string;
template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
text?: string;
type?: ButtonType | string;
visible?: boolean;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const OptionsItem: ((props: IOptionsItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
disabled?: boolean | undefined;
elementAttr?: Record<string, any> | undefined;
hint?: string | undefined;
icon?: string | undefined;
template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
text?: string | undefined;
type?: string | undefined;
visible?: boolean | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IPatternRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
message?: string;
pattern?: RegExp | string;
type?: ValidationRuleType;
}>;
declare const PatternRule: ((props: IPatternRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
ignoreEmptyValue?: boolean | undefined;
message?: string | undefined;
pattern?: string | RegExp | undefined;
type?: ValidationRuleType | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IRangeRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
max?: Date | number | string;
message?: string;
min?: Date | number | string;
reevaluate?: boolean;
type?: ValidationRuleType;
}>;
declare const RangeRule: ((props: IRangeRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
ignoreEmptyValue?: boolean | undefined;
max?: string | number | Date | undefined;
message?: string | undefined;
min?: string | number | Date | undefined;
reevaluate?: boolean | undefined;
type?: ValidationRuleType | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IRequiredRuleProps = React.PropsWithChildren<{
message?: string;
trim?: boolean;
type?: ValidationRuleType;
}>;
declare const RequiredRule: ((props: IRequiredRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
message?: string | undefined;
trim?: boolean | undefined;
type?: ValidationRuleType | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IResourceProps = React.PropsWithChildren<{
allowMultiple?: boolean;
colorExpr?: string;
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
displayExpr?: ((resource: any) => string) | string;
fieldExpr?: string;
icon?: string;
label?: string;
useColorAsDefault?: boolean;
valueExpr?: (() => void) | string;
}>;
declare const Resource: ((props: IResourceProps) => React.FunctionComponentElement<React.PropsWithChildren<{
allowMultiple?: boolean | undefined;
colorExpr?: string | undefined;
dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
displayExpr?: string | ((resource: any) => string) | undefined;
fieldExpr?: string | undefined;
icon?: string | undefined;
label?: string | undefined;
useColorAsDefault?: boolean | undefined;
valueExpr?: string | (() => void) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IScrollingProps = React.PropsWithChildren<{
mode?: ScrollMode;
}>;
declare const Scrolling: ((props: IScrollingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
mode?: ScrollMode | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ISimpleItemProps = React.PropsWithChildren<{
aiOptions?: Record<string, any> | {
disabled?: boolean;
instruction?: string | undefined;
};
colSpan?: number | undefined;
cssClass?: string | undefined;
dataField?: string | undefined;
editorOptions?: any | undefined;
editorType?: FormItemComponent;
helpText?: string | undefined;
isRequired?: boolean | undefined;
itemType?: FormItemType;
label?: Record<string, any> | {
alignment?: HorizontalAlignment;
location?: LabelLocation;
showColon?: boolean;
template?: ((itemData: {
component: dxForm;
dataField: string;
editorOptions: any;
editorType: string;
name: string;
text: string;
}, itemElement: any) => string | any) | template;
text?: string | undefined;
visible?: boolean;
};
name?: string | undefined;
template?: ((data: {
component: dxForm;
dataField: string;
editorOptions: Record<string, any>;
editorType: string;
name: string;
}, itemElement: any) => string | any) | template;
validationRules?: Array<CommonTypes.ValidationRule>;
visible?: boolean;
visibleIndex?: number | undefined;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const SimpleItem: ((props: ISimpleItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
aiOptions?: Record<string, any> | {
disabled?: boolean | undefined;
instruction?: string | undefined;
} | undefined;
colSpan?: number | undefined;
cssClass?: string | undefined;
dataField?: string | undefined;
editorOptions?: any | undefined;
editorType?: FormItemComponent | undefined;
helpText?: string | undefined;
isRequired?: boolean | undefined;
itemType?: FormItemType | undefined;
label?: Record<string, any> | {
alignment?: HorizontalAlignment | undefined;
location?: LabelLocation | undefined;
showColon?: boolean | undefined;
template?: template | ((itemData: {
component: dxForm;
dataField: string;
editorOptions: any;
editorType: string;
name: string;
text: string;
}, itemElement: any) => string | any) | undefined;
text?: string | undefined;
visible?: boolean | undefined;
} | undefined;
name?: string | undefined;
template?: template | ((data: {
component: dxForm;
dataField: string;
editorOptions: Record<string, any>;
editorType: string;
name: string;
}, itemElement: any) => string | any) | undefined;
validationRules?: CommonTypes.ValidationRule[] | undefined;
visible?: boolean | undefined;
visibleIndex?: number | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IStringLengthRuleProps = React.PropsWithChildren<{
ignoreEmptyValue?: boolean;
max?: number;
message?: