crn-cli/commands/init/template/ios/CRNDemo/webapp/rn_CRNTester/js-modules/666744.js

The Ctrip React Native CLI Tools

__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),n=r(d[1]),l=r(d[2]),o=r(d[3]),c=r(d[4]),s=r(d[5]),u=r(d[6]),y=u.StyleSheet,h=u.Text,E=u.View,f=r(d[7]);e.title='<View>',e.description="Basic building block of all UI, examples that demonstrate some of the many styles available.",e.displayName='ViewExample',e.examples=[{title:'Background Color',render:function(){return s.createElement(E,{style:{backgroundColor:'#527FE4',padding:5}},s.createElement(h,{style:{fontSize:11}},"Blue background"))}},{title:'Border',render:function(){return s.createElement(E,{style:{borderColor:'#527FE4',borderWidth:5,padding:10}},s.createElement(h,{style:{fontSize:11}},"5px blue border"))}},{title:'Padding/Margin',render:function(){var t=y.create({box:{backgroundColor:'#527FE4',borderColor:'#000033',borderWidth:1}});return s.createElement(E,{style:{borderColor:'#bb0000',borderWidth:.5}},s.createElement(E,{style:[t.box,{padding:5}]},s.createElement(h,{style:{fontSize:11}},"5px padding")),s.createElement(E,{style:[t.box,{margin:5}]},s.createElement(h,{style:{fontSize:11}},"5px margin")),s.createElement(E,{style:[t.box,{margin:5,padding:5,alignSelf:'flex-start'}]},s.createElement(h,{style:{fontSize:11}},"5px margin and padding,"),s.createElement(h,{style:{fontSize:11}},"widthAutonomous=true")))}},{title:'Border Radius',render:function(){return s.createElement(E,{style:{borderWidth:.5,borderRadius:5,padding:5}},s.createElement(h,{style:{fontSize:11}},"Too much use of `borderRadius` (especially large radii) on anything which is scrolling may result in dropped frames. Use sparingly."))}},{title:'Border Style',render:function(){var u=(function(u){function y(){var n,c;t(this,y);for(var s=arguments.length,u=new Array(s),h=0;h<s;h++)u[h]=arguments[h];return(c=l(this,(n=o(y)).call.apply(n,[this].concat(u)))).state={showBorder:!0},c._handlePress=function(){c.setState({showBorder:!c.state.showBorder})},c}return c(y,u),n(y,[{key:"render",value:function(){return s.createElement(f,{onPress:this._handlePress},s.createElement(E,null,s.createElement(E,{style:[{borderWidth:1,padding:5},this.state.showBorder?{borderStyle:'dashed'}:null]},s.createElement(h,{style:{fontSize:11}},"Dashed border style")),s.createElement(E,{style:[{marginTop:5,borderWidth:1,borderRadius:5,padding:5},this.state.showBorder?{borderStyle:'dotted'}:null]},s.createElement(h,{style:{fontSize:11}},"Dotted border style"))))}}]),y})(s.Component);return s.createElement(u,null)}},{title:'Circle with Border Radius',render:function(){return s.createElement(E,{style:{borderRadius:10,borderWidth:1,width:20,height:20}})}},{title:'Overflow',render:function(){var t=y.create({container:{borderWidth:y.hairlineWidth,height:12,marginBottom:8,marginEnd:16,width:95},content:{height:20,width:200}});return s.createElement(E,{style:{flexDirection:'row'}},s.createElement(E,{style:t.container},s.createElement(E,{style:[y.absoluteFill]},s.createElement(h,{style:t.content},"undefined"))),s.createElement(E,{style:t.container},s.createElement(E,{style:[y.absoluteFill,{overflow:'hidden'}]},s.createElement(h,{style:t.content},"hidden"))),s.createElement(E,{style:t.container},s.createElement(E,{style:[y.absoluteFill,{overflow:'visible'}]},s.createElement(h,{style:t.content},"visible"))))}},{title:'Opacity',render:function(){return s.createElement(E,null,s.createElement(E,{style:{opacity:0}},s.createElement(h,null,"Opacity 0")),s.createElement(E,{style:{opacity:.1}},s.createElement(h,null,"Opacity 0.1")),s.createElement(E,{style:{opacity:.3}},s.createElement(h,null,"Opacity 0.3")),s.createElement(E,{style:{opacity:.5}},s.createElement(h,null,"Opacity 0.5")),s.createElement(E,{style:{opacity:.7}},s.createElement(h,null,"Opacity 0.7")),s.createElement(E,{style:{opacity:.9}},s.createElement(h,null,"Opacity 0.9")),s.createElement(E,{style:{opacity:1}},s.createElement(h,null,"Opacity 1")))}},{title:'ZIndex',render:function(){var u=y.create({zIndex:{justifyContent:'space-around',width:100,height:50,marginTop:-10}}),p=(function(y){function p(){var n,c;t(this,p);for(var s=arguments.length,u=new Array(s),y=0;y<s;y++)u[y]=arguments[y];return(c=l(this,(n=o(p)).call.apply(n,[this].concat(u)))).state={flipped:!1},c._handlePress=function(){c.setState({flipped:!c.state.flipped})},c}return c(p,y),n(p,[{key:"render",value:function(){var t=this.state.flipped?[-1,0,1,2]:[2,1,0,-1];return s.createElement(f,{onPress:this._handlePress},s.createElement(E,null,s.createElement(h,{style:{paddingBottom:10}},"Tap to flip sorting order"),s.createElement(E,{style:[u.zIndex,{marginTop:0,backgroundColor:'#E57373',zIndex:t[0]}]},s.createElement(h,null,"ZIndex ",t[0])),s.createElement(E,{style:[u.zIndex,{marginLeft:50,backgroundColor:'#FFF176',zIndex:t[1]}]},s.createElement(h,null,"ZIndex ",t[1])),s.createElement(E,{style:[u.zIndex,{marginLeft:100,backgroundColor:'#81C784',zIndex:t[2]}]},s.createElement(h,null,"ZIndex ",t[2])),s.createElement(E,{style:[u.zIndex,{marginLeft:150,backgroundColor:'#64B5F6',zIndex:t[3]}]},s.createElement(h,null,"ZIndex ",t[3]))))}}]),p})(s.Component);return s.createElement(p,null)}},{title:'BackfaceVisibility',render:function(){return s.createElement(s.Fragment,null,s.createElement(h,{style:{paddingBottom:10}},"View #1, front is visible, back is hidden."),s.createElement(E,{style:{justifyContent:'center',alignItems:'center'}},s.createElement(E,{style:{height:200,width:200,justifyContent:'center',alignItems:'center',backgroundColor:'blue',backfaceVisibility:'hidden'}},s.createElement(h,null,"Front")),s.createElement(E,{style:{height:200,width:200,justifyContent:'center',alignItems:'center',backgroundColor:'red',backfaceVisibility:'hidden',transform:[{rotateY:'180deg'}],position:'absolute',top:0}},s.createElement(h,null,"Back (You should not see this)"))),s.createElement(h,{style:{paddingVertical:10}},"View #2, front is hidden, back is visible."),s.createElement(E,{style:{justifyContent:'center',alignItems:'center'}},s.createElement(E,{style:{height:200,width:200,justifyContent:'center',alignItems:'center',backgroundColor:'blue',backfaceVisibility:'hidden'}},s.createElement(h,null,"Front (You should not see this)")),s.createElement(E,{style:{height:200,width:200,justifyContent:'center',alignItems:'center',backgroundColor:'red',backfaceVisibility:'hidden',position:'absolute',top:0}},s.createElement(h,null,"Back"))))}}]},666744,[3,4,5,8,9,11,15,255]);