devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
31 lines (30 loc) • 2.37 kB
JavaScript
import React from 'react';
import Template from '../../../core/Template';
import Painter from '../../Widgets/Painter';
import { Popup } from 'devextreme-react/popup';
const PopupImageEditingField = ({ data }) => {
const elementRef = React.useRef();
const popupContainerRef = React.useRef();
const [popupOptions, setPopupOptions] = React.useState({});
React.useEffect(() => {
const element = elementRef.current;
const container = data.popupData.getPopupContainer(element);
setPopupOptions({
position: {
boundary: container,
of: popupContainerRef.current,
collision: 'flipfit'
},
container: container
});
data.setEditingFieldElement(popupContainerRef.current);
}, []);
return (React.createElement("div", { ref: elementRef, className: "dxrp-editing-field-container", style: data.containerStyle },
React.createElement("div", { ref: popupContainerRef, className: 'dx-accessibility-editing-field-item dx-accessibility-border-accented ' + data.parentPopupClass, onClick: event => data.activateEditor(data, event) },
React.createElement(Painter, { className: "dxrp-editing-field-popup-container-cloned", options: data.getPainterOptions() }),
React.createElement(Popup, { className: "dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen", width: data.containerStyle.width, height: data.containerStyle.height, position: popupOptions.position, container: popupOptions.container, showTitle: false, deferRendering: false, hideOnOutsideClick: true, showCloseButton: false, onContentReady: data.popupData.onContentReady, onHiding: data.popupData.onHiding, onShown: data.popupData.onShown, shading: data.popupData.shading, wrapperAttr: { class: 'dx-picture-edit-popup-content dx-picture-edit-popup-content-fullscreen' }, animation: {
show: { type: 'slide', duration: 0, to: { opacity: 1 }, from: { opacity: 0 } },
hide: { type: 'fade', duration: 100, to: { opacity: 0 }, from: { opacity: 1 } }
}, visible: data.popupData.visible }, data.popupData.showContent ? React.createElement(Template, { template: data.popupData.contentTemplate, data: data }) : React.createElement("div", null)))));
};
export default PopupImageEditingField;