devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
19 lines (18 loc) • 1.47 kB
JavaScript
import React from 'react';
import dxZoom from '../../../../hooks/dxZoom';
import { processStyles } from '../../../../core/processStyles';
const CharacterComb = ({ data }) => {
const zoomRef = dxZoom(data.zoom);
const [value, setValue] = React.useState(data.field.editorValue.toString());
const handleValueChanged = event => {
const newValue = event.target.value;
setValue(newValue);
data.field.editorValue = newValue;
};
return (React.createElement("div", { ref: zoomRef, style: processStyles(data.containerStyle), onClick: event => data.activateEditor(data, event), className: `dxrp-editing-field-charactercomb dx-accessibility-editing-field-item dx-accessibility-border-accented ${data.active ? 'active' : ''} ${data.field.readOnly ? 'readOnly' : ''}` },
(!data.active || data.field.readOnly) &&
data.cells.map((cell, index) => (React.createElement("div", { key: index, className: "dxrp-editing-field-charactercomb-cell", style: processStyles(cell.style) }, cell.text))),
data.active && !data.field.readOnly &&
React.createElement("textarea", { className: "dxrp-editing-field-text dxrd-background-white", value: value, onChange: handleValueChanged, style: processStyles(data.textStyle), onBlur: () => data.hideEditor(true), onKeyUp: event => data.keypressAction(data, event.nativeEvent), onInput: event => data.onInput(data, event.nativeEvent) })));
};
export default CharacterComb;