Add examples to RTLExample
Reviewed By: sahrens Differential Revision: D5929933 fbshipit-source-id: 16ef86c4ab444f740b2568ddb3af0ffd5ff0d02b
This commit is contained in:
Ramanpreet Nara
Facebook Github Bot
parent
1a7abcf526
commit
bc5083ac40
|
|
@ -7,6 +7,7 @@
|
|||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
* @providesModule RTLExample
|
||||
*/
|
||||
'use strict';
|
||||
|
|
@ -26,10 +27,10 @@ const {
|
|||
TouchableWithoutFeedback,
|
||||
Switch,
|
||||
View,
|
||||
Button,
|
||||
} = ReactNative;
|
||||
const Platform = require('Platform');
|
||||
|
||||
|
||||
const RNTesterPage = require('./RNTesterPage');
|
||||
const RNTesterBlock = require('./RNTesterBlock');
|
||||
|
||||
|
|
@ -48,57 +49,46 @@ const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
|
|||
const IS_RTL = I18nManager.isRTL;
|
||||
|
||||
function ListItem(props) {
|
||||
return (
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
<View style={styles.column1}>
|
||||
<Image
|
||||
source={props.imageSource}
|
||||
style={styles.icon}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.column2}>
|
||||
<View style={styles.textBox}>
|
||||
<Text>
|
||||
Text
|
||||
Text
|
||||
Text
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.column3}>
|
||||
<View style={styles.smallButton}>
|
||||
<Text style={styles.fontSizeSmall}>
|
||||
Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
<View style={styles.column1}>
|
||||
<Image source={props.imageSource} style={styles.icon} />
|
||||
</View>
|
||||
<View style={styles.column2}>
|
||||
<View style={styles.textBox}>
|
||||
<Text>Text Text Text</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.column3}>
|
||||
<View style={styles.smallButton}>
|
||||
<Text style={styles.fontSizeSmall}>Button</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function TextAlignmentExample(props) {
|
||||
return (
|
||||
<RNTesterBlock
|
||||
title={props.title}
|
||||
description={props.description}>
|
||||
<View>
|
||||
<Text style={props.style}>
|
||||
Left-to-Right language without text alignment.
|
||||
</Text>
|
||||
<Text style={props.style}>
|
||||
{'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
|
||||
'\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
|
||||
'\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
|
||||
'\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
|
||||
</Text>
|
||||
<Text style={props.style}>
|
||||
{'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
|
||||
'\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
|
||||
'\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
|
||||
</Text>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
<RNTesterBlock title={props.title} description={props.description}>
|
||||
<View>
|
||||
<Text style={props.style}>
|
||||
Left-to-Right language without text alignment.
|
||||
</Text>
|
||||
<Text style={props.style}>
|
||||
{'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
|
||||
'\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
|
||||
'\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
|
||||
'\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
|
||||
</Text>
|
||||
<Text style={props.style}>
|
||||
{'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
|
||||
'\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
|
||||
'\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
|
||||
</Text>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
}
|
||||
|
||||
function AnimationBlock(props) {
|
||||
|
|
@ -114,6 +104,276 @@ function AnimationBlock(props) {
|
|||
);
|
||||
}
|
||||
|
||||
type RTLSwitcherComponentState = {|
|
||||
isRTL: boolean,
|
||||
|};
|
||||
|
||||
function withRTLState(Component) {
|
||||
return class extends React.Component<*, RTLSwitcherComponentState> {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.state = {
|
||||
isRTL: IS_RTL,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const setRTL = isRTL => this.setState({isRTL: isRTL});
|
||||
return <Component isRTL={this.state.isRTL} setRTL={setRTL} />;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const RTLToggler = ({isRTL, setRTL}) => {
|
||||
if (Platform.OS === 'android') {
|
||||
return <Text style={styles.rtlToggler}>{isRTL ? 'RTL' : 'LTR'}</Text>;
|
||||
}
|
||||
|
||||
const toggleRTL = () => setRTL(!isRTL);
|
||||
return (
|
||||
<Button
|
||||
onPress={toggleRTL}
|
||||
title={isRTL ? 'RTL' : 'LTR'}
|
||||
color="gray"
|
||||
accessibilityLabel="Change layout direction"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const PaddingExample = withRTLState(({isRTL, setRTL}) => {
|
||||
const color = 'teal';
|
||||
|
||||
return (
|
||||
<RNTesterBlock title={'Padding Start/End'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>paddingStart: 50,</Text>
|
||||
<Text>paddingEnd: 10</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The {color} is padding.</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
paddingStart: 50,
|
||||
paddingEnd: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: color,
|
||||
direction: isRTL ? 'rtl' : 'ltr',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
borderColor: 'gray',
|
||||
}}>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
const MarginExample = withRTLState(({isRTL, setRTL}) => {
|
||||
return (
|
||||
<RNTesterBlock title={'Margin Start/End'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>marginStart: 50,</Text>
|
||||
<Text>marginEnd: 10</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The green is margin.</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'green',
|
||||
borderWidth: 1,
|
||||
borderColor: 'green',
|
||||
direction: isRTL ? 'rtl' : 'ltr',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
marginStart: 50,
|
||||
marginEnd: 10,
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
borderColor: 'gray',
|
||||
}}>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
const PositionExample = withRTLState(({isRTL, setRTL}) => {
|
||||
return (
|
||||
<RNTesterBlock title={'Position Start/End'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>start: 50</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The orange is position.</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'orange',
|
||||
borderWidth: 1,
|
||||
borderColor: 'orange',
|
||||
direction: isRTL ? 'rtl' : 'ltr',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
start: 50,
|
||||
borderColor: 'gray',
|
||||
}}>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>end: 50</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<Text>The orange is position.</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'orange',
|
||||
borderWidth: 1,
|
||||
borderColor: 'orange',
|
||||
direction: isRTL ? 'rtl' : 'ltr',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
end: 50,
|
||||
borderColor: 'gray',
|
||||
}}>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderWidthExample = withRTLState(({isRTL, setRTL}) => {
|
||||
return (
|
||||
<RNTesterBlock title={'Border Width Start/End'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderStartWidth: 10,</Text>
|
||||
<Text>borderEndWidth: 50</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
|
||||
<View
|
||||
style={{
|
||||
borderStartWidth: 10,
|
||||
borderEndWidth: 50,
|
||||
}}>
|
||||
<View>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderColorExample = withRTLState(({isRTL, setRTL}) => {
|
||||
return (
|
||||
<RNTesterBlock title={'Border Color Start/End'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderStartColor: 'red',</Text>
|
||||
<Text>borderEndColor: 'green',</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
|
||||
<View
|
||||
style={{
|
||||
borderStartColor: 'red',
|
||||
borderEndColor: 'green',
|
||||
borderLeftWidth: 20,
|
||||
borderRightWidth: 20,
|
||||
padding: 10,
|
||||
}}>
|
||||
<View>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
|
||||
return (
|
||||
<RNTesterBlock title={'Border Radii Start/End'}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderTopStartRadius: 10,</Text>
|
||||
<Text>borderTopEndRadius: 20,</Text>
|
||||
<Text>borderBottomStartRadius: 30,</Text>
|
||||
<Text>borderBottomEndRadius: 40</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
|
||||
<View
|
||||
style={{
|
||||
borderWidth: 10,
|
||||
borderTopStartRadius: 10,
|
||||
borderTopEndRadius: 20,
|
||||
borderBottomStartRadius: 30,
|
||||
borderBottomEndRadius: 40,
|
||||
padding: 10,
|
||||
}}>
|
||||
<View>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
const BorderExample = withRTLState(({isRTL, setRTL}) => {
|
||||
return (
|
||||
<RNTesterBlock title={'Border '}>
|
||||
<Text style={styles.bold}>Styles</Text>
|
||||
<Text>borderStartColor: 'red',</Text>
|
||||
<Text>borderEndColor: 'green',</Text>
|
||||
<Text>borderStartWidth: 10,</Text>
|
||||
<Text>borderEndWidth: 50,</Text>
|
||||
<Text>borderTopStartRadius: 10,</Text>
|
||||
<Text>borderTopEndRadius: 20,</Text>
|
||||
<Text>borderBottomStartRadius: 30,</Text>
|
||||
<Text>borderBottomEndRadius: 40</Text>
|
||||
<Text />
|
||||
<Text style={styles.bold}>Demo: </Text>
|
||||
<View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
|
||||
<View
|
||||
style={{
|
||||
borderStartColor: 'red',
|
||||
borderEndColor: 'green',
|
||||
borderStartWidth: 10,
|
||||
borderEndWidth: 50,
|
||||
borderTopStartRadius: 10,
|
||||
borderTopEndRadius: 20,
|
||||
borderBottomStartRadius: 30,
|
||||
borderBottomEndRadius: 40,
|
||||
padding: 10,
|
||||
}}>
|
||||
<View>
|
||||
<RTLToggler setRTL={setRTL} isRTL={isRTL} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
);
|
||||
});
|
||||
|
||||
class RTLExample extends React.Component<any, State> {
|
||||
static title = 'RTLExample';
|
||||
static description = 'Examples to show how to apply components to RTL layout.';
|
||||
|
|
@ -127,9 +387,7 @@ class RTLExample extends React.Component<any, State> {
|
|||
this._panResponder = PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onPanResponderGrant: this._onPanResponderGrant,
|
||||
onPanResponderMove: Animated.event([
|
||||
null, {dx: pan.x, dy: pan.y},
|
||||
]),
|
||||
onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
|
||||
onPanResponderRelease: this._onPanResponderEnd,
|
||||
onPanResponderTerminate: this._onPanResponderEnd,
|
||||
});
|
||||
|
|
@ -149,9 +407,9 @@ class RTLExample extends React.Component<any, State> {
|
|||
style={[
|
||||
styles.container,
|
||||
// `direction` property is supported only on iOS now.
|
||||
Platform.OS === 'ios' ?
|
||||
{direction: this.state.isRTL ? 'rtl' : 'ltr'} :
|
||||
null
|
||||
Platform.OS === 'ios'
|
||||
? {direction: this.state.isRTL ? 'rtl' : 'ltr'}
|
||||
: null,
|
||||
]}
|
||||
onLayout={this._onLayout}>
|
||||
<RNTesterPage title={'Right-to-Left (RTL) UI Layout'}>
|
||||
|
|
@ -164,21 +422,20 @@ class RTLExample extends React.Component<any, State> {
|
|||
</RNTesterBlock>
|
||||
<RNTesterBlock title={'Quickly Test RTL Layout'}>
|
||||
<View style={styles.flexDirectionRow}>
|
||||
<Text style={styles.switchRowTextView}>
|
||||
forceRTL
|
||||
</Text>
|
||||
<Text style={styles.switchRowTextView}>forceRTL</Text>
|
||||
<View style={styles.switchRowSwitchView}>
|
||||
<Switch
|
||||
onValueChange={this._onDirectionChange}
|
||||
style={styles.rightAlignStyle}
|
||||
value={this.state.isRTL} />
|
||||
value={this.state.isRTL}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
<RNTesterBlock title={'A Simple List Item Layout'}>
|
||||
<View style={styles.list}>
|
||||
<ListItem imageSource={require('./Thumbnails/like.png')}/>
|
||||
<ListItem imageSource={require('./Thumbnails/poke.png')}/>
|
||||
<ListItem imageSource={require('./Thumbnails/like.png')} />
|
||||
<ListItem imageSource={require('./Thumbnails/poke.png')} />
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
<TextAlignmentExample
|
||||
|
|
@ -236,12 +493,19 @@ class RTLExample extends React.Component<any, State> {
|
|||
imgStyle={{
|
||||
transform: [
|
||||
{translateX: this.state.linear},
|
||||
{scaleX: IS_RTL ? -1 : 1}
|
||||
]
|
||||
{scaleX: IS_RTL ? -1 : 1},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</RNTesterBlock>
|
||||
<PaddingExample />
|
||||
<MarginExample />
|
||||
<PositionExample />
|
||||
<BorderWidthExample />
|
||||
<BorderColorExample />
|
||||
<BorderRadiiExample />
|
||||
<BorderExample />
|
||||
</RNTesterPage>
|
||||
</ScrollView>
|
||||
);
|
||||
|
|
@ -256,10 +520,11 @@ class RTLExample extends React.Component<any, State> {
|
|||
_onDirectionChange = () => {
|
||||
I18nManager.forceRTL(!this.state.isRTL);
|
||||
this.setState({isRTL: !this.state.isRTL});
|
||||
Alert.alert('Reload this page',
|
||||
'Please reload this page to change the UI direction! ' +
|
||||
'All examples in this app will be affected. ' +
|
||||
'Check them out to see what they look like in RTL layout.'
|
||||
Alert.alert(
|
||||
'Reload this page',
|
||||
'Please reload this page to change the UI direction! ' +
|
||||
'All examples in this app will be affected. ' +
|
||||
'Check them out to see what they look like in RTL layout.',
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -272,7 +537,7 @@ class RTLExample extends React.Component<any, State> {
|
|||
});
|
||||
const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
|
||||
const toMaxDistance =
|
||||
(IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
|
||||
(IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
|
||||
Animated.timing(this.state.linear, {
|
||||
toValue: this.state.toggleStatus[refName] ? toMaxDistance : 0,
|
||||
duration: 2000,
|
||||
|
|
@ -387,10 +652,10 @@ const styles = StyleSheet.create({
|
|||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
fontSizeSmall:{
|
||||
fontSizeSmall: {
|
||||
fontSize: 10,
|
||||
},
|
||||
fontSizeExtraSmall:{
|
||||
fontSizeExtraSmall: {
|
||||
fontSize: 8,
|
||||
},
|
||||
textAlignLeft: {
|
||||
|
|
@ -405,6 +670,15 @@ const styles = StyleSheet.create({
|
|||
flexDirectionRow: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
bold: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
rtlToggler: {
|
||||
color: 'gray',
|
||||
padding: 8,
|
||||
textAlign: 'center',
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = RTLExample;
|
||||
|
|
|
|||
Loading…
Reference in New Issue