mergeSlotProps.js
3.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import clsx from 'clsx';
// Brought from [Base UI](https://github.com/mui/base-ui/blob/master/packages/react/src/merge-props/mergeProps.ts#L119)
// Use it directly from Base UI once it's a package dependency.
function isEventHandler(key, value) {
// This approach is more efficient than using a regex.
const thirdCharCode = key.charCodeAt(2);
return key[0] === 'o' && key[1] === 'n' && thirdCharCode >= 65 /* A */ && thirdCharCode <= 90 /* Z */ && typeof value === 'function';
}
export default function mergeSlotProps(externalSlotProps, defaultSlotProps) {
if (!externalSlotProps) {
return defaultSlotProps;
}
function extractHandlers(externalSlotPropsValue, defaultSlotPropsValue) {
const handlers = {};
Object.keys(defaultSlotPropsValue).forEach(key => {
if (isEventHandler(key, defaultSlotPropsValue[key]) && typeof externalSlotPropsValue[key] === 'function') {
// only compose the handlers if both default and external slot props match the event handler
handlers[key] = (...args) => {
externalSlotPropsValue[key](...args);
defaultSlotPropsValue[key](...args);
};
}
});
return handlers;
}
if (typeof externalSlotProps === 'function' || typeof defaultSlotProps === 'function') {
return ownerState => {
const defaultSlotPropsValue = typeof defaultSlotProps === 'function' ? defaultSlotProps(ownerState) : defaultSlotProps;
const externalSlotPropsValue = typeof externalSlotProps === 'function' ? externalSlotProps({
...ownerState,
...defaultSlotPropsValue
}) : externalSlotProps;
const className = clsx(ownerState?.className, defaultSlotPropsValue?.className, externalSlotPropsValue?.className);
const handlers = extractHandlers(externalSlotPropsValue, defaultSlotPropsValue);
return {
...defaultSlotPropsValue,
...externalSlotPropsValue,
...handlers,
...(!!className && {
className
}),
...(defaultSlotPropsValue?.style && externalSlotPropsValue?.style && {
style: {
...defaultSlotPropsValue.style,
...externalSlotPropsValue.style
}
}),
...(defaultSlotPropsValue?.sx && externalSlotPropsValue?.sx && {
sx: [...(Array.isArray(defaultSlotPropsValue.sx) ? defaultSlotPropsValue.sx : [defaultSlotPropsValue.sx]), ...(Array.isArray(externalSlotPropsValue.sx) ? externalSlotPropsValue.sx : [externalSlotPropsValue.sx])]
})
};
};
}
const typedDefaultSlotProps = defaultSlotProps;
const handlers = extractHandlers(externalSlotProps, typedDefaultSlotProps);
const className = clsx(typedDefaultSlotProps?.className, externalSlotProps?.className);
return {
...defaultSlotProps,
...externalSlotProps,
...handlers,
...(!!className && {
className
}),
...(typedDefaultSlotProps?.style && externalSlotProps?.style && {
style: {
...typedDefaultSlotProps.style,
...externalSlotProps.style
}
}),
...(typedDefaultSlotProps?.sx && externalSlotProps?.sx && {
sx: [...(Array.isArray(typedDefaultSlotProps.sx) ? typedDefaultSlotProps.sx : [typedDefaultSlotProps.sx]), ...(Array.isArray(externalSlotProps.sx) ? externalSlotProps.sx : [externalSlotProps.sx])]
})
};
}