devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
26 lines (25 loc) • 2.12 kB
JavaScript
import React from 'react';
import SelectBox from 'devextreme-react/select-box';
import useDxForceRerender from '../../../../../hooks/dxForceRerender';
import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
import { DateBox } from 'devextreme-react';
const TimeRangeMobile = ({ data }) => {
const forceRerender = useDxForceRerender();
React.useEffect(() => {
const eventHolder = data.popupModel;
return eventHolder._viewModelEvents?.on(ViewModelChangedEvent, forceRerender);
}, []);
return (React.createElement("div", { className: "dxrv-preview-date-range-mobile" },
React.createElement("div", { className: "dx-fieldset" },
React.createElement("div", { className: "dx-field" },
React.createElement(SelectBox, { dataSource: data.items, displayExpr: "displayName", onValueChanged: data.popupModel.onTextChanged, placeholder: data.popupModel.selectPeriodPlaceholder, useItemTextAsTitle: true })),
React.createElement("div", { className: "dx-field" },
React.createElement("div", { className: "dx-fieldset-column" },
React.createElement("div", { className: "dx-fieldset-header" }, data.popupModel.fromText),
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("div", { className: "dx-fieldset-column dx-fieldset-column-right" },
React.createElement("div", { className: "dx-fieldset-header" }, data.popupModel.untilText),
React.createElement("div", { className: "dxd-back-secondary dx-fieldset-column-separator" }),
React.createElement(DateBox, { type: "time", value: data.endRange.value, onValueChanged: (e) => data.endRange.onValueChanged(e), className: "dx-accessibility-timerange-item dxrv-timerange-picker-input-start" }))))));
};
export default TimeRangeMobile;