UNPKG

devextreme-react

Version:

DevExtreme React UI and Visualization Components

883 lines (881 loc) • 30.4 kB
/*! * devextreme-react * Version: 24.2.6 * Build date: Mon Mar 17 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 */ "use client"; import * as React from "react"; import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react"; import dxRangeSelector from "devextreme/viz/range_selector"; import { Component as BaseComponent } from "./core/component"; import NestedOption from "./core/nested-option"; const RangeSelector = memo(forwardRef((props, ref) => { const baseRef = useRef(null); useImperativeHandle(ref, () => ({ instance() { return baseRef.current?.getInstance(); } }), [baseRef.current]); const subscribableOptions = useMemo(() => (["loadingIndicator", "loadingIndicator.show", "value"]), []); const independentEvents = useMemo(() => (["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onValueChanged"]), []); const defaults = useMemo(() => ({ defaultLoadingIndicator: "loadingIndicator", defaultValue: "value", }), []); const expectedChildren = useMemo(() => ({ background: { optionName: "background", isCollectionItem: false }, behavior: { optionName: "behavior", isCollectionItem: false }, chart: { optionName: "chart", isCollectionItem: false }, export: { optionName: "export", isCollectionItem: false }, indent: { optionName: "indent", isCollectionItem: false }, loadingIndicator: { optionName: "loadingIndicator", isCollectionItem: false }, margin: { optionName: "margin", isCollectionItem: false }, scale: { optionName: "scale", isCollectionItem: false }, shutter: { optionName: "shutter", isCollectionItem: false }, size: { optionName: "size", isCollectionItem: false }, sliderHandle: { optionName: "sliderHandle", isCollectionItem: false }, sliderMarker: { optionName: "sliderMarker", isCollectionItem: false }, title: { optionName: "title", isCollectionItem: false }, value: { optionName: "value", isCollectionItem: false } }), []); return (React.createElement((BaseComponent), { WidgetClass: dxRangeSelector, ref: baseRef, subscribableOptions, independentEvents, defaults, expectedChildren, ...props, })); })); const _componentAggregation = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "aggregation", }, }); }; const Aggregation = Object.assign(_componentAggregation, { componentType: "option", }); const _componentAggregationInterval = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "aggregationInterval", }, }); }; const AggregationInterval = Object.assign(_componentAggregationInterval, { componentType: "option", }); const _componentArgumentFormat = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "argumentFormat", }, }); }; const ArgumentFormat = Object.assign(_componentArgumentFormat, { componentType: "option", }); const _componentBackground = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "background", ExpectedChildren: { backgroundImage: { optionName: "image", isCollectionItem: false }, image: { optionName: "image", isCollectionItem: false } }, }, }); }; const Background = Object.assign(_componentBackground, { componentType: "option", }); const _componentBackgroundImage = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "image", }, }); }; const BackgroundImage = Object.assign(_componentBackgroundImage, { componentType: "option", }); const _componentBehavior = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "behavior", }, }); }; const Behavior = Object.assign(_componentBehavior, { componentType: "option", }); const _componentBorder = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "border", }, }); }; const Border = Object.assign(_componentBorder, { componentType: "option", }); const _componentBreak = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "breaks", IsCollectionItem: true, }, }); }; const Break = Object.assign(_componentBreak, { componentType: "option", }); const _componentBreakStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "breakStyle", }, }); }; const BreakStyle = Object.assign(_componentBreakStyle, { componentType: "option", }); const _componentChart = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "chart", ExpectedChildren: { commonSeriesSettings: { optionName: "commonSeriesSettings", isCollectionItem: false }, dataPrepareSettings: { optionName: "dataPrepareSettings", isCollectionItem: false }, series: { optionName: "series", isCollectionItem: true }, seriesTemplate: { optionName: "seriesTemplate", isCollectionItem: false }, valueAxis: { optionName: "valueAxis", isCollectionItem: false } }, }, }); }; const Chart = Object.assign(_componentChart, { componentType: "option", }); const _componentColor = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "color", }, }); }; const Color = Object.assign(_componentColor, { componentType: "option", }); const _componentCommonSeriesSettings = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "commonSeriesSettings", ExpectedChildren: { aggregation: { optionName: "aggregation", isCollectionItem: false }, border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false }, commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false }, commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false }, hoverStyle: { optionName: "hoverStyle", isCollectionItem: false }, label: { optionName: "label", isCollectionItem: false }, point: { optionName: "point", isCollectionItem: false }, reduction: { optionName: "reduction", isCollectionItem: false }, selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false }, valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false } }, }, }); }; const CommonSeriesSettings = Object.assign(_componentCommonSeriesSettings, { componentType: "option", }); const _componentCommonSeriesSettingsHoverStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "hoverStyle", ExpectedChildren: { border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, hatching: { optionName: "hatching", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const CommonSeriesSettingsHoverStyle = Object.assign(_componentCommonSeriesSettingsHoverStyle, { componentType: "option", }); const _componentCommonSeriesSettingsLabel = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "label", ExpectedChildren: { argumentFormat: { optionName: "argumentFormat", isCollectionItem: false }, border: { optionName: "border", isCollectionItem: false }, connector: { optionName: "connector", isCollectionItem: false }, font: { optionName: "font", isCollectionItem: false }, format: { optionName: "format", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const CommonSeriesSettingsLabel = Object.assign(_componentCommonSeriesSettingsLabel, { componentType: "option", }); const _componentCommonSeriesSettingsSelectionStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "selectionStyle", ExpectedChildren: { border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, hatching: { optionName: "hatching", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const CommonSeriesSettingsSelectionStyle = Object.assign(_componentCommonSeriesSettingsSelectionStyle, { componentType: "option", }); const _componentConnector = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "connector", }, }); }; const Connector = Object.assign(_componentConnector, { componentType: "option", }); const _componentDataPrepareSettings = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "dataPrepareSettings", }, }); }; const DataPrepareSettings = Object.assign(_componentDataPrepareSettings, { componentType: "option", }); const _componentExport = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "export", }, }); }; const Export = Object.assign(_componentExport, { componentType: "option", }); const _componentFont = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "font", }, }); }; const Font = Object.assign(_componentFont, { componentType: "option", }); const _componentFormat = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "format", }, }); }; const Format = Object.assign(_componentFormat, { componentType: "option", }); const _componentHatching = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "hatching", }, }); }; const Hatching = Object.assign(_componentHatching, { componentType: "option", }); const _componentHeight = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "height", }, }); }; const Height = Object.assign(_componentHeight, { componentType: "option", }); const _componentHoverStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "hoverStyle", ExpectedChildren: { border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, hatching: { optionName: "hatching", isCollectionItem: false }, pointBorder: { optionName: "border", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const HoverStyle = Object.assign(_componentHoverStyle, { componentType: "option", }); const _componentImage = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "image", ExpectedChildren: { height: { optionName: "height", isCollectionItem: false }, url: { optionName: "url", isCollectionItem: false }, width: { optionName: "width", isCollectionItem: false } }, }, }); }; const Image = Object.assign(_componentImage, { componentType: "option", }); const _componentIndent = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "indent", }, }); }; const Indent = Object.assign(_componentIndent, { componentType: "option", }); const _componentLabel = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "label", ExpectedChildren: { argumentFormat: { optionName: "argumentFormat", isCollectionItem: false }, border: { optionName: "border", isCollectionItem: false }, connector: { optionName: "connector", isCollectionItem: false }, font: { optionName: "font", isCollectionItem: false }, format: { optionName: "format", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const Label = Object.assign(_componentLabel, { componentType: "option", }); const _componentLength = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "length", }, }); }; const Length = Object.assign(_componentLength, { componentType: "option", }); const _componentLoadingIndicator = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "loadingIndicator", DefaultsProps: { defaultShow: "show" }, ExpectedChildren: { font: { optionName: "font", isCollectionItem: false } }, }, }); }; const LoadingIndicator = Object.assign(_componentLoadingIndicator, { componentType: "option", }); const _componentMargin = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "margin", }, }); }; const Margin = Object.assign(_componentMargin, { componentType: "option", }); const _componentMarker = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "marker", ExpectedChildren: { label: { optionName: "label", isCollectionItem: false }, markerLabel: { optionName: "label", isCollectionItem: false } }, }, }); }; const Marker = Object.assign(_componentMarker, { componentType: "option", }); const _componentMarkerLabel = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "label", ExpectedChildren: { format: { optionName: "format", isCollectionItem: false } }, }, }); }; const MarkerLabel = Object.assign(_componentMarkerLabel, { componentType: "option", }); const _componentMaxRange = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "maxRange", }, }); }; const MaxRange = Object.assign(_componentMaxRange, { componentType: "option", }); const _componentMinorTick = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "minorTick", }, }); }; const MinorTick = Object.assign(_componentMinorTick, { componentType: "option", }); const _componentMinorTickInterval = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "minorTickInterval", }, }); }; const MinorTickInterval = Object.assign(_componentMinorTickInterval, { componentType: "option", }); const _componentMinRange = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "minRange", }, }); }; const MinRange = Object.assign(_componentMinRange, { componentType: "option", }); const _componentPoint = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "point", ExpectedChildren: { color: { optionName: "color", isCollectionItem: false }, hoverStyle: { optionName: "hoverStyle", isCollectionItem: false }, image: { optionName: "image", isCollectionItem: false }, pointBorder: { optionName: "border", isCollectionItem: false }, selectionStyle: { optionName: "selectionStyle", isCollectionItem: false } }, }, }); }; const Point = Object.assign(_componentPoint, { componentType: "option", }); const _componentPointBorder = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "border", }, }); }; const PointBorder = Object.assign(_componentPointBorder, { componentType: "option", }); const _componentPointHoverStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "hoverStyle", ExpectedChildren: { border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, pointBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const PointHoverStyle = Object.assign(_componentPointHoverStyle, { componentType: "option", }); const _componentPointImage = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "image", ExpectedChildren: { height: { optionName: "height", isCollectionItem: false }, url: { optionName: "url", isCollectionItem: false }, width: { optionName: "width", isCollectionItem: false } }, }, }); }; const PointImage = Object.assign(_componentPointImage, { componentType: "option", }); const _componentPointSelectionStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "selectionStyle", ExpectedChildren: { border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, pointBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const PointSelectionStyle = Object.assign(_componentPointSelectionStyle, { componentType: "option", }); const _componentReduction = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "reduction", }, }); }; const Reduction = Object.assign(_componentReduction, { componentType: "option", }); const _componentScale = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "scale", ExpectedChildren: { aggregationInterval: { optionName: "aggregationInterval", isCollectionItem: false }, break: { optionName: "breaks", isCollectionItem: true }, breakStyle: { optionName: "breakStyle", isCollectionItem: false }, label: { optionName: "label", isCollectionItem: false }, marker: { optionName: "marker", isCollectionItem: false }, maxRange: { optionName: "maxRange", isCollectionItem: false }, minorTick: { optionName: "minorTick", isCollectionItem: false }, minorTickInterval: { optionName: "minorTickInterval", isCollectionItem: false }, minRange: { optionName: "minRange", isCollectionItem: false }, scaleLabel: { optionName: "label", isCollectionItem: false }, tick: { optionName: "tick", isCollectionItem: false }, tickInterval: { optionName: "tickInterval", isCollectionItem: false } }, }, }); }; const Scale = Object.assign(_componentScale, { componentType: "option", }); const _componentScaleLabel = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "label", ExpectedChildren: { font: { optionName: "font", isCollectionItem: false }, format: { optionName: "format", isCollectionItem: false } }, }, }); }; const ScaleLabel = Object.assign(_componentScaleLabel, { componentType: "option", }); const _componentSelectionStyle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "selectionStyle", ExpectedChildren: { border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, hatching: { optionName: "hatching", isCollectionItem: false }, pointBorder: { optionName: "border", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false } }, }, }); }; const SelectionStyle = Object.assign(_componentSelectionStyle, { componentType: "option", }); const _componentSeries = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "series", IsCollectionItem: true, ExpectedChildren: { aggregation: { optionName: "aggregation", isCollectionItem: false }, border: { optionName: "border", isCollectionItem: false }, color: { optionName: "color", isCollectionItem: false }, commonSeriesSettingsHoverStyle: { optionName: "hoverStyle", isCollectionItem: false }, commonSeriesSettingsLabel: { optionName: "label", isCollectionItem: false }, commonSeriesSettingsSelectionStyle: { optionName: "selectionStyle", isCollectionItem: false }, hoverStyle: { optionName: "hoverStyle", isCollectionItem: false }, label: { optionName: "label", isCollectionItem: false }, point: { optionName: "point", isCollectionItem: false }, reduction: { optionName: "reduction", isCollectionItem: false }, selectionStyle: { optionName: "selectionStyle", isCollectionItem: false }, seriesBorder: { optionName: "border", isCollectionItem: false }, valueErrorBar: { optionName: "valueErrorBar", isCollectionItem: false } }, }, }); }; const Series = Object.assign(_componentSeries, { componentType: "option", }); const _componentSeriesBorder = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "border", }, }); }; const SeriesBorder = Object.assign(_componentSeriesBorder, { componentType: "option", }); const _componentSeriesTemplate = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "seriesTemplate", }, }); }; const SeriesTemplate = Object.assign(_componentSeriesTemplate, { componentType: "option", }); const _componentShutter = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "shutter", }, }); }; const Shutter = Object.assign(_componentShutter, { componentType: "option", }); const _componentSize = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "size", }, }); }; const Size = Object.assign(_componentSize, { componentType: "option", }); const _componentSliderHandle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "sliderHandle", }, }); }; const SliderHandle = Object.assign(_componentSliderHandle, { componentType: "option", }); const _componentSliderMarker = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "sliderMarker", ExpectedChildren: { font: { optionName: "font", isCollectionItem: false }, format: { optionName: "format", isCollectionItem: false } }, }, }); }; const SliderMarker = Object.assign(_componentSliderMarker, { componentType: "option", }); const _componentSubtitle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "subtitle", ExpectedChildren: { font: { optionName: "font", isCollectionItem: false } }, }, }); }; const Subtitle = Object.assign(_componentSubtitle, { componentType: "option", }); const _componentTick = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "tick", }, }); }; const Tick = Object.assign(_componentTick, { componentType: "option", }); const _componentTickInterval = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "tickInterval", }, }); }; const TickInterval = Object.assign(_componentTickInterval, { componentType: "option", }); const _componentTitle = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "title", ExpectedChildren: { font: { optionName: "font", isCollectionItem: false }, margin: { optionName: "margin", isCollectionItem: false }, subtitle: { optionName: "subtitle", isCollectionItem: false } }, }, }); }; const Title = Object.assign(_componentTitle, { componentType: "option", }); const _componentUrl = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "url", }, }); }; const Url = Object.assign(_componentUrl, { componentType: "option", }); const _componentValue = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "value", DefaultsProps: { defaultEndValue: "endValue", defaultStartValue: "startValue" }, ExpectedChildren: { length: { optionName: "length", isCollectionItem: false } }, }, }); }; const Value = Object.assign(_componentValue, { componentType: "option", }); const _componentValueAxis = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "valueAxis", }, }); }; const ValueAxis = Object.assign(_componentValueAxis, { componentType: "option", }); const _componentValueErrorBar = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "valueErrorBar", }, }); }; const ValueErrorBar = Object.assign(_componentValueErrorBar, { componentType: "option", }); const _componentWidth = (props) => { return React.createElement((NestedOption), { ...props, elementDescriptor: { OptionName: "width", }, }); }; const Width = Object.assign(_componentWidth, { componentType: "option", }); export default RangeSelector; export { RangeSelector, Aggregation, AggregationInterval, ArgumentFormat, Background, BackgroundImage, Behavior, Border, Break, BreakStyle, Chart, Color, CommonSeriesSettings, CommonSeriesSettingsHoverStyle, CommonSeriesSettingsLabel, CommonSeriesSettingsSelectionStyle, Connector, DataPrepareSettings, Export, Font, Format, Hatching, Height, HoverStyle, Image, Indent, Label, Length, LoadingIndicator, Margin, Marker, MarkerLabel, MaxRange, MinorTick, MinorTickInterval, MinRange, Point, PointBorder, PointHoverStyle, PointImage, PointSelectionStyle, Reduction, Scale, ScaleLabel, SelectionStyle, Series, SeriesBorder, SeriesTemplate, Shutter, Size, SliderHandle, SliderMarker, Subtitle, Tick, TickInterval, Title, Url, Value, ValueAxis, ValueErrorBar, Width };