@carbon/ibm-products
Version:
Carbon for IBM Products
144 lines (142 loc) • 5.23 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { deprecateProp } from "../../global/js/utils/props-helper.js";
import React, { createContext, useContext, useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { FeatureFlags, createScope } from "@carbon/feature-flags";
//#region src/components/FeatureFlags/index.tsx
/**
* Copyright IBM Corp. 2024, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
FeatureFlags.merge({
"default-portal-target-body": true,
"enable-datagrid-useInlineEdit": false,
"enable-datagrid-useEditableCell": false,
"enable-datagrid-useCustomizeColumns": false,
"ExampleComponent.secondaryIcon": false,
"ExampleComponent.useExample": false,
"enable-test-flag-a": false,
"enable-test-flag-b": true,
enableSidepanelResizer: false
});
/**
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
* or disable feature flags in a given React tree
*/
const FeatureFlagContext = createContext(FeatureFlags);
/**
* Supports an object of feature flag values with the `flags` prop, merging them
* along with the current `FeatureFlagContext` to provide consumers to check if
* a feature flag is enabled or disabled in a given React tree
*/
function FeatureFlags$1({ children, flags = {}, defaultPortalTargetBody = true, enableDatagridUseInlineEdit = false, enableDatagridUseEditableCell = false, enableDatagridUseCustomizeColumns = false, enableSidepanelResizer = false, enableTestFlagA = false, enableTestFlagB = false }) {
const parentScope = useContext(FeatureFlagContext);
const [prevParentScope, setPrevParentScope] = useState(parentScope);
const combinedFlags = {
"default-portal-target-body": defaultPortalTargetBody,
"enable-datagrid-useInlineEdit": enableDatagridUseInlineEdit,
"enable-datagrid-useEditableCell": enableDatagridUseEditableCell,
"enable-datagrid-useCustomizeColumns": enableDatagridUseCustomizeColumns,
enableSidepanelResizer,
"enable-test-flag-a": enableTestFlagA,
"enable-test-flag-b": enableTestFlagB,
...flags
};
const [scope, updateScope] = useState(() => {
const scope = createScope(combinedFlags);
scope.mergeWithScope(parentScope);
return scope;
});
if (parentScope !== prevParentScope) {
const scope = createScope(combinedFlags);
scope.mergeWithScope(parentScope);
updateScope(scope);
setPrevParentScope(parentScope);
}
useChangedValue(combinedFlags, isEqual, (changedFlags) => {
const scope = createScope(changedFlags);
scope.mergeWithScope(parentScope);
updateScope(scope);
});
return /* @__PURE__ */ React.createElement(FeatureFlagContext.Provider, { value: scope }, children);
}
FeatureFlags$1.propTypes = {
children: PropTypes.node,
/**
* Provide the feature flags to enabled or disabled in the current React tree
*/
defaultPortalTargetBody: PropTypes.bool,
enableDatagridUseCustomizeColumns: PropTypes.bool,
enableDatagridUseEditableCell: PropTypes.bool,
enableDatagridUseInlineEdit: PropTypes.bool,
enableSidepanelResizer: PropTypes.bool,
enableTestFlagA: PropTypes.bool,
enableTestFlagB: PropTypes.bool,
flags: deprecateProp(PropTypes.objectOf(PropTypes.bool), "The `flags` prop for `FeatureFlag` has been deprecated. Please pass the flags directly as props in camelCase")
};
/**
* This hook will store previous versions of the given `value` and compare the
* current value to the previous one using the `compare` function. If the
* compare function returns true, then the given `callback` is invoked in an
* effect.
*
* @param {any} value
* @param {Function} compare
* @param {Function} callback
*/
function useChangedValue(value, compare, callback) {
const initialRender = useRef(false);
const savedCallback = useRef(callback);
const [prevValue, setPrevValue] = useState(value);
if (!compare(prevValue, value)) setPrevValue(value);
useEffect(() => {
savedCallback.current = callback;
});
useEffect(() => {
if (initialRender.current) savedCallback.current(prevValue);
}, [prevValue]);
useEffect(() => {
initialRender.current = true;
}, []);
}
/**
* Access whether a given flag is enabled or disabled in a given
* FeatureFlagContext
*
* @returns {boolean}
*/
function useFeatureFlag(flag) {
return useContext(FeatureFlagContext).enabled(flag);
}
/**
* Access all feature flag information for the given FeatureFlagContext
*
* @returns {FeatureFlagScope}
*/
function useFeatureFlags() {
return useContext(FeatureFlagContext);
}
/**
* Compare two objects and determine if they are equal. This is a shallow
* comparison since the objects we are comparing are objects with boolean flags
* from the flags prop in the `FeatureFlags` component
*
* @param {object} a
* @param {object} b
* @returns {boolean}
*/
function isEqual(a, b) {
if (a === b) return true;
for (const key of Object.keys(a)) if (a[key] !== b[key]) return false;
for (const key of Object.keys(b)) if (b[key] !== a[key]) return false;
return true;
}
//#endregion
export { FeatureFlags$1 as FeatureFlags, useFeatureFlag, useFeatureFlags };