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,79 @@ +// @flow + +import * as React from 'react'; + +const tip = Object.freeze({ + MUTED: 'muted', + COMMUNITY_DRAWER: 'community_drawer', +}); + +type Tip = $Values; + +type TipProps = { + +x?: ?number, + +y?: ?number, + +width?: ?number, + +height?: ?number, + +pageX?: ?number, + +pageY?: ?number, +}; + +type RequiredTipProps = $ObjMap(V) => V>; + +export type NUXTipsContextType = { + +registerTipButton: (type: Tip, tipProps: RequiredTipProps) => void, + +getTipsProps: () => ?{ [type: Tip]: TipProps }, +}; + +const NUXTipsContext: React.Context = + React.createContext(); + +type Props = { + +children: React.Node, +}; + +function NUXTipsContextProvider(props: Props): React.Node { + const { children } = props; + + const tipsProps: { [tip: Tip]: TipProps } = React.useMemo( + () => ({ + [tip.MUTED]: {}, + [tip.COMMUNITY_DRAWER]: {}, + }), + [], + ); + + const registerTipButton = React.useCallback( + (type: Tip, tipProps: RequiredTipProps) => { + tipsProps[type] = { + ...tipsProps[type], + ...tipProps, + }; + }, + [tipsProps], + ); + + const getTipsProps = React.useCallback(() => { + for (const type in tipsProps) { + // $FlowIssue + if (!tipsProps[type].x) { + return null; + } + } + return tipsProps; + }, [tipsProps]); + + const value = React.useMemo( + () => ({ + registerTipButton, + getTipsProps, + }), + [getTipsProps, registerTipButton], + ); + + return ( + {children} + ); +} + +export { NUXTipsContext, NUXTipsContextProvider, tip }; 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 @@ - + + +