Skip to content

Commit

Permalink
Use TextLegend example in Android as well
Browse files Browse the repository at this point in the history
Summary:
@public
Just movin' stuff around.
This shouldn't render any actual metrics yet on Android, need native changes for that.

Reviewed By: achen1

Differential Revision: D9584669

fbshipit-source-id: 4b6169b14d1f2053258191f67e1f361a4b714a8e
  • Loading branch information
Mehdi Mulani authored and facebook-github-bot committed Sep 7, 2018
1 parent 2c3e4ec commit 335927d
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 190 deletions.
197 changes: 197 additions & 0 deletions RNTester/js/Shared/TextLegend.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
/**
* 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.
*
* @format
* @flow
*/

'use strict';

const React = require('React');
const {Picker, Text, View} = require('react-native');

class TextLegend extends React.Component<*, *> {
state = {
textMetrics: [],
language: 'english',
};

render() {
const PANGRAMS = {
arabic:
'صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت — يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ',
chinese: 'Innovation in China 中国智造,慧及全球 0123456789',
english: 'The quick brown fox jumps over the lazy dog.',
emoji: '🙏🏾🚗💩😍🤯👩🏽‍🔧🇨🇦💯',
german: 'Falsches Üben von Xylophonmusik quält jeden größeren Zwerg',
greek: 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός',
hebrew: 'דג סקרן שט בים מאוכזב ולפתע מצא חברה',
hindi:
'ऋषियों को सताने वाले दुष्ट राक्षसों के राजा रावण का सर्वनाश करने वाले विष्णुवतार भगवान श्रीराम, अयोध्या के महाराज दशरथ के बड़े सपुत्र थे।',
igbo:
'Nne, nna, wepụ he’l’ụjọ dum n’ime ọzụzụ ụmụ, vufesi obi nye Chukwu, ṅụrịanụ, gbakọọnụ kpaa, kwee ya ka o guzoshie ike; ọ ghaghị ito, nwapụta ezi agwa',
irish:
'D’fhuascail Íosa Úrmhac na hÓighe Beannaithe pór Éava agus Ádhaimh',
japanese:
'色は匂へど 散りぬるを 我が世誰ぞ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず',
korean:
'키스의 고유조건은 입술끼리 만나야 하고 특별한 기술은 필요치 않다',
norwegian:
'Vår sære Zulu fra badeøya spilte jo whist og quickstep i min taxi.',
polish: 'Jeżu klątw, spłódź Finom część gry hańb!',
romanian: 'Muzicologă în bej vând whisky și tequila, preț fix.',
russian: 'Эх, чужак, общий съём цен шляп (юфть) – вдрызг!',
swedish: 'Yxskaftbud, ge vår WC-zonmö IQ-hjälp.',
thai:
'เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน จงฝ่าฟันพัฒนาวิชาการ อย่าล้างผลาญฤๅเข่นฆ่าบีฑาใคร ไม่ถือโทษโกรธแช่งซัดฮึดฮัดด่า หัดอภัยเหมือนกีฬาอัชฌาสัย ปฏิบัติประพฤติกฎกำหนดใจ พูดจาให้จ๊ะๆ จ๋าๆ น่าฟังเอยฯ',
};
return (
<View>
<Picker
selectedValue={this.state.language}
onValueChange={itemValue => this.setState({language: itemValue})}>
{Object.keys(PANGRAMS).map(x => (
<Picker.Item
label={x[0].toUpperCase() + x.substring(1)}
key={x}
value={x}
/>
))}
</Picker>
<View>
{this.state.textMetrics.map(
({
x,
y,
width,
height,
capHeight,
ascender,
descender,
xHeight,
}) => {
return [
<View
key="baseline view"
style={{
top: y + ascender,
height: 1,
left: 0,
right: 0,
position: 'absolute',
backgroundColor: 'red',
}}
/>,
<Text
key="baseline text"
style={{
top: y + ascender,
right: 0,
position: 'absolute',
color: 'red',
}}>
Baseline
</Text>,
<View
key="capheight view"
style={{
top: y + ascender - capHeight,
height: 1,
left: 0,
right: 0,
position: 'absolute',
backgroundColor: 'green',
}}
/>,
<Text
key="capheight text"
style={{
top: y + ascender - capHeight,
right: 0,
position: 'absolute',
color: 'green',
}}>
Capheight
</Text>,
<View
key="xheight view"
style={{
top: y + ascender - xHeight,
height: 1,
left: 0,
right: 0,
position: 'absolute',
backgroundColor: 'blue',
}}
/>,
<Text
key="xheight text"
style={{
top: y + ascender - xHeight,
right: 0,
position: 'absolute',
color: 'blue',
}}>
X-height
</Text>,
<View
key="descender view"
style={{
top: y + ascender + descender,
height: 1,
left: 0,
right: 0,
position: 'absolute',
backgroundColor: 'orange',
}}
/>,
<Text
key="descender text"
style={{
top: y + ascender + descender,
right: 0,
position: 'absolute',
color: 'orange',
}}>
Descender
</Text>,
<View
key="end of text view"
style={{
top: y,
height: height,
width: 1,
left: x + width,
position: 'absolute',
backgroundColor: 'brown',
}}
/>,
<Text
key="end of text text"
style={{
top: y,
left: x + width + 5,
position: 'absolute',
color: 'brown',
}}>
End of text
</Text>,
];
},
)}
<Text
onTextLayout={event =>
this.setState({textMetrics: event.nativeEvent.lines})
}
style={{fontSize: 50}}>
{PANGRAMS[this.state.language]}
</Text>
</View>
</View>
);
}
}
module.exports = TextLegend;
4 changes: 4 additions & 0 deletions RNTester/js/TextExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var ReactNative = require('react-native');
var {Image, StyleSheet, Text, View} = ReactNative;
var RNTesterBlock = require('./RNTesterBlock');
var RNTesterPage = require('./RNTesterPage');
const TextLegend = require('./Shared/TextLegend');

class Entity extends React.Component<$FlowFixMeProps> {
render() {
Expand Down Expand Up @@ -87,6 +88,9 @@ class TextExample extends React.Component<{}> {
This text is indented by 10px padding on all sides.
</Text>
</RNTesterBlock>
<RNTesterBlock title="Text metrics legend">
<TextLegend />
</RNTesterBlock>
<RNTesterBlock title="Font Family">
<Text style={{fontFamily: 'sans-serif'}}>Sans-Serif</Text>
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
Expand Down
Loading

0 comments on commit 335927d

Please sign in to comment.