@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
175 lines (174 loc) • 9.53 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/>.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGrid = exports.DataGridComponents = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const defaultImports_1 = require("../_common/defaultImports");
const helpers_1 = require("../helpers");
const hooks_1 = require("../hooks");
const Components_1 = require("./Components");
const data_grid_nav_1 = require("./data-grid-nav");
const DataGridContext_1 = require("./DataGridContext");
const helpers_2 = require("./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.
exports.DataGridComponents = {
ResizingBar: Components_1.ResizingBar,
Header: Components_1.Header,
Body: Components_1.Body,
BodyCell: Components_1.BodyCell,
BodyRow: Components_1.BodyRow,
RowActionCell: Components_1.RowActionCell,
InlineEditCell: Components_1.InlineEditCell,
DropDownCell: Components_1.DropDownCell,
HeaderCell: Components_1.HeaderCell,
HeaderTitle: Components_1.HeaderTitle,
ActionButton: Components_1.ActionButton,
ColumnControls: Components_1.ColumnControls,
Navigation: Components_1.Navigation,
TableResults: Components_1.TableResults,
RowsPerPage: Components_1.RowsPerPage,
Pagination: Components_1.Pagination,
PaginationNumericButtons: Components_1.PaginationNumericButtons,
PaginationNumericButton: Components_1.PaginationNumericButton,
PaginationArrowButton: Components_1.PaginationArrowButton,
LoadingPlaceholder: Components_1.LoadingPlaceholder,
NoDataPlaceholder: Components_1.NoDataPlaceholder,
/** @deprecated use NoDataIcon instead */
NoDataIllustration: Components_1.NoDataIllustration,
NoDataIcon: Components_1.NoDataIcon,
NoDataPlaceholderContentWrapper: Components_1.NoDataPlaceholderContentWrapper,
Scrollable: Components_1.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,
};
exports.DataGrid = (0, helpers_1.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] = (0, react_1.useState)(false);
const tableRef = (0, react_1.useRef)(null);
const scrollableContainerRef = (0, react_1.useRef)(null);
tableInstance.setOptions((prevOptions) => {
return Object.assign(Object.assign({}, prevOptions), { enableSorting: isSkeletonLoading ? false : prevOptions.enableSorting });
});
// Triggers when the whole container is resized
(0, hooks_1.useResizeObserver)({
ref: scrollableContainerRef,
onResize: (entry) => {
if (entry.width === undefined) {
return;
}
isAutoResizingColumns &&
!isResizable &&
(0, helpers_2.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
(0, hooks_1.useResizeObserver)({
ref: tableRef,
onResize: () => {
if (scrollableContainerRef.current === null) {
return;
}
setIsScrollable(tableInstance.getTotalSize() >
scrollableContainerRef.current.clientWidth);
},
});
const Styling = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, DEFAULT_STYLING), styling)), [styling]);
const Components = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, exports.DataGridComponents), components)), [components]);
const ScrollableContainer = (Components === null || Components === void 0 ? void 0 : Components.Scrollable)
? Components.Scrollable
: Components_1.Scrollable;
const { listeners, tableNav } = (0, data_grid_nav_1.useTableNav)({
isDebug: false,
});
/** Surface the tableNav instance for programmatic control if needed */
(0, react_1.useImperativeHandle)(tableNavRef, () => tableNav, [tableNav]);
(0, react_1.useEffect)(() => {
var _a;
if (isAutoResizingColumns && isResizable) {
(0, helpers_2.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 ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: {
isResizable: isResizable,
tableProps: tableInstance,
isLoading: isLoading,
components: Components,
hasResizeColumns: isAutoResizingColumns,
isKeyboardNavigationEnabled: isKeyboardNavigable,
isSkeletonLoading,
skeletonProps,
dataGridNav: tableNav,
portalTarget: portalTarget,
}, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, (isKeyboardNavigable ? listeners : {}), { className: (0, defaultImports_1.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: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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) && (0, jsx_runtime_1.jsx)(Components.Header, {}), (Components === null || Components === void 0 ? void 0 : Components.Body) && (0, jsx_runtime_1.jsx)(Components.Body, {})] }) }), (Components === null || Components === void 0 ? void 0 : Components.Navigation) && (0, jsx_runtime_1.jsx)(Components.Navigation, {})] })) }));
});
//# sourceMappingURL=DataGrid.js.map