@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
79 lines (77 loc) • 1.86 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
const baseStyles = {
width: '100%',
height: '100%'
};
/*
* COMPONENTS
*/
const Header = () => /*#__PURE__*/_jsx("div", {
style: {
width: '6px'
}
});
const Cell = instance => {
const {
isNavigatedCell,
webComponentsReactProperties
} = instance;
if (isNavigatedCell) {
return /*#__PURE__*/_jsx("div", {
style: baseStyles,
className: webComponentsReactProperties.classes.navigation,
"data-component-name": "AnalyticalTableNavigatedCell"
});
}
return /*#__PURE__*/_jsx("div", {
style: baseStyles
});
};
/*
* TABLE HOOKS
*/
const visibleColumns = (currentVisibleColumns, {
instance: {
webComponentsReactProperties
}
}) => {
if (!webComponentsReactProperties.withNavigationHighlight) {
return currentVisibleColumns.filter(({
id
}) => id !== '__ui5wcr__internal_navigation_column');
}
const highlightColumn = currentVisibleColumns.find(({
id
}) => id === '__ui5wcr__internal_navigation_column');
return [...currentVisibleColumns.filter(({
id
}) => id !== '__ui5wcr__internal_navigation_column'), highlightColumn];
};
const columns = (currentColumns, {
instance
}) => {
const {
withNavigationHighlight
} = instance.webComponentsReactProperties;
if (!withNavigationHighlight) {
return currentColumns;
}
return [...currentColumns, {
id: '__ui5wcr__internal_navigation_column',
disableFilters: true,
disableSortBy: true,
disableGroupBy: true,
disableResizing: true,
disableDragAndDrop: true,
width: 6,
minWidth: 6,
maxWidth: 6,
Header,
Cell
}];
};
export const useRowNavigationIndicators = hooks => {
hooks.columns.push(columns);
hooks.visibleColumns.push(visibleColumns);
};
useRowNavigationIndicators.pluginName = 'useRowNavigationIndicators';