devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
67 lines (66 loc) • 6.25 kB
JavaScript
import React from 'react';
import Button from 'devextreme-react/button';
import Template from '../../../core/Template';
import ScrollView from 'devextreme-react/scroll-view';
import { CollectionEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
import useDxAccordion from '../../../../hooks/dxAccordion';
import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
import useDxAction from '../../../../hooks/dxAction';
import useDxForceRerender from '../../../../hooks/dxForceRerender';
import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
const Action = ({ value, contentTemplate }) => {
const ref = React.useRef();
useDxAction(ref, value.select, value);
return (React.createElement("div", { ref: ref, className: `dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented ${value.selected ? 'dxd-state-selected' : ''}`, "aria-selected": value.selected },
React.createElement("div", { className: "dx-collection-item" }, contentTemplate({ data: value }))));
};
const CollectionEditorActions = ({ data }) => {
if (!data.showButtons)
return undefined;
return (React.createElement("div", { className: "dx-collectioneditor-actions-wrapper" },
data.buttons.up.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.up.action, disabled: data.buttons.up.disabled, icon: "dxrd-svg-operations-moveup", template: data.buttons.up.template, hint: data.buttons.up.text }),
data.buttons.down.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.down.action, disabled: data.buttons.down.disabled, icon: "dxrd-svg-operations-movedown", template: data.buttons.down.template, hint: data.buttons.down.text }),
React.createElement("div", { className: "dx-collectioneditor-action-separator" }),
data.buttons.add.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.add.action, disabled: data.buttons.add.disabled, template: data.buttons.add.template, icon: "dxrd-svg-operations-add", hint: data.buttons.add.text }),
data.buttons.delete.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.delete.action, disabled: data.buttons.delete.disabled, template: data.buttons.delete.template, icon: "dxrd-svg-operations-remove", hint: data.buttons.delete.text })));
};
const CollectionEditorWrapper = ({ data, contentTemplate }) => {
const [viewModel, setViewModel] = React.useState();
const forceRerender = useDxForceRerender();
React.useEffect(() => {
const editorModel = new CollectionEditorViewModel(data);
const editorViewModel = editorModel.getViewModel();
const subscription = editorViewModel._viewModelEvents.on(ViewModelChangedEvent, forceRerender);
setViewModel(editorViewModel);
return () => {
subscription && subscription();
editorModel?.dispose();
setViewModel(null);
};
}, []);
if (!viewModel)
return undefined;
return React.createElement(CollectionEditor, { viewModel: viewModel, contentTemplate: contentTemplate });
};
const CollectionEditor = ({ viewModel, contentTemplate }) => {
const onScrollViewInitialized = (args) => {
args.component.option('useKeyboard', false);
};
const ref = React.useRef();
useDxAccordion(ref, viewModel);
useDxMutationObserver(ref, viewModel.keyboardHelper);
return (React.createElement("div", { className: "dx-collectioneditor" },
React.createElement("div", { ref: ref },
React.createElement("div", { className: "dx-collectioneditor-header dx-accordion-header" },
React.createElement("div", { className: "dx-editor-header" },
React.createElement("div", { role: "treeitem", className: "dx-field dxrd-complex-editor dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger", "aria-expanded": viewModel.alwaysShow || !viewModel.collapsed ? 'true' : 'false', "aria-owns": viewModel.contentId, id: viewModel.headerId },
React.createElement(CollectionEditorActions, { data: viewModel }),
!!viewModel.displayName && React.createElement("div", { className: "dx-collectioneditor-header-text dxd-text-primary", style: { paddingLeft: viewModel.padding + 'px' } },
React.createElement(Template, { className: `dx-collapsing-image dxrd-display-inline-block ${!viewModel.collapsed ? 'dx-image-expanded' : ''}`, template: "dxrd-svg-collapsed" }),
React.createElement("div", { className: "dx-group-header-font dxd-text-primary dxrd-display-inline-block", title: viewModel.displayName }, viewModel.displayName))))),
React.createElement("div", { role: "group", className: "dx-accordion-content", "aria-hidden": !viewModel.alwaysShow && viewModel.collapsed ? 'true' : 'false', "aria-labelledby": viewModel.headerId, id: viewModel.contentId },
React.createElement("div", { hidden: viewModel.disabled },
React.createElement(ScrollView, { showScrollbar: "onHover", disabled: !viewModel.showScroll, useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized }, viewModel.values.length === 0 ? React.createElement("div", { className: "dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info" },
React.createElement("span", { className: "dx-collectioneditor-empty-text" }, viewModel.emptyAreaText)) : React.createElement("div", { className: "dx-collectioneditor-items" }, viewModel.values.map(value => React.createElement(Action, { value: value, key: value.value.key, contentTemplate: contentTemplate })))))))));
};
export default CollectionEditorWrapper;