Skip to content

Commit f72b43a

Browse files
JasonVMoJasonVMo
authored
Fix native component definitions to codegen in all situations (#4027)
* add typescript default exports and clean up build ordering * fix callout, contextual menu, focus zone, and avatar specs * fix menu button, tooltip and vibrancy view * docs(changeset): Fix codegen definitions for native components in repo * address PR feedback
1 parent 5e9ab58 commit f72b43a

27 files changed

+230
-168
lines changed

‎.changeset/funny-news-smell.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@fluentui-react-native/contextual-menu': patch
3+
'@fluentui-react-native/vibrancy-view': patch
4+
'@fluentui-react-native/focus-trap-zone': patch
5+
'@fluentui-react-native/menu-button': patch
6+
'@fluentui-react-native/focus-zone': patch
7+
'@fluentui-react-native/tooltip': patch
8+
'@fluentui-react-native/experimental-avatar': patch
9+
'@fluentui-react-native/callout': patch
10+
'@fluentui-react-native/button': patch
11+
---
12+
13+
Fix codegen definitions for native components in repo

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
"editor.codeActionsOnSave": {
88
"source.fixAll.eslint": "explicit"
99
},
10+
"prettier.singleQuote": true,
11+
"prettier.tabWidth": 2,
12+
"prettier.printWidth": 140,
13+
"prettier.trailingComma": "all",
1014

1115
"eslint.enable": true,
1216
"eslint.workingDirectories": [{ "pattern": "./packages/framework/eslint-config-rules" }], // use the common eslint config file

‎docs/pages/Components/Callout.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ type DirectionalHint =
128128
| 'rightTopEdge'
129129
| 'rightCenter'
130130
| 'rightBottomEdge'
131-
| 'bottonLeftEdge'
131+
| 'bottomLeftEdge'
132132
| 'bottomAutoEdge'
133133
| 'bottomCenter'
134134
| 'bottomRightEdge';

‎packages/components/Button/SPEC.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -309,8 +309,8 @@ It is possible to override key behaviors by specifying `onKeyUp` or `onKeyDown`,
309309

310310
#### Cursor interaction
311311

312-
- Cursor moves onto botton: Should immediately change the styling of the `Button` so that it appears to be hovered.
313-
- Cursor moves out of botton: Should immediately remove the hovered styling of the `Button`.
312+
- Cursor moves onto bottom: Should immediately change the styling of the `Button` so that it appears to be hovered.
313+
- Cursor moves out of bottom: Should immediately remove the hovered styling of the `Button`.
314314
- Mouse click: Should execute the `Button` and move focus to its target.
315315

316316
#### Touch interaction

‎packages/components/Callout/macos/FRNCalloutManager.m‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ + (NSRect)screenRect:(id)json
2828
@"rightTopEdge": @(NSRectEdgeMaxX),
2929
@"rightCenter": @(NSRectEdgeMaxX),
3030
@"rightBottomEdge": @(NSRectEdgeMaxX),
31-
@"bottonLeftEdge": @(NSRectEdgeMinY),
31+
@"bottomLeftEdge": @(NSRectEdgeMinY),
32+
@"bottonLeftEdge": @(NSRectEdgeMinY), // Add both the correct and incorrect spellings during the transition period
3233
@"bottomAutoEdge": @(NSRectEdgeMinY),
3334
@"bottomCenter": @(NSRectEdgeMinY),
3435
@"bottomRightEdge": @(NSRectEdgeMinY),

‎packages/components/Callout/src/Callout.types.ts‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import type * as React from 'react';
2-
import type { KeyboardMetrics, ViewStyle, ViewProps } from 'react-native';
2+
import type { KeyboardMetrics, ViewStyle } from 'react-native';
33

44
import type { IViewProps } from '@fluentui-react-native/adapters';
55
import type { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens';
66
import type { IRenderData } from '@uifabricshared/foundation-composable';
77

8-
import type { CalloutNativeCommands } from './CalloutNativeComponent.types';
8+
import type { CalloutNativeCommands } from './CalloutNativeComponent';
99
export const calloutName = 'Callout';
1010

11-
import type { DirectEventHandler, Double, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
12-
1311
/**
1412
* Properties and Tokens for FluentUI React Native Callout
1513
*/
@@ -25,7 +23,8 @@ export type DirectionalHint =
2523
| 'rightTopEdge'
2624
| 'rightCenter'
2725
| 'rightBottomEdge'
28-
| 'bottonLeftEdge'
26+
| 'bottomLeftEdge'
27+
| 'bottonLeftEdge' // Typo in the original code, should be 'bottomLeftEdge'
2928
| 'bottomAutoEdge'
3029
| 'bottomCenter'
3130
| 'bottomRightEdge';
@@ -227,34 +226,3 @@ export interface ICalloutType {
227226
slotProps: ICalloutSlotProps;
228227
tokens: ICalloutTokens;
229228
}
230-
231-
type AnchorRect = {
232-
screenX: Double;
233-
screenY: Double;
234-
width: Double;
235-
height: Double;
236-
};
237-
238-
/**
239-
* Shared native props specific to Callout native component
240-
*/
241-
export interface NativePropsBase extends ViewProps {
242-
accessibilityLabel?: string;
243-
accessibilityOnShowAnnouncement?: string;
244-
anchorRect?: AnchorRect;
245-
246-
dismissBehaviors?: string[];
247-
doNotTakePointerCapture?: boolean;
248-
focusable?: boolean;
249-
isBeakVisible?: boolean;
250-
maxHeight?: Int32;
251-
maxWidth?: Int32;
252-
setInitialFocus?: boolean;
253-
254-
// targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
255-
testID?: string;
256-
257-
onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
258-
onDismiss?: DirectEventHandler<{ target: Int32 }>;
259-
onShow?: DirectEventHandler<{ target: Int32 }>;
260-
}

‎packages/components/Callout/src/CalloutNativeComponent.macos.ts‎

Lines changed: 62 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,69 @@
11
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
2-
import { requireNativeComponent } from 'react-native';
2+
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
33

4-
import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types.macos';
4+
import type { HostComponent, ViewProps } from 'react-native';
5+
import type { WithDefault, UnsafeMixed, Int32, DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
6+
7+
interface AnchorRect {
8+
screenX: Double;
9+
screenY: Double;
10+
width: Double;
11+
height: Double;
12+
}
13+
14+
/**
15+
* Shared native props specific to Callout native component
16+
*/
17+
export interface NativeProps extends ViewProps {
18+
accessibilityLabel?: string;
19+
accessibilityOnShowAnnouncement?: string;
20+
anchorRect?: AnchorRect;
21+
22+
dismissBehaviors?: string[];
23+
doNotTakePointerCapture?: boolean;
24+
focusable?: boolean;
25+
isBeakVisible?: boolean;
26+
maxHeight?: Int32;
27+
maxWidth?: Int32;
28+
setInitialFocus?: boolean;
29+
30+
// targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
31+
testID?: string;
32+
33+
onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
34+
onDismiss?: DirectEventHandler<{ target: Int32 }>;
35+
onShow?: DirectEventHandler<{ target: Int32 }>;
36+
37+
directionalHint?: WithDefault<
38+
| 'leftTopEdge'
39+
| 'leftCenter'
40+
| 'leftBottomEdge'
41+
| 'topLeftEdge'
42+
| 'topAutoEdge'
43+
| 'topCenter'
44+
| 'topRightEdge'
45+
| 'rightTopEdge'
46+
| 'rightCenter'
47+
| 'rightBottomEdge'
48+
| 'bottomLeftEdge'
49+
| 'bottonLeftEdge' // Typo in the original code, should be 'bottomLeftEdge'
50+
| 'bottomAutoEdge'
51+
| 'bottomCenter'
52+
| 'bottomRightEdge',
53+
'topleftEdge'
54+
>;
55+
target?: UnsafeMixed;
56+
}
57+
58+
export type CalloutComponentType = HostComponent<NativeProps>;
59+
60+
export interface CalloutNativeCommands {
61+
focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
62+
blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
63+
}
564

665
export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
766
supportedCommands: ['blurWindow', 'focusWindow'],
867
});
968

10-
// no fabric for macOS, just use requireNativeComponent
11-
// macOS uses FRNCallout (registered by FRNCalloutManager), not RCTCallout
12-
export default requireNativeComponent<NativeProps>('FRNCallout') as CalloutComponentType;
69+
export default codegenNativeComponent<NativeProps>('FRNCallout') as CalloutComponentType;

‎packages/components/Callout/src/CalloutNativeComponent.ts‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,66 @@
11
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
22
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
33

4-
import type { NativeProps, CalloutComponentType, CalloutNativeCommands } from './CalloutNativeComponent.types';
4+
import type { HostComponent, ViewProps } from 'react-native';
5+
import type { WithDefault, UnsafeMixed, Int32, DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
6+
7+
interface AnchorRect {
8+
screenX: Double;
9+
screenY: Double;
10+
width: Double;
11+
height: Double;
12+
}
13+
14+
/**
15+
* Shared native props specific to Callout native component
16+
*/
17+
export interface NativeProps extends ViewProps {
18+
accessibilityLabel?: string;
19+
accessibilityOnShowAnnouncement?: string;
20+
anchorRect?: AnchorRect;
21+
22+
dismissBehaviors?: string[];
23+
doNotTakePointerCapture?: boolean;
24+
focusable?: boolean;
25+
isBeakVisible?: boolean;
26+
maxHeight?: Int32;
27+
maxWidth?: Int32;
28+
setInitialFocus?: boolean;
29+
30+
// targetAnchor?: string; // Win32 only Callout can target an anchor registered in the anchor registry // Can be a node id or an anchor ID - This need to be reworked as Mixed types are not supported going forward
31+
testID?: string;
32+
33+
onRestoreFocus?: DirectEventHandler<{ target: Int32; containsFocus: boolean }>;
34+
onDismiss?: DirectEventHandler<{ target: Int32 }>;
35+
onShow?: DirectEventHandler<{ target: Int32 }>;
36+
37+
directionalHint?: WithDefault<
38+
| 'leftTopEdge'
39+
| 'leftCenter'
40+
| 'leftBottomEdge'
41+
| 'topLeftEdge'
42+
| 'topAutoEdge'
43+
| 'topCenter'
44+
| 'topRightEdge'
45+
| 'rightTopEdge'
46+
| 'rightCenter'
47+
| 'rightBottomEdge'
48+
| 'bottomLeftEdge'
49+
| 'bottonLeftEdge' // Typo in the original code, should be 'bottomLeftEdge'
50+
| 'bottomAutoEdge'
51+
| 'bottomCenter'
52+
| 'bottomRightEdge',
53+
'bottonLeftEdge'
54+
>;
55+
target?: UnsafeMixed;
56+
}
57+
58+
export type CalloutComponentType = HostComponent<NativeProps>;
59+
60+
export interface CalloutNativeCommands {
61+
focusWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
62+
blurWindow: (viewRef: React.ElementRef<CalloutComponentType>) => void;
63+
}
564

665
export const Commands: CalloutNativeCommands = codegenNativeCommands<CalloutNativeCommands>({
766
supportedCommands: ['blurWindow', 'focusWindow'],

‎packages/components/Callout/src/CalloutNativeComponent.types.macos.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎packages/components/Callout/src/CalloutNativeComponent.types.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)