Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 480x 8x 8x 8x 8x 8x 8x | import React, { JSXElementConstructor, memo, ReactElement } from "react";
import { FeatureFlagContext } from "./FeatureFlagProvider";
import { FeatureFlagKeys } from "FeatureFlags/featureFlagKeys";
export interface FlaggedWrapperProps {
name: string;
ActiveComponent:
| React.FC
| ReactElement<any, string | JSXElementConstructor<any>>;
FallbackComponent?:
| React.FC
| ReactElement<any, string | JSXElementConstructor<any>>;
}
const FlaggedWrapper: React.FC<FlaggedWrapperProps> = ({
name,
ActiveComponent,
FallbackComponent,
}) => {
return (
<FeatureFlagContext.Consumer>
{({ flags }) => {
const isEnabled = flags.get(name) === true;
Iif (isEnabled) {
if (React.isValidElement(ActiveComponent)) {
return ActiveComponent;
} else {
const Component = ActiveComponent as React.FC;
return <Component />;
}
}
Eif (FallbackComponent) {
if (React.isValidElement(FallbackComponent)) {
return FallbackComponent;
} else E{
const Fallback = FallbackComponent as React.FC;
return <Fallback />;
}
}
return null;
}}
</FeatureFlagContext.Consumer>
);
};
export default memo(FlaggedWrapper);
|