@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
172 lines (171 loc) • 9.12 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/>.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
import { classNames } from '../_common/defaultImports';
import { forwardRef } from '../helpers';
import { useResizeObserver } from '../hooks';
import { ActionButton, Body, BodyCell, BodyRow, ColumnControls, DropDownCell, Header, HeaderCell, HeaderTitle, InlineEditCell, LoadingPlaceholder, Navigation, NoDataIcon, NoDataIllustration, NoDataPlaceholder, NoDataPlaceholderContentWrapper, Pagination, PaginationArrowButton, PaginationNumericButton, PaginationNumericButtons, ResizingBar, RowActionCell, RowsPerPage, Scrollable, TableResults, } from './Components';
import { useTableNav } from './data-grid-nav';
import { DataGridContext, } from './DataGridContext';
import { updateColumnWidths } from './helpers';
// TODO v4: Rename components, they are confusing in this current state.
// E.g. RowActionCell should be renamed to ActionCell, all rows have actions, not just the row action cell.
// If we were to have an action for a single row, it would be a row action.
export const DataGridComponents = {
ResizingBar: ResizingBar,
Header: Header,
Body: Body,
BodyCell: BodyCell,
BodyRow: BodyRow,
RowActionCell: RowActionCell,
InlineEditCell: InlineEditCell,
DropDownCell: DropDownCell,
HeaderCell: HeaderCell,
HeaderTitle: HeaderTitle,
ActionButton: ActionButton,
ColumnControls: ColumnControls,
Navigation: Navigation,
TableResults: TableResults,
RowsPerPage: RowsPerPage,
Pagination: Pagination,
PaginationNumericButtons: PaginationNumericButtons,
PaginationNumericButton: PaginationNumericButton,
PaginationArrowButton: PaginationArrowButton,
LoadingPlaceholder: LoadingPlaceholder,
NoDataPlaceholder: NoDataPlaceholder,
/** @deprecated use NoDataIcon instead */
NoDataIllustration: NoDataIllustration,
NoDataIcon: NoDataIcon,
NoDataPlaceholderContentWrapper,
Scrollable: Scrollable,
};
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 = {
hasZebraStriping: false,
borderStyle: BorderStyleEnum.Horizontal,
headerStyle: HeaderStyleEnum.Filled,
hasHoverEffects: true,
};
export const DataGrid = forwardRef(function DataGrid({ isResizable = true, isLoading = false, isKeyboardNavigable = true, isAutoResizingColumns = true, tableInstance, components, rootProps, styling = {}, tableNavRef, isSkeletonLoading = false, skeletonProps,
// TODO v4: consider adding document.body as default value
portalTarget, }, ref) {
const { className = '', style = {} } = rootProps || {};
const [isScrollable, setIsScrollable] = 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({
ref: scrollableContainerRef,
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);
},
});
// Triggers when the individual columns are resized
useResizeObserver({
ref: tableRef,
onResize: () => {
if (scrollableContainerRef.current === null) {
return;
}
setIsScrollable(tableInstance.getTotalSize() >
scrollableContainerRef.current.clientWidth);
},
});
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: {
isResizable: isResizable,
tableProps: tableInstance,
isLoading: isLoading,
components: Components,
hasResizeColumns: isAutoResizingColumns,
isKeyboardNavigationEnabled: isKeyboardNavigable,
isSkeletonLoading,
skeletonProps,
dataGridNav: tableNav,
portalTarget: portalTarget,
}, children: _jsxs("div", Object.assign({}, rootProps, (isKeyboardNavigable ? listeners : {}), { className: classNames('ndl-data-grid-root', className, {
'ndl-data-grid-focusable-cells': isKeyboardNavigable,
'ndl-data-grid-zebra-striping': Styling.hasZebraStriping,
'ndl-data-grid-border-vertical': Styling.borderStyle === BorderStyleEnum.Vertical ||
Styling.borderStyle === BorderStyleEnum.AllSides,
'ndl-data-grid-border-horizontal': Styling.borderStyle === BorderStyleEnum.Horizontal ||
Styling.borderStyle === BorderStyleEnum.AllSides,
'ndl-data-grid-header-filled': Styling.headerStyle === HeaderStyleEnum.Filled,
'ndl-data-grid-hover-effects': Styling.hasHoverEffects,
}), style: style, ref: ref, children: [_jsx(ScrollableContainer
// TODO v4: error should not be here when type cast is removed
// @ts-expect-error ref exists, but it is hidden
, {
// TODO v4: error should not be here when type cast is removed
// @ts-expect-error ref exists, but it is hidden
ref: scrollableContainerRef, innerProps: {
htmlAttributes: {
// 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,
onKeyDown: (e) => {
if (isScrollable && !isKeyboardNavigable) {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
e.stopPropagation();
}
}
},
},
}, 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, {})] })) }));
});
//# sourceMappingURL=DataGrid.js.map