devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
40 lines (39 loc) • 4 kB
JavaScript
import React from 'react';
import Popup from 'devextreme-react/popup';
import { ScrollView } from 'devextreme-react/scroll-view';
import Template from '../../../../core/Template';
import { calculateWithZoomFactor } from '@devexpress/analytics-core/accessibility/_internal';
import useDxAction from '../../../../../hooks/dxAction';
import useDxMutationObserver from '../../../../../hooks/dxMutationObserver';
const PredefinedItem = ({ item }) => {
const ref = React.useRef();
useDxAction(ref, item.click, undefined);
return (React.createElement("div", { role: "option", ref: ref, "aria-selected": item.selected, className: `dxrv-daterange-editor-list-item dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented ${item.selected ? 'dxd-state-selected' : ''}` },
React.createElement("div", { className: "dx-accessibility-field-background dxd-back-accented" }),
item.displayName));
};
const DateRangePopupContainer = ({ data }) => {
const ref = React.useRef();
useDxMutationObserver(ref, data.dialogKeyboardHelper);
const popupOptions = data.getPopupSettings();
popupOptions.height = calculateWithZoomFactor(362);
const scrollViewRef = React.useRef();
const predefinedRangesRef = React.useRef();
React.useEffect(() => {
predefinedRangesRef.current = scrollViewRef.current?.instance().element();
}, [scrollViewRef.current]);
useDxMutationObserver(predefinedRangesRef, data.predefinedRanges.accessibilityKeyboardHelper);
return (React.createElement(Popup, { width: popupOptions.width, height: popupOptions.height, wrapperAttr: popupOptions.wrapperAttr, position: popupOptions.position, container: popupOptions.container, showTitle: popupOptions.showTitle, showCloseButton: popupOptions.showCloseButton, hideOnOutsideClick: popupOptions.hideOnOutsideClick, onHidden: popupOptions.onHidden, animation: popupOptions.animation, shading: popupOptions.shading, visible: popupOptions.visible },
React.createElement(ScrollView, { elementAttr: { 'role': 'dialog', 'aria-modal': 'true' }, showScrollbar: data.scrollViewOptions.showScrollbar, direction: data.scrollViewOptions.direction, useNative: data.scrollViewOptions.useNative, onInitialized: data.scrollViewOptions.onInitialized },
React.createElement("div", { className: "dxrv-daterange-editor-popup-container", ref: ref },
React.createElement(ScrollView, { className: "dxrv-daterange-editor-list dxrv-daterange-editor-item dxd-border-primary dx-accessibility-daterange-item", elementAttr: { role: 'listbox' }, showScrollbar: data.predefinedRanges.scrollViewOptions.showScrollbar, scrollByContent: data.predefinedRanges.scrollViewOptions.scrollByContent, bounceEnabled: data.predefinedRanges.scrollViewOptions.bounceEnabled, useNative: data.predefinedRanges.scrollViewOptions.useNative, scrollByThumb: data.predefinedRanges.scrollViewOptions.scrollByThumb, onInitialized: data.predefinedRanges.scrollViewOptions.onInitialized, ref: scrollViewRef },
React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
data.predefinedRanges.items.map((item, index) => React.createElement(PredefinedItem, { key: index, item: item }))),
React.createElement("div", { className: "dxrv-daterange-editor-item" },
React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.startRange })),
React.createElement("div", { className: "dxrv-daterange-editor-item" },
React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.endRange }))))));
};
export default DateRangePopupContainer;