@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
509 lines • 37.3 kB
JavaScript
;
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.Scrollable = exports.LoadingPlaceholder = exports.NoDataIcon = exports.NoDataIllustration = exports.NoDataPlaceholder = exports.PaginationNumericButton = exports.PaginationArrowButton = exports.PaginationNumericButtons = exports.Pagination = exports.RowsPerPage = exports.TableResults = exports.Navigation = exports.HeaderTitle = exports.HeaderCell = exports.RowActionCell = exports.DropDownCell = exports.InlineEditCell = exports.BodyRow = exports.BodyCell = exports.Body = exports.Header = exports.ResizingBar = exports.NoDataPlaceholderContentWrapper = exports.ColumnControls = exports.ActionButton = exports.DEFAULT_SORT_ACTIONS = void 0;
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
*
* 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/>.
*/
const react_table_1 = require("@tanstack/react-table");
const react_2 = require("react");
const defaultImports_1 = require("../_common/defaultImports");
const context_menu_1 = require("../context-menu");
const icon_button_1 = require("../icon-button");
const icons_1 = require("../icons");
const loading_spinner_1 = require("../loading-spinner");
const select_1 = require("../select");
const skeleton_1 = require("../skeleton");
const typography_1 = require("../typography");
const DataGridContext_1 = require("./DataGridContext");
const helpers_1 = require("./helpers");
const NoData_1 = __importDefault(require("./illustrations/NoData"));
exports.NoDataIllustration = NoData_1.default;
/** Table results per page, with the first option being the default */
const TABLE_RESULTS = {
DEFAULT: 10,
values: [10, 25, 50, 100],
};
const getPaginationOptions = (pageSize) => {
return [...new Set([...TABLE_RESULTS.values, pageSize])]
.sort((a, b) => a - b)
.map((option) => ({
value: option,
label: `${option}`,
}));
};
const DEFAULT_SORT_ACTIONS = (cell) => ({
asc: {
title: 'Sort ascending',
icon: (0, jsx_runtime_1.jsx)(icons_1.BarsArrowUpIconOutline, {}),
onClick: () => cell.column.toggleSorting(false),
},
desc: {
title: 'Sort descending',
icon: (0, jsx_runtime_1.jsx)(icons_1.BarsArrowDownIconOutline, {}),
onClick: () => cell.column.toggleSorting(true),
},
default: {
title: 'Default sort',
icon: (0, jsx_runtime_1.jsx)(icons_1.Bars3CenterLeftIconOutline, {}),
onClick: () => cell.column.clearSorting(),
},
});
exports.DEFAULT_SORT_ACTIONS = DEFAULT_SORT_ACTIONS;
const ResizingBar = ({ header, children, innerProps, }) => {
const _a = innerProps || {}, { className = undefined, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
const { isKeyboardNavigationEnabled } = (0, DataGridContext_1.useDataGridContext)();
const handleKeyDown = (event) => {
if (event.key === 'ArrowLeft') {
event.stopPropagation();
event.preventDefault();
(0, helpers_1.resizeColumn)(helpers_1.ResizeDirection.LEFT, header);
}
else if (event.key === 'ArrowRight') {
event.stopPropagation();
event.preventDefault();
(0, helpers_1.resizeColumn)(helpers_1.ResizeDirection.RIGHT, header);
}
};
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children || ((0, jsx_runtime_1.jsx)("button", Object.assign({}, restInnerProps, { type: "button", className: (0, defaultImports_1.classNames)('ndl-data-grid-resizer', className, {
'ndl-data-grid-is-resizing': header.column.getIsResizing(),
}), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: handleKeyDown, "aria-label": "Resizing bar", tabIndex: isKeyboardNavigationEnabled ? -1 : 0 }, htmlAttributes))) }));
};
exports.ResizingBar = ResizingBar;
const Scrollable = (0, react_2.forwardRef)(function Scrollable({ children, innerProps }, ref) {
const _a = innerProps || {}, { className, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-scrollable', className) }, htmlAttributes, { children: children })));
});
exports.Scrollable = Scrollable;
const Header = ({ children, innerProps }) => {
const { tableProps, components } = (0, DataGridContext_1.useDataGridContext)();
const { getHeaderGroups, getState } = tableProps;
const _a = innerProps || {}, { className = undefined, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { role: "rowgroup", className: (0, defaultImports_1.classNames)('ndl-data-grid-thead', className, {
'ndl-data-grid-is-resizing': getState().columnSizingInfo.isResizingColumn,
}) }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)("div", { className: "ndl-data-grid-tr", role: "row", children: headerGroup.headers.map((header) => components.HeaderCell && ((0, jsx_runtime_1.jsx)(components.HeaderCell, { cell: header }, header.id))) }, headerGroup.id))) })) })));
};
exports.Header = Header;
const ActionButton = ({ action, children, onClose, innerProps, }) => {
const _a = innerProps || {}, { className, htmlAttributes = undefined } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
const { onClick } = action;
const interceptedOnClick = (0, react_2.useCallback)((e) => {
const providedOnClick = onClick || (innerProps === null || innerProps === void 0 ? void 0 : innerProps.onClick);
if (typeof providedOnClick === 'function') {
providedOnClick(e);
}
onClose();
}, [innerProps === null || innerProps === void 0 ? void 0 : innerProps.onClick, onClick, onClose]);
const commonProps = Object.assign(Object.assign(Object.assign(Object.assign({}, restInnerProps), action), { className: (0, defaultImports_1.classNames)('ndl-data-grid-column-action', className), onClick: interceptedOnClick }), htmlAttributes);
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children || (0, jsx_runtime_1.jsx)(context_menu_1.Menu.Item, Object.assign({}, commonProps)) });
};
exports.ActionButton = ActionButton;
const RowActionCell = ({ cell, innerIconButtonProps, innerMenuProps, }) => {
var _a, _b;
const { components, isSkeletonLoading, portalTarget } = (0, DataGridContext_1.useDataGridContext)();
const actionsButtonRef = (0, react_2.useRef)(null);
const [isActionsOpen, setIsActionsOpen] = (0, react_2.useState)(false);
if (!cell ||
!cell.column.columnDef.meta ||
typeof ((_b = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.isActionCell) !== 'object')
return null;
const { actions, onOpenChange } = cell.column.columnDef.meta.isActionCell;
if (isSkeletonLoading)
return null;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, Object.assign({ as: "button", isClean: true, size: "medium", ariaLabel: `Row actions for row id: ${cell.row.id}`, ref: actionsButtonRef, isActive: isActionsOpen, onClick: () => {
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isActionsOpen);
setIsActionsOpen(!isActionsOpen);
} }, innerIconButtonProps, { htmlAttributes: Object.assign({ tabIndex: 0 }, innerIconButtonProps === null || innerIconButtonProps === void 0 ? void 0 : innerIconButtonProps.htmlAttributes), children: (innerIconButtonProps === null || innerIconButtonProps === void 0 ? void 0 : innerIconButtonProps.children) || (0, jsx_runtime_1.jsx)(icons_1.EllipsisHorizontalIconOutline, {}) })), (0, jsx_runtime_1.jsx)(context_menu_1.Menu, Object.assign({ isOpen: isActionsOpen, anchorRef: actionsButtonRef, onClose: () => {
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
setIsActionsOpen(false);
} }, innerMenuProps, { portalTarget: portalTarget, children: (innerMenuProps === null || innerMenuProps === void 0 ? void 0 : innerMenuProps.children) || ((0, jsx_runtime_1.jsx)(context_menu_1.Menu.Items, { children: actions.map((action, i) => components.ActionButton && ((0, jsx_runtime_1.jsx)(components.ActionButton, { action: Object.assign(Object.assign({}, action), { onClick: (e) => {
var _a;
(_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e, cell);
} }), onClose: () => setIsActionsOpen(false) }, `${cell.column.id}-action-${i}`))) })) }))] }));
};
exports.RowActionCell = RowActionCell;
const ColumnControls = ({ cell, children, innerProps, }) => {
var _a;
const _b = innerProps || {}, { className, htmlAttributes } = _b, restInnerProps = __rest(_b, ["className", "htmlAttributes"]);
const { components, portalTarget } = (0, DataGridContext_1.useDataGridContext)();
const sort = cell.column.getIsSorted();
const canSort = cell.column.getCanSort();
const { hasDefaultSortingActions = true, actions } = ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnActions) || {};
const sortingActions = (0, react_2.useMemo)(() => {
if (canSort) {
if (sort !== 'asc' && sort !== 'desc') {
return [
(0, exports.DEFAULT_SORT_ACTIONS)(cell).asc,
(0, exports.DEFAULT_SORT_ACTIONS)(cell).desc,
];
}
if (sort === 'asc') {
return [
(0, exports.DEFAULT_SORT_ACTIONS)(cell).default,
(0, exports.DEFAULT_SORT_ACTIONS)(cell).desc,
];
}
if (sort === 'desc') {
return [
(0, exports.DEFAULT_SORT_ACTIONS)(cell).default,
(0, exports.DEFAULT_SORT_ACTIONS)(cell).asc,
];
}
}
// Default case
return [];
}, [sort, cell, canSort]);
const newActions = [
...(hasDefaultSortingActions ? sortingActions : []),
...(actions !== null && actions !== void 0 ? actions : []),
];
const actionsButtonRef = (0, react_2.useRef)(null);
const [isActionsOpen, setIsActionsOpen] = (0, react_2.useState)(false);
if (!actions || actions.length === 0)
return null;
return newActions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-header-action-group', className), style: {
zIndex: 100000,
position: 'relative',
right: '0px',
} }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { isClean: true, size: "small", ariaLabel: `Column actions for ${cell.column.id} column`, ref: actionsButtonRef, isActive: isActionsOpen, onClick: () => {
setIsActionsOpen(!isActionsOpen);
}, htmlAttributes: {
tabIndex: 0,
}, children: (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconSolid, {}) }), (0, jsx_runtime_1.jsx)(context_menu_1.Menu, { isOpen: isActionsOpen, anchorRef: actionsButtonRef, onClose: () => setIsActionsOpen(false), portalTarget: portalTarget, children: (0, jsx_runtime_1.jsx)(context_menu_1.Menu.Items, { children: newActions.map((action, i) => components.ActionButton && ((0, jsx_runtime_1.jsx)(components.ActionButton, { action: action, onClose: () => setIsActionsOpen(false) }, `${cell.column.id}-action-${i}`))) }) })] })) }))) : null;
};
exports.ColumnControls = ColumnControls;
const HeaderCell = ({ cell, children, innerProps, }) => {
const { components, isResizable, isKeyboardNavigationEnabled } = (0, DataGridContext_1.useDataGridContext)();
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
const sort = cell.column.getIsSorted();
const canSort = cell.column.getCanSort();
const ariaSortRole = (0, react_2.useMemo)(() => {
switch (sort) {
case 'asc':
return 'ascending';
case 'desc':
return 'descending';
default:
return 'none';
}
}, [sort]);
const Icon = (0, react_2.useMemo)(() => {
switch (sort) {
case 'asc':
return (0, jsx_runtime_1.jsx)(icons_1.BarsArrowUpIconOutline, { className: "ndl-header-icon" });
case 'desc':
return (0, jsx_runtime_1.jsx)(icons_1.BarsArrowDownIconOutline, { className: "ndl-header-icon" });
default:
return ((0, jsx_runtime_1.jsx)(icons_1.Bars3CenterLeftIconOutline, { className: "ndl-hoverable-indicator ndl-header-icon" }));
}
}, [sort]);
const ariaDescription = (0, react_2.useMemo)(() => {
return canSort
? `Press ENTER or SPACE to sort column ${cell.column.id}`
: `Column id: ${cell.column.id}`;
}, [canSort, cell.column.id]);
const ref = (0, react_2.useRef)(null);
const isActionColumn = (0, react_2.useMemo)(() => { var _a; return typeof ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isActionCell) === 'object'; }, [cell.column.columnDef.meta]);
const Tag = canSort ? 'button' : 'div';
const InnerHeaderCell = () => ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-header-cell", children: [cell.isPlaceholder
? null
: (0, react_table_1.flexRender)(cell.column.columnDef.header, cell.getContext()), canSort && Icon] }));
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ tabIndex: isKeyboardNavigationEnabled && !isActionColumn ? 0 : undefined, role: "columnheader" }, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-th', className, {
'ndl-focusable-cell': isKeyboardNavigationEnabled,
'ndl-data-grid-row-action': isActionColumn,
'ndl-data-grid-pinned-cell': cell.column.getIsPinned(),
'ndl-data-grid-pinned-cell-right': cell.column.getIsPinned() === 'right',
'ndl-data-grid-pinned-cell-left': cell.column.getIsPinned() === 'left',
'ndl-data-grid-is-resizing': cell.column.getIsResizing(),
}), "aria-sort": ariaSortRole, style: {
width: isActionColumn ? 40 : cell.getSize(),
maxWidth: cell.column.columnDef.maxSize
? `${cell.column.columnDef.maxSize}px`
: 'none',
} }, (isKeyboardNavigationEnabled
? {
onKeyDown: (e) => {
if (isResizable &&
e.altKey &&
(e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
const direction = e.key === 'ArrowLeft'
? helpers_1.ResizeDirection.LEFT
: helpers_1.ResizeDirection.RIGHT;
(0, helpers_1.resizeColumn)(direction, cell);
e.preventDefault();
e.stopPropagation();
return;
}
},
}
: {}), htmlAttributes, { ref: ref, children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag, { className: "ndl-header-group", style: {
cursor: canSort ? 'pointer' : 'default',
}, "aria-describedby": ariaDescription, onClick: () => canSort && cell.column.toggleSorting(), tabIndex: canSort ? 0 : undefined, children: components.HeaderTitle ? ((0, jsx_runtime_1.jsx)(components.HeaderTitle, { cell: cell, children: (0, jsx_runtime_1.jsx)(InnerHeaderCell, {}) })) : ((0, jsx_runtime_1.jsx)(InnerHeaderCell, {})) }), components.ColumnControls && ((0, jsx_runtime_1.jsx)(components.ColumnControls, { cell: cell })), isResizable &&
cell.column.getCanResize() &&
components.ResizingBar && (0, jsx_runtime_1.jsx)(components.ResizingBar, { header: cell })] })) }), cell.id));
};
exports.HeaderCell = HeaderCell;
const HeaderTitle = ({ cell, children, innerProps, }) => {
const _a = innerProps || {}, { htmlAttributes } = _a, restInnerProps = __rest(_a, ["htmlAttributes"]);
const { column, id } = cell;
const title = typeof column.columnDef.header === 'string' ? column.columnDef.header : id;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { title: title }, htmlAttributes, { children: children })));
};
exports.HeaderTitle = HeaderTitle;
const Body = ({ children, innerProps }) => {
const { tableProps, components, isLoading } = (0, DataGridContext_1.useDataGridContext)();
const { getRowModel } = tableProps;
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-tbody', className), role: "rowgroup", "aria-busy": isLoading ? 'true' : 'false' }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && components.LoadingPlaceholder && ((0, jsx_runtime_1.jsx)(components.LoadingPlaceholder, {})), !isLoading &&
getRowModel().rows.length === 0 &&
components.NoDataPlaceholder && (0, jsx_runtime_1.jsx)(components.NoDataPlaceholder, {}), !isLoading &&
getRowModel().rows.map((row, idx) => components.BodyRow && ((0, jsx_runtime_1.jsx)(components.BodyRow, { row: row }, `table-row-${idx}`)))] })) })));
};
exports.Body = Body;
const BodyCell = ({ cell, children, innerProps, }) => {
var _a, _b, _c;
const isResizing = cell.column.getIsResizing();
const _d = innerProps || {}, { className, htmlAttributes } = _d, restInnerProps = __rest(_d, ["className", "htmlAttributes"]);
const isActionColumn = Boolean((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isActionCell);
const isInlineEditCell = Boolean((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isInlineEditCell);
const isDropDownCell = Boolean((_c = cell.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.isDropDownCell);
const isCustomCell = isActionColumn || isDropDownCell;
const { isKeyboardNavigationEnabled, isSkeletonLoading, skeletonProps } = (0, DataGridContext_1.useDataGridContext)();
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-td', className, {
'ndl-focusable-cell': isKeyboardNavigationEnabled,
'ndl-data-grid-is-resizing': isResizing,
'ndl-data-grid-custom-cell': isCustomCell,
'ndl-data-grid-row-action': isActionColumn,
'ndl-data-grid-inline-edit': isInlineEditCell,
'ndl-data-grid-dropdown-cell': isDropDownCell,
'ndl-data-grid-pinned-cell': cell.column.getIsPinned(),
'ndl-data-grid-pinned-cell-right': cell.column.getIsPinned() === 'right',
'ndl-data-grid-pinned-cell-left': cell.column.getIsPinned() === 'left',
}), role: "cell", tabIndex: isKeyboardNavigationEnabled ? 0 : undefined, style: Object.assign(Object.assign({}, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style), { width: isActionColumn ? 40 : cell.column.getSize() }) }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", width: "100%" }, skeletonProps, { isLoading: isSkeletonLoading && !isActionColumn, children: children || (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) })) }), cell.id));
};
exports.BodyCell = BodyCell;
const BodyRow = ({ row, children, innerProps, }) => {
const { components } = (0, DataGridContext_1.useDataGridContext)();
const _a = innerProps || {}, { className, style = {}, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "style", "htmlAttributes"]);
return ((0, react_1.createElement)("div", Object.assign({}, restInnerProps, { key: row.id, className: (0, defaultImports_1.classNames)('ndl-data-grid-tr', className), role: "row", style: Object.assign({ display: 'flex', flexDirection: 'row' }, style) }, htmlAttributes), children || ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: row
.getVisibleCells()
.map((cell) => components.BodyCell && ((0, jsx_runtime_1.jsx)(components.BodyCell, { cell: cell }, cell.id))) }))));
};
exports.BodyRow = BodyRow;
const TableResults = ({ children, innerProps, manualPagination, }) => {
const { tableProps, isSkeletonLoading, skeletonProps } = (0, DataGridContext_1.useDataGridContext)();
const { getState, getRowModel, getCoreRowModel } = tableProps;
const { pagination: { pageSize, pageIndex }, } = getState();
const { rows } = getRowModel();
const { from, to, totalRows } = (0, react_2.useMemo)(() => manualPagination || {
from: 1 + pageIndex * pageSize,
to: rows.length + pageIndex * pageSize,
totalRows: getCoreRowModel().rows.length,
}, [pageIndex, pageSize, manualPagination, rows, getCoreRowModel]);
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-results', className) }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsxs)("span", { children: ["Showing", ' ', (0, jsx_runtime_1.jsx)("b", { children: totalRows ? `${from}${to !== from ? `-${to}` : ''}` : 0 }), " of", ' ', (0, jsx_runtime_1.jsx)("b", { children: totalRows }), " results"] })) })) })));
};
exports.TableResults = TableResults;
const RowsPerPage = ({ children, innerProps, menuPortalTarget: menuPortalTargetProp, }) => {
const { tableProps, portalTarget } = (0, DataGridContext_1.useDataGridContext)();
const { setPageSize, getState } = tableProps;
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
const { pagination: { pageSize }, } = getState();
const paginationOptions = getPaginationOptions(pageSize);
const defaultPaginationOption = paginationOptions.find((option) => option.value === pageSize);
const menuPortalTarget = menuPortalTargetProp === undefined ? portalTarget : menuPortalTargetProp;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-rows-per-page', className) }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Show", (0, jsx_runtime_1.jsx)(select_1.Select, { type: "select", size: "medium", selectProps: {
'aria-label': 'Select page size',
defaultValue: defaultPaginationOption,
options: paginationOptions,
isSearchable: false,
menuPosition: 'fixed',
menuPortalTarget: menuPortalTarget,
onChange: (option) => {
if (option) {
setPageSize(option.value);
}
},
styles: {
container: () => ({
width: '100%',
}),
},
} })] })) })));
};
exports.RowsPerPage = RowsPerPage;
const PaginationArrowButton = ({ action, children, innerProps, }) => {
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
const PaginationIcon = action === 'previous' ? icons_1.ChevronLeftIconOutline : icons_1.ChevronRightIconOutline;
const ariaLabel = action === 'previous' ? 'Previous table page' : 'Next table page';
const classes = (0, defaultImports_1.classNames)('ndl-data-grid-pagination-icon-button', className);
return ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, Object.assign({}, restInnerProps, { className: classes, ariaLabel: ariaLabel, isClean: true }, htmlAttributes, { children: children || (0, jsx_runtime_1.jsx)(PaginationIcon, { className: "ndl-data-grid-pagination-icon" }) })));
};
exports.PaginationArrowButton = PaginationArrowButton;
const PaginationNumericButton = ({ currentIndex, isSelected, children, innerProps, }) => {
const _a = innerProps || {}, { className, onClick, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "onClick", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, restInnerProps, { type: "button", "data-testid": `ndl-table-${currentIndex}`, className: (0, defaultImports_1.classNames)('ndl-data-grid-pagination-numeric-button', className, {
'ndl-not-selected-numeric': typeof currentIndex === 'number' && !isSelected,
'ndl-is-selected': isSelected,
'ndl-not-selected': !isSelected,
}), onClick: (e) => typeof currentIndex === 'number' && onClick && onClick(e), tabIndex: typeof currentIndex === 'number' ? 0 : -1 }, htmlAttributes, { children: children || currentIndex })));
};
exports.PaginationNumericButton = PaginationNumericButton;
const PaginationNumericButtons = () => {
const { tableProps, components } = (0, DataGridContext_1.useDataGridContext)();
const { getState, setPageIndex, getPageCount } = tableProps;
const { pagination: { pageIndex }, } = getState();
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, helpers_1.userFriendlyPagination)(pageIndex + 1, getPageCount()).map((option, idx) => components.PaginationNumericButton && ((0, jsx_runtime_1.jsx)(components.PaginationNumericButton
/** Use index to avoid situations where two "..." values will appear, causing a key conflict */
, { innerProps: {
onClick: () => typeof option === 'number' && setPageIndex(option - 1),
}, currentIndex: option, isSelected: option === pageIndex + 1 }, `${option}-${idx}`))) }));
};
exports.PaginationNumericButtons = PaginationNumericButtons;
const Pagination = ({ children, innerProps, }) => {
const { tableProps, components } = (0, DataGridContext_1.useDataGridContext)();
const { getCanPreviousPage, getCanNextPage, previousPage, nextPage } = tableProps;
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("nav", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-nav', className), "aria-label": "Pagination" }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [getCanPreviousPage()
? components.PaginationArrowButton && ((0, jsx_runtime_1.jsx)(components.PaginationArrowButton, { action: "previous", innerProps: {
htmlAttributes: {
onClick: previousPage,
},
} }))
: null, components.PaginationNumericButtons && ((0, jsx_runtime_1.jsx)(components.PaginationNumericButtons, {})), getCanNextPage()
? components.PaginationArrowButton && ((0, jsx_runtime_1.jsx)(components.PaginationArrowButton, { action: "next", innerProps: {
onClick: nextPage,
} }))
: null] })) })));
};
exports.Pagination = Pagination;
const Navigation = ({ children, innerProps, }) => {
const { tableProps, components, isSkeletonLoading, skeletonProps } = (0, DataGridContext_1.useDataGridContext)();
const { getPageCount } = tableProps;
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('ndl-data-grid-navigation', className) }, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [components.TableResults && (0, jsx_runtime_1.jsx)(components.TableResults, {}), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", variant: "rectangular", height: "36px" }, skeletonProps, { isLoading: isSkeletonLoading, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-data-grid-navigation-right-items", children: [getPageCount() > 1 && components.Pagination && ((0, jsx_runtime_1.jsx)(components.Pagination, {})), components.RowsPerPage && (0, jsx_runtime_1.jsx)(components.RowsPerPage, {})] }) }))] })) }) })));
};
exports.Navigation = Navigation;
const LoadingPlaceholder = ({ children, innerProps, }) => {
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('nld-table-placeholder-wrapper', className), role: "row" }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsx)("div", { role: "cell", className: "ndl-data-grid-placeholder", children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-data-grid-loading-placeholder", children: [(0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, {}), (0, jsx_runtime_1.jsx)("h6", { children: "Loading data" })] }) })) })));
};
exports.LoadingPlaceholder = LoadingPlaceholder;
const NoDataPlaceholder = ({ children, innerProps, }) => {
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, restInnerProps, { className: (0, defaultImports_1.classNames)('nld-table-placeholder-wrapper', className), role: "row" }, htmlAttributes, { children: children || ((0, jsx_runtime_1.jsxs)(exports.NoDataPlaceholderContentWrapper, { children: [(0, jsx_runtime_1.jsx)(NoDataIcon, {}), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "subheading-small", children: "No data available" })] })) })));
};
exports.NoDataPlaceholder = NoDataPlaceholder;
const NoDataPlaceholderContentWrapper = ({ children, innerProps, }) => {
const _a = innerProps || {}, { className, htmlAttributes } = _a, restInnerProps = __rest(_a, ["className", "htmlAttributes"]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ role: "cell", className: (0, defaultImports_1.classNames)('ndl-data-grid-placeholder', className) }, restInnerProps, htmlAttributes, { children: children })));
};
exports.NoDataPlaceholderContentWrapper = NoDataPlaceholderContentWrapper;
const InlineEditCell = ({ cell, value, ariaLabel, }) => {
var _a;
const [inputValue, setInputValue] = (0, react_2.useState)(value);
(0, react_2.useEffect)(() => {
setInputValue(value);
}, [value]);
const { dataGridNav } = (0, DataGridContext_1.useDataGridContext)();
if (!((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isInlineEditCell)) {
return null;
}
return ((0, jsx_runtime_1.jsx)("input", { onChange: (e) => setInputValue(e.target.value), value: inputValue, onFocus: () => {
dataGridNav.disable();
}, onKeyDown: (e) => {
var _a, _b, _c, _d;
if (e.key === 'Enter') {
(_b = (_a = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isInlineEditCell) === null || _b === void 0 ? void 0 : _b.onEditChange(inputValue, cell);
(_c = e.currentTarget.parentElement) === null || _c === void 0 ? void 0 : _c.focus();
return;
}
else if (e.key === 'Escape') {
(_d = e.currentTarget.parentElement) === null || _d === void 0 ? void 0 : _d.focus();
return;
}
}, onBlur: () => {
setInputValue(value);
dataGridNav.enable();
}, "aria-label": ariaLabel }));
};
exports.InlineEditCell = InlineEditCell;
const DropDownCell = ({ cell, options,
// TODO v4: remove default value, default should be on the DataGrid root component
portalTarget: portalTargetProp = document.body, ariaLabel, }) => {
var _a;
const { dataGridNav, portalTarget } = (0, DataGridContext_1.useDataGridContext)();
const ref = (0, react_2.useRef)(null);
if (!((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isDropDownCell)) {
return null;
}
const defaultOption = options.find((option) => { var _a; return option.value === ((_a = cell.getValue()) === null || _a === void 0 ? void 0 : _a.toString()); });
const menuPortalTarget = portalTargetProp === undefined ? portalTarget : portalTargetProp;
return ((0, jsx_runtime_1.jsx)(select_1.Select, { ref: ref, isFluid: true, hasBorder: false, style: { width: '100%', height: '100%' }, type: "select", size: "medium", selectProps: {
defaultValue: defaultOption,
options: options,
menuPortalTarget: menuPortalTarget,
menuPosition: 'fixed',
styles: {
container: () => ({ width: '100%', height: '100%' }),
control: () => ({
backgroundColor: 'transparent',
height: '100%',
borderRadius: 0,
}),
},
onChange: (e) => {
var _a, _b;
const value = e === null || e === void 0 ? void 0 : e.value;
(_b = (_a = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isDropDownCell) === null || _b === void 0 ? void 0 : _b.onChange(value === null || value === void 0 ? void 0 : value.toString(), cell);
dataGridNav.enable();
(ref === null || ref === void 0 ? void 0 : ref.current) && dataGridNav.focusParentCell(ref.current);
},
onMenuOpen: () => {
dataGridNav.disable();
},
'aria-label': ariaLabel,
} }));
};
exports.DropDownCell = DropDownCell;
const NoDataIcon = (0, react_2.forwardRef)((props, ref) => {
const { className } = props, restProps = __rest(props, ["className"]);
const classes = (0, defaultImports_1.classNames)('n-size-token-10', className);
return (0, jsx_runtime_1.jsx)(icons_1.DatagridNodataIcon, Object.assign({ ref: ref, className: classes }, restProps));
});
exports.NoDataIcon = NoDataIcon;
NoDataIcon.displayName = 'NoDataIcon';
//# sourceMappingURL=Components.js.map