mirror of
https://github.com/status-im/react-native.git
synced 2025-01-16 12:34:17 +00:00
6b9e4ec4b2
Summary: public Added opacity property to RCTShadowText, and use it to adjust the alpha color component of nested text nodes when collapsing the RCTShadowText tree into an NSAttributedString. The opacity is propagated down the tree, multiplying the aggregate with the current node's opacity at each step. Also, foreground and background colors are propagated down the tree so that in case a node has an opacity style but no colors, the ancestor's colors can be used when adjusting the alpha components. Reviewed By: nicklockwood Differential Revision: D2600402 fb-gh-sync-id: 2adb7b598b0a73c984bb2edaab545c02ab911c6b
491 lines
14 KiB
JavaScript
491 lines
14 KiB
JavaScript
/**
|
|
* The examples provided by Facebook are for non-commercial testing and
|
|
* evaluation purposes only.
|
|
*
|
|
* Facebook reserves all rights not expressly granted.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
|
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
|
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
|
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('react-native');
|
|
var {
|
|
Image,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} = React;
|
|
|
|
var Entity = React.createClass({
|
|
render: function() {
|
|
return (
|
|
<Text style={{fontWeight: '500', color: '#527fe4'}}>
|
|
{this.props.children}
|
|
</Text>
|
|
);
|
|
}
|
|
});
|
|
|
|
var AttributeToggler = React.createClass({
|
|
getInitialState: function() {
|
|
return {fontWeight: 'bold', fontSize: 15};
|
|
},
|
|
toggleWeight: function() {
|
|
this.setState({
|
|
fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
|
|
});
|
|
},
|
|
increaseSize: function() {
|
|
this.setState({
|
|
fontSize: this.state.fontSize + 1
|
|
});
|
|
},
|
|
render: function() {
|
|
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
|
|
style={{backgroundColor: '#ffaaaa', marginTop: 5}}
|
|
onPress={this.toggleWeight}>
|
|
Toggle Weight
|
|
</Text>
|
|
<Text
|
|
style={{backgroundColor: '#aaaaff', marginTop: 5}}
|
|
onPress={this.increaseSize}>
|
|
Increase Size
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
});
|
|
|
|
exports.title = '<Text>';
|
|
exports.description = 'Base component for rendering styled text.';
|
|
exports.displayName = 'TextExample';
|
|
exports.examples = [
|
|
{
|
|
title: 'Wrap',
|
|
render: function() {
|
|
return (
|
|
<Text>
|
|
The text should wrap if it goes on multiple lines. See, this is going to
|
|
the next line.
|
|
</Text>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Padding',
|
|
render: function() {
|
|
return (
|
|
<Text style={{padding: 10}}>
|
|
This text is indented by 10px padding on all sides.
|
|
</Text>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Font Family',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontFamily: 'Cochin'}}>
|
|
Cochin
|
|
</Text>
|
|
<Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
|
|
Cochin bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'Helvetica'}}>
|
|
Helvetica
|
|
</Text>
|
|
<Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
|
|
Helvetica bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'Verdana'}}>
|
|
Verdana
|
|
</Text>
|
|
<Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
|
|
Verdana bold
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Font Size',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontSize: 23}}>
|
|
Size 23
|
|
</Text>
|
|
<Text style={{fontSize: 8}}>
|
|
Size 8
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Color',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{color: 'red'}}>
|
|
Red color
|
|
</Text>
|
|
<Text style={{color: 'blue'}}>
|
|
Blue color
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Font Weight',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontWeight: '100'}}>
|
|
Move fast and be ultralight
|
|
</Text>
|
|
<Text style={{fontWeight: '200'}}>
|
|
Move fast and be light
|
|
</Text>
|
|
<Text style={{fontWeight: 'normal'}}>
|
|
Move fast and be normal
|
|
</Text>
|
|
<Text style={{fontWeight: 'bold'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
<Text style={{fontWeight: '900'}}>
|
|
Move fast and be ultrabold
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Font Style',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontStyle: 'normal'}}>
|
|
Normal text
|
|
</Text>
|
|
<Text style={{fontStyle: 'italic'}}>
|
|
Italic text
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Text Decoration',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'solid'}}>
|
|
Solid underline
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
|
|
Double underline with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
|
|
Dashed underline with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
|
|
Dotted underline with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'none'}}>
|
|
None textDecoration
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
|
|
Solid line-through
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'double', textDecorationColor: '#ff0000'}}>
|
|
Double line-through with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dashed', textDecorationColor: '#9CDC40'}}>
|
|
Dashed line-through with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'dotted', textDecorationColor: 'blue'}}>
|
|
Dotted line-through with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline line-through'}}>
|
|
Both underline and line-through
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Nested',
|
|
description: 'Nested text components will inherit the styles of their ' +
|
|
'parents (only backgroundColor is inherited from non-Text parents). ' +
|
|
'<Text> only supports other <Text> and raw text (strings) as children.',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
(Normal text,
|
|
<Text style={{fontWeight: 'bold'}}>
|
|
(and bold
|
|
<Text style={{fontSize: 11, color: '#527fe4'}}>
|
|
(and tiny inherited bold blue)
|
|
</Text>
|
|
),
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>
|
|
(opacity 1.0 alpha 1.0 back red)
|
|
</Text>
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>
|
|
(back red
|
|
<Text style={{opacity:0.5}}>
|
|
(opacity 0.5)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>
|
|
(back red
|
|
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
|
|
(alpha 0.5 back red)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
|
|
(opacity 0.5 back red
|
|
<Text style={{opacity:0.5}}>
|
|
(opacity 0.5)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
|
|
(alpha 0.5 back red
|
|
<Text style={{color:'rgba(0,0,0,0.25)', backgroundColor:'rgba(255,170,170,0.25)'}}>
|
|
(alpha 0.25 back red)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity:0.5}}>
|
|
(opacity 0.5
|
|
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
|
|
(opacity 0.5 back red)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity:0.5}}>
|
|
(opacity 0.5
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
|
|
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
|
|
(opacity 0.5 back red)
|
|
</Text>
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity:0.5}}>
|
|
(opacity 0.5
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
|
|
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
|
|
(alpha 0.5 back red)
|
|
</Text>
|
|
<Text style={{backgroundColor:'#ffaaaa'}}>(back red)</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
|
|
(opacity 0.5 back red
|
|
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(255,170,170,0.5)'}}>
|
|
(alpha 0.5 back red)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity:0.5, backgroundColor:'#ffaaaa'}}>
|
|
(opacity 0.5 back red
|
|
<Text style={{color:'rgba(0,0,0,0.5)', backgroundColor:'rgba(170,170,255,0.5)'}}>
|
|
(alpha 0.5 back blue)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{fontSize: 12}}>
|
|
<Entity>Entity Name</Entity>
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Text Align',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<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>
|
|
<Text style={{textAlign: 'justify'}}>
|
|
justify: this text component{"'"}s contents are laid out with "textAlign: justify"
|
|
and as you can see all of the lines except the last one span the
|
|
available width of the parent container.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Letter Spacing',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{letterSpacing: 0}}>
|
|
letterSpacing = 0
|
|
</Text>
|
|
<Text style={{letterSpacing: 2, marginTop: 5}}>
|
|
letterSpacing = 2
|
|
</Text>
|
|
<Text style={{letterSpacing: 9, marginTop: 5}}>
|
|
letterSpacing = 9
|
|
</Text>
|
|
<Text style={{letterSpacing: -1, marginTop: 5}}>
|
|
letterSpacing = -1
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Spaces',
|
|
render: function() {
|
|
return (
|
|
<Text>
|
|
A {'generated'} {' '} {'string'} and some spaces
|
|
</Text>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Line Height',
|
|
render: function() {
|
|
return (
|
|
<Text>
|
|
<Text style={{lineHeight: 35}}>
|
|
A lot of space between the lines of this long passage that should
|
|
wrap once.
|
|
</Text>
|
|
</Text>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Empty Text',
|
|
description: 'It\'s ok to have Text with zero or null children.',
|
|
render: function() {
|
|
return (
|
|
<Text />
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Toggling Attributes',
|
|
render: function(): ReactElement {
|
|
return <AttributeToggler />;
|
|
},
|
|
}, {
|
|
title: 'backgroundColor attribute',
|
|
description: 'backgroundColor is inherited from all types of views.',
|
|
render: function() {
|
|
return (
|
|
<Text style={{backgroundColor: 'yellow'}}>
|
|
Yellow container background,
|
|
<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>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'numberOfLines attribute',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text numberOfLines={1}>
|
|
Maximum of one line, no matter how 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 how 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 how much I write here. If I keep writing, it{"'"}ll just keep going and going.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Text highlighting (tap the link to see highlight)',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>Lorem ipsum dolor sit amet, <Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</Text> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'allowFontScaling attribute',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
By default, text will respect Text Size accessibility setting on iOS.
|
|
It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
|
|
{" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
|
|
</Text>
|
|
<Text style={{marginTop: 10}}>
|
|
You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
|
|
</Text>
|
|
<Text allowFontScaling={false} style={{marginTop: 20}}>
|
|
This text will not scale.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}, {
|
|
title: 'Inline images',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
}];
|
|
|
|
var styles = StyleSheet.create({
|
|
backgroundColorText: {
|
|
margin: 5,
|
|
marginBottom: 0,
|
|
backgroundColor: 'rgba(100, 100, 100, 0.3)'
|
|
},
|
|
});
|