devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
75 lines (74 loc) • 8.7 kB
JavaScript
import React, { useMemo, useRef } from 'react';
import Button from 'devextreme-react/button';
import CheckBox from 'devextreme-react/check-box';
import LoadIndicator from 'devextreme-react/load-indicator';
import SelectBox from 'devextreme-react/select-box';
import TextArea from 'devextreme-react/text-area';
import Popup, { Position } from 'devextreme-react/popup';
import Template from '../../core/Template';
import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
import { LoadPanel } from 'devextreme-react';
const AIPanel = ({ data }) => {
const viewModel = data.model.getViewModel();
React.useEffect(() => {
const parentEventManagerHolder = data;
return viewModel._viewModelEvents?.on(ViewModelChangedEvent, (args) => parentEventManagerHolder._viewModelEvents.call(ViewModelChangedEvent, args));
}, [viewModel]);
const popupAttributes = useMemo(() => {
return {
class: 'dxrd-preview-ai-panel-warning-popup'
};
}, []);
const containerRef = useRef(null);
return (React.createElement("div", { id: "dxrd-preview-ai-panel-id", className: "dxrd-preview-ai-panel", hidden: !(data.visible && data.active) },
React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary" },
React.createElement("span", null,
" ",
viewModel?.aiPanelHeaderLabel,
" ")),
!!viewModel && (React.createElement("div", { className: 'dxrd-preview-ai-panel-wrapper' },
React.createElement("div", { className: "dxrd-preview-ai-panel-wrapper dx-editors" },
React.createElement("div", { className: "dx-fieldset" },
React.createElement("div", { className: "dx-field dxrd-preview-ai-select-box" },
React.createElement("label", { className: "dxrd-preview-ai-form-label", htmlFor: "dxrv-ai-target-select" },
" ",
viewModel.targetContentText),
React.createElement(SelectBox, { className: "dxrd-preview-ai-form-input", dataSource: viewModel.targetSelectBoxOptions.dataSource, onValueChanged: viewModel.targetSelectBoxOptions.onValueChanged, value: viewModel.targetSelectBoxOptions.value, displayExpr: viewModel.targetSelectBoxOptions.displayExpr, disabled: viewModel.targetSelectBoxOptions.disabled, valueExpr: viewModel.targetSelectBoxOptions.valueExpr, inputAttr: viewModel.targetSelectBoxOptions.inputAttr })),
viewModel.languageSelectBoxOptions.visible && (React.createElement("div", { className: "dx-field dxrd-preview-ai-select-box" },
React.createElement("label", { className: "dxrd-preview-ai-form-label", htmlFor: "dxrv-ai-language-select" },
" ",
viewModel.targetLanguageText,
" "),
React.createElement(SelectBox, { className: "dxrd-preview-ai-form-input", dataSource: viewModel.languageSelectBoxOptions.dataSource, onValueChanged: viewModel.languageSelectBoxOptions.onValueChanged, value: viewModel.languageSelectBoxOptions.value, displayExpr: viewModel.languageSelectBoxOptions.displayExpr, disabled: viewModel.languageSelectBoxOptions.disabled, valueExpr: viewModel.languageSelectBoxOptions.valueExpr, showClearButton: viewModel.languageSelectBoxOptions.showClearButton, inputAttr: viewModel.languageSelectBoxOptions.inputAttr }))),
viewModel.pageSelectBoxVisible && (React.createElement("div", { className: "dx-field dxrd-preview-ai-select-box" },
React.createElement("label", { className: "dxrd-preview-ai-form-label", htmlFor: "dxrv-ai-page-select" },
" ",
viewModel.pageSelectText),
React.createElement(SelectBox, { className: "dxrd-preview-ai-form-input", dataSource: viewModel.pageSelectBoxOptions.dataSource, onValueChanged: viewModel.pageSelectBoxOptions.onValueChanged, value: viewModel.pageSelectBoxOptions.value, displayExpr: viewModel.pageSelectBoxOptions.displayExpr, disabled: viewModel.pageSelectBoxOptions.disabled, valueExpr: viewModel.pageSelectBoxOptions.valueExpr, searchExpr: viewModel.pageSelectBoxOptions.searchExpr, searchEnabled: viewModel.pageSelectBoxOptions.searchEnabled, visible: viewModel.pageSelectBoxOptions.visible, inputAttr: viewModel.pageSelectBoxOptions.inputAttr }))),
React.createElement("div", { className: "dx-field" },
React.createElement("div", { className: "dxrd-preview-ai-buttons-wrapper" },
React.createElement(Button, { className: "dxrd-preview-ai-buttons dx-accessibility-focus-border-accented", text: viewModel.buttons.translateTextButton.text, disabled: viewModel.buttons.translateTextButton.disabled, onClick: viewModel.buttons.translateTextButton.onClick, width: viewModel.buttons.translateTextButton.width, visible: viewModel.buttons.translateTextButton.visible }),
React.createElement(Button, { className: "dxrd-preview-ai-buttons dx-accessibility-focus-border-accented", text: viewModel.buttons.summarizeTextButton.text, disabled: viewModel.buttons.summarizeTextButton.disabled, onClick: viewModel.buttons.summarizeTextButton.onClick, width: viewModel.buttons.summarizeTextButton.width, visible: viewModel.buttons.summarizeTextButton.visible })))),
React.createElement("div", { ref: containerRef, className: "dxrd-ai-panel-result-container" },
viewModel.resultVisible && (React.createElement("div", { className: "dxrd-right-panel-header dxd-text-primary dxd-border-primary dxrd-ai-result-text" },
React.createElement("span", { className: "dxrd-right-panel-result-text" },
" ",
viewModel.textProcessingResultHeaderText,
" "),
React.createElement("div", { role: "button", className: "dxrd-right-panel-copy-button dx-accessibility-focus-border-accented", tabIndex: 0, onKeyDown: (e) => viewModel.copyText(data, e) },
React.createElement(Template, { template: data.model?.copyButtonTemplate, className: "dxd-icon-highlighted", onClick: (e) => viewModel.buttons.copyResultButton.onClick(e) })))),
React.createElement(TextArea, { id: "dxrd-ai-panel-text-area-id", tabIndex: 0, className: "dx-accessibility-focus-border-accented dxrd-preview-ai-panel-textarea dxd-back-primary2", value: viewModel.aiProcessingResultText, onInput: (e) => e.event.preventDefault(), onPaste: (e) => e.event.preventDefault(), onKeyDown: (e) => e.event.key !== 'Tab' && e.event.preventDefault(), hoverStateEnabled: false })),
React.createElement(LoadPanel, { visible: viewModel.loading, showIndicator: false, container: containerRef.current, position: { of: containerRef.current }, showPane: false, height: '100%', width: '100%', message: '' },
React.createElement(LoadIndicator, { height: 90, width: 90, animationType: "sparkle" }))),
React.createElement(Popup, { width: 350, height: 200, shading: false, focusStateEnabled: false, visible: viewModel.warningTextLimitPopupVisible, container: '#dxrd-preview-ai-panel-id', showCloseButton: false, showTitle: false, wrapperAttr: popupAttributes },
React.createElement(Position, { at: "top", my: "top", of: "#dxrd-preview-ai-panel-id", collision: "fit" }),
React.createElement("span", { className: "dxrd-preview-ai-panel-warning-popup-text" },
" ",
viewModel.limitExceededWarningMsg,
" "),
React.createElement(CheckBox, { className: "dxrd-preview-ai-panel-warning-popup-checkbox", text: viewModel.proceedForAllCheckBoxOptions.text, value: viewModel.proceedForAllCheckBoxOptions.value, onValueChanged: viewModel.proceedForAllCheckBoxOptions.onValueChanged }),
React.createElement("div", { className: "dxrd-preview-ai-panel-warning-popup-button-group" },
React.createElement(Button, { text: viewModel.proceedNextChunkButtonText, onClick: viewModel.proceedNextButtonClick, className: "dxrd-preview-ai-panel-warning-popup-button dx-button-default" }),
React.createElement(Button, { text: viewModel.cancelChunkedOperationButtonText, onClick: viewModel.cancelProcessButtonClick, className: "dxrd-preview-ai-panel-warning-popup-button" })))))));
};
export default AIPanel;