@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
182 lines (181 loc) • 10.1 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGrid = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const hooks_1 = require("../hooks");
const Components_1 = require("./Components");
const data_grid_context_1 = require("./data-grid-context");
const data_grid_nav_1 = require("./data-grid-nav");
const helpers_1 = require("./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,
};
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, htmlAttributes, className, style } = _a, restProps = __rest(_a, ["isResizable", "isLoading", "isKeyboardNavigable", "isAutoResizingColumns", "tableInstance", "components", "rootProps", "styling", "tableNavRef", "isSkeletonLoading", "skeletonProps", "ref", "portalTarget", "htmlAttributes", "className", "style"]);
const { className: rootClassName = '', style: rootStyle = {} } = rootProps || {};
const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
const [isMediumNavigation, setIsMediumNavigation] = (0, react_1.useState)(false);
const [isSmallNavigation, setIsSmallNavigation] = (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)({
onResize: (entry) => {
if (entry.width === undefined) {
return;
}
isAutoResizingColumns &&
!isResizable &&
(0, helpers_1.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
(0, hooks_1.useResizeObserver)({
onResize: () => {
if (scrollableContainerRef.current === null) {
return;
}
setIsScrollable(tableInstance.getTotalSize() >
scrollableContainerRef.current.clientWidth);
},
ref: tableRef,
});
const Styling = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, DEFAULT_STYLING), styling)), [styling]);
const Components = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, 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_1.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)(data_grid_context_1.DataGridContext.Provider, { value: {
components: Components,
dataGridNav: tableNav,
hasResizeColumns: isAutoResizingColumns,
isKeyboardNavigationEnabled: isKeyboardNavigable,
isLoading: isLoading,
isMediumNavigation,
isResizable: isResizable,
isSkeletonLoading,
isSmallNavigation,
portalTarget: portalTarget,
skeletonProps,
tableProps: tableInstance,
}, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { className: (0, classnames_1.default)('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-focusable-cells': isKeyboardNavigable,
'ndl-data-grid-header-filled': Styling.headerStyle === HeaderStyleEnum.Filled,
'ndl-data-grid-hover-effects': Styling.hasHoverEffects,
'ndl-data-grid-zebra-striping': Styling.hasZebraStriping,
}), ref: ref, style: Object.assign(Object.assign({}, rootStyle), style) }, restProps, htmlAttributes, (isKeyboardNavigable ? listeners : {}), { children: [(0, jsx_runtime_1.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: (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, {})] })) }));
};
const DataGridComponents = {
ActionButton: Components_1.ActionButton,
ActionCell: Components_1.ActionCell,
Body: Components_1.Body,
BodyCell: Components_1.BodyCell,
BodyRow: Components_1.BodyRow,
ColumnControls: Components_1.ColumnControls,
DropDownCell: Components_1.DropDownCell,
Header: Components_1.Header,
HeaderCell: Components_1.HeaderCell,
HeaderTitle: Components_1.HeaderTitle,
InlineEditCell: Components_1.InlineEditCell,
LoadingPlaceholder: Components_1.LoadingPlaceholder,
Navigation: Components_1.Navigation,
NoDataIcon: Components_1.NoDataIcon,
NoDataPlaceholder: Components_1.NoDataPlaceholder,
NoDataPlaceholderContentWrapper: Components_1.NoDataPlaceholderContentWrapper,
Pagination: Components_1.Pagination,
PaginationArrowButton: Components_1.PaginationArrowButton,
PaginationNumericButton: Components_1.PaginationNumericButton,
PaginationNumericButtons: Components_1.PaginationNumericButtons,
ResizingBar: Components_1.ResizingBar,
RowsPerPage: Components_1.RowsPerPage,
Scrollable: Components_1.Scrollable,
TableResults: Components_1.TableResults,
};
const DataGrid = Object.assign(DataGridComponent, DataGridComponents);
exports.DataGrid = DataGrid;
//# sourceMappingURL=DataGrid.js.map