@atlaskit/renderer
Version:
Renderer component
33 lines • 1.69 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
var dest = /*#__PURE__*/React.createContext(undefined);
var Provider = dest.Provider;
var 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.
*/
var ActiveHeaderIdConsumer = function ActiveHeaderIdConsumer(_ref) {
var nestedHeaderIds = _ref.nestedHeaderIds,
onNestedHeaderIdMatch = _ref.onNestedHeaderIdMatch;
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
activeHeaderId = _useState2[0],
setActiveHeaderId = _useState2[1];
return /*#__PURE__*/React.createElement(Consumer, null, function (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 };