41 lines
987 B
JavaScript
41 lines
987 B
JavaScript
// @ts-nocheck
|
|
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { createContext } from 'preact';
|
|
import { useContext, useEffect } from 'preact/hooks';
|
|
import { signal } from '@preact/signals';
|
|
|
|
const slotsContext = createContext();
|
|
|
|
export const Fill = ( { slot, children } ) => {
|
|
const slots = useContext( slotsContext );
|
|
|
|
useEffect( () => {
|
|
if ( slot ) {
|
|
slots.value = { ...slots.value, [ slot ]: children };
|
|
return () => {
|
|
slots.value = { ...slots.value, [ slot ]: null };
|
|
};
|
|
}
|
|
}, [ slots, slot, children ] );
|
|
|
|
return !! slot ? null : children;
|
|
};
|
|
|
|
export const SlotProvider = ( { children } ) => {
|
|
return (
|
|
// TODO: We can change this to use deepsignal once this PR is merged.
|
|
// https://github.com/luisherranz/deepsignal/pull/38
|
|
<slotsContext.Provider value={ signal( {} ) }>
|
|
{ children }
|
|
</slotsContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const Slot = ( { name, children } ) => {
|
|
const slots = useContext( slotsContext );
|
|
return slots.value[ name ] || children;
|
|
};
|