react-native/Libraries/Text/TextStylePropTypes.js

101 lines
2.7 KiB
JavaScript
Raw Normal View History

2015-01-30 01:10:49 +00:00
/**
* 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.
2015-01-30 01:10:49 +00:00
*
* @flow
2015-01-30 01:10:49 +00:00
*/
'use strict';
const ColorPropType = require('ColorPropType');
const ReactPropTypes = require('prop-types');
const ViewStylePropTypes = require('ViewStylePropTypes');
const TextStylePropTypes = {
...ViewStylePropTypes,
2015-01-30 01:10:49 +00:00
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,
iOS textTransform style support 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: ![screen shot 2018-03-14 at 3 01 02 pm](https://user-images.githubusercontent.com/575821/37433772-7abe7fa0-279a-11e8-9ec9-fb3aa1952dad.png) [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
2018-04-16 15:59:26 +00:00
/**
* @platform ios
*/
textTransform: ReactPropTypes.oneOf(
['none' /*default*/, 'capitalize', 'uppercase', 'lowercase']
),
/**
* @platform ios
*/
writingDirection: ReactPropTypes.oneOf(
['auto' /*default*/, 'ltr', 'rtl']
),
};
2015-01-30 01:10:49 +00:00
module.exports = TextStylePropTypes;