devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
29 lines (28 loc) • 2.48 kB
JavaScript
import React from 'react';
import Button from 'devextreme-react/button';
import LoadIndicator from 'devextreme-react/load-indicator';
import { ScrollView } from 'devextreme-react/scroll-view';
import Template from '../../core/Template/Template';
import useDxMutationObserver from '../../../hooks/dxMutationObserver';
const ParametersPanel = React.forwardRef(({ data }, ref) => {
const scrollViewRef = React.useRef();
const htmlRef = React.useRef();
React.useEffect(() => {
htmlRef.current = scrollViewRef.current.instance().element();
}, [scrollViewRef.current]);
useDxMutationObserver(htmlRef, data.keyboardHelper);
const onScrollViewInitialized = (args) => args.component.option('useKeyboard', false);
const reset = () => data.model.restore();
const submit = (params) => data.model.validateAndSubmit(params);
React.useImperativeHandle(ref, () => ({ reset, submit }), [data]);
return (React.createElement("div", { className: "dxrd-preview-parameters-wrapper dxrd-preview-property-wrapper", hidden: !(data.active && data.visible) },
React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary", hidden: !data.model.showHeader }, data.model.headerText),
(!data.model || data.model.isEmpty) && (React.createElement("div", { className: "dxrd-group-header-parameters-empty dxd-text-primary" }, data.model.emptyText)),
(data.model || data.model.isEmpty()) && (React.createElement(ScrollView, { className: "dxrd-right-panel-body", id: "propertiesPanel", showScrollbar: 'onHover', useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized, ref: scrollViewRef },
React.createElement("div", { role: "tree", className: "dx-fieldset dxrd-right-panel-content" },
React.createElement(Template, { template: "dx-propertieseditor", data: data.propertyGrid })),
React.createElement("div", { className: "dxrd-preview-parameter-actions-container", hidden: !data.model.showButtons },
React.createElement(LoadIndicator, { className: "dxrd-preview-parameter-action dxrd-preview-loading", visible: data.model.parametersLoading }),
data.model.buttons.map((button, index) => (React.createElement(Button, { key: index, className: "dxrd-preview-parameter-action dx-accessibility-focus-border-accented", elementAttr: button.elementAttr, text: button.text, onClick: button.onClick }))))))));
});
export default ParametersPanel;