-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use FRNFontMetrics module in
Text (#2269)
* Add FRNFontMetrics module * Remove debugging `console.log` statements * Use a hook to access font metrics * Add NativeFontMetrics package * Remove unneeded API * Fix spacing * Change files * Add @types/use-subscription dependency * Update yarn.lock * Add use-subscription as a dependency * Update yarn.lock again * NativeFontMetrics.tsx -> NativeFontMetrics.ts * Make NativeFontMetrics iOS only, part 1 * Stub out NativeFontMetrics for non-iOS platforms * Keep use-subscription version consistent with react-native and react-native-macos * Remove core-android capability * id -> UIFontTextStyle * Delete old changefile * Regenerate lockfiles * Delete duplicate NativeFontMetrics.tsx file * Change files * allScaleFactors -> currentScaleFactors * Use pure events to update font metrics * Update package.nuspec * Use pure JS hook to make V2 Texts rerender * Change files * Update snapshot * Remove unneeded dependency * Move fontMetrics to iOS specific file * Better isolation of iOS-specific code * Add useFontMetrics.ios.ts * Remove useFontMetricsScaleFactors warning on non-iOS platforms * Move fontMetrics accesses outside of continuation, and improve typing * Fix Text rerender shallow equality test * Handle case when NativeFontMetrics isn't defined * IFontMetrics -> FontMetrics * Keep `mergedProps` spreads next to each other Co-authored-by: Adam Gleitman <[email protected]>
- Loading branch information
1 parent
bc62b6f
commit 1b0f4b6
Showing
19 changed files
with
168 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
...i-react-native-experimental-native-font-metrics-a7673fa7-cc45-446e-83e0-02ce3ab92578.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Send new font metrics information through a JS event", | ||
| "packageName": "@fluentui-react-native/experimental-native-font-metrics", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-native-tester-955d714f-c8eb-47c4-bec6-5a032f9171d2.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Add Dynamic Type support", | ||
| "packageName": "@fluentui-react-native/tester", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-native-text-234cd2bf-f18b-4347-8a20-cfe76b66a60d.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Add Dynamic Type support", | ||
| "packageName": "@fluentui-react-native/text", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,57 @@ | ||
| import { Text } from './Text'; | ||
|
|
||
| // TODO(#2268): Remove "as any" designations once RN Core properly supports Dynamic Type scaling | ||
|
|
||
| export const Caption1 = Text.customize({ | ||
| variant: 'caption1', | ||
| }); | ||
| dynamicTypeRamp: 'footnote', | ||
| } as any); | ||
| export const Caption1Strong = Text.customize({ | ||
| variant: 'caption1Strong', | ||
| }); | ||
| dynamicTypeRamp: 'footnote', | ||
| } as any); | ||
| export const Caption2 = Text.customize({ | ||
| variant: 'caption2', | ||
| }); | ||
| dynamicTypeRamp: 'caption1', | ||
| } as any); | ||
| export const Body1 = Text.customize({ | ||
| variant: 'body1', | ||
| }); | ||
| dynamicTypeRamp: 'body', | ||
| } as any); | ||
| export const Body1Strong = Text.customize({ | ||
| variant: 'body1Strong', | ||
| }); | ||
| dynamicTypeRamp: 'body', | ||
| } as any); | ||
| export const Body2 = Text.customize({ | ||
| variant: 'body2', | ||
| }); | ||
| dynamicTypeRamp: 'subheadline', | ||
| } as any); | ||
| export const Body2Strong = Text.customize({ | ||
| variant: 'body2Strong', | ||
| }); | ||
| dynamicTypeRamp: 'subheadline', | ||
| } as any); | ||
| export const Subtitle1 = null; // Not supported on iOS | ||
| export const Subtitle1Strong = null; // Not supported on iOS | ||
| export const Subtitle2 = null; // Not supported on iOS | ||
| export const Subtitle2Strong = null; // Not supported on iOS | ||
| export const Title1 = Text.customize({ | ||
| variant: 'title1', | ||
| }); | ||
| dynamicTypeRamp: 'title1', | ||
| } as any); | ||
| export const Title1Strong = null; // Not supported on iOS | ||
| export const Title2 = Text.customize({ | ||
| variant: 'title2', | ||
| }); | ||
| dynamicTypeRamp: 'title2', | ||
| } as any); | ||
| export const Title3 = Text.customize({ | ||
| variant: 'title3', | ||
| }); | ||
| dynamicTypeRamp: 'title3', | ||
| } as any); | ||
| export const LargeTitle = Text.customize({ | ||
| variant: 'largeTitle', | ||
| }); | ||
| dynamicTypeRamp: 'largeTitle', | ||
| } as any); | ||
| export const Display = Text.customize({ | ||
| variant: 'display', | ||
| }); | ||
| dynamicTypeRamp: 'largeTitle', | ||
| } as any); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 7 additions & 8 deletions
15
packages/experimental/NativeFontMetrics/src/NativeFontMetrics.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/experimental/NativeFontMetrics/src/fontMetrics.ios.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { NativeEventEmitter } from 'react-native'; | ||
| import NativeFontMetrics from './NativeFontMetrics'; | ||
| import { FontMetrics, ScaleFactors } from './NativeFontMetrics.types'; | ||
|
|
||
| class FontMetricsImpl implements FontMetrics { | ||
| _scaleFactors: ScaleFactors; | ||
|
|
||
| constructor() { | ||
| if (NativeFontMetrics) { | ||
| this._scaleFactors = NativeFontMetrics.currentScaleFactors(); | ||
| const eventEmitter = new NativeEventEmitter(NativeFontMetrics as any); | ||
| eventEmitter.addListener('onFontMetricsChanged', ({ newScaleFactors }) => { | ||
| this._scaleFactors = newScaleFactors; | ||
| }); | ||
| } else { | ||
| this._scaleFactors = {}; | ||
| } | ||
| } | ||
|
|
||
| get scaleFactors(): ScaleFactors { | ||
| return this._scaleFactors; | ||
| } | ||
| } | ||
|
|
||
| export const fontMetrics = new FontMetricsImpl() as FontMetrics; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { FontMetrics } from './NativeFontMetrics.types'; | ||
|
|
||
| export const fontMetrics = { scaleFactors: {} } as FontMetrics; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1 @@ | ||
| export * from './NativeFontMetrics'; | ||
| export * from './useFontMetrics'; |
29 changes: 29 additions & 0 deletions
29
packages/experimental/NativeFontMetrics/src/useFontMetrics.ios.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { useMemo } from 'react'; | ||
| import { NativeEventEmitter } from 'react-native'; | ||
| import { useSubscription } from 'use-subscription'; | ||
| import { fontMetrics } from './fontMetrics'; | ||
| import NativeFontMetrics from './NativeFontMetrics'; | ||
| import { ScaleFactors } from './NativeFontMetrics.types'; | ||
|
|
||
| const eventEmitter = NativeFontMetrics ? new NativeEventEmitter(NativeFontMetrics as any) : undefined; | ||
|
|
||
| export function useFontMetricsScaleFactors(): ScaleFactors { | ||
| if (!eventEmitter) { | ||
| return {}; | ||
| } | ||
|
|
||
| const subscription = useMemo( | ||
| () => ({ | ||
| getCurrentValue: () => fontMetrics.scaleFactors, | ||
| subscribe: (callback) => { | ||
| const appearanceSubscription = eventEmitter.addListener('onFontMetricsChanged', callback); | ||
| return () => { | ||
| appearanceSubscription.remove(); | ||
| }; | ||
| }, | ||
| }), | ||
| [], | ||
| ); | ||
|
|
||
| return useSubscription(subscription); | ||
| } |
Oops, something went wrong.