mirror of
https://github.com/status-im/react-native.git
synced 2025-02-15 02:47:42 +00:00
8621d4b797
Summary: Issue [#2088](https://github.com/facebook/react-native/issues/2088). The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized"). My test plan involves having added a test-case to the RNTester app within the `<Text>` component area. I then manually verified that the rendered content met my expectation. Here is the markup that exercises my enhancement: ``` <View> <Text style={{ textTransform: 'uppercase'}}> This text should be uppercased. </Text> <Text style={{ textTransform: 'lowercase'}}> This TEXT SHOULD be lowercased. </Text> <Text style={{ textTransform: 'capitalize'}}> This text should be CAPITALIZED. </Text> <Text style={{ textTransform: 'capitalize'}}> Mixed:{' '} <Text style={{ textTransform: 'uppercase'}}> uppercase{' '} </Text> <Text style={{ textTransform: 'lowercase'}}> LoWeRcAsE{' '} </Text> <Text style={{ textTransform: 'capitalize'}}> capitalize each word </Text> </Text> </View> ``` And here is a screenshot of the result:  [Website Documentation PR](https://github.com/facebook/react-native-website/pull/254) https://github.com/facebook/react-native-website/pull/254 [IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations Closes https://github.com/facebook/react-native/pull/18387 Differential Revision: D7583315 Pulled By: shergin fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @providesModule TextStylePropTypes
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
const ColorPropType = require('ColorPropType');
|
|
const ReactPropTypes = require('prop-types');
|
|
const ViewStylePropTypes = require('ViewStylePropTypes');
|
|
|
|
const TextStylePropTypes = {
|
|
...ViewStylePropTypes,
|
|
|
|
color: ColorPropType,
|
|
fontFamily: ReactPropTypes.string,
|
|
fontSize: ReactPropTypes.number,
|
|
fontStyle: ReactPropTypes.oneOf(['normal', 'italic']),
|
|
/**
|
|
* Specifies font weight. The values 'normal' and 'bold' are supported for
|
|
* most fonts. Not all fonts have a variant for each of the numeric values,
|
|
* in that case the closest one is chosen.
|
|
*/
|
|
fontWeight: ReactPropTypes.oneOf(
|
|
['normal' /*default*/, 'bold',
|
|
'100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
),
|
|
/**
|
|
* @platform ios
|
|
*/
|
|
fontVariant: ReactPropTypes.arrayOf(
|
|
ReactPropTypes.oneOf([
|
|
'small-caps',
|
|
'oldstyle-nums',
|
|
'lining-nums',
|
|
'tabular-nums',
|
|
'proportional-nums',
|
|
])
|
|
),
|
|
textShadowOffset: ReactPropTypes.shape(
|
|
{width: ReactPropTypes.number, height: ReactPropTypes.number}
|
|
),
|
|
textShadowRadius: ReactPropTypes.number,
|
|
textShadowColor: ColorPropType,
|
|
/**
|
|
* @platform ios
|
|
*/
|
|
letterSpacing: ReactPropTypes.number,
|
|
lineHeight: ReactPropTypes.number,
|
|
/**
|
|
* Specifies text alignment. The value 'justify' is only supported on iOS and
|
|
* fallbacks to `left` on Android.
|
|
*/
|
|
textAlign: ReactPropTypes.oneOf(
|
|
['auto' /*default*/, 'left', 'right', 'center', 'justify']
|
|
),
|
|
/**
|
|
* @platform android
|
|
*/
|
|
textAlignVertical: ReactPropTypes.oneOf(
|
|
['auto' /*default*/, 'top', 'bottom', 'center']
|
|
),
|
|
/**
|
|
* Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
|
|
* With some fonts, this padding can make text look slightly misaligned when centered vertically.
|
|
* For best results also set `textAlignVertical` to `center`. Default is true.
|
|
* @platform android
|
|
*/
|
|
includeFontPadding: ReactPropTypes.bool,
|
|
textDecorationLine: ReactPropTypes.oneOf(
|
|
['none' /*default*/, 'underline', 'line-through', 'underline line-through']
|
|
),
|
|
/**
|
|
* @platform ios
|
|
*/
|
|
textDecorationStyle: ReactPropTypes.oneOf(
|
|
['solid' /*default*/, 'double', 'dotted','dashed']
|
|
),
|
|
/**
|
|
* @platform ios
|
|
*/
|
|
textDecorationColor: ColorPropType,
|
|
/**
|
|
* @platform ios
|
|
*/
|
|
textTransform: ReactPropTypes.oneOf(
|
|
['none' /*default*/, 'capitalize', 'uppercase', 'lowercase']
|
|
),
|
|
/**
|
|
* @platform ios
|
|
*/
|
|
writingDirection: ReactPropTypes.oneOf(
|
|
['auto' /*default*/, 'ltr', 'rtl']
|
|
),
|
|
};
|
|
|
|
module.exports = TextStylePropTypes;
|