mirror of
https://github.com/facebook/react.git
synced 2026-02-27 03:07:57 +00:00
92f5c3ac7b
## Summary The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler. ## How did you test this change? - force Forget badge on with and without the presence of other badges - confirm colors/UI in light and dark modes - force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges` - Running yarn start in packages/react-devtools-shell [demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)
52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
|
|
import Badge from './Badge';
|
|
import IndexableDisplayName from './IndexableDisplayName';
|
|
import Toggle from '../Toggle';
|
|
|
|
import styles from './ForgetBadge.css';
|
|
|
|
type CommonProps = {
|
|
className?: string,
|
|
};
|
|
|
|
type PropsForIndexable = CommonProps & {
|
|
indexable: true,
|
|
elementID: number,
|
|
};
|
|
|
|
type PropsForNonIndexable = CommonProps & {
|
|
indexable: false | void,
|
|
elementID?: number,
|
|
};
|
|
|
|
type Props = PropsForIndexable | PropsForNonIndexable;
|
|
|
|
export default function ForgetBadge(props: Props): React.Node {
|
|
const {className = ''} = props;
|
|
|
|
const innerView = props.indexable ? (
|
|
<IndexableDisplayName displayName="Memo" id={props.elementID} />
|
|
) : (
|
|
'Memo'
|
|
);
|
|
|
|
const onChange = () => {};
|
|
const title =
|
|
'✨ This component has been auto-memoized by the React Compiler.';
|
|
return (
|
|
<Toggle onChange={onChange} className={styles.ForgetToggle} title={title}>
|
|
<Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
|
|
</Toggle>
|
|
);
|
|
}
|