@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
44 lines • 2.52 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTable = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useStylesV2_1 = require("../../hooks/useStyles/useStylesV2");
const dataTableStandAlone_1 = require("./dataTableStandAlone");
const useDataTableHasScroll_1 = require("./hooks/useDataTableHasScroll");
const useDataTableShadow_1 = require("./hooks/useDataTableShadow");
const useDataTableStickyDividers_1 = require("./hooks/useDataTableStickyDividers");
const useDataTableStickyLeftColumns_1 = require("./hooks/useDataTableStickyLeftColumns");
const useDataTableStickyRightColumns_1 = require("./hooks/useDataTableStickyRightColumns");
const DataTableComponent = ({ variant, ctv, ...props }, ref) => {
const styles = (0, useStylesV2_1.useStylesV2)({
styleName: stylesName_1.STYLES_NAME.DATA_TABLE,
variantName: variant,
customTokens: ctv,
isOptional: true,
});
const innerRef = react_1.default.useRef(null);
react_1.default.useImperativeHandle(ref, () => innerRef.current, []);
// Indicates if the data-table has scroll in order to add accesibility aria props
const { hasScroll } = (0, useDataTableHasScroll_1.useDataTableHasScroll)({ ref: innerRef });
// Set column sticky right if data table has horizontal scroll
(0, useDataTableStickyRightColumns_1.useDataTableStickyRightColumns)({ ref: innerRef });
// Set column sticky left if data table has horizontal scroll
(0, useDataTableStickyLeftColumns_1.useDataTableStickyLeftColumns)({ ref: innerRef });
// Set dividers sticky position and width if data table has horizontal scroll
(0, useDataTableStickyDividers_1.useDataTableStickyDividers)({ ref: innerRef });
// Set shadow when scrolling
(0, useDataTableShadow_1.useDataTableShadow)({
ref: innerRef,
headBoxShadow: styles?.headBoxShadow,
leftBoxShadow: styles?.leftBoxShadow,
rightBoxShadow: styles?.rightBoxShadow,
});
return (0, jsx_runtime_1.jsx)(dataTableStandAlone_1.DataTableStandAlone, { ref: innerRef, hasScroll: hasScroll, styles: styles, ...props });
};
exports.DataTable = react_1.default.forwardRef(DataTableComponent);
//# sourceMappingURL=dataTable.js.map