UNPKG

devextreme-react

Version:

DevExtreme React UI and Visualization Components

492 lines (490 loc) • 23.3 kB
/*! * devextreme-react * Version: 25.1.6 * Build date: Mon Oct 13 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 dxHtmlEditor, { Properties } from "devextreme/ui/html_editor"; import { IHtmlOptions, NestedComponentMeta } from "./core/component"; import type { ContentReadyEvent, DisposingEvent, FocusInEvent, FocusOutEvent, InitializedEvent, ValueChangedEvent, AICommandNameExtended, HtmlEditorImageUploadMode, dxHtmlEditorImageUploadTabItem, HtmlEditorImageUploadTab, dxHtmlEditorTableContextMenuItem, HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem, AICommand, AICommandName, AIToolbarItem, dxHtmlEditorToolbarItem } from "devextreme/ui/html_editor"; import type { ContentReadyEvent as FileUploaderContentReadyEvent, DisposingEvent as FileUploaderDisposingEvent, InitializedEvent as FileUploaderInitializedEvent, ValueChangedEvent as FileUploaderValueChangedEvent, BeforeSendEvent, DropZoneEnterEvent, DropZoneLeaveEvent, FilesUploadedEvent, OptionChangedEvent, ProgressEvent, UploadAbortedEvent, UploadedEvent, UploadErrorEvent, UploadStartedEvent, UploadHttpMethod, FileUploadMode, dxFileUploaderOptions } from "devextreme/ui/file_uploader"; import type { ValidationStatus, template, ToolbarItemLocation, ToolbarItemComponent } from "devextreme/common"; 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 UploadInfo from "devextreme/file_management/upload_info"; import type DataSource from "devextreme/data/data_source"; type ReplaceFieldTypes<TSource, TReplacement> = { [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P]; }; type IHtmlEditorOptionsNarrowedEvents = { onContentReady?: ((e: ContentReadyEvent) => void); onDisposing?: ((e: DisposingEvent) => void); onFocusIn?: ((e: FocusInEvent) => void); onFocusOut?: ((e: FocusOutEvent) => void); onInitialized?: ((e: InitializedEvent) => void); onValueChanged?: ((e: ValueChangedEvent) => void); }; type IHtmlEditorOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IHtmlEditorOptionsNarrowedEvents> & IHtmlOptions & { defaultValue?: any; onValueChange?: (value: any) => void; }>; interface HtmlEditorRef { instance: () => dxHtmlEditor; } declare const HtmlEditor: (props: React.PropsWithChildren<IHtmlEditorOptions> & { ref?: Ref<HtmlEditorRef>; }) => ReactElement | null; type ICommandProps = React.PropsWithChildren<{ name?: AICommandNameExtended; options?: any; prompt?: ((param: string) => string); text?: string; }>; declare const Command: ((props: ICommandProps) => React.FunctionComponentElement<React.PropsWithChildren<{ name?: AICommandNameExtended | undefined; options?: any; prompt?: ((param: string) => string) | undefined; text?: string | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IConverterProps = React.PropsWithChildren<{ fromHtml?: ((value: string) => string); toHtml?: ((value: string) => string); }>; declare const Converter: ((props: IConverterProps) => React.FunctionComponentElement<React.PropsWithChildren<{ fromHtml?: ((value: string) => string) | undefined; toHtml?: ((value: string) => string) | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IFileUploaderOptionsProps = React.PropsWithChildren<{ abortUpload?: ((file: any, uploadInfo?: UploadInfo) => any); accept?: string; accessKey?: string | undefined; activeStateEnabled?: boolean; allowCanceling?: boolean; allowedFileExtensions?: Array<string>; chunkSize?: number; dialogTrigger?: any | string | undefined; disabled?: boolean; dropZone?: any | string | undefined; elementAttr?: Record<string, any>; focusStateEnabled?: boolean; height?: number | string | undefined; hint?: string | undefined; hoverStateEnabled?: boolean; inputAttr?: any; invalidFileExtensionMessage?: string; invalidMaxFileSizeMessage?: string; invalidMinFileSizeMessage?: string; isDirty?: boolean; isValid?: boolean; labelText?: string; maxFileSize?: number; minFileSize?: number; multiple?: boolean; name?: string; onBeforeSend?: ((e: BeforeSendEvent) => void); onContentReady?: ((e: FileUploaderContentReadyEvent) => void); onDisposing?: ((e: FileUploaderDisposingEvent) => void); onDropZoneEnter?: ((e: DropZoneEnterEvent) => void); onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void); onFilesUploaded?: ((e: FilesUploadedEvent) => void); onInitialized?: ((e: FileUploaderInitializedEvent) => void); onOptionChanged?: ((e: OptionChangedEvent) => void); onProgress?: ((e: ProgressEvent) => void); onUploadAborted?: ((e: UploadAbortedEvent) => void); onUploaded?: ((e: UploadedEvent) => void); onUploadError?: ((e: UploadErrorEvent) => void); onUploadStarted?: ((e: UploadStartedEvent) => void); onValueChanged?: ((e: FileUploaderValueChangedEvent) => void); progress?: number; readOnly?: boolean; readyToUploadMessage?: string; rtlEnabled?: boolean; selectButtonText?: string; showFileList?: boolean; tabIndex?: number; uploadAbortedMessage?: string; uploadButtonText?: string; uploadChunk?: ((file: any, uploadInfo: UploadInfo) => any); uploadCustomData?: any; uploadedMessage?: string; uploadFailedMessage?: string; uploadFile?: ((file: any, progressCallback: (() => void)) => any); uploadHeaders?: any; uploadMethod?: UploadHttpMethod; uploadMode?: FileUploadMode; uploadUrl?: string; validationError?: any; validationErrors?: Array<any>; validationStatus?: ValidationStatus; value?: Array<any>; visible?: boolean; width?: number | string | undefined; defaultValue?: Array<any>; onValueChange?: (value: Array<any>) => void; }>; declare const FileUploaderOptions: ((props: IFileUploaderOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{ abortUpload?: ((file: any, uploadInfo?: UploadInfo) => any) | undefined; accept?: string | undefined; accessKey?: string | undefined; activeStateEnabled?: boolean | undefined; allowCanceling?: boolean | undefined; allowedFileExtensions?: string[] | undefined; chunkSize?: number | undefined; dialogTrigger?: any | string | undefined; disabled?: boolean | undefined; dropZone?: any | string | undefined; elementAttr?: Record<string, any> | undefined; focusStateEnabled?: boolean | undefined; height?: number | string | undefined; hint?: string | undefined; hoverStateEnabled?: boolean | undefined; inputAttr?: any; invalidFileExtensionMessage?: string | undefined; invalidMaxFileSizeMessage?: string | undefined; invalidMinFileSizeMessage?: string | undefined; isDirty?: boolean | undefined; isValid?: boolean | undefined; labelText?: string | undefined; maxFileSize?: number | undefined; minFileSize?: number | undefined; multiple?: boolean | undefined; name?: string | undefined; onBeforeSend?: ((e: BeforeSendEvent) => void) | undefined; onContentReady?: ((e: FileUploaderContentReadyEvent) => void) | undefined; onDisposing?: ((e: FileUploaderDisposingEvent) => void) | undefined; onDropZoneEnter?: ((e: DropZoneEnterEvent) => void) | undefined; onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void) | undefined; onFilesUploaded?: ((e: FilesUploadedEvent) => void) | undefined; onInitialized?: ((e: FileUploaderInitializedEvent) => void) | undefined; onOptionChanged?: ((e: OptionChangedEvent) => void) | undefined; onProgress?: ((e: ProgressEvent) => void) | undefined; onUploadAborted?: ((e: UploadAbortedEvent) => void) | undefined; onUploaded?: ((e: UploadedEvent) => void) | undefined; onUploadError?: ((e: UploadErrorEvent) => void) | undefined; onUploadStarted?: ((e: UploadStartedEvent) => void) | undefined; onValueChanged?: ((e: FileUploaderValueChangedEvent) => void) | undefined; progress?: number | undefined; readOnly?: boolean | undefined; readyToUploadMessage?: string | undefined; rtlEnabled?: boolean | undefined; selectButtonText?: string | undefined; showFileList?: boolean | undefined; tabIndex?: number | undefined; uploadAbortedMessage?: string | undefined; uploadButtonText?: string | undefined; uploadChunk?: ((file: any, uploadInfo: UploadInfo) => any) | undefined; uploadCustomData?: any; uploadedMessage?: string | undefined; uploadFailedMessage?: string | undefined; uploadFile?: ((file: any, progressCallback: (() => void)) => any) | undefined; uploadHeaders?: any; uploadMethod?: UploadHttpMethod | undefined; uploadMode?: FileUploadMode | undefined; uploadUrl?: string | undefined; validationError?: any; validationErrors?: any[] | undefined; validationStatus?: ValidationStatus | undefined; value?: any[] | undefined; visible?: boolean | undefined; width?: number | string | undefined; defaultValue?: any[] | undefined; onValueChange?: ((value: Array<any>) => void) | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IImageUploadProps = React.PropsWithChildren<{ fileUploaderOptions?: dxFileUploaderOptions; fileUploadMode?: HtmlEditorImageUploadMode; tabs?: Array<dxHtmlEditorImageUploadTabItem | HtmlEditorImageUploadTab>; uploadDirectory?: string | undefined; uploadUrl?: string | undefined; }>; declare const ImageUpload: ((props: IImageUploadProps) => React.FunctionComponentElement<React.PropsWithChildren<{ fileUploaderOptions?: dxFileUploaderOptions | undefined; fileUploadMode?: HtmlEditorImageUploadMode | undefined; tabs?: (dxHtmlEditorImageUploadTabItem | HtmlEditorImageUploadTab)[] | undefined; uploadDirectory?: string | undefined; uploadUrl?: string | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IItemProps = React.PropsWithChildren<{ beginGroup?: boolean; closeMenuOnClick?: boolean; disabled?: boolean; icon?: string; items?: Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>; name?: HtmlEditorPredefinedContextMenuItem | undefined | HtmlEditorPredefinedToolbarItem | string; selectable?: boolean; selected?: boolean; template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; text?: string; visible?: boolean; acceptedValues?: Array<boolean | number | string>; commands?: Array<AICommand | AICommandName>; cssClass?: string | undefined; html?: string; locateInMenu?: LocateInMenuMode; location?: ToolbarItemLocation; menuItemTemplate?: (() => string | any) | template; options?: any; showText?: ShowTextMode; widget?: ToolbarItemComponent; render?: (...params: any) => React.ReactNode; component?: React.ComponentType<any>; menuItemRender?: (...params: any) => React.ReactNode; menuItemComponent?: React.ComponentType<any>; }>; declare const Item: ((props: IItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{ beginGroup?: boolean | undefined; closeMenuOnClick?: boolean | undefined; disabled?: boolean | undefined; icon?: string | undefined; items?: (dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem)[] | undefined; name?: HtmlEditorPredefinedContextMenuItem | undefined | HtmlEditorPredefinedToolbarItem | string; selectable?: boolean | undefined; selected?: boolean | undefined; template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined; text?: string | undefined; visible?: boolean | undefined; acceptedValues?: (string | number | boolean)[] | undefined; commands?: (AICommandName | AICommand)[] | undefined; cssClass?: string | undefined; html?: string | undefined; locateInMenu?: LocateInMenuMode | undefined; location?: ToolbarItemLocation | undefined; menuItemTemplate?: template | (() => string | any) | undefined; options?: any; showText?: ShowTextMode | undefined; widget?: ToolbarItemComponent | undefined; render?: ((...params: any) => React.ReactNode) | undefined; component?: 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 IMediaResizingProps = React.PropsWithChildren<{ allowedTargets?: Array<string>; enabled?: boolean; }>; declare const MediaResizing: ((props: IMediaResizingProps) => React.FunctionComponentElement<React.PropsWithChildren<{ allowedTargets?: string[] | undefined; enabled?: boolean | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IMentionProps = React.PropsWithChildren<{ dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string; displayExpr?: ((item: any) => string) | string; itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template; marker?: string; minSearchLength?: number; searchExpr?: Array<(() => any) | string> | (() => any) | string; searchTimeout?: number; template?: ((mentionData: { id: string | number; marker: string; value: any; }, contentElement: any) => string | any) | template; valueExpr?: (() => void) | string; itemRender?: (...params: any) => React.ReactNode; itemComponent?: React.ComponentType<any>; render?: (...params: any) => React.ReactNode; component?: React.ComponentType<any>; }>; declare const Mention: ((props: IMentionProps) => React.FunctionComponentElement<React.PropsWithChildren<{ dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined; displayExpr?: string | ((item: any) => string) | undefined; itemTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined; marker?: string | undefined; minSearchLength?: number | undefined; searchExpr?: string | (string | (() => any))[] | (() => any) | undefined; searchTimeout?: number | undefined; template?: template | ((mentionData: { id: string | number; marker: string; value: any; }, contentElement: any) => string | any) | undefined; valueExpr?: string | (() => void) | undefined; itemRender?: ((...params: any) => React.ReactNode) | undefined; itemComponent?: 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 ITabProps = React.PropsWithChildren<{ name?: HtmlEditorImageUploadTab | undefined; }>; declare const Tab: ((props: ITabProps) => React.FunctionComponentElement<React.PropsWithChildren<{ name?: HtmlEditorImageUploadTab | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ITableContextMenuProps = React.PropsWithChildren<{ enabled?: boolean; items?: Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>; }>; declare const TableContextMenu: ((props: ITableContextMenuProps) => React.FunctionComponentElement<React.PropsWithChildren<{ enabled?: boolean | undefined; items?: (dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem)[] | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type ITableContextMenuItemProps = React.PropsWithChildren<{ beginGroup?: boolean; closeMenuOnClick?: boolean; disabled?: boolean; icon?: string; items?: Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>; name?: HtmlEditorPredefinedContextMenuItem | undefined; selectable?: boolean; selected?: boolean; template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; text?: string; visible?: boolean; render?: (...params: any) => React.ReactNode; component?: React.ComponentType<any>; }>; declare const TableContextMenuItem: ((props: ITableContextMenuItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{ beginGroup?: boolean | undefined; closeMenuOnClick?: boolean | undefined; disabled?: boolean | undefined; icon?: string | undefined; items?: (dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem)[] | undefined; name?: HtmlEditorPredefinedContextMenuItem | undefined; selectable?: boolean | undefined; selected?: boolean | undefined; template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, 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 ITableResizingProps = React.PropsWithChildren<{ enabled?: boolean; minColumnWidth?: number; minRowHeight?: number; }>; declare const TableResizing: ((props: ITableResizingProps) => React.FunctionComponentElement<React.PropsWithChildren<{ enabled?: boolean | undefined; minColumnWidth?: number | undefined; minRowHeight?: number | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IToolbarProps = React.PropsWithChildren<{ container?: any | string; items?: Array<AIToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem>; multiline?: boolean; }>; declare const Toolbar: ((props: IToolbarProps) => React.FunctionComponentElement<React.PropsWithChildren<{ container?: any | string; items?: (HtmlEditorPredefinedToolbarItem | AIToolbarItem | dxHtmlEditorToolbarItem)[] | undefined; multiline?: boolean | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; type IToolbarItemProps = React.PropsWithChildren<{ acceptedValues?: Array<boolean | number | string>; commands?: Array<AICommand | AICommandName>; cssClass?: string | undefined; disabled?: boolean; html?: string; locateInMenu?: LocateInMenuMode; location?: ToolbarItemLocation; menuItemTemplate?: (() => string | any) | template; name?: HtmlEditorPredefinedToolbarItem | string | string; options?: any; showText?: ShowTextMode; template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; text?: string; visible?: boolean; widget?: ToolbarItemComponent; menuItemRender?: (...params: any) => React.ReactNode; menuItemComponent?: React.ComponentType<any>; render?: (...params: any) => React.ReactNode; component?: React.ComponentType<any>; }>; declare const ToolbarItem: ((props: IToolbarItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{ acceptedValues?: (string | number | boolean)[] | undefined; commands?: (AICommandName | AICommand)[] | undefined; cssClass?: string | undefined; disabled?: boolean | undefined; html?: string | undefined; locateInMenu?: LocateInMenuMode | undefined; location?: ToolbarItemLocation | undefined; menuItemTemplate?: template | (() => string | any) | undefined; name?: string | undefined; options?: any; showText?: ShowTextMode | undefined; template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined; text?: string | undefined; visible?: boolean | undefined; widget?: ToolbarItemComponent | undefined; menuItemRender?: ((...params: any) => React.ReactNode) | undefined; menuItemComponent?: 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 IVariablesProps = React.PropsWithChildren<{ dataSource?: Array<string> | DataSource | DataSourceOptions | null | Store | string; escapeChar?: Array<string> | string; }>; declare const Variables: ((props: IVariablesProps) => React.FunctionComponentElement<React.PropsWithChildren<{ dataSource?: string | string[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined; escapeChar?: string | string[] | undefined; } & { children?: React.ReactNode; } & { elementDescriptor: import("./core/configuration/react/element").IElementDescriptor; }>>) & NestedComponentMeta; export default HtmlEditor; export { HtmlEditor, IHtmlEditorOptions, HtmlEditorRef, Command, ICommandProps, Converter, IConverterProps, FileUploaderOptions, IFileUploaderOptionsProps, ImageUpload, IImageUploadProps, Item, IItemProps, MediaResizing, IMediaResizingProps, Mention, IMentionProps, Tab, ITabProps, TableContextMenu, ITableContextMenuProps, TableContextMenuItem, ITableContextMenuItemProps, TableResizing, ITableResizingProps, Toolbar, IToolbarProps, ToolbarItem, IToolbarItemProps, Variables, IVariablesProps }; import type * as HtmlEditorTypes from 'devextreme/ui/html_editor_types'; export { HtmlEditorTypes };