devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
31 lines (30 loc) • 3.02 kB
JavaScript
import React from 'react';
import Button from 'devextreme-react/button';
import SelectBox from 'devextreme-react/select-box';
import Template from '../../../../core/Template';
import useDxForceRerender from '../../../../../hooks/dxForceRerender';
import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
const DateRangeMobile = ({ 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(Button, { className: `dxrv-daterange-editor-button ${data.popupModel.startButton.focused ? 'dx-button-default' : ''}`, text: data.popupModel.startButton.text, stylingMode: data.popupModel.startButton.stylingMode, focusStateEnabled: data.popupModel.startButton.focusStateEnabled, activeStateEnabled: data.popupModel.startButton.activeStateEnabled, onClick: data.popupModel.startButton.onClick })),
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(Button, { className: `dxrv-daterange-editor-button ${data.popupModel.endButton.focused ? 'dx-button-default' : ''}`, text: data.popupModel.endButton.text, stylingMode: data.popupModel.endButton.stylingMode, focusStateEnabled: data.popupModel.endButton.focusStateEnabled, activeStateEnabled: data.popupModel.endButton.activeStateEnabled, onClick: data.popupModel.endButton.onClick }))),
React.createElement("div", { className: "dx-field" },
React.createElement("div", { className: "dxrv-daterange-editor-item" },
data.popupModel.startButton.focused && React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.startRange }),
data.popupModel.endButton.focused && React.createElement(Template, { template: "dxrv-daterange-calendar", data: data.endRange }))))));
};
export default DateRangeMobile;