mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 01:25:39 +00:00
7efd4fabfd
Summary: When we convert nested <Text> components to Spannable object we must enforce the order of spans somehow, otherwise we will have Spannable object with unpredictable order of spans, which will produce unpredictalbe text layout. We can do it only using `Spannable.SPAN_PRIORITY` feature because Spannable objects do not maintain the order of spans internally. We also have to fix this to implement autoexpandable <TextInput>. Reviewed By: achen1 Differential Revision: D5811172 fbshipit-source-id: 5bc68b869e58aba27d6986581af9fe3343d116a7
467 lines
17 KiB
JavaScript
467 lines
17 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @flow
|
|
* @providesModule TextExample
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('react');
|
|
var ReactNative = require('react-native');
|
|
var {
|
|
Image,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} = ReactNative;
|
|
var RNTesterBlock = require('./RNTesterBlock');
|
|
var RNTesterPage = require('./RNTesterPage');
|
|
|
|
class Entity extends React.Component<$FlowFixMeProps> {
|
|
render() {
|
|
return (
|
|
<Text style={{fontWeight: 'bold', color: '#527fe4'}}>
|
|
{this.props.children}
|
|
</Text>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
|
|
state = {fontWeight: 'bold', fontSize: 15};
|
|
|
|
toggleWeight = () => {
|
|
this.setState({
|
|
fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
|
|
});
|
|
};
|
|
|
|
increaseSize = () => {
|
|
this.setState({
|
|
fontSize: this.state.fontSize + 1
|
|
});
|
|
};
|
|
|
|
render() {
|
|
var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
|
|
return (
|
|
<View>
|
|
<Text style={curStyle}>
|
|
Tap the controls below to change attributes.
|
|
</Text>
|
|
<Text>
|
|
<Text>See how it will even work on <Text style={curStyle}>this nested text</Text></Text>
|
|
</Text>
|
|
<Text>
|
|
<Text onPress={this.toggleWeight}>Toggle Weight</Text>
|
|
{' (with highlight onPress)'}
|
|
</Text>
|
|
<Text onPress={this.increaseSize} suppressHighlighting={true}>
|
|
Increase Size (suppressHighlighting true)
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TextExample extends React.Component<{}> {
|
|
static title = '<Text>';
|
|
static description = 'Base component for rendering styled text.';
|
|
|
|
render() {
|
|
return (
|
|
<RNTesterPage title="<Text>">
|
|
<RNTesterBlock title="Wrap">
|
|
<Text>
|
|
The text should wrap if it goes on multiple lines.
|
|
See, this is going to the next line.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Padding">
|
|
<Text style={{padding: 10}}>
|
|
This text is indented by 10px padding on all sides.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Family">
|
|
<Text style={{fontFamily: 'sans-serif'}}>
|
|
Sans-Serif
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
|
|
Sans-Serif Bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'serif'}}>
|
|
Serif
|
|
</Text>
|
|
<Text style={{fontFamily: 'serif', fontWeight: 'bold'}}>
|
|
Serif Bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'monospace'}}>
|
|
Monospace
|
|
</Text>
|
|
<Text style={{fontFamily: 'monospace', fontWeight: 'bold'}}>
|
|
Monospace Bold (After 5.0)
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Android Material Design fonts">
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'sans-serif'}}>
|
|
Roboto Regular
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontStyle: 'italic'}}>
|
|
Roboto Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
|
|
Roboto Bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontStyle: 'italic', fontWeight: 'bold'}}>
|
|
Roboto Bold Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-light'}}>
|
|
Roboto Light
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-light', fontStyle: 'italic'}}>
|
|
Roboto Light Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-thin'}}>
|
|
Roboto Thin (After 4.2)
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-thin', fontStyle: 'italic'}}>
|
|
Roboto Thin Italic (After 4.2)
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-condensed'}}>
|
|
Roboto Condensed
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-condensed', fontStyle: 'italic'}}>
|
|
Roboto Condensed Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-condensed', fontWeight: 'bold'}}>
|
|
Roboto Condensed Bold
|
|
</Text>
|
|
<Text style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold'}}>
|
|
Roboto Condensed Bold Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-medium'}}>
|
|
Roboto Medium (After 5.0)
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-medium', fontStyle: 'italic'}}>
|
|
Roboto Medium Italic (After 5.0)
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Custom Fonts">
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'notoserif'}}>
|
|
NotoSerif Regular
|
|
</Text>
|
|
<Text style={{fontFamily: 'notoserif', fontStyle: 'italic', fontWeight: 'bold'}}>
|
|
NotoSerif Bold Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'notoserif', fontStyle: 'italic'}}>
|
|
NotoSerif Italic (Missing Font file)
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</RNTesterBlock>
|
|
|
|
<RNTesterBlock title="Font Size">
|
|
<Text style={{fontSize: 23}}>
|
|
Size 23
|
|
</Text>
|
|
<Text style={{fontSize: 8}}>
|
|
Size 8
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Color">
|
|
<Text style={{color: 'red'}}>
|
|
Red color
|
|
</Text>
|
|
<Text style={{color: 'blue'}}>
|
|
Blue color
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Weight">
|
|
<Text style={{fontWeight: 'bold'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
<Text style={{fontWeight: 'normal'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Style">
|
|
<Text style={{fontStyle: 'italic'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
<Text style={{fontStyle: 'normal'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Style and Weight">
|
|
<Text style={{fontStyle: 'italic', fontWeight: 'bold'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text Decoration">
|
|
<Text style={{textDecorationLine: 'underline'}}>
|
|
Solid underline
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'none'}}>
|
|
None textDecoration
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
|
|
Solid line-through
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline line-through'}}>
|
|
Both underline and line-through
|
|
</Text>
|
|
<Text>
|
|
Mixed text with <Text style={{textDecorationLine: 'underline'}}>underline</Text> and <Text style={{textDecorationLine: 'line-through'}}>line-through</Text> text nodes
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Nested">
|
|
<Text onPress={() => console.log('1st')}>
|
|
(Normal text,
|
|
<Text style={{color: 'red', fontWeight: 'bold'}}>
|
|
(R)red
|
|
<Text style={{color: 'green', fontWeight: 'normal'}}>
|
|
(G)green
|
|
<Text style={{color: 'blue', fontWeight: 'bold'}}>
|
|
(B)blue
|
|
<Text style={{color: 'cyan', fontWeight: 'normal'}}>
|
|
(C)cyan
|
|
<Text style={{color: 'magenta', fontWeight: 'bold'}}>
|
|
(M)magenta
|
|
<Text style={{color: 'yellow', fontWeight: 'normal'}}>
|
|
(Y)yellow
|
|
<Text style={{color: 'black', fontWeight: 'bold'}}>
|
|
(K)black
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text style={{fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
|
|
(and bold
|
|
<Text style={{fontStyle: 'italic', fontSize: 11, color: '#527fe4'}} onPress={() => console.log('3rd')}>
|
|
(and tiny bold italic blue
|
|
<Text style={{fontWeight: 'normal', fontStyle: 'normal'}} onPress={() => console.log('4th')}>
|
|
(and tiny normal blue)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{fontFamily: 'serif'}} onPress={() => console.log('1st')}>
|
|
(Serif
|
|
<Text style={{fontStyle: 'italic', fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
|
|
(Serif Bold Italic
|
|
<Text
|
|
style={{fontFamily: 'monospace', fontStyle: 'normal', fontWeight: 'normal'}}
|
|
onPress={() => console.log('3rd')}>
|
|
(Monospace Normal
|
|
<Text
|
|
style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
|
|
onPress={() => console.log('4th')}>
|
|
(Sans-Serif Bold
|
|
<Text style={{fontWeight: 'normal'}} onPress={() => console.log('5th')}>
|
|
(and Sans-Serif Normal)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{fontSize: 12}}>
|
|
<Entity>Entity Name</Entity>
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text Align">
|
|
<Text>
|
|
auto (default) - english LTR
|
|
</Text>
|
|
<Text>
|
|
أحب اللغة العربية auto (default) - arabic RTL
|
|
</Text>
|
|
<Text style={{textAlign: 'left'}}>
|
|
left left left left left left left left left left left left left left left
|
|
</Text>
|
|
<Text style={{textAlign: 'center'}}>
|
|
center center center center center center center center center center center
|
|
</Text>
|
|
<Text style={{textAlign: 'right'}}>
|
|
right right right right right right right right right right right right right
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Unicode">
|
|
<View>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Spaces">
|
|
<Text>
|
|
A {'generated'} {' '} {'string'} and some spaces
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Line Height">
|
|
<Text style={{lineHeight: 35}}>
|
|
Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Empty Text">
|
|
<Text />
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Toggling Attributes">
|
|
<AttributeToggler />
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="backgroundColor attribute">
|
|
<Text style={{backgroundColor: '#ffaaaa'}}>
|
|
Red background,
|
|
<Text style={{backgroundColor: '#aaaaff'}}>
|
|
{' '}blue background,
|
|
<Text>
|
|
{' '}inherited blue background,
|
|
<Text style={{backgroundColor: '#aaffaa'}}>
|
|
{' '}nested green background.
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Same alpha as background,
|
|
<Text>
|
|
Inherited alpha from background,
|
|
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Reapply alpha
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="containerBackgroundColor attribute">
|
|
<View style={{flexDirection: 'row', height: 85}}>
|
|
<View style={{backgroundColor: '#ffaaaa', width: 150}} />
|
|
<View style={{backgroundColor: '#aaaaff', width: 150}} />
|
|
</View>
|
|
<Text style={[styles.backgroundColorText, {top: -80}]}>
|
|
Default containerBackgroundColor (inherited) + backgroundColor wash
|
|
</Text>
|
|
<Text style={[styles.backgroundColorText, {top: -70, backgroundColor: 'transparent'}]}>
|
|
{"containerBackgroundColor: 'transparent' + backgroundColor wash"}
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="numberOfLines attribute">
|
|
<Text numberOfLines={1}>
|
|
Maximum of one line no matter now much I write here. If I keep writing it{"'"}ll just truncate after one line
|
|
</Text>
|
|
<Text numberOfLines={2} style={{marginTop: 20}}>
|
|
Maximum of two lines no matter now much I write here. If I keep writing it{"'"}ll just truncate after two lines
|
|
</Text>
|
|
<Text style={{marginTop: 20}}>
|
|
No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="selectable attribute">
|
|
<Text selectable>
|
|
This text is selectable if you click-and-hold, and will offer the native Android selection menus.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="selectionColor attribute">
|
|
<Text selectable selectionColor="orange">
|
|
This text will have a orange highlight on selection.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Inline images">
|
|
<Text>
|
|
This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text shadow">
|
|
<Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
|
|
Demo text shadow
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Ellipsize mode">
|
|
<Text numberOfLines={1}>
|
|
This very long text should be truncated with dots in the end.
|
|
</Text>
|
|
<Text ellipsizeMode="middle" numberOfLines={1}>
|
|
This very long text should be truncated with dots in the middle.
|
|
</Text>
|
|
<Text ellipsizeMode="head" numberOfLines={1}>
|
|
This very long text should be truncated with dots in the beginning.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Include Font Padding">
|
|
<View style={{flexDirection: 'row', justifyContent: 'space-around', marginBottom: 10}}>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={styles.includeFontPaddingText}>
|
|
Ey
|
|
</Text>
|
|
<Text>Default</Text>
|
|
</View>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={[styles.includeFontPaddingText, {includeFontPadding: false, marginLeft: 10}]}>
|
|
Ey
|
|
</Text>
|
|
<Text>includeFontPadding: false</Text>
|
|
</View>
|
|
</View>
|
|
<Text>By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.</Text>
|
|
</RNTesterBlock>
|
|
</RNTesterPage>
|
|
);
|
|
}
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
backgroundColorText: {
|
|
left: 5,
|
|
backgroundColor: 'rgba(100, 100, 100, 0.3)'
|
|
},
|
|
includeFontPaddingText: {
|
|
fontSize: 120,
|
|
fontFamily: 'sans-serif',
|
|
backgroundColor: '#EEEEEE',
|
|
color: '#000000',
|
|
textAlignVertical: 'center',
|
|
alignSelf: 'center',
|
|
}
|
|
});
|
|
|
|
module.exports = TextExample;
|