@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
95 lines • 5.13 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const useMediaDevice_1 = require("../../hooks/useMediaDevice/useMediaDevice");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const resizeObserver_1 = require("../../utils/resizeObserver/resizeObserver");
const hasScroll_1 = require("../../utils/scroll/hasScroll");
const tableStandAlone_1 = require("./tableStandAlone");
const TABLE_STYLES = 'TABLE_STYLES';
const LINE_SEPARATOR_STYLES = 'LINE_SEPARATOR_STYLES';
const TableComponent = react_1.default.forwardRef((props, ref) => {
const styles = (0, useStyles_1.useStyles)(TABLE_STYLES, props.variant, props.ctv);
const lineSeparatorLineStyles = (0, useStyles_1.useStyles)(LINE_SEPARATOR_STYLES, props.lineSeparatorLineVariant ?? styles.divider?.lineSeparatorLineVariant);
const device = (0, useMediaDevice_1.useMediaDevice)();
const innerRef = react_1.default.useRef(null);
(0, react_1.useImperativeHandle)(ref, () => innerRef.current, []);
// Indicates if there is scrolling behind the table body to add shadow to column headers.
const [scrollPosition, setScrollPosition] = react_1.default.useState(0);
react_1.default.useEffect(() => {
const tBody = innerRef.current?.querySelector('tbody');
const updatePosition = () => {
setScrollPosition(tBody?.scrollTop ?? 0);
};
tBody?.addEventListener('scroll', updatePosition);
return () => tBody?.removeEventListener('scroll', updatePosition);
}, []);
// Indicates if tBody has scroll in order to add accesibility aria props
const [hasScroll, setHasScroll] = react_1.default.useState(false);
react_1.default.useEffect(() => {
const tBody = innerRef.current?.querySelector('tbody');
let resizeObserver;
if (tBody) {
const handleTBodyResize = (tBody) => {
setHasScroll((0, hasScroll_1.hasScroll)(tBody));
};
handleTBodyResize(tBody);
resizeObserver = new resizeObserver_1.ResizeObserver(() => {
handleTBodyResize(tBody);
});
resizeObserver.observe(tBody);
}
return () => {
resizeObserver?.disconnect();
};
}, []);
return ((0, jsx_runtime_1.jsx)(tableStandAlone_1.TableStandAlone, { ...props, ref: innerRef, device: device, hasScroll: hasScroll, lineSeparatorLineStyles: lineSeparatorLineStyles, scrolling: scrollPosition > 0, styles: styles }));
});
TableComponent.displayName = 'TableComponent';
const TableBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(tableStandAlone_1.TableStandAlone, { ...props, ref: ref, scrolling: false }) }), children: (0, jsx_runtime_1.jsx)(TableComponent, { ...props, ref: ref }) }));
/**
* @description
* Table component is used to display data in a tabular format.
*
* @deprecated This component is deprecated. Please use our new DataTable component to display data in a table format. Alternatively, you can create a table manually using the new table-related components: TableV2, TableHead, TableBody, TableRow, TableCell, TableDivider, and TableCaption. This component will be removed in the next major release.
*/
const Table = react_1.default.forwardRef(TableBoundary);
exports.Table = Table;
//# sourceMappingURL=table.js.map