devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
60 lines (59 loc) • 6.62 kB
JavaScript
import React from 'react';
import useDxAction from '../../../hooks/dxAction';
import TextBox from 'devextreme-react/text-box';
import Button from 'devextreme-react/button';
import CheckBox from 'devextreme-react/check-box';
import LoadIndicator from 'devextreme-react/load-indicator';
import List from 'devextreme-react/list';
import useDxMutationObserver from '../../../hooks/dxMutationObserver';
import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
const SearchResultItem = ({ item }) => {
const div = React.useRef(null);
useDxAction(div, item.itemClickAction, item.data);
return (React.createElement("div", { ref: div, className: "dxrd-preview-search-result-item dxd-list-item-back-color dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented", "aria-label": item.attr['aria-label'] },
React.createElement("div", { className: "dx-accessibility-field-background dxd-back-accented" }),
React.createElement("div", { className: "dxrd-preview-search-tab-item-text propertygrid-editor-displayName dxd-text-primary" }, item.data.text),
React.createElement("div", { className: "dxrd-preview-search-tab-item-info dxd-text-primary" }, item.info)));
};
const SearchComponent = ({ data }) => {
const viewModel = data.model.getViewModel();
React.useEffect(() => {
const disposeCallback = viewModel._viewModelEvents?.on(ViewModelChangedEvent, (args) => {
data._viewModelEvents.call(ViewModelChangedEvent, args);
});
return () => disposeCallback();
}, [viewModel]);
const searchWrapper = React.useRef();
useDxMutationObserver(searchWrapper, data.keyboardHelper);
return (React.createElement("div", { ref: searchWrapper, role: "search", "aria-haspopup": "listbox", className: "dxrd-preview-search-wrapper", hidden: !data.active || !data.visible },
React.createElement("div", { id: "dxrd-preview-search-live-region", className: "dxrd-visually-hidden", "aria-live": "polite", "aria-atomic": "true" }),
React.createElement("div", { className: "dxrd-preview-search-tab-header" },
React.createElement("span", { className: "dxrd-preview-search-tab-header-text dxrd-right-panel-header dxd-text-primary" }, viewModel.headerText),
React.createElement("div", { className: "dxrd-preview-search-tab-editor-button-container" },
React.createElement(TextBox, { className: "dxrd-preview-search-editor dx-searcheditor", inputAttr: viewModel.searchEditor.inputAttr, onFocusOut: viewModel.searchEditor.onFocusOut, onKeyDown: viewModel.searchEditor.onKeyDown }),
React.createElement(Button, { className: "dxrd-preview-search-button", text: viewModel.buttons.searchButton.text, disabled: viewModel.buttons.searchButton.disabled, onClick: viewModel.buttons.searchButton.onClick })),
React.createElement("div", { className: "dxrd-preview-search-tab-header-text" },
React.createElement(CheckBox, { className: "dxrd-preview-search-checkbox", text: viewModel.matchCaseEditor.text, value: viewModel.matchCaseEditor.value, onValueChanged: viewModel.matchCaseEditor.onValueChanged }),
React.createElement(CheckBox, { className: "dxrd-preview-search-checkbox dxrd-preview-search-checkbox-second", text: viewModel.matchWholeWordEditor.text, value: viewModel.matchWholeWordEditor.value, onValueChanged: viewModel.matchWholeWordEditor.onValueChanged }))),
(viewModel.searchResultCount > 0 || viewModel.loading) && (React.createElement("div", { className: "dxrd-preview-search-result-wrapper" },
React.createElement("div", { className: "dxrd-preview-search-result-header dxd-border-primary dxd-text-primary" },
React.createElement("div", { className: "dxrd-preview-search-tab-header dxrd-preview-search-indicator-group" },
React.createElement("div", { className: "dxrd-preview-search-results dxrd-preview-search-result-text", id: viewModel.searchResultHeaderId, "aria-busy": viewModel.loading ? 'true' : 'false' },
React.createElement("span", { className: "dxrd-preview-search-result-text-bold" }, viewModel.searchResultCount),
"\u00A0",
React.createElement("span", null, viewModel.resultsInText),
"\u00A0",
React.createElement("span", { className: "dxrd-preview-search-result-text-bold" }, viewModel.searchResultPageCount),
"\u00A0",
React.createElement("span", null, viewModel.resultsPagesText)),
React.createElement("div", { className: "dxrd-preview-search-results-navigation" },
React.createElement(LoadIndicator, { className: "dxrdp-search-loading", visible: viewModel.loading }),
React.createElement(Button, { className: "dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard", icon: viewModel.buttons.upButton.icon, onClick: viewModel.buttons.upButton.onClick, template: viewModel.buttons.upButton.template }),
React.createElement(Button, { className: "dxrd-preview-search-results-navigation-button dx-searcheditor-button dx-widget dx-dropdowneditor-button dxd-icon-highlighted dx-shape-standard", icon: viewModel.buttons.downButton.icon, onClick: viewModel.buttons.downButton.onClick, template: viewModel.buttons.downButton.template })))),
React.createElement("div", { className: "dx-accessibility-container-background dxd-back-accented" }),
React.createElement(List, { className: "dxrd-preview-search-result dxd-border-accented", "aria-labelledby": viewModel.searchResultHeaderId, dataSource: viewModel.searchResultDataSource, pageLoadMode: "scrollBottom", focusStateEnabled: false, hoverStateEnabled: false, onItemRendered: viewModel.onItemRendered, itemRender: (item) => React.createElement(SearchResultItem, { item: item }), noDataText: "" }))),
viewModel.searchCompleted && viewModel.searchResultCount === 0 && (React.createElement("div", { className: "dxrd-preview-search-result-header dxd-border-primary dxd-text-primary" },
React.createElement("div", { className: "dxrd-preview-search-tab-header dxrd-preview-search-indicator-group" },
React.createElement("div", { className: "dxrd-preview-search-result-text" }, viewModel.noResultText))))));
};
export default SearchComponent;