@atlaskit/renderer
Version:
Renderer component
30 lines • 1.44 kB
JavaScript
import React, { useState } from 'react';
const dest = /*#__PURE__*/React.createContext(undefined);
const Provider = dest.Provider;
const Consumer = dest.Consumer;
/**
* We need to expose this abstraction on top of the native Consumer in order to control when
* The consumer will get notified when a match has happened. If we use the Consumer directly in
* Expand components without this inner state, everytime a new prop comes in, and the `newActiveHeaderId`
* is the same as before, we will set the expand to true forever, until the active header id changes.
* Thus, the user won't be able to collapse the expand.
*
* By exposing `onNestedHeaderIdMatch` here we can control when will consumers be notified:
* only when a `newActiveHeaderId` comes in from the Provider and the list of header ids includes it.
*/
const ActiveHeaderIdConsumer = ({
nestedHeaderIds,
onNestedHeaderIdMatch
}) => {
const [activeHeaderId, setActiveHeaderId] = useState();
return /*#__PURE__*/React.createElement(Consumer, null, newActiveHeaderId => {
if (!newActiveHeaderId || !nestedHeaderIds.includes(newActiveHeaderId)) {
setActiveHeaderId(undefined);
} else if (newActiveHeaderId !== activeHeaderId && nestedHeaderIds.includes(newActiveHeaderId)) {
setActiveHeaderId(newActiveHeaderId);
onNestedHeaderIdMatch();
}
return null;
});
};
export { Provider as ActiveHeaderIdProvider, ActiveHeaderIdConsumer };