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.34 kB
JavaScript
import React from 'react';
import { SelectBox } from 'devextreme-react/select-box';
const ToolbarZoom = ({ data }) => {
const [dropDownOptions, setDropDownOptions] = React.useState();
const selectboxRef = React.useRef();
React.useEffect(() => {
const selectBoxElement = selectboxRef.current.instance().element();
setDropDownOptions({
container: data.getPopupContainer(selectBoxElement),
position: { my: 'left top', at: 'left bottom', of: selectBoxElement },
wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
});
}, []);
return (React.createElement("div", { className: "dxrd-toolbar-item-zoom", hidden: !data.visible },
React.createElement("div", { className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" },
React.createElement(SelectBox, { ref: selectboxRef, className: "dxrd-toolbar-item-zoom-editor", dataSource: data.widget.dataSource, onValueChanged: data.widget.onValueChanged, value: data.widget.value, acceptCustomValue: true, displayExpr: data.widget.displayExpr, useItemTextAsTitle: true, disabled: data.disabled, onCustomItemCreating: data.widget.onCustomItemCreating, width: 140, dropDownOptions: dropDownOptions, tabIndex: -1, inputAttr: data.widget.inputAttr }))));
};
export default ToolbarZoom;