@fluentui-react-native/text 0.16.2 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +22 -1
- package/CHANGELOG.md +11 -2
- package/lib/Text.d.ts.map +1 -1
- package/lib/Text.js +22 -3
- package/lib/Text.js.map +1 -1
- package/lib/Text.types.d.ts +3 -1
- package/lib/Text.types.d.ts.map +1 -1
- package/lib/Variants.ios.d.ts.map +1 -1
- package/lib/Variants.ios.js +13 -0
- package/lib/Variants.ios.js.map +1 -1
- package/lib-commonjs/Text.d.ts.map +1 -1
- package/lib-commonjs/Text.js +22 -3
- package/lib-commonjs/Text.js.map +1 -1
- package/lib-commonjs/Text.types.d.ts +3 -1
- package/lib-commonjs/Text.types.d.ts.map +1 -1
- package/lib-commonjs/Variants.ios.d.ts.map +1 -1
- package/lib-commonjs/Variants.ios.js +13 -0
- package/lib-commonjs/Variants.ios.js.map +1 -1
- package/package.json +2 -1
- package/src/Text.tsx +22 -1
- package/src/Text.types.ts +5 -1
- package/src/Variants.ios.ts +26 -12
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/text",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Mon, 28 Nov 2022
|
|
5
|
+
"date": "Mon, 28 Nov 2022 19:48:09 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/text_v0.17.0",
|
|
7
|
+
"version": "0.17.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "adgleitm@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/text",
|
|
13
|
+
"commit": "1b0f4b66f9ed9c9be49ad296d1b0d2f57c56bbc4",
|
|
14
|
+
"comment": "Add Dynamic Type support"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/text",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/experimental-native-font-metrics to v0.3.0",
|
|
20
|
+
"commit": "1b0f4b66f9ed9c9be49ad296d1b0d2f57c56bbc4"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Mon, 28 Nov 2022 11:51:06 GMT",
|
|
6
27
|
"tag": "@fluentui-react-native/text_v0.16.2",
|
|
7
28
|
"version": "0.16.2",
|
|
8
29
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/text
|
|
2
2
|
|
|
3
|
-
This log was last generated on Mon, 28 Nov 2022
|
|
3
|
+
This log was last generated on Mon, 28 Nov 2022 19:48:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.17.0
|
|
8
|
+
|
|
9
|
+
Mon, 28 Nov 2022 19:48:09 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- Add Dynamic Type support (adgleitm@microsoft.com)
|
|
14
|
+
- Bump @fluentui-react-native/experimental-native-font-metrics to v0.3.0
|
|
15
|
+
|
|
7
16
|
## 0.16.2
|
|
8
17
|
|
|
9
|
-
Mon, 28 Nov 2022 11:
|
|
18
|
+
Mon, 28 Nov 2022 11:51:06 GMT
|
|
10
19
|
|
|
11
20
|
### Patches
|
|
12
21
|
|
package/lib/Text.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAY,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAY,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/D,eAAO,MAAM,IAAI,kMAyIA,CAAC;AAGlB,eAAe,IAAI,CAAC"}
|
package/lib/Text.js
CHANGED
|
@@ -37,17 +37,21 @@ import { I18nManager, Platform, Text as RNText } from 'react-native';
|
|
|
37
37
|
import { textName } from './Text.types';
|
|
38
38
|
import { useTextTokens } from './TextTokens';
|
|
39
39
|
import React from 'react';
|
|
40
|
+
import { useFontMetricsScaleFactors } from '@fluentui-react-native/experimental-native-font-metrics';
|
|
40
41
|
var emptyProps = {};
|
|
41
42
|
export var Text = compressible(function (props, useTokens) {
|
|
42
43
|
var _a;
|
|
44
|
+
var _b;
|
|
43
45
|
if (props === undefined) {
|
|
44
46
|
props = emptyProps;
|
|
45
47
|
}
|
|
46
48
|
// split out color and variant from props
|
|
47
|
-
var
|
|
49
|
+
var _c = props.align, align = _c === void 0 ? undefined : _c, block = props.block, color = props.color, font = props.font, italic = props.italic, onAccessibilityTap = props.onAccessibilityTap, onKeyUp = props.onKeyUp, onKeyDown = props.onKeyDown, keyUpEvents = props.keyUpEvents, keyDownEvents = props.keyDownEvents, onPress = props.onPress, size = props.size, strikethrough = props.strikethrough, style = props.style, _d = props.truncate, truncate = _d === void 0 ? false : _d, underline = props.underline, variant = props.variant, weight = props.weight, _e = props.wrap, wrap = _e === void 0 ? true : _e, rest = __rest(props, ["align", "block", "color", "font", "italic", "onAccessibilityTap", "onKeyUp", "onKeyDown", "keyUpEvents", "keyDownEvents", "onPress", "size", "strikethrough", "style", "truncate", "underline", "variant", "weight", "wrap"]);
|
|
48
50
|
var theme = useFluentTheme();
|
|
49
51
|
// get the tokens from the theme
|
|
50
|
-
var
|
|
52
|
+
var _f = useTokens(theme), tokens = _f[0], cache = _f[1];
|
|
53
|
+
// TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
54
|
+
var fontMetricsScaleFactors = useFontMetricsScaleFactors();
|
|
51
55
|
var textAlign = I18nManager.isRTL
|
|
52
56
|
? align === 'start'
|
|
53
57
|
? 'right'
|
|
@@ -69,6 +73,8 @@ export var Text = compressible(function (props, useTokens) {
|
|
|
69
73
|
var onAccTap = React.useCallback(function (event) {
|
|
70
74
|
onAccessibilityTap ? onAccessibilityTap() : onPress(event);
|
|
71
75
|
}, [onPress, onAccessibilityTap]);
|
|
76
|
+
// TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
77
|
+
var dynamicTypeVariant = Platform.OS === 'ios' ? tokens.dynamicTypeRamp : undefined;
|
|
72
78
|
// override tokens from props
|
|
73
79
|
_a = patchTokens(tokens, cache, {
|
|
74
80
|
color: color,
|
|
@@ -83,6 +89,18 @@ export var Text = compressible(function (props, useTokens) {
|
|
|
83
89
|
}), tokens = _a[0], cache = _a[1];
|
|
84
90
|
// now build the text style from tokens that can be shared between different Text instances
|
|
85
91
|
var tokenStyle = cache(function () { return (__assign({ margin: 0, color: tokens.color, fontStyle: tokens.fontStyle, textAlign: tokens.textAlign, textDecorationLine: tokens.textDecorationLine }, fontStyles.from(tokens, theme))); }, __spreadArray(['color', 'fontStyle', 'textAlign', 'textDecorationLine'], fontStyles.keys, true))[0];
|
|
92
|
+
// [TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
93
|
+
var scaleStyleAdjustments = emptyProps;
|
|
94
|
+
// tokenStyle.fontSize and tokenStyle.lineHeight can also be strings (e.g., "14px").
|
|
95
|
+
// Therefore, we only support scaling for number-based size values in order to avoid any messy calculations.
|
|
96
|
+
if (dynamicTypeVariant !== undefined && typeof tokenStyle.fontSize === 'number' && typeof tokenStyle.lineHeight === 'number') {
|
|
97
|
+
var scaleFactor = (_b = fontMetricsScaleFactors[dynamicTypeVariant]) !== null && _b !== void 0 ? _b : 1;
|
|
98
|
+
scaleStyleAdjustments = {
|
|
99
|
+
fontSize: tokenStyle.fontSize * scaleFactor,
|
|
100
|
+
lineHeight: tokenStyle.lineHeight * scaleFactor,
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
// ]TODO(#2268)
|
|
86
104
|
var isWinPlatform = Platform.OS === ('win32' || 'windows');
|
|
87
105
|
var filteredProps = {
|
|
88
106
|
onKeyUp: isWinPlatform ? onKeyUp : undefined,
|
|
@@ -95,7 +113,8 @@ export var Text = compressible(function (props, useTokens) {
|
|
|
95
113
|
};
|
|
96
114
|
// return a continuation function that allows this text to be compressed
|
|
97
115
|
return function (extra, children) {
|
|
98
|
-
var mergedProps = __assign(__assign(__assign(__assign(__assign({}, rest), keyProps), filteredProps), extra),
|
|
116
|
+
var mergedProps = __assign(__assign(__assign(__assign(__assign(__assign({}, rest), keyProps), filteredProps), extra), (dynamicTypeVariant !== undefined && { allowFontScaling: false })), { // TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
117
|
+
onPress: onPress, numberOfLines: truncate || !wrap ? 1 : 0, style: mergeStyles(tokenStyle, props.style, extra === null || extra === void 0 ? void 0 : extra.style, scaleStyleAdjustments) });
|
|
99
118
|
return (withSlots(RNText, __assign({ ellipsizeMode: !wrap && !truncate ? 'clip' : 'tail' }, mergedProps), children));
|
|
100
119
|
};
|
|
101
120
|
}, useTextTokens);
|
package/lib/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EACL,UAAU,EACV,SAAS,EAET,cAAc,EACd,WAAW,EACX,YAAY,EACZ,WAAW,GAEZ,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAyB,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}
|
package/lib/Text.types.d.ts
CHANGED
|
@@ -6,7 +6,9 @@ export declare const textName = "Text";
|
|
|
6
6
|
* Text tokens, these are the internally configurable values for Text elements. In particular these
|
|
7
7
|
* drive decisions on how to build the styles
|
|
8
8
|
*/
|
|
9
|
-
export declare type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens & Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'
|
|
9
|
+
export declare type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens & Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'> & {
|
|
10
|
+
dynamicTypeRamp?: string;
|
|
11
|
+
};
|
|
10
12
|
export declare type TextAlign = 'start' | 'center' | 'end' | 'justify';
|
|
11
13
|
export declare type TextFont = 'base' | 'monospace' | 'numeric';
|
|
12
14
|
export declare type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
|
package/lib/Text.types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../src/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B;;;GAGG;AACH,oBAAY,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../src/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B;;;GAGG;AACH,oBAAY,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GACrD,sBAAsB,GACtB,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,CAAC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ,oBAAY,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,oBAAY,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;AACxD,oBAAY,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAClF,oBAAY,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpE;;GAEG;AACH,oBAAY,SAAS,CAAC,KAAK,GAAG,UAAU,IAAI,KAAK,GAC/C,iBAAiB,GAAG;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Variants.ios.d.ts","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Variants.ios.d.ts","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,kPAGZ,CAAC;AACV,eAAO,MAAM,cAAc,kPAGlB,CAAC;AACV,eAAO,MAAM,QAAQ,kPAGZ,CAAC;AACV,eAAO,MAAM,KAAK,kPAGT,CAAC;AACV,eAAO,MAAM,WAAW,kPAGf,CAAC;AACV,eAAO,MAAM,KAAK,kPAGT,CAAC;AACV,eAAO,MAAM,WAAW,kPAGf,CAAC;AACV,eAAO,MAAM,SAAS,KAAO,CAAC;AAC9B,eAAO,MAAM,eAAe,KAAO,CAAC;AACpC,eAAO,MAAM,SAAS,KAAO,CAAC;AAC9B,eAAO,MAAM,eAAe,KAAO,CAAC;AACpC,eAAO,MAAM,MAAM,kPAGV,CAAC;AACV,eAAO,MAAM,YAAY,KAAO,CAAC;AACjC,eAAO,MAAM,MAAM,kPAGV,CAAC;AACV,eAAO,MAAM,MAAM,kPAGV,CAAC;AACV,eAAO,MAAM,UAAU,kPAGd,CAAC;AACV,eAAO,MAAM,OAAO,kPAGX,CAAC"}
|
package/lib/Variants.ios.js
CHANGED
|
@@ -1,24 +1,32 @@
|
|
|
1
1
|
import { Text } from './Text';
|
|
2
|
+
// TODO(#2268): Remove "as any" designations once RN Core properly supports Dynamic Type scaling
|
|
2
3
|
export var Caption1 = Text.customize({
|
|
3
4
|
variant: 'caption1',
|
|
5
|
+
dynamicTypeRamp: 'footnote',
|
|
4
6
|
});
|
|
5
7
|
export var Caption1Strong = Text.customize({
|
|
6
8
|
variant: 'caption1Strong',
|
|
9
|
+
dynamicTypeRamp: 'footnote',
|
|
7
10
|
});
|
|
8
11
|
export var Caption2 = Text.customize({
|
|
9
12
|
variant: 'caption2',
|
|
13
|
+
dynamicTypeRamp: 'caption1',
|
|
10
14
|
});
|
|
11
15
|
export var Body1 = Text.customize({
|
|
12
16
|
variant: 'body1',
|
|
17
|
+
dynamicTypeRamp: 'body',
|
|
13
18
|
});
|
|
14
19
|
export var Body1Strong = Text.customize({
|
|
15
20
|
variant: 'body1Strong',
|
|
21
|
+
dynamicTypeRamp: 'body',
|
|
16
22
|
});
|
|
17
23
|
export var Body2 = Text.customize({
|
|
18
24
|
variant: 'body2',
|
|
25
|
+
dynamicTypeRamp: 'subheadline',
|
|
19
26
|
});
|
|
20
27
|
export var Body2Strong = Text.customize({
|
|
21
28
|
variant: 'body2Strong',
|
|
29
|
+
dynamicTypeRamp: 'subheadline',
|
|
22
30
|
});
|
|
23
31
|
export var Subtitle1 = null; // Not supported on iOS
|
|
24
32
|
export var Subtitle1Strong = null; // Not supported on iOS
|
|
@@ -26,18 +34,23 @@ export var Subtitle2 = null; // Not supported on iOS
|
|
|
26
34
|
export var Subtitle2Strong = null; // Not supported on iOS
|
|
27
35
|
export var Title1 = Text.customize({
|
|
28
36
|
variant: 'title1',
|
|
37
|
+
dynamicTypeRamp: 'title1',
|
|
29
38
|
});
|
|
30
39
|
export var Title1Strong = null; // Not supported on iOS
|
|
31
40
|
export var Title2 = Text.customize({
|
|
32
41
|
variant: 'title2',
|
|
42
|
+
dynamicTypeRamp: 'title2',
|
|
33
43
|
});
|
|
34
44
|
export var Title3 = Text.customize({
|
|
35
45
|
variant: 'title3',
|
|
46
|
+
dynamicTypeRamp: 'title3',
|
|
36
47
|
});
|
|
37
48
|
export var LargeTitle = Text.customize({
|
|
38
49
|
variant: 'largeTitle',
|
|
50
|
+
dynamicTypeRamp: 'largeTitle',
|
|
39
51
|
});
|
|
40
52
|
export var Display = Text.customize({
|
|
41
53
|
variant: 'display',
|
|
54
|
+
dynamicTypeRamp: 'largeTitle',
|
|
42
55
|
});
|
|
43
56
|
//# sourceMappingURL=Variants.ios.js.map
|
package/lib/Variants.ios.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Variants.ios.js","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,CAAC,IAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU;
|
|
1
|
+
{"version":3,"file":"Variants.ios.js","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,gGAAgG;AAEhG,MAAM,CAAC,IAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,eAAe,EAAE,UAAU;CACrB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;IAC3C,OAAO,EAAE,gBAAgB;IACzB,eAAe,EAAE,UAAU;CACrB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,eAAe,EAAE,UAAU;CACrB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;IAClC,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,MAAM;CACjB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,MAAM;CACjB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;IAClC,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,aAAa;CACxB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,aAAa;CACxB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,SAAS,GAAG,IAAI,CAAC,CAAC,uBAAuB;AACtD,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,CAAC,CAAC,uBAAuB;AAC5D,MAAM,CAAC,IAAM,SAAS,GAAG,IAAI,CAAC,CAAC,uBAAuB;AACtD,MAAM,CAAC,IAAM,eAAe,GAAG,IAAI,CAAC,CAAC,uBAAuB;AAC5D,MAAM,CAAC,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,QAAQ;CACnB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,YAAY,GAAG,IAAI,CAAC,CAAC,uBAAuB;AACzD,MAAM,CAAC,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,QAAQ;CACnB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,QAAQ;CACnB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;IACvC,OAAO,EAAE,YAAY;IACrB,eAAe,EAAE,YAAY;CACvB,CAAC,CAAC;AACV,MAAM,CAAC,IAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,YAAY;CACvB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAY,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAY,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/D,eAAO,MAAM,IAAI,kMAyIA,CAAC;AAGlB,eAAe,IAAI,CAAC"}
|
package/lib-commonjs/Text.js
CHANGED
|
@@ -43,17 +43,21 @@ var react_native_1 = require("react-native");
|
|
|
43
43
|
var Text_types_1 = require("./Text.types");
|
|
44
44
|
var TextTokens_1 = require("./TextTokens");
|
|
45
45
|
var react_1 = __importDefault(require("react"));
|
|
46
|
+
var experimental_native_font_metrics_1 = require("@fluentui-react-native/experimental-native-font-metrics");
|
|
46
47
|
var emptyProps = {};
|
|
47
48
|
exports.Text = (0, framework_1.compressible)(function (props, useTokens) {
|
|
48
49
|
var _a;
|
|
50
|
+
var _b;
|
|
49
51
|
if (props === undefined) {
|
|
50
52
|
props = emptyProps;
|
|
51
53
|
}
|
|
52
54
|
// split out color and variant from props
|
|
53
|
-
var
|
|
55
|
+
var _c = props.align, align = _c === void 0 ? undefined : _c, block = props.block, color = props.color, font = props.font, italic = props.italic, onAccessibilityTap = props.onAccessibilityTap, onKeyUp = props.onKeyUp, onKeyDown = props.onKeyDown, keyUpEvents = props.keyUpEvents, keyDownEvents = props.keyDownEvents, onPress = props.onPress, size = props.size, strikethrough = props.strikethrough, style = props.style, _d = props.truncate, truncate = _d === void 0 ? false : _d, underline = props.underline, variant = props.variant, weight = props.weight, _e = props.wrap, wrap = _e === void 0 ? true : _e, rest = __rest(props, ["align", "block", "color", "font", "italic", "onAccessibilityTap", "onKeyUp", "onKeyDown", "keyUpEvents", "keyDownEvents", "onPress", "size", "strikethrough", "style", "truncate", "underline", "variant", "weight", "wrap"]);
|
|
54
56
|
var theme = (0, framework_1.useFluentTheme)();
|
|
55
57
|
// get the tokens from the theme
|
|
56
|
-
var
|
|
58
|
+
var _f = useTokens(theme), tokens = _f[0], cache = _f[1];
|
|
59
|
+
// TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
60
|
+
var fontMetricsScaleFactors = (0, experimental_native_font_metrics_1.useFontMetricsScaleFactors)();
|
|
57
61
|
var textAlign = react_native_1.I18nManager.isRTL
|
|
58
62
|
? align === 'start'
|
|
59
63
|
? 'right'
|
|
@@ -75,6 +79,8 @@ exports.Text = (0, framework_1.compressible)(function (props, useTokens) {
|
|
|
75
79
|
var onAccTap = react_1.default.useCallback(function (event) {
|
|
76
80
|
onAccessibilityTap ? onAccessibilityTap() : onPress(event);
|
|
77
81
|
}, [onPress, onAccessibilityTap]);
|
|
82
|
+
// TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
83
|
+
var dynamicTypeVariant = react_native_1.Platform.OS === 'ios' ? tokens.dynamicTypeRamp : undefined;
|
|
78
84
|
// override tokens from props
|
|
79
85
|
_a = (0, framework_1.patchTokens)(tokens, cache, {
|
|
80
86
|
color: color,
|
|
@@ -89,6 +95,18 @@ exports.Text = (0, framework_1.compressible)(function (props, useTokens) {
|
|
|
89
95
|
}), tokens = _a[0], cache = _a[1];
|
|
90
96
|
// now build the text style from tokens that can be shared between different Text instances
|
|
91
97
|
var tokenStyle = cache(function () { return (__assign({ margin: 0, color: tokens.color, fontStyle: tokens.fontStyle, textAlign: tokens.textAlign, textDecorationLine: tokens.textDecorationLine }, framework_1.fontStyles.from(tokens, theme))); }, __spreadArray(['color', 'fontStyle', 'textAlign', 'textDecorationLine'], framework_1.fontStyles.keys, true))[0];
|
|
98
|
+
// [TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
99
|
+
var scaleStyleAdjustments = emptyProps;
|
|
100
|
+
// tokenStyle.fontSize and tokenStyle.lineHeight can also be strings (e.g., "14px").
|
|
101
|
+
// Therefore, we only support scaling for number-based size values in order to avoid any messy calculations.
|
|
102
|
+
if (dynamicTypeVariant !== undefined && typeof tokenStyle.fontSize === 'number' && typeof tokenStyle.lineHeight === 'number') {
|
|
103
|
+
var scaleFactor = (_b = fontMetricsScaleFactors[dynamicTypeVariant]) !== null && _b !== void 0 ? _b : 1;
|
|
104
|
+
scaleStyleAdjustments = {
|
|
105
|
+
fontSize: tokenStyle.fontSize * scaleFactor,
|
|
106
|
+
lineHeight: tokenStyle.lineHeight * scaleFactor,
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
// ]TODO(#2268)
|
|
92
110
|
var isWinPlatform = react_native_1.Platform.OS === ('win32' || 'windows');
|
|
93
111
|
var filteredProps = {
|
|
94
112
|
onKeyUp: isWinPlatform ? onKeyUp : undefined,
|
|
@@ -101,7 +119,8 @@ exports.Text = (0, framework_1.compressible)(function (props, useTokens) {
|
|
|
101
119
|
};
|
|
102
120
|
// return a continuation function that allows this text to be compressed
|
|
103
121
|
return function (extra, children) {
|
|
104
|
-
var mergedProps = __assign(__assign(__assign(__assign(__assign({}, rest), keyProps), filteredProps), extra),
|
|
122
|
+
var mergedProps = __assign(__assign(__assign(__assign(__assign(__assign({}, rest), keyProps), filteredProps), extra), (dynamicTypeVariant !== undefined && { allowFontScaling: false })), { // TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
123
|
+
onPress: onPress, numberOfLines: truncate || !wrap ? 1 : 0, style: (0, framework_1.mergeStyles)(tokenStyle, props.style, extra === null || extra === void 0 ? void 0 : extra.style, scaleStyleAdjustments) });
|
|
105
124
|
return ((0, framework_1.withSlots)(react_native_1.Text, __assign({ ellipsizeMode: !wrap && !truncate ? 'clip' : 'tail' }, mergedProps), children));
|
|
106
125
|
};
|
|
107
126
|
}, TextTokens_1.useTextTokens);
|
package/lib-commonjs/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,8DAS0C;AAC1C,8EAAuE;AACvE,oEAAmE;AACnE,6CAAqE;AACrE,2CAA+D;AAC/D,2CAA6C;AAC7C,gDAA0B;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,9 @@ export declare const textName = "Text";
|
|
|
6
6
|
* Text tokens, these are the internally configurable values for Text elements. In particular these
|
|
7
7
|
* drive decisions on how to build the styles
|
|
8
8
|
*/
|
|
9
|
-
export declare type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens & Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'
|
|
9
|
+
export declare type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens & Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'> & {
|
|
10
|
+
dynamicTypeRamp?: string;
|
|
11
|
+
};
|
|
10
12
|
export declare type TextAlign = 'start' | 'center' | 'end' | 'justify';
|
|
11
13
|
export declare type TextFont = 'base' | 'monospace' | 'numeric';
|
|
12
14
|
export declare type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../src/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B;;;GAGG;AACH,oBAAY,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../src/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B;;;GAGG;AACH,oBAAY,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GACrD,sBAAsB,GACtB,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,CAAC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEJ,oBAAY,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAC/D,oBAAY,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;AACxD,oBAAY,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAClF,oBAAY,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpE;;GAEG;AACH,oBAAY,SAAS,CAAC,KAAK,GAAG,UAAU,IAAI,KAAK,GAC/C,iBAAiB,GAAG;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Variants.ios.d.ts","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Variants.ios.d.ts","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,kPAGZ,CAAC;AACV,eAAO,MAAM,cAAc,kPAGlB,CAAC;AACV,eAAO,MAAM,QAAQ,kPAGZ,CAAC;AACV,eAAO,MAAM,KAAK,kPAGT,CAAC;AACV,eAAO,MAAM,WAAW,kPAGf,CAAC;AACV,eAAO,MAAM,KAAK,kPAGT,CAAC;AACV,eAAO,MAAM,WAAW,kPAGf,CAAC;AACV,eAAO,MAAM,SAAS,KAAO,CAAC;AAC9B,eAAO,MAAM,eAAe,KAAO,CAAC;AACpC,eAAO,MAAM,SAAS,KAAO,CAAC;AAC9B,eAAO,MAAM,eAAe,KAAO,CAAC;AACpC,eAAO,MAAM,MAAM,kPAGV,CAAC;AACV,eAAO,MAAM,YAAY,KAAO,CAAC;AACjC,eAAO,MAAM,MAAM,kPAGV,CAAC;AACV,eAAO,MAAM,MAAM,kPAGV,CAAC;AACV,eAAO,MAAM,UAAU,kPAGd,CAAC;AACV,eAAO,MAAM,OAAO,kPAGX,CAAC"}
|
|
@@ -2,26 +2,34 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Display = exports.LargeTitle = exports.Title3 = exports.Title2 = exports.Title1Strong = exports.Title1 = exports.Subtitle2Strong = exports.Subtitle2 = exports.Subtitle1Strong = exports.Subtitle1 = exports.Body2Strong = exports.Body2 = exports.Body1Strong = exports.Body1 = exports.Caption2 = exports.Caption1Strong = exports.Caption1 = void 0;
|
|
4
4
|
var Text_1 = require("./Text");
|
|
5
|
+
// TODO(#2268): Remove "as any" designations once RN Core properly supports Dynamic Type scaling
|
|
5
6
|
exports.Caption1 = Text_1.Text.customize({
|
|
6
7
|
variant: 'caption1',
|
|
8
|
+
dynamicTypeRamp: 'footnote',
|
|
7
9
|
});
|
|
8
10
|
exports.Caption1Strong = Text_1.Text.customize({
|
|
9
11
|
variant: 'caption1Strong',
|
|
12
|
+
dynamicTypeRamp: 'footnote',
|
|
10
13
|
});
|
|
11
14
|
exports.Caption2 = Text_1.Text.customize({
|
|
12
15
|
variant: 'caption2',
|
|
16
|
+
dynamicTypeRamp: 'caption1',
|
|
13
17
|
});
|
|
14
18
|
exports.Body1 = Text_1.Text.customize({
|
|
15
19
|
variant: 'body1',
|
|
20
|
+
dynamicTypeRamp: 'body',
|
|
16
21
|
});
|
|
17
22
|
exports.Body1Strong = Text_1.Text.customize({
|
|
18
23
|
variant: 'body1Strong',
|
|
24
|
+
dynamicTypeRamp: 'body',
|
|
19
25
|
});
|
|
20
26
|
exports.Body2 = Text_1.Text.customize({
|
|
21
27
|
variant: 'body2',
|
|
28
|
+
dynamicTypeRamp: 'subheadline',
|
|
22
29
|
});
|
|
23
30
|
exports.Body2Strong = Text_1.Text.customize({
|
|
24
31
|
variant: 'body2Strong',
|
|
32
|
+
dynamicTypeRamp: 'subheadline',
|
|
25
33
|
});
|
|
26
34
|
exports.Subtitle1 = null; // Not supported on iOS
|
|
27
35
|
exports.Subtitle1Strong = null; // Not supported on iOS
|
|
@@ -29,18 +37,23 @@ exports.Subtitle2 = null; // Not supported on iOS
|
|
|
29
37
|
exports.Subtitle2Strong = null; // Not supported on iOS
|
|
30
38
|
exports.Title1 = Text_1.Text.customize({
|
|
31
39
|
variant: 'title1',
|
|
40
|
+
dynamicTypeRamp: 'title1',
|
|
32
41
|
});
|
|
33
42
|
exports.Title1Strong = null; // Not supported on iOS
|
|
34
43
|
exports.Title2 = Text_1.Text.customize({
|
|
35
44
|
variant: 'title2',
|
|
45
|
+
dynamicTypeRamp: 'title2',
|
|
36
46
|
});
|
|
37
47
|
exports.Title3 = Text_1.Text.customize({
|
|
38
48
|
variant: 'title3',
|
|
49
|
+
dynamicTypeRamp: 'title3',
|
|
39
50
|
});
|
|
40
51
|
exports.LargeTitle = Text_1.Text.customize({
|
|
41
52
|
variant: 'largeTitle',
|
|
53
|
+
dynamicTypeRamp: 'largeTitle',
|
|
42
54
|
});
|
|
43
55
|
exports.Display = Text_1.Text.customize({
|
|
44
56
|
variant: 'display',
|
|
57
|
+
dynamicTypeRamp: 'largeTitle',
|
|
45
58
|
});
|
|
46
59
|
//# sourceMappingURL=Variants.ios.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Variants.ios.js","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":";;;AAAA,+BAA8B;
|
|
1
|
+
{"version":3,"file":"Variants.ios.js","sourceRoot":"","sources":["../src/Variants.ios.ts"],"names":[],"mappings":";;;AAAA,+BAA8B;AAE9B,gGAAgG;AAEnF,QAAA,QAAQ,GAAG,WAAI,CAAC,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,eAAe,EAAE,UAAU;CACrB,CAAC,CAAC;AACG,QAAA,cAAc,GAAG,WAAI,CAAC,SAAS,CAAC;IAC3C,OAAO,EAAE,gBAAgB;IACzB,eAAe,EAAE,UAAU;CACrB,CAAC,CAAC;AACG,QAAA,QAAQ,GAAG,WAAI,CAAC,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,eAAe,EAAE,UAAU;CACrB,CAAC,CAAC;AACG,QAAA,KAAK,GAAG,WAAI,CAAC,SAAS,CAAC;IAClC,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,MAAM;CACjB,CAAC,CAAC;AACG,QAAA,WAAW,GAAG,WAAI,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,MAAM;CACjB,CAAC,CAAC;AACG,QAAA,KAAK,GAAG,WAAI,CAAC,SAAS,CAAC;IAClC,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,aAAa;CACxB,CAAC,CAAC;AACG,QAAA,WAAW,GAAG,WAAI,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,aAAa;CACxB,CAAC,CAAC;AACG,QAAA,SAAS,GAAG,IAAI,CAAC,CAAC,uBAAuB;AACzC,QAAA,eAAe,GAAG,IAAI,CAAC,CAAC,uBAAuB;AAC/C,QAAA,SAAS,GAAG,IAAI,CAAC,CAAC,uBAAuB;AACzC,QAAA,eAAe,GAAG,IAAI,CAAC,CAAC,uBAAuB;AAC/C,QAAA,MAAM,GAAG,WAAI,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,QAAQ;CACnB,CAAC,CAAC;AACG,QAAA,YAAY,GAAG,IAAI,CAAC,CAAC,uBAAuB;AAC5C,QAAA,MAAM,GAAG,WAAI,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,QAAQ;CACnB,CAAC,CAAC;AACG,QAAA,MAAM,GAAG,WAAI,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,QAAQ;CACnB,CAAC,CAAC;AACG,QAAA,UAAU,GAAG,WAAI,CAAC,SAAS,CAAC;IACvC,OAAO,EAAE,YAAY;IACrB,eAAe,EAAE,YAAY;CACvB,CAAC,CAAC;AACG,QAAA,OAAO,GAAG,WAAI,CAAC,SAAS,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,YAAY;CACvB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/text",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"description": "A cross-platform Text component using the Fluent Design System",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@uifabricshared/foundation-compose": "^1.12.22",
|
|
26
26
|
"@fluentui-react-native/adapters": ">=0.10.0 <1.0.0",
|
|
27
|
+
"@fluentui-react-native/experimental-native-font-metrics": "^0.3.0",
|
|
27
28
|
"@fluentui-react-native/framework": "0.8.21",
|
|
28
29
|
"@fluentui-react-native/interactive-hooks": ">=0.21.2 <1.0.0",
|
|
29
30
|
"@fluentui-react-native/theme-tokens": ">=0.21.3 <1.0.0",
|
package/src/Text.tsx
CHANGED
|
@@ -15,6 +15,7 @@ import { I18nManager, Platform, Text as RNText } from 'react-native';
|
|
|
15
15
|
import { textName, TextProps, TextTokens } from './Text.types';
|
|
16
16
|
import { useTextTokens } from './TextTokens';
|
|
17
17
|
import React from 'react';
|
|
18
|
+
import { useFontMetricsScaleFactors } from '@fluentui-react-native/experimental-native-font-metrics';
|
|
18
19
|
|
|
19
20
|
const emptyProps = {};
|
|
20
21
|
export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTokens: UseTokens<TextTokens>) => {
|
|
@@ -49,6 +50,9 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
|
|
|
49
50
|
// get the tokens from the theme
|
|
50
51
|
let [tokens, cache] = useTokens(theme);
|
|
51
52
|
|
|
53
|
+
// TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
54
|
+
const fontMetricsScaleFactors = useFontMetricsScaleFactors();
|
|
55
|
+
|
|
52
56
|
const textAlign = I18nManager.isRTL
|
|
53
57
|
? align === 'start'
|
|
54
58
|
? 'right'
|
|
@@ -79,6 +83,9 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
|
|
|
79
83
|
[onPress, onAccessibilityTap],
|
|
80
84
|
);
|
|
81
85
|
|
|
86
|
+
// TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
87
|
+
const dynamicTypeVariant = Platform.OS === 'ios' ? tokens.dynamicTypeRamp : undefined;
|
|
88
|
+
|
|
82
89
|
// override tokens from props
|
|
83
90
|
[tokens, cache] = patchTokens(tokens, cache, {
|
|
84
91
|
color,
|
|
@@ -106,6 +113,19 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
|
|
|
106
113
|
['color', 'fontStyle', 'textAlign', 'textDecorationLine', ...fontStyles.keys],
|
|
107
114
|
);
|
|
108
115
|
|
|
116
|
+
// [TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
117
|
+
let scaleStyleAdjustments: TextTokens = emptyProps;
|
|
118
|
+
// tokenStyle.fontSize and tokenStyle.lineHeight can also be strings (e.g., "14px").
|
|
119
|
+
// Therefore, we only support scaling for number-based size values in order to avoid any messy calculations.
|
|
120
|
+
if (dynamicTypeVariant !== undefined && typeof tokenStyle.fontSize === 'number' && typeof tokenStyle.lineHeight === 'number') {
|
|
121
|
+
const scaleFactor = fontMetricsScaleFactors[dynamicTypeVariant] ?? 1;
|
|
122
|
+
scaleStyleAdjustments = {
|
|
123
|
+
fontSize: tokenStyle.fontSize * scaleFactor,
|
|
124
|
+
lineHeight: tokenStyle.lineHeight * scaleFactor,
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
// ]TODO(#2268)
|
|
128
|
+
|
|
109
129
|
const isWinPlatform = Platform.OS === (('win32' as any) || 'windows');
|
|
110
130
|
const filteredProps = {
|
|
111
131
|
onKeyUp: isWinPlatform ? onKeyUp : undefined,
|
|
@@ -124,9 +144,10 @@ export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTo
|
|
|
124
144
|
...keyProps,
|
|
125
145
|
...filteredProps,
|
|
126
146
|
...extra,
|
|
147
|
+
...(dynamicTypeVariant !== undefined && { allowFontScaling: false }), // TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
127
148
|
onPress,
|
|
128
149
|
numberOfLines: truncate || !wrap ? 1 : 0,
|
|
129
|
-
style: mergeStyles(tokenStyle, props.style, extra?.style),
|
|
150
|
+
style: mergeStyles(tokenStyle, props.style, extra?.style, scaleStyleAdjustments),
|
|
130
151
|
};
|
|
131
152
|
return (
|
|
132
153
|
<RNText ellipsizeMode={!wrap && !truncate ? 'clip' : 'tail'} {...mergedProps}>
|
package/src/Text.types.ts
CHANGED
|
@@ -8,7 +8,11 @@ export const textName = 'Text';
|
|
|
8
8
|
* Text tokens, these are the internally configurable values for Text elements. In particular these
|
|
9
9
|
* drive decisions on how to build the styles
|
|
10
10
|
*/
|
|
11
|
-
export type TextTokens = Omit<FontTokens, 'fontFamily'> &
|
|
11
|
+
export type TextTokens = Omit<FontTokens, 'fontFamily'> &
|
|
12
|
+
IForegroundColorTokens &
|
|
13
|
+
Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'> & {
|
|
14
|
+
dynamicTypeRamp?: string; // TODO(#2268): Remove once RN Core properly supports Dynamic Type scaling
|
|
15
|
+
};
|
|
12
16
|
|
|
13
17
|
export type TextAlign = 'start' | 'center' | 'end' | 'justify';
|
|
14
18
|
export type TextFont = 'base' | 'monospace' | 'numeric';
|
package/src/Variants.ios.ts
CHANGED
|
@@ -1,43 +1,57 @@
|
|
|
1
1
|
import { Text } from './Text';
|
|
2
2
|
|
|
3
|
+
// TODO(#2268): Remove "as any" designations once RN Core properly supports Dynamic Type scaling
|
|
4
|
+
|
|
3
5
|
export const Caption1 = Text.customize({
|
|
4
6
|
variant: 'caption1',
|
|
5
|
-
|
|
7
|
+
dynamicTypeRamp: 'footnote',
|
|
8
|
+
} as any);
|
|
6
9
|
export const Caption1Strong = Text.customize({
|
|
7
10
|
variant: 'caption1Strong',
|
|
8
|
-
|
|
11
|
+
dynamicTypeRamp: 'footnote',
|
|
12
|
+
} as any);
|
|
9
13
|
export const Caption2 = Text.customize({
|
|
10
14
|
variant: 'caption2',
|
|
11
|
-
|
|
15
|
+
dynamicTypeRamp: 'caption1',
|
|
16
|
+
} as any);
|
|
12
17
|
export const Body1 = Text.customize({
|
|
13
18
|
variant: 'body1',
|
|
14
|
-
|
|
19
|
+
dynamicTypeRamp: 'body',
|
|
20
|
+
} as any);
|
|
15
21
|
export const Body1Strong = Text.customize({
|
|
16
22
|
variant: 'body1Strong',
|
|
17
|
-
|
|
23
|
+
dynamicTypeRamp: 'body',
|
|
24
|
+
} as any);
|
|
18
25
|
export const Body2 = Text.customize({
|
|
19
26
|
variant: 'body2',
|
|
20
|
-
|
|
27
|
+
dynamicTypeRamp: 'subheadline',
|
|
28
|
+
} as any);
|
|
21
29
|
export const Body2Strong = Text.customize({
|
|
22
30
|
variant: 'body2Strong',
|
|
23
|
-
|
|
31
|
+
dynamicTypeRamp: 'subheadline',
|
|
32
|
+
} as any);
|
|
24
33
|
export const Subtitle1 = null; // Not supported on iOS
|
|
25
34
|
export const Subtitle1Strong = null; // Not supported on iOS
|
|
26
35
|
export const Subtitle2 = null; // Not supported on iOS
|
|
27
36
|
export const Subtitle2Strong = null; // Not supported on iOS
|
|
28
37
|
export const Title1 = Text.customize({
|
|
29
38
|
variant: 'title1',
|
|
30
|
-
|
|
39
|
+
dynamicTypeRamp: 'title1',
|
|
40
|
+
} as any);
|
|
31
41
|
export const Title1Strong = null; // Not supported on iOS
|
|
32
42
|
export const Title2 = Text.customize({
|
|
33
43
|
variant: 'title2',
|
|
34
|
-
|
|
44
|
+
dynamicTypeRamp: 'title2',
|
|
45
|
+
} as any);
|
|
35
46
|
export const Title3 = Text.customize({
|
|
36
47
|
variant: 'title3',
|
|
37
|
-
|
|
48
|
+
dynamicTypeRamp: 'title3',
|
|
49
|
+
} as any);
|
|
38
50
|
export const LargeTitle = Text.customize({
|
|
39
51
|
variant: 'largeTitle',
|
|
40
|
-
|
|
52
|
+
dynamicTypeRamp: 'largeTitle',
|
|
53
|
+
} as any);
|
|
41
54
|
export const Display = Text.customize({
|
|
42
55
|
variant: 'display',
|
|
43
|
-
|
|
56
|
+
dynamicTypeRamp: 'largeTitle',
|
|
57
|
+
} as any);
|