@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
145 lines (144 loc) • 5.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSlotComponent = getSlotComponent;
exports.mergeSlotProps = mergeSlotProps;
exports.getSlotComponentWithProps = getSlotComponentWithProps;
exports.isSlotOverridden = isSlotOverridden;
exports.getOverriddenSlots = getOverriddenSlots;
exports.extractSlotProps = extractSlotProps;
exports.createEnhancedSlotComponent = createEnhancedSlotComponent;
exports.validateSlotProps = validateSlotProps;
exports.createSlotProps = createSlotProps;
exports.withSlotProps = withSlotProps;
/**
* Enhanced Slot Helper Utilities
*
* Utilities to help with rendering slotted components with enhanced prop merging,
* type safety, and full customization support.
*/
const react_1 = require("react");
/**
* Enhanced slot component retrieval with better type safety
*/
function getSlotComponent(slots, slotName, fallback) {
return (slots === null || slots === void 0 ? void 0 : slots[slotName]) || fallback;
}
/**
* Merge slot props with default props and user overrides
* Handles special cases for MUI sx prop, style prop, and className
*/
function mergeSlotProps(defaultProps = {}, slotProps = {}, userProps = {}) {
// Deep merge objects, giving priority to user props
const merged = { ...defaultProps };
// Merge slot props
Object.keys(slotProps).forEach(key => {
const slotValue = slotProps[key];
const mergedValue = merged[key];
if (key === 'sx' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
// Special handling for MUI sx prop
merged[key] = { ...mergedValue, ...slotValue };
}
else if (key === 'style' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
// Special handling for style prop
merged[key] = { ...mergedValue, ...slotValue };
}
else if (key === 'className' && typeof slotValue === 'string' && typeof mergedValue === 'string') {
// Special handling for className prop
merged[key] = `${mergedValue} ${slotValue}`.trim();
}
else {
merged[key] = slotValue;
}
});
// Merge user props (highest priority)
Object.keys(userProps).forEach(key => {
const userValue = userProps[key];
const mergedValue = merged[key];
if (key === 'sx' && typeof userValue === 'object' && typeof mergedValue === 'object') {
// Special handling for MUI sx prop
merged[key] = { ...mergedValue, ...userValue };
}
else if (key === 'style' && typeof userValue === 'object' && typeof mergedValue === 'object') {
// Special handling for style prop
merged[key] = { ...mergedValue, ...userValue };
}
else if (key === 'className' && typeof userValue === 'string' && typeof mergedValue === 'string') {
// Special handling for className prop
merged[key] = `${mergedValue} ${userValue}`.trim();
}
else {
merged[key] = userValue;
}
});
return merged;
}
/**
* Enhanced slot component retrieval with automatic prop merging
*/
function getSlotComponentWithProps(slots, slotProps = {}, slotName, fallback, defaultProps = {}) {
const component = getSlotComponent(slots, slotName, fallback);
const props = mergeSlotProps(defaultProps, slotProps[slotName] || {}, {});
return { component, props };
}
/**
* Utility to check if a slot is overridden by user
*/
function isSlotOverridden(slots, slotName) {
return Boolean(slots === null || slots === void 0 ? void 0 : slots[slotName]);
}
/**
* Utility to get all overridden slots
*/
function getOverriddenSlots(slots) {
if (!slots)
return [];
return Object.keys(slots).filter(key => Boolean(slots[key]));
}
/**
* Type-safe slot prop extractor
*/
function extractSlotProps(slotProps, slotName) {
return ((slotProps === null || slotProps === void 0 ? void 0 : slotProps[slotName]) || {});
}
/**
* Enhanced slot component with better prop handling
*/
function createEnhancedSlotComponent(slots, slotName, fallback, baseProps = {}) {
const SlotComponent = getSlotComponent(slots, slotName, fallback);
return function EnhancedSlot(props) {
const mergedProps = mergeSlotProps(baseProps, {}, props);
return (0, react_1.createElement)(SlotComponent, mergedProps);
};
}
/**
* Utility to validate slot props at runtime (development only)
*/
function validateSlotProps(slotName, props, requiredProps = []) {
if (process.env.NODE_ENV === 'development') {
const missingProps = requiredProps.filter(prop => !(prop in props));
if (missingProps.length > 0) {
console.warn(`Missing required props for slot "${String(slotName)}": ${missingProps.join(', ')}`);
return false;
}
}
return true;
}
/**
* Helper to create slot props with proper typing
*/
function createSlotProps(table, additionalProps = {}) {
return {
table,
...additionalProps,
};
}
/**
* Enhanced slot component wrapper that handles all prop merging automatically
*/
function withSlotProps(slots, slotProps = {}, slotName, fallback) {
return function SlotWrapper(props) {
const SlotComponent = getSlotComponent(slots, slotName, fallback);
const mergedProps = mergeSlotProps({}, slotProps[slotName] || {}, props);
return (0, react_1.createElement)(SlotComponent, mergedProps);
};
}