@fluentui-react-native/text 0.24.21 → 0.25.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.md +54 -1
- package/SPEC.md +1 -1
- package/lib/Text.d.ts +6 -2
- package/lib/Text.d.ts.map +1 -1
- package/lib/Text.js +124 -91
- package/lib/Text.js.map +1 -1
- package/lib/Text.types.d.ts +9 -6
- package/lib/Text.types.js +1 -1
- package/lib/TextTokens.d.ts +2 -2
- package/lib/TextTokens.js +6 -3
- package/lib/Variants.android.d.ts +61 -13
- package/lib/Variants.android.d.ts.map +1 -1
- package/lib/Variants.android.js +13 -13
- package/lib/Variants.d.ts +86 -18
- package/lib/Variants.d.ts.map +1 -1
- package/lib/Variants.ios.d.ts +61 -13
- package/lib/Variants.ios.d.ts.map +1 -1
- package/lib/Variants.ios.js +13 -13
- package/lib/Variants.js +1 -1
- package/lib/Variants.win32.d.ts +66 -14
- package/lib/Variants.win32.d.ts.map +1 -1
- package/lib/Variants.win32.js +14 -14
- package/lib/Variants.windows.d.ts +66 -14
- package/lib/Variants.windows.d.ts.map +1 -1
- package/lib/Variants.windows.js +14 -14
- package/lib/__tests__/Text.test.d.ts +1 -1
- package/lib/__tests__/Text.test.js +36 -23
- package/lib/__tests__/Text.test.js.map +1 -1
- package/lib/deprecated/Text.d.ts +14 -4
- package/lib/deprecated/Text.js +9 -9
- package/lib/deprecated/Text.settings.d.ts +1 -1
- package/lib/deprecated/Text.settings.js +18 -18
- package/lib/deprecated/Text.types.d.ts +11 -9
- package/lib/deprecated/Text.types.js +1 -1
- package/lib/index.d.ts +20 -2
- package/lib/index.js +20 -2
- package/lib-commonjs/Text.d.ts +6 -2
- package/lib-commonjs/Text.d.ts.map +1 -1
- package/lib-commonjs/Text.js +142 -102
- package/lib-commonjs/Text.js.map +1 -1
- package/lib-commonjs/Text.types.d.ts +9 -6
- package/lib-commonjs/Text.types.js +3 -3
- package/lib-commonjs/TextTokens.d.ts +2 -2
- package/lib-commonjs/TextTokens.js +10 -7
- package/lib-commonjs/Variants.android.d.ts +61 -13
- package/lib-commonjs/Variants.android.d.ts.map +1 -1
- package/lib-commonjs/Variants.android.js +34 -17
- package/lib-commonjs/Variants.d.ts +86 -18
- package/lib-commonjs/Variants.d.ts.map +1 -1
- package/lib-commonjs/Variants.ios.d.ts +61 -13
- package/lib-commonjs/Variants.ios.d.ts.map +1 -1
- package/lib-commonjs/Variants.ios.js +34 -17
- package/lib-commonjs/Variants.js +22 -5
- package/lib-commonjs/Variants.win32.d.ts +66 -14
- package/lib-commonjs/Variants.win32.d.ts.map +1 -1
- package/lib-commonjs/Variants.win32.js +35 -18
- package/lib-commonjs/Variants.windows.d.ts +66 -14
- package/lib-commonjs/Variants.windows.d.ts.map +1 -1
- package/lib-commonjs/Variants.windows.js +35 -18
- package/lib-commonjs/__tests__/Text.test.d.ts +1 -1
- package/lib-commonjs/__tests__/Text.test.js +92 -50
- package/lib-commonjs/__tests__/Text.test.js.map +1 -1
- package/lib-commonjs/deprecated/Text.d.ts +14 -4
- package/lib-commonjs/deprecated/Text.js +17 -17
- package/lib-commonjs/deprecated/Text.js.map +1 -1
- package/lib-commonjs/deprecated/Text.settings.d.ts +1 -1
- package/lib-commonjs/deprecated/Text.settings.js +21 -21
- package/lib-commonjs/deprecated/Text.types.d.ts +11 -9
- package/lib-commonjs/deprecated/Text.types.js +3 -3
- package/lib-commonjs/index.d.ts +20 -2
- package/lib-commonjs/index.js +156 -30
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +63 -62
- package/src/Text.tsx +8 -9
- package/src/__tests__/Text.test.tsx +25 -13
|
@@ -1,31 +1,44 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { act } from 'react';
|
|
2
3
|
import * as renderer from 'react-test-renderer';
|
|
3
4
|
import { Text } from '../Text';
|
|
4
5
|
describe('Text component tests', () => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
it('Text default', () => {
|
|
7
|
+
let component;
|
|
8
|
+
act(() => {
|
|
9
|
+
component = renderer.create(_jsx(Text, { children: 'Text default' }));
|
|
8
10
|
});
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
12
|
+
});
|
|
13
|
+
it('Text all props', () => {
|
|
14
|
+
let component;
|
|
15
|
+
act(() => {
|
|
16
|
+
component = renderer.create(_jsx(Text, { variant: 'bodyStandard', children: 'All props' }));
|
|
12
17
|
});
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
expect(tree).toMatchSnapshot();
|
|
18
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
19
|
+
});
|
|
20
|
+
it('Text all tokens', () => {
|
|
21
|
+
const BoldText = Text.customize({
|
|
22
|
+
fontFamily: 'Wingdings',
|
|
23
|
+
fontWeight: '900',
|
|
24
|
+
fontSize: 20,
|
|
21
25
|
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
marginTop: 4,
|
|
26
|
-
};
|
|
27
|
-
const tree = renderer.create(React.createElement(Text, { variant: "heroLargeSemibold", color: "blue", style: style }, "Header Text"));
|
|
28
|
-
expect(tree).toMatchSnapshot();
|
|
26
|
+
let component;
|
|
27
|
+
act(() => {
|
|
28
|
+
component = renderer.create(_jsx(BoldText, { children: 'All tokens' }));
|
|
29
29
|
});
|
|
30
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
31
|
+
});
|
|
32
|
+
it('Text variants render correctly with style', () => {
|
|
33
|
+
const style = {
|
|
34
|
+
marginBottom: 8,
|
|
35
|
+
marginTop: 4,
|
|
36
|
+
};
|
|
37
|
+
let component;
|
|
38
|
+
act(() => {
|
|
39
|
+
component = renderer.create(_jsx(Text, { variant: 'heroLargeSemibold', color: 'blue', style: style, children: 'Header Text' }));
|
|
40
|
+
});
|
|
41
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
42
|
+
});
|
|
30
43
|
});
|
|
31
|
-
//# sourceMappingURL=Text.test.js.map
|
|
44
|
+
//# sourceMappingURL=Text.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.test.js","sourceRoot":"","sources":["../../src/__tests__/Text.test.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Text.test.js","sourceRoot":"","sources":["../../src/__tests__/Text.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE,CAAC;IACrC,EAAE,CAAC,cAAc,EAAE,GAAG,EAAE,CAAC;QACvB,IAAI,SAAqC,CAAC;QAC1C,GAAG,CAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAC,IAAI,+BAAoB,CAAC,CAAC;QAAA,CACxD,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE,CAAC;QACzB,IAAI,SAAqC,CAAC;QAC1C,GAAG,CAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAC,IAAI,IAAC,OAAO,EAAC,cAAc,0BAAiB,CAAC,CAAC;QAAA,CAC5E,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;YAC9B,UAAU,EAAE,WAAW;YACvB,UAAU,EAAE,KAAK;YACjB,QAAQ,EAAE,EAAE;SACb,CAAC,CAAC;QACH,IAAI,SAAqC,CAAC;QAC1C,GAAG,CAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAC,QAAQ,6BAAsB,CAAC,CAAC;QAAA,CAC9D,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE,CAAC;QACpD,MAAM,KAAK,GAAG;YACZ,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,CAAC;SACb,CAAC;QACF,IAAI,SAAqC,CAAC;QAC1C,GAAG,CAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM,CACzB,KAAC,IAAI,IAAC,OAAO,EAAC,mBAAmB,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,4BAEpD,CACR,CAAC;QAAA,CACH,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;AAAA,CACJ,CAAC,CAAC"}
|
package/lib/deprecated/Text.d.ts
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
export declare const Text: import(
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export declare const Text: import('@uifabricshared/foundation-compose').IComposeReturnType<
|
|
2
|
+
import('./Text.types').ITextProps<import('@fluentui-react-native/adapters').ITextProps>,
|
|
3
|
+
{
|
|
4
|
+
root: import('@fluentui-react-native/adapters').ITextProps;
|
|
5
|
+
},
|
|
6
|
+
import('@fluentui-react-native/tokens').FontStyleTokens &
|
|
7
|
+
import('@fluentui-react-native/tokens').FontVariantTokens &
|
|
8
|
+
import('@fluentui-react-native/tokens').FontDecorationTokens &
|
|
9
|
+
import('@fluentui-react-native/tokens').IForegroundColorTokens &
|
|
10
|
+
import('@fluentui-react-native/tokens').IBackgroundColorTokens,
|
|
11
|
+
object,
|
|
12
|
+
object
|
|
13
|
+
>;
|
|
4
14
|
export default Text;
|
|
5
|
-
//# sourceMappingURL=Text.d.ts.map
|
|
15
|
+
//# sourceMappingURL=Text.d.ts.map
|
package/lib/deprecated/Text.js
CHANGED
|
@@ -5,14 +5,14 @@ import { compose } from '@uifabricshared/foundation-compose';
|
|
|
5
5
|
import { settings } from './Text.settings';
|
|
6
6
|
import { textName } from './Text.types';
|
|
7
7
|
export const Text = compose({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
displayName: textName,
|
|
9
|
+
settings,
|
|
10
|
+
slots: {
|
|
11
|
+
root: { slotType: RNText, filter: filterTextProps },
|
|
12
|
+
},
|
|
13
|
+
styles: {
|
|
14
|
+
root: [textTokens, foregroundColorTokens],
|
|
15
|
+
},
|
|
16
16
|
});
|
|
17
17
|
export default Text;
|
|
18
|
-
//# sourceMappingURL=Text.js.map
|
|
18
|
+
//# sourceMappingURL=Text.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { IComposeSettings } from '@uifabricshared/foundation-compose';
|
|
2
2
|
import type { ITextType } from './Text.types';
|
|
3
3
|
export declare const settings: IComposeSettings<ITextType>;
|
|
4
|
-
//# sourceMappingURL=Text.settings.d.ts.map
|
|
4
|
+
//# sourceMappingURL=Text.settings.d.ts.map
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import { textName } from './Text.types';
|
|
2
2
|
export const settings = [
|
|
3
|
-
|
|
3
|
+
{
|
|
4
|
+
tokens: {
|
|
5
|
+
variant: 'secondaryStandard',
|
|
6
|
+
color: 'bodyText',
|
|
7
|
+
},
|
|
8
|
+
root: {
|
|
9
|
+
style: {
|
|
10
|
+
margin: 0,
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
_overrides: {
|
|
14
|
+
disabled: {
|
|
4
15
|
tokens: {
|
|
5
|
-
|
|
6
|
-
color: 'bodyText',
|
|
7
|
-
},
|
|
8
|
-
root: {
|
|
9
|
-
style: {
|
|
10
|
-
margin: 0,
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
_overrides: {
|
|
14
|
-
disabled: {
|
|
15
|
-
tokens: {
|
|
16
|
-
color: 'disabledText',
|
|
17
|
-
},
|
|
18
|
-
},
|
|
16
|
+
color: 'disabledText',
|
|
19
17
|
},
|
|
20
|
-
|
|
18
|
+
},
|
|
21
19
|
},
|
|
22
|
-
|
|
20
|
+
_precedence: ['disabled'],
|
|
21
|
+
},
|
|
22
|
+
textName,
|
|
23
23
|
];
|
|
24
|
-
//# sourceMappingURL=Text.settings.js.map
|
|
24
|
+
//# sourceMappingURL=Text.settings.js.map
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import type { ITextProps as INativeTextProps } from '@fluentui-react-native/adapters';
|
|
2
2
|
import type { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens';
|
|
3
|
-
export declare const textName =
|
|
3
|
+
export declare const textName = 'RNFText';
|
|
4
4
|
/**
|
|
5
5
|
* Properties for fabric native text field, these extend the default props for text
|
|
6
6
|
*/
|
|
7
|
-
export type ITextProps<TBase = INativeTextProps> = TBase &
|
|
7
|
+
export type ITextProps<TBase = INativeTextProps> = TBase &
|
|
8
|
+
FontVariantTokens &
|
|
9
|
+
IForegroundColorTokens & {
|
|
8
10
|
disabled?: boolean;
|
|
9
|
-
};
|
|
11
|
+
};
|
|
10
12
|
export type ITextType<TBase = INativeTextProps> = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
props: ITextProps<TBase>;
|
|
14
|
+
tokens: FontTokens & IColorTokens;
|
|
15
|
+
slotProps: {
|
|
16
|
+
root: TBase;
|
|
17
|
+
};
|
|
16
18
|
};
|
|
17
|
-
//# sourceMappingURL=Text.types.d.ts.map
|
|
19
|
+
//# sourceMappingURL=Text.types.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const textName = 'RNFText';
|
|
2
|
-
//# sourceMappingURL=Text.types.js.map
|
|
2
|
+
//# sourceMappingURL=Text.types.js.map
|
package/lib/index.d.ts
CHANGED
|
@@ -1,8 +1,26 @@
|
|
|
1
1
|
export { Text as TextV1 } from './Text';
|
|
2
2
|
export type { TextProps, TextTokens } from './Text.types';
|
|
3
3
|
export { textName as textNameV1 } from './Text.types';
|
|
4
|
-
export {
|
|
4
|
+
export {
|
|
5
|
+
Caption1,
|
|
6
|
+
Caption1Strong,
|
|
7
|
+
Caption2,
|
|
8
|
+
Body1,
|
|
9
|
+
Body1Strong,
|
|
10
|
+
Body2,
|
|
11
|
+
Body2Strong,
|
|
12
|
+
Subtitle1,
|
|
13
|
+
Subtitle1Strong,
|
|
14
|
+
Subtitle2,
|
|
15
|
+
Subtitle2Strong,
|
|
16
|
+
Title1,
|
|
17
|
+
Title1Strong,
|
|
18
|
+
Title2,
|
|
19
|
+
Title3,
|
|
20
|
+
LargeTitle,
|
|
21
|
+
Display,
|
|
22
|
+
} from './Variants';
|
|
5
23
|
export { textName } from './deprecated/Text.types';
|
|
6
24
|
export type { ITextProps, ITextType } from './deprecated/Text.types';
|
|
7
25
|
export { Text } from './deprecated/Text';
|
|
8
|
-
//# sourceMappingURL=index.d.ts.map
|
|
26
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.js
CHANGED
|
@@ -1,7 +1,25 @@
|
|
|
1
1
|
export { Text as TextV1 } from './Text';
|
|
2
2
|
export { textName as textNameV1 } from './Text.types';
|
|
3
|
-
export {
|
|
3
|
+
export {
|
|
4
|
+
Caption1,
|
|
5
|
+
Caption1Strong,
|
|
6
|
+
Caption2,
|
|
7
|
+
Body1,
|
|
8
|
+
Body1Strong,
|
|
9
|
+
Body2,
|
|
10
|
+
Body2Strong,
|
|
11
|
+
Subtitle1,
|
|
12
|
+
Subtitle1Strong,
|
|
13
|
+
Subtitle2,
|
|
14
|
+
Subtitle2Strong,
|
|
15
|
+
Title1,
|
|
16
|
+
Title1Strong,
|
|
17
|
+
Title2,
|
|
18
|
+
Title3,
|
|
19
|
+
LargeTitle,
|
|
20
|
+
Display,
|
|
21
|
+
} from './Variants';
|
|
4
22
|
/* deprecated */
|
|
5
23
|
export { textName } from './deprecated/Text.types';
|
|
6
24
|
export { Text } from './deprecated/Text';
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
25
|
+
//# sourceMappingURL=index.js.map
|
package/lib-commonjs/Text.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { TextProps, TextTokens } from './Text.types';
|
|
2
|
-
export declare const Text: import(
|
|
2
|
+
export declare const Text: import('@fluentui-react-native/framework').CustomizableComponent<
|
|
3
|
+
TextProps,
|
|
4
|
+
TextTokens,
|
|
5
|
+
import('@fluentui-react-native/framework').Theme
|
|
6
|
+
>;
|
|
3
7
|
export default Text;
|
|
4
|
-
//# sourceMappingURL=Text.d.ts.map
|
|
8
|
+
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1D,eAAO,MAAM,IAAI,2IA2IA,CAAC;AAGlB,eAAe,IAAI,CAAC"}
|
package/lib-commonjs/Text.js
CHANGED
|
@@ -1,110 +1,150 @@
|
|
|
1
|
-
|
|
2
|
-
var __importDefault =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
var __importDefault =
|
|
3
|
+
(this && this.__importDefault) ||
|
|
4
|
+
function (mod) {
|
|
5
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
6
|
+
};
|
|
7
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
6
8
|
exports.Text = void 0;
|
|
7
|
-
|
|
8
|
-
/** @
|
|
9
|
-
const react_1 = __importDefault(require(
|
|
10
|
-
const react_native_1 = require(
|
|
11
|
-
const framework_1 = require(
|
|
12
|
-
const interactive_hooks_1 = require(
|
|
13
|
-
const theme_tokens_1 = require(
|
|
14
|
-
const Text_types_1 = require(
|
|
15
|
-
const TextTokens_1 = require(
|
|
9
|
+
const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
|
|
10
|
+
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
11
|
+
const react_1 = __importDefault(require('react'));
|
|
12
|
+
const react_native_1 = require('react-native');
|
|
13
|
+
const framework_1 = require('@fluentui-react-native/framework');
|
|
14
|
+
const interactive_hooks_1 = require('@fluentui-react-native/interactive-hooks');
|
|
15
|
+
const theme_tokens_1 = require('@fluentui-react-native/theme-tokens');
|
|
16
|
+
const Text_types_1 = require('./Text.types');
|
|
17
|
+
const TextTokens_1 = require('./TextTokens');
|
|
16
18
|
const emptyProps = {};
|
|
17
19
|
exports.Text = (0, framework_1.compressible)((props, useTokens) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
20
|
+
if (props === undefined) {
|
|
21
|
+
props = emptyProps;
|
|
22
|
+
}
|
|
23
|
+
// split out color and variant from props
|
|
24
|
+
const {
|
|
25
|
+
align = undefined,
|
|
26
|
+
block,
|
|
27
|
+
color,
|
|
28
|
+
componentRef,
|
|
29
|
+
font,
|
|
30
|
+
italic,
|
|
31
|
+
numberOfLines,
|
|
32
|
+
onAccessibilityTap,
|
|
33
|
+
onKeyUp,
|
|
34
|
+
onKeyDown,
|
|
35
|
+
keyUpEvents,
|
|
36
|
+
keyDownEvents,
|
|
37
|
+
onPress,
|
|
38
|
+
size,
|
|
39
|
+
strikethrough,
|
|
40
|
+
style,
|
|
41
|
+
truncate = false,
|
|
42
|
+
underline,
|
|
43
|
+
variant,
|
|
44
|
+
weight,
|
|
45
|
+
wrap = true,
|
|
46
|
+
...rest
|
|
47
|
+
} = props;
|
|
48
|
+
const theme = (0, framework_1.useFluentTheme)();
|
|
49
|
+
// get the tokens from the theme
|
|
50
|
+
let [tokens, cache] = useTokens(theme);
|
|
51
|
+
const textAlign = react_native_1.I18nManager.isRTL
|
|
52
|
+
? align === 'start'
|
|
53
|
+
? 'right'
|
|
54
|
+
: align === 'end'
|
|
55
|
+
? 'left'
|
|
56
|
+
: align
|
|
57
|
+
: align === 'start'
|
|
58
|
+
? 'left'
|
|
59
|
+
: align === 'end'
|
|
60
|
+
? 'right'
|
|
61
|
+
: align;
|
|
62
|
+
const textOnPress = react_1.default.useCallback(
|
|
63
|
+
(e) => {
|
|
64
|
+
if (onPress) {
|
|
65
|
+
onPress(e);
|
|
66
|
+
}
|
|
67
|
+
e.stopPropagation();
|
|
68
|
+
},
|
|
69
|
+
[onPress],
|
|
70
|
+
);
|
|
71
|
+
const keyProps = (0, interactive_hooks_1.useKeyProps)(textOnPress, ' ', 'Enter');
|
|
72
|
+
const onAccTap = react_1.default.useCallback(
|
|
73
|
+
(event) => {
|
|
74
|
+
onAccessibilityTap ? onAccessibilityTap() : onPress(event);
|
|
75
|
+
},
|
|
76
|
+
[onPress, onAccessibilityTap],
|
|
77
|
+
);
|
|
78
|
+
// override tokens from props
|
|
79
|
+
[tokens, cache] = (0, framework_1.patchTokens)(tokens, cache, {
|
|
80
|
+
color,
|
|
81
|
+
variant,
|
|
82
|
+
fontFamily: font == 'base' ? 'primary' : font,
|
|
83
|
+
fontMaximumSize: tokens.maximumFontSize,
|
|
84
|
+
fontSize: theme_tokens_1.globalTokens.font['size' + size],
|
|
85
|
+
fontWeight: theme_tokens_1.globalTokens.font.weight[weight],
|
|
86
|
+
// leave it undefined for tokens to be set by user
|
|
87
|
+
fontStyle: italic ? 'italic' : undefined,
|
|
88
|
+
textAlign: textAlign,
|
|
89
|
+
textDecorationLine:
|
|
90
|
+
underline && strikethrough ? 'underline line-through' : underline ? 'underline' : strikethrough ? 'line-through' : undefined,
|
|
91
|
+
});
|
|
92
|
+
// now build the text style from tokens that can be shared between different Text instances
|
|
93
|
+
const [tokenStyle] = cache(
|
|
94
|
+
() => ({
|
|
95
|
+
margin: 0,
|
|
96
|
+
color: tokens.color,
|
|
97
|
+
fontStyle: tokens.fontStyle,
|
|
98
|
+
textAlign: tokens.textAlign,
|
|
99
|
+
textDecorationLine: tokens.textDecorationLine,
|
|
100
|
+
...framework_1.fontStyles.from(tokens, theme),
|
|
101
|
+
}),
|
|
102
|
+
['color', 'fontStyle', 'textAlign', 'textDecorationLine', ...framework_1.fontStyles.keys],
|
|
103
|
+
);
|
|
104
|
+
// Safety measure: Dynamic Type is an iOS-specific thing
|
|
105
|
+
const dynamicTypeVariant = react_native_1.Platform.OS === 'ios' ? tokenStyle.dynamicTypeRamp : undefined;
|
|
106
|
+
let maxFontSizeScaleAdjustment = emptyProps;
|
|
107
|
+
// tokenStyle.fontSize can also be a string (e.g., "14px").
|
|
108
|
+
// Therefore, we only support scaling for number-based size values in order to avoid any messy calculations.
|
|
109
|
+
if (dynamicTypeVariant !== undefined && typeof tokenStyle.fontSize === 'number' && tokenStyle.maximumFontSize !== undefined) {
|
|
110
|
+
maxFontSizeScaleAdjustment = {
|
|
111
|
+
maxFontSizeMultiplier: tokenStyle.maximumFontSize / tokenStyle.fontSize,
|
|
88
112
|
};
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
113
|
+
}
|
|
114
|
+
const isWin32Platform = react_native_1.Platform.OS === 'win32';
|
|
115
|
+
const filteredProps = {
|
|
116
|
+
onKeyUp: isWin32Platform ? onKeyUp : undefined,
|
|
117
|
+
keyUpEvents: isWin32Platform ? keyUpEvents : undefined,
|
|
118
|
+
validKeysUp: undefined,
|
|
119
|
+
onKeyDown: isWin32Platform ? onKeyDown : undefined,
|
|
120
|
+
keyDownEvents: isWin32Platform ? keyDownEvents : undefined,
|
|
121
|
+
validKeysDown: undefined,
|
|
122
|
+
onAccessibilityTap: isWin32Platform ? onAccTap : undefined,
|
|
123
|
+
};
|
|
124
|
+
// return a continuation function that allows this text to be compressed
|
|
125
|
+
return (extra, children) => {
|
|
126
|
+
const mergedProps = {
|
|
127
|
+
...rest,
|
|
128
|
+
...keyProps,
|
|
129
|
+
...filteredProps,
|
|
130
|
+
...extra,
|
|
131
|
+
...maxFontSizeScaleAdjustment,
|
|
132
|
+
onPress,
|
|
133
|
+
numberOfLines: numberOfLines ?? (truncate || !wrap ? 1 : 0),
|
|
134
|
+
style: (0, framework_1.mergeStyles)(tokenStyle, props.style, extra?.style),
|
|
106
135
|
};
|
|
136
|
+
// RN TextStyle doesn't recognize these properties.
|
|
137
|
+
// Don't let them leak through or RN will complain about invalid props.
|
|
138
|
+
delete mergedProps.style.dynamicTypeRamp;
|
|
139
|
+
delete mergedProps.style.maximumFontSize;
|
|
140
|
+
return jsx_runtime_1.jsx(react_native_1.Text, {
|
|
141
|
+
ref: componentRef,
|
|
142
|
+
ellipsizeMode: !wrap && !truncate ? 'clip' : 'tail',
|
|
143
|
+
...mergedProps,
|
|
144
|
+
children: children,
|
|
145
|
+
});
|
|
146
|
+
};
|
|
107
147
|
}, TextTokens_1.useTextTokens);
|
|
108
148
|
exports.Text.displayName = Text_types_1.textName;
|
|
109
149
|
exports.default = exports.Text;
|
|
110
|
-
//# sourceMappingURL=Text.js.map
|
|
150
|
+
//# sourceMappingURL=Text.js.map
|
package/lib-commonjs/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import type { ColorValue, Text, TextStyle } from 'react-native';
|
|
2
2
|
import type { ITextProps } from '@fluentui-react-native/adapters';
|
|
3
3
|
import type { FontTokens, FontVariantTokens, IForegroundColorTokens } from '@fluentui-react-native/framework';
|
|
4
|
-
export declare const textName =
|
|
4
|
+
export declare const textName = 'Text';
|
|
5
5
|
/**
|
|
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 type TextTokens = Omit<FontTokens, 'fontFamily'> &
|
|
9
|
+
export type TextTokens = Omit<FontTokens, 'fontFamily'> &
|
|
10
|
+
IForegroundColorTokens &
|
|
11
|
+
Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'> & {
|
|
10
12
|
/**
|
|
11
13
|
* (iOS only) The Dynamic Type ramp that a Text element should follow as the user changes their
|
|
12
14
|
* preferred content size.
|
|
@@ -17,7 +19,7 @@ export type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens
|
|
|
17
19
|
* preferred content size.
|
|
18
20
|
*/
|
|
19
21
|
maximumFontSize?: number;
|
|
20
|
-
};
|
|
22
|
+
};
|
|
21
23
|
export type TextAlign = 'start' | 'center' | 'end' | 'justify';
|
|
22
24
|
export type TextFont = 'base' | 'monospace' | 'numeric';
|
|
23
25
|
export type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
|
|
@@ -25,7 +27,8 @@ export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
|
25
27
|
/**
|
|
26
28
|
* Text props, based off of the standard react-native TextProps with some new extensions
|
|
27
29
|
*/
|
|
28
|
-
export type TextProps<TBase = ITextProps> = TBase &
|
|
30
|
+
export type TextProps<TBase = ITextProps> = TBase &
|
|
31
|
+
FontVariantTokens & {
|
|
29
32
|
/**
|
|
30
33
|
* foreground text color
|
|
31
34
|
*/
|
|
@@ -94,5 +97,5 @@ export type TextProps<TBase = ITextProps> = TBase & FontVariantTokens & {
|
|
|
94
97
|
* @defaultValue true
|
|
95
98
|
*/
|
|
96
99
|
wrap?: boolean;
|
|
97
|
-
};
|
|
98
|
-
//# sourceMappingURL=Text.types.d.ts.map
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=Text.types.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
3
|
exports.textName = void 0;
|
|
4
4
|
exports.textName = 'Text';
|
|
5
|
-
//# sourceMappingURL=Text.types.js.map
|
|
5
|
+
//# sourceMappingURL=Text.types.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { TextTokens } from './Text.types';
|
|
2
|
-
export declare const useTextTokens: import(
|
|
3
|
-
//# sourceMappingURL=TextTokens.d.ts.map
|
|
2
|
+
export declare const useTextTokens: import('@fluentui-react-native/framework').UseTokens<TextTokens>;
|
|
3
|
+
//# sourceMappingURL=TextTokens.d.ts.map
|