From cecc1e9dd202dab1b15426edf67663495a775764 Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Dall'Agnol Date: Fri, 9 Sep 2022 00:49:30 -0300 Subject: [PATCH 1/2] feat: Add space-separated string support for fontVariant --- .../View/ReactNativeStyleAttributes.js | 3 +- Libraries/StyleSheet/StyleSheetTypes.js | 56 +++++++++--------- .../__tests__/processFontVariant-test.js | 57 +++++++++++++++++++ Libraries/StyleSheet/processFontVariant.js | 34 +++++++++++ 4 files changed, 122 insertions(+), 28 deletions(-) create mode 100644 Libraries/StyleSheet/__tests__/processFontVariant-test.js create mode 100644 Libraries/StyleSheet/processFontVariant.js diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js index 28fd4596338890..ab2b30344237fa 100644 --- a/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -10,6 +10,7 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes'; import processColor from '../../StyleSheet/processColor'; +import processFontVariant from '../../StyleSheet/processFontVariant'; import processTransform from '../../StyleSheet/processTransform'; import sizesDiffer from '../../Utilities/differ/sizesDiffer'; @@ -120,7 +121,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { fontFamily: true, fontSize: true, fontStyle: true, - fontVariant: true, + fontVariant: {process: processFontVariant}, fontWeight: true, includeFontPadding: true, letterSpacing: true, diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index e667dddf911c4c..6be29dbb963dae 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -579,6 +579,34 @@ export type ____FontWeight_Internal = | '800' | '900'; +export type ____FontVariantArray_Internal = $ReadOnlyArray< + | 'small-caps' + | 'oldstyle-nums' + | 'lining-nums' + | 'tabular-nums' + | 'proportional-nums' + | 'stylistic-one' + | 'stylistic-two' + | 'stylistic-three' + | 'stylistic-four' + | 'stylistic-five' + | 'stylistic-six' + | 'stylistic-seven' + | 'stylistic-eight' + | 'stylistic-nine' + | 'stylistic-ten' + | 'stylistic-eleven' + | 'stylistic-twelve' + | 'stylistic-thirteen' + | 'stylistic-fourteen' + | 'stylistic-fifteen' + | 'stylistic-sixteen' + | 'stylistic-seventeen' + | 'stylistic-eighteen' + | 'stylistic-nineteen' + | 'stylistic-twenty', +>; + export type ____TextStyle_InternalCore = $ReadOnly<{ ...$Exact<____ViewStyle_Internal>, color?: ____ColorValue_Internal, @@ -586,33 +614,7 @@ export type ____TextStyle_InternalCore = $ReadOnly<{ fontSize?: number, fontStyle?: 'normal' | 'italic', fontWeight?: ____FontWeight_Internal, - fontVariant?: $ReadOnlyArray< - | 'small-caps' - | 'oldstyle-nums' - | 'lining-nums' - | 'tabular-nums' - | 'proportional-nums' - | 'stylistic-one' - | 'stylistic-two' - | 'stylistic-three' - | 'stylistic-four' - | 'stylistic-five' - | 'stylistic-six' - | 'stylistic-seven' - | 'stylistic-eight' - | 'stylistic-nine' - | 'stylistic-ten' - | 'stylistic-eleven' - | 'stylistic-twelve' - | 'stylistic-thirteen' - | 'stylistic-fourteen' - | 'stylistic-fifteen' - | 'stylistic-sixteen' - | 'stylistic-seventeen' - | 'stylistic-eighteen' - | 'stylistic-nineteen' - | 'stylistic-twenty', - >, + fontVariant?: ____FontVariantArray_Internal | string, textShadowOffset?: $ReadOnly<{ width: number, height: number, diff --git a/Libraries/StyleSheet/__tests__/processFontVariant-test.js b/Libraries/StyleSheet/__tests__/processFontVariant-test.js new file mode 100644 index 00000000000000..5757eea5952863 --- /dev/null +++ b/Libraries/StyleSheet/__tests__/processFontVariant-test.js @@ -0,0 +1,57 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @emails oncall+react_native + */ + +'use strict'; + +const processFontVariant = require('../processFontVariant'); + +describe('processFontVariant', () => { + it('should accept arrays', () => { + expect(processFontVariant([])).toEqual([]); + expect(processFontVariant(['oldstyle-nums'])).toEqual(['oldstyle-nums']); + expect(processFontVariant(['proportional-nums', 'lining-nums'])).toEqual([ + 'proportional-nums', + 'lining-nums', + ]); + }); + + it('should accept string values', () => { + expect(processFontVariant('oldstyle-nums')).toEqual(['oldstyle-nums']); + expect(processFontVariant('lining-nums ')).toEqual(['lining-nums']); + expect(processFontVariant(' tabular-nums')).toEqual(['tabular-nums']); + }); + + it('should accept string with multiple values', () => { + expect(processFontVariant('oldstyle-nums lining-nums')).toEqual([ + 'oldstyle-nums', + 'lining-nums', + ]); + expect( + processFontVariant('proportional-nums oldstyle-nums lining-nums'), + ).toEqual(['proportional-nums', 'oldstyle-nums', 'lining-nums']); + expect( + processFontVariant( + ' small-caps proportional-nums oldstyle-nums lining-nums', + ), + ).toEqual([ + 'small-caps', + 'proportional-nums', + 'oldstyle-nums', + 'lining-nums', + ]); + }); + + it('should not accept invalid formats', () => { + expect(processFontVariant('1')).toBe(undefined); + expect(processFontVariant('/ 0')).toBe(undefined); + expect(processFontVariant('[]')).toBe(undefined); + expect(processFontVariant('{ ; }')).toBe(undefined); + }); +}); diff --git a/Libraries/StyleSheet/processFontVariant.js b/Libraries/StyleSheet/processFontVariant.js new file mode 100644 index 00000000000000..d30f62884650d6 --- /dev/null +++ b/Libraries/StyleSheet/processFontVariant.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +import type {____FontVariantArray_Internal} from './StyleSheetTypes'; + +function processFontVariant( + fontVariant: ____FontVariantArray_Internal | string, +): ?____FontVariantArray_Internal { + if (Array.isArray(fontVariant)) { + return fontVariant; + } + + // $FlowFixMe[incompatible-type] + const match: ?____FontVariantArray_Internal = fontVariant.match( + new RegExp(/([a-zA-Z'-]+)/gm), + ); + + if (!match) { + return; + } + + return match; +} + +module.exports = processFontVariant; From 3bc35f3b238a418da1b5af11f56a88b03cb5cac0 Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Dall'Agnol Date: Tue, 13 Sep 2022 09:11:17 -0300 Subject: [PATCH 2/2] chore: Update processFontVariant to use split instead of regex --- Libraries/StyleSheet/__tests__/processFontVariant-test.js | 7 ------- Libraries/StyleSheet/processFontVariant.js | 6 +++--- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/Libraries/StyleSheet/__tests__/processFontVariant-test.js b/Libraries/StyleSheet/__tests__/processFontVariant-test.js index 5757eea5952863..550d7d92b5cc3c 100644 --- a/Libraries/StyleSheet/__tests__/processFontVariant-test.js +++ b/Libraries/StyleSheet/__tests__/processFontVariant-test.js @@ -47,11 +47,4 @@ describe('processFontVariant', () => { 'lining-nums', ]); }); - - it('should not accept invalid formats', () => { - expect(processFontVariant('1')).toBe(undefined); - expect(processFontVariant('/ 0')).toBe(undefined); - expect(processFontVariant('[]')).toBe(undefined); - expect(processFontVariant('{ ; }')).toBe(undefined); - }); }); diff --git a/Libraries/StyleSheet/processFontVariant.js b/Libraries/StyleSheet/processFontVariant.js index d30f62884650d6..70adbd0d7eb7e2 100644 --- a/Libraries/StyleSheet/processFontVariant.js +++ b/Libraries/StyleSheet/processFontVariant.js @@ -20,9 +20,9 @@ function processFontVariant( } // $FlowFixMe[incompatible-type] - const match: ?____FontVariantArray_Internal = fontVariant.match( - new RegExp(/([a-zA-Z'-]+)/gm), - ); + const match: ?____FontVariantArray_Internal = fontVariant + .split(' ') + .filter(Boolean); if (!match) { return;