devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
45 lines (44 loc) • 3.47 kB
JavaScript
import React from 'react';
import Popup from 'devextreme-react/popup';
import useDxMutationObserver from '../../../../../hooks/dxMutationObserver';
import Box, { Item } from 'devextreme-react/box';
import { calculateWithZoomFactor, getLocalization } from '@devexpress/analytics-core/analytics-internal-native';
import { DateBox } from 'devextreme-react';
const TimeRangePopupContainer = ({ data }) => {
const ref = React.useRef();
useDxMutationObserver(ref, data.dialogKeyboardHelper);
const popupOptions = data.getPopupSettings(true);
popupOptions.height = calculateWithZoomFactor(255);
function extendItem(event, group) {
const item = group[event.itemIndex];
if (item) {
event.itemData['click'] = item.click;
event.itemData['id'] = item.id;
}
return event;
}
function onRangeItemClick(event, group) {
data.onRangeItemClick(extendItem(event, group));
}
function onRangeItemsRendered(event, group) {
data.onRangeItemsRendered(extendItem(event, group));
}
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, "aria-modal": "true" },
React.createElement("div", { className: "dxrv-timerange-editor-popup-content", ref: ref },
data.predefinedDateRanges?.groupedItems?.map((group, groupIndex) => (React.createElement("div", { className: "dxrv-timerange-editor-popup-container", key: `group-${groupIndex}` },
React.createElement(Box, { width: "450px", height: 25, direction: "row", items: group.map(item => { return { ratio: 1, template: item.template }; }), onItemClick: (e) => onRangeItemClick(e, group), onItemRendered: (e) => onRangeItemsRendered(e, group) })))),
React.createElement(Box, { direction: "row", width: "450px", height: 30, className: "dxrv-timerange-picker-container" },
React.createElement(Item, { ratio: 1 },
React.createElement("div", { className: "dxrv-timerange-editor-popup-picker" },
React.createElement("span", null,
" ",
getLocalization('Start', 'PreviewStringId.RangeParameters_Start')),
React.createElement(DateBox, { type: "time", value: data.startRange.value, onValueChanged: (e) => data.startRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-start" }))),
React.createElement(Item, { ratio: 1 },
React.createElement("div", { className: "dxrv-timerange-editor-popup-picker" },
React.createElement("span", null,
" ",
getLocalization('End', 'PreviewStringId.RangeParameters_End')),
React.createElement(DateBox, { type: "time", value: data.endRange.value, onValueChanged: (e) => data.endRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-end" })))))));
};
export default TimeRangePopupContainer;