devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
20 lines (19 loc) • 1.6 kB
JavaScript
import React from 'react';
import Template from '../../../../core/Template';
import dxZoom from '../../../../../hooks/dxZoom';
import { processStyles } from '../../../../../core/processStyles';
const EditingFieldContainer = ({ data }) => {
const zoomRef = dxZoom(data.zoom);
React.useEffect(() => {
data.setEditingFieldElement(zoomRef.current);
}, []);
return (React.createElement("div", { ref: zoomRef, style: processStyles(data.containerStyle), className: `dxrp-editing-field-container dx-accessibility-editing-field-item dx-accessibility-border-accented ${data.active ? 'active' : ''} ${data.field.readOnly ? 'readonly' : ''}` },
React.createElement("div", { className: "dxrp-editing-field-borders", style: data.borderStyle }),
React.createElement("div", { className: "dxrp-editing-field-content", onClick: event => data.activateEditor(data, event) },
(!data.active || data.field.readOnly) &&
React.createElement("div", { className: `dxrp-editing-field-readonly-text ${!data.wordWrap ? 'dxrp-editing-field-text-wordwrap' : ''}`, style: data.textStyle }, data.field.htmlValue
? React.createElement("div", { className: "dxrp-editing-field-text-html dxrp-editing-field-text-html-complex", style: data.breakOffsetStyle, dangerouslySetInnerHTML: { __html: data.field.htmlValue } })
: data.field.editValue.toString()),
data.active && !data.field.readOnly && React.createElement(Template, { template: data.editorTemplate, data: data.data }))));
};
export default EditingFieldContainer;