Feat/fontweight number value (#34598)
Summary: This PR adds support for number values for `fontWeight` as requested in https://github.com/facebook/react-native/issues/34425. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [General] [Added] - Added support for number values in fontWeight. Pull Request resolved: https://github.com/facebook/react-native/pull/34598 Test Plan: ```js <Text style={{ fontWeight: 900, color: 'red' }}> Hello World </Text> ``` Reviewed By: jacdebug Differential Revision: D39268920 Pulled By: cipolleschi fbshipit-source-id: 9bb711677bf173f9904b74f382659042856efd83
This commit is contained in:
Родитель
4e70376dc7
Коммит
f1c1f8116b
|
@ -566,6 +566,23 @@ export type ____ViewStyle_Internal = $ReadOnly<{
|
|||
...____ViewStyle_InternalOverrides,
|
||||
}>;
|
||||
|
||||
export type FontStyleType = {
|
||||
fontFamily: string,
|
||||
fontWeight: ____FontWeight_Internal,
|
||||
};
|
||||
|
||||
export type FontStyleMap = {
|
||||
ultraLight: FontStyleType,
|
||||
thin: FontStyleType,
|
||||
light: FontStyleType,
|
||||
regular: FontStyleType,
|
||||
medium: FontStyleType,
|
||||
semibold: FontStyleType,
|
||||
bold: FontStyleType,
|
||||
heavy: FontStyleType,
|
||||
black: FontStyleType,
|
||||
};
|
||||
|
||||
export type ____FontWeight_Internal =
|
||||
| 'normal'
|
||||
| 'bold'
|
||||
|
@ -577,7 +594,26 @@ export type ____FontWeight_Internal =
|
|||
| '600'
|
||||
| '700'
|
||||
| '800'
|
||||
| '900';
|
||||
| '900'
|
||||
| 100
|
||||
| 200
|
||||
| 300
|
||||
| 400
|
||||
| 500
|
||||
| 600
|
||||
| 700
|
||||
| 800
|
||||
| 900
|
||||
| 'ultralight'
|
||||
| 'thin'
|
||||
| 'light'
|
||||
| 'medium'
|
||||
| 'regular'
|
||||
| 'semibold'
|
||||
| 'condensedBold'
|
||||
| 'condensed'
|
||||
| 'heavy'
|
||||
| 'black';
|
||||
|
||||
export type ____TextStyle_InternalCore = $ReadOnly<{
|
||||
...$Exact<____ViewStyle_Internal>,
|
||||
|
|
|
@ -14,13 +14,13 @@ import Platform from '../Utilities/Platform';
|
|||
import * as PressabilityDebug from '../Pressability/PressabilityDebug';
|
||||
import usePressability from '../Pressability/usePressability';
|
||||
import StyleSheet from '../StyleSheet/StyleSheet';
|
||||
import flattenStyle from '../StyleSheet/flattenStyle';
|
||||
import processColor from '../StyleSheet/processColor';
|
||||
import TextAncestor from './TextAncestor';
|
||||
import {NativeText, NativeVirtualText} from './TextNativeComponent';
|
||||
import {type TextProps} from './TextProps';
|
||||
import * as React from 'react';
|
||||
import {useContext, useMemo, useState} from 'react';
|
||||
import flattenStyle from '../StyleSheet/flattenStyle';
|
||||
|
||||
/**
|
||||
* Text is the fundamental component for displaying text.
|
||||
|
@ -201,6 +201,12 @@ const Text: React.AbstractComponent<
|
|||
default: accessible,
|
||||
});
|
||||
|
||||
let flattenedStyle = flattenStyle(style);
|
||||
|
||||
if (typeof flattenedStyle?.fontWeight === 'number') {
|
||||
flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
|
||||
}
|
||||
|
||||
return hasTextAncestor ? (
|
||||
<NativeVirtualText
|
||||
{...restProps}
|
||||
|
@ -213,7 +219,7 @@ const Text: React.AbstractComponent<
|
|||
nativeID={id ?? nativeID}
|
||||
numberOfLines={numberOfLines}
|
||||
selectionColor={selectionColor}
|
||||
style={style}
|
||||
style={flattenedStyle}
|
||||
ref={forwardedRef}
|
||||
/>
|
||||
) : (
|
||||
|
@ -232,7 +238,7 @@ const Text: React.AbstractComponent<
|
|||
nativeID={id ?? nativeID}
|
||||
numberOfLines={numberOfLines}
|
||||
selectionColor={selectionColor}
|
||||
style={style}
|
||||
style={flattenedStyle}
|
||||
ref={forwardedRef}
|
||||
/>
|
||||
</TextAncestor.Provider>
|
||||
|
|
|
@ -392,6 +392,15 @@ class TextExample extends React.Component<{...}> {
|
|||
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
|
||||
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
|
||||
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
|
||||
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
|
||||
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
|
||||
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
|
||||
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
|
||||
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
|
||||
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
|
||||
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
|
||||
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
|
||||
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
|
||||
</RNTesterBlock>
|
||||
<RNTesterBlock title="Font Style">
|
||||
<Text style={{fontStyle: 'italic'}}>Move fast and be italic</Text>
|
||||
|
|
|
@ -681,6 +681,15 @@ exports.examples = [
|
|||
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
|
||||
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
|
||||
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
|
||||
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
|
||||
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
|
||||
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
|
||||
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
|
||||
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
|
||||
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
|
||||
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
|
||||
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
|
||||
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
|
Загрузка…
Ссылка в новой задаче