diff --git a/native/components/nux-tips-context.react.js b/native/components/nux-tips-context.react.js new file mode 100644 --- /dev/null +++ b/native/components/nux-tips-context.react.js @@ -0,0 +1,69 @@ +// @flow + +import * as React from 'react'; + +import { values } from 'lib/utils/objects.js'; + +const nuxTip = Object.freeze({ + MUTED: 'muted', + COMMUNITY_DRAWER: 'community_drawer', +}); + +type NUXTip = $Values; + +type TipProps = { + +x: ?number, + +y: ?number, + +width: ?number, + +height: ?number, + +pageX: ?number, + +pageY: ?number, +}; + +export type NUXTipsContextType = { + +registerTipButton: (type: NUXTip, tipProps: TipProps) => void, + +getTipsProps: () => ?{ +[type: NUXTip]: TipProps }, +}; + +const NUXTipsContext: React.Context = + React.createContext(); + +type Props = { + +children: React.Node, +}; + +function NUXTipsContextProvider(props: Props): React.Node { + const { children } = props; + + const tipsProps = React.useRef<{ [tip: NUXTip]: TipProps }>({}); + + const registerTipButton = React.useCallback( + (type: NUXTip, tipProps: TipProps) => { + tipsProps.current[type] = tipProps; + }, + [], + ); + + const getTipsProps = React.useCallback(() => { + for (const type of values(nuxTip)) { + if (!tipsProps.current[type]) { + return null; + } + } + return tipsProps.current; + }, []); + + const value = React.useMemo( + () => ({ + registerTipButton, + getTipsProps, + }), + [getTipsProps, registerTipButton], + ); + + return ( + {children} + ); +} + +export { NUXTipsContext, NUXTipsContextProvider, nuxTip }; diff --git a/native/root.react.js b/native/root.react.js --- a/native/root.react.js +++ b/native/root.react.js @@ -54,6 +54,7 @@ import BackgroundIdentityLoginHandler from './components/background-identity-login-handler.react.js'; import ConnectFarcasterAlertHandler from './components/connect-farcaster-alert-handler.react.js'; import { FeatureFlagsProvider } from './components/feature-flags-provider.react.js'; +import { NUXTipsContextProvider } from './components/nux-tips-context.react.js'; import PersistedStateGate from './components/persisted-state-gate.js'; import ReportHandler from './components/report-handler.react.js'; import VersionSupportedChecker from './components/version-supported.react.js'; @@ -303,7 +304,9 @@ - + + +