@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
181 lines (180 loc) • 9.48 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
import { useResizeObserver } from '../hooks';
import { ActionButton, ActionCell, Body, BodyCell, BodyRow, ColumnControls, DropDownCell, Header, HeaderCell, HeaderTitle, InlineEditCell, LoadingPlaceholder, Navigation, NoDataIcon, NoDataPlaceholder, NoDataPlaceholderContentWrapper, Pagination, PaginationArrowButton, PaginationNumericButton, PaginationNumericButtons, ResizingBar, RowsPerPage, Scrollable, TableResults, } from './Components';
import { DataGridContext, } from './data-grid-context';
import { useTableNav } from './data-grid-nav';
import { updateColumnWidths } from './helpers';
var BorderStyleEnum;
(function (BorderStyleEnum) {
BorderStyleEnum["AllSides"] = "all-sides";
BorderStyleEnum["Horizontal"] = "horizontal";
BorderStyleEnum["Vertical"] = "vertical";
BorderStyleEnum["None"] = "none";
})(BorderStyleEnum || (BorderStyleEnum = {}));
var HeaderStyleEnum;
(function (HeaderStyleEnum) {
HeaderStyleEnum["Filled"] = "filled";
HeaderStyleEnum["Clean"] = "clean";
})(HeaderStyleEnum || (HeaderStyleEnum = {}));
const DEFAULT_STYLING = {
borderStyle: BorderStyleEnum.Horizontal,
hasHoverEffects: true,
hasZebraStriping: false,
headerStyle: HeaderStyleEnum.Filled,
isCompact: false,
};
const DataGridComponent = function DataGrid(_a) {
var { isResizable = true, isLoading = false, isKeyboardNavigable = true, isAutoResizingColumns = true, tableInstance, components, rootProps, styling = {}, tableNavRef, isSkeletonLoading = false, skeletonProps, ref, portalTarget = document.body, styleRules, styleRuleValueConverters, htmlAttributes, className, style } = _a, restProps = __rest(_a, ["isResizable", "isLoading", "isKeyboardNavigable", "isAutoResizingColumns", "tableInstance", "components", "rootProps", "styling", "tableNavRef", "isSkeletonLoading", "skeletonProps", "ref", "portalTarget", "styleRules", "styleRuleValueConverters", "htmlAttributes", "className", "style"]);
const { className: rootClassName = '', style: rootStyle = {} } = rootProps || {};
const [isScrollable, setIsScrollable] = useState(false);
const [isMediumNavigation, setIsMediumNavigation] = useState(false);
const [isSmallNavigation, setIsSmallNavigation] = useState(false);
const tableRef = useRef(null);
const scrollableContainerRef = useRef(null);
tableInstance.setOptions((prevOptions) => {
return Object.assign(Object.assign({}, prevOptions), { enableSorting: isSkeletonLoading ? false : prevOptions.enableSorting });
});
// Triggers when the whole container is resized
useResizeObserver({
onResize: (entry) => {
if (entry.width === undefined) {
return;
}
isAutoResizingColumns &&
!isResizable &&
updateColumnWidths(tableInstance, entry.width); // don't resize columns when the table is resizable due to problems with the resize handler.
setIsScrollable(tableInstance.getTotalSize() > entry.width);
setIsMediumNavigation(entry.width <= 680);
setIsSmallNavigation(entry.width <= 480);
},
ref: scrollableContainerRef,
});
// Triggers when the individual columns are resized
useResizeObserver({
onResize: () => {
if (scrollableContainerRef.current === null) {
return;
}
setIsScrollable(tableInstance.getTotalSize() >
scrollableContainerRef.current.clientWidth);
},
ref: tableRef,
});
const Styling = useMemo(() => (Object.assign(Object.assign({}, DEFAULT_STYLING), styling)), [styling]);
const Components = useMemo(() => (Object.assign(Object.assign({}, DataGridComponents), components)), [components]);
const ScrollableContainer = (Components === null || Components === void 0 ? void 0 : Components.Scrollable)
? Components.Scrollable
: Scrollable;
const { listeners, tableNav } = useTableNav({
isDebug: false,
});
/** Surface the tableNav instance for programmatic control if needed */
useImperativeHandle(tableNavRef, () => tableNav, [tableNav]);
useEffect(() => {
var _a;
if (isAutoResizingColumns && isResizable) {
updateColumnWidths(tableInstance, ((_a = scrollableContainerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)
? scrollableContainerRef.current.clientWidth - 1 // -1 to avoid horizontal scrollbar
: 0);
}
}, [isAutoResizingColumns, tableInstance, isResizable]);
return (_jsx(DataGridContext.Provider, { value: {
components: Components,
dataGridNav: tableNav,
hasResizeColumns: isAutoResizingColumns,
isKeyboardNavigationEnabled: isKeyboardNavigable,
isLoading: isLoading,
isMediumNavigation,
isResizable: isResizable,
isSkeletonLoading,
isSmallNavigation,
portalTarget: portalTarget,
skeletonProps,
styleRuleValueConverters,
styleRules,
tableProps: tableInstance,
}, children: _jsxs("div", Object.assign({}, rootProps, { className: classNames('ndl-data-grid-root', rootClassName, className, {
'ndl-data-grid-border-horizontal': Styling.borderStyle === BorderStyleEnum.Horizontal ||
Styling.borderStyle === BorderStyleEnum.AllSides,
'ndl-data-grid-border-vertical': Styling.borderStyle === BorderStyleEnum.Vertical ||
Styling.borderStyle === BorderStyleEnum.AllSides,
'ndl-data-grid-compact': Styling.isCompact,
'ndl-data-grid-focusable-cells': isKeyboardNavigable,
'ndl-data-grid-header-filled': Styling.headerStyle === HeaderStyleEnum.Filled,
'ndl-data-grid-hover-effects': Styling.hasHoverEffects,
'ndl-data-grid-resizable': isResizable,
'ndl-data-grid-zebra-striping': Styling.hasZebraStriping,
}), ref: ref, style: Object.assign(Object.assign({}, rootStyle), style) }, restProps, htmlAttributes, (isKeyboardNavigable ? listeners : {}), { children: [_jsx(ScrollableContainer, { ref: scrollableContainerRef, htmlAttributes: {
onKeyDown: (e) => {
if (isScrollable && !isKeyboardNavigable) {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
e.stopPropagation();
}
}
},
// Ensure that the user can focus and scroll inside the table with arrow keys even if there is no interactive element inside
tabIndex: isScrollable && !isKeyboardNavigable ? 0 : undefined,
}, children: _jsxs("div", { className: "ndl-div-table", role: isKeyboardNavigable ? 'grid' : 'table', "aria-busy": isLoading ? 'true' : 'false', ref: tableRef, children: [(Components === null || Components === void 0 ? void 0 : Components.Header) && _jsx(Components.Header, {}), (Components === null || Components === void 0 ? void 0 : Components.Body) && _jsx(Components.Body, {})] }) }), (Components === null || Components === void 0 ? void 0 : Components.Navigation) && _jsx(Components.Navigation, {})] })) }));
};
const DataGridComponents = {
ActionButton,
ActionCell,
Body,
BodyCell,
BodyRow,
ColumnControls,
DropDownCell,
Header,
HeaderCell,
HeaderTitle,
InlineEditCell,
LoadingPlaceholder,
Navigation,
NoDataIcon,
NoDataPlaceholder,
NoDataPlaceholderContentWrapper,
Pagination,
PaginationArrowButton,
PaginationNumericButton,
PaginationNumericButtons,
ResizingBar,
RowsPerPage,
Scrollable,
TableResults,
};
const DataGrid = Object.assign(DataGridComponent, DataGridComponents);
export { DataGrid };
//# sourceMappingURL=DataGrid.js.map