crn-cli/commands/init/template/ios/CRNDemo/webapp/rn_CRNTester/js-diffs/666788.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]),E=r(d[7]),h=r(d[8]),R=r(d[9]),T=r(d[10]),y=T.Alert,b=T.Animated,f=T.I18nManager,L=T.Image,S=T.PixelRatio,p=T.StyleSheet,w=T.Text,x=T.TouchableWithoutFeedback,C=T.Switch,W=T.View,v=(T.Button,r(d[11]),S.get()),B=100*v,A=[B,B],k=f.isRTL;function D(t){return R.createElement(W,{style:Q.row},R.createElement(W,{style:Q.column1},R.createElement(L,{source:t.imageSource,style:Q.icon})),R.createElement(W,{style:Q.column2},R.createElement(W,{style:Q.textBox},R.createElement(w,null,"Text Text Text"))),R.createElement(W,{style:Q.column3},R.createElement(W,{style:Q.smallButton},R.createElement(w,{style:Q.fontSizeSmall},"Button"))))}var I=_(function(t){var n=t.isRTL,l=t.setRTL,o=h(t,["isRTL","setRTL"]);return R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n}),R.createElement(W,{style:K(n)},R.createElement(w,{style:o.style},"Left-to-Right language without text alignment."),R.createElement(w,{style:o.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"),R.createElement(w,{style:o.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")))}),z=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n}),R.createElement(W,{style:[Q.flexDirectionRow,K(n)]},R.createElement(W,null,R.createElement(L,{source:r(d[12]),style:Q.image}),R.createElement(w,{style:Q.fontSizeExtraSmall},"Without directional meaning")),R.createElement(W,{style:Q.rightAlignStyle},R.createElement(L,{source:r(d[13]),style:[Q.image,Q.withRTLStyle]}),R.createElement(w,{style:Q.fontSizeExtraSmall},"With directional meaning"))))});function V(t){return R.createElement(W,{style:Q.block},R.createElement(x,{onPress:t.onPress},R.createElement(b.Image,{style:[Q.img,t.imgStyle],source:r(d[13])})))}function _(t){return(function(n){function h(){var t,n;o(this,h);for(var l=arguments.length,c=new Array(l),E=0;E<l;E++)c[E]=arguments[E];return(n=s(this,(t=u(h)).call.apply(t,[this].concat(c)))).state={isRTL:k},n}return E(h,n),c(h,[{key:"render",value:function(){var n=this;return R.createElement(t,l({isRTL:this.state.isRTL,setRTL:function(t){return n.setState({isRTL:t})}},this.props))}}]),h})(R.Component)}var P=function(t){var n=t.isRTL;t.setRTL;return R.createElement(w,{style:Q.rtlToggler},n?'RTL':'LTR')},O=(function(t){function n(t){var l;return o(this,n),(l=s(this,u(n).call(this,t)))._onDirectionChange=function(){f.forceRTL(!l.state.isRTL),l.setState({isRTL:!l.state.isRTL}),y.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.")},l.state={isRTL:k},l}return E(n,t),c(n,[{key:"render",value:function(){return R.createElement(W,null,R.createElement(W,{style:Q.directionBox},R.createElement(w,{style:Q.directionText},this.state.isRTL?'Right-to-Left':'Left-to-Right')),R.createElement(W,{style:Q.flexDirectionRow},R.createElement(w,{style:Q.switchRowTextView},"forceRTL"),R.createElement(W,{style:Q.switchRowSwitchView},R.createElement(C,{onValueChange:this._onDirectionChange,style:Q.rightAlignStyle,value:this.state.isRTL}))))}}]),n})(R.Component),U=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n}),R.createElement(W,{style:[Q.list,K(n)]},R.createElement(D,{imageSource:r(d[12])}),R.createElement(D,{imageSource:r(d[13])})))}),X=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(M,{isRTL:n,setRTL:l})}),M=(function(l){function h(l){var c;return o(this,h),(c=s(this,u(h).call(this,l)))._onLayout=function(t){c.setState({windowWidth:t.nativeEvent.layout.width})},c._linearTap=function(l){c.setState({toggleStatus:n({},c.state.toggleStatus,t({},l,!c.state.toggleStatus[l]))});var o=A[0]/v/2+10,s=(c.props.isRTL?-1:1)*(c.state.windowWidth/2-o);b.timing(c.state.linear,{toValue:c.state.toggleStatus[l]?s:0,duration:2e3,useNativeDriver:!0}).start()},c.state={toggleStatus:{},linear:new b.Value(0),windowWidth:0},c}return E(h,l),c(h,[{key:"render",value:function(){return R.createElement(W,null,R.createElement(P,{setRTL:this.props.setRTL,isRTL:this.props.isRTL}),R.createElement(W,{style:Q.view,onLayout:this._onLayout},R.createElement(V,{onPress:this._linearTap,imgStyle:{transform:[{translateX:this.state.linear},{scaleX:this.props.isRTL?-1:1}]}})))}}]),h})(R.Component),j=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"paddingStart: 50,"),R.createElement(w,null,"paddingEnd: 10"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(w,null,"The ","teal"," is padding."),R.createElement(W,{style:{backgroundColor:"teal",paddingStart:50,paddingEnd:10,borderWidth:1,borderColor:"teal",direction:n?'rtl':'ltr'}},R.createElement(W,{style:{backgroundColor:'white',paddingTop:5,paddingBottom:5,borderLeftWidth:1,borderRightWidth:1,borderColor:'gray'}},R.createElement(P,{setRTL:l,isRTL:n}))))}),F=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"marginStart: 50,"),R.createElement(w,null,"marginEnd: 10"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(w,null,"The green is margin."),R.createElement(W,{style:{backgroundColor:'green',borderWidth:1,borderColor:'green',direction:n?'rtl':'ltr'}},R.createElement(W,{style:{backgroundColor:'white',paddingTop:5,paddingBottom:5,marginStart:50,marginEnd:10,borderLeftWidth:1,borderRightWidth:1,borderColor:'gray'}},R.createElement(P,{setRTL:l,isRTL:n}))))}),N=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"start: 50"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(w,null,"The orange is position."),R.createElement(W,{style:{backgroundColor:'orange',borderWidth:1,borderColor:'orange',direction:n?'rtl':'ltr'}},R.createElement(W,{style:{backgroundColor:'white',start:50,borderColor:'gray'}},R.createElement(P,{setRTL:l,isRTL:n}))),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"end: 50"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(w,null,"The orange is position."),R.createElement(W,{style:{backgroundColor:'orange',borderWidth:1,borderColor:'orange',direction:n?'rtl':'ltr'}},R.createElement(W,{style:{backgroundColor:'white',end:50,borderColor:'gray'}},R.createElement(P,{setRTL:l,isRTL:n}))))}),q=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"borderStartWidth: 10,"),R.createElement(w,null,"borderEndWidth: 50"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(W,{style:K(n)},R.createElement(W,{style:{borderStartWidth:10,borderEndWidth:50}},R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n})))))}),G=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"borderStartColor: 'red',"),R.createElement(w,null,"borderEndColor: 'green',"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(W,{style:K(n)},R.createElement(W,{style:{borderStartColor:'red',borderEndColor:'green',borderLeftWidth:20,borderRightWidth:20,padding:10}},R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n})))))}),H=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"borderTopStartRadius: 10,"),R.createElement(w,null,"borderTopEndRadius: 20,"),R.createElement(w,null,"borderBottomStartRadius: 30,"),R.createElement(w,null,"borderBottomEndRadius: 40"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(W,{style:K(n)},R.createElement(W,{style:{borderWidth:10,borderTopStartRadius:10,borderTopEndRadius:20,borderBottomStartRadius:30,borderBottomEndRadius:40,padding:10}},R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n})))))}),J=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Q.bold},"Styles"),R.createElement(w,null,"borderStartColor: 'red',"),R.createElement(w,null,"borderEndColor: 'green',"),R.createElement(w,null,"borderStartWidth: 10,"),R.createElement(w,null,"borderEndWidth: 50,"),R.createElement(w,null,"borderTopStartRadius: 10,"),R.createElement(w,null,"borderTopEndRadius: 20,"),R.createElement(w,null,"borderBottomStartRadius: 30,"),R.createElement(w,null,"borderBottomEndRadius: 40"),R.createElement(w,null),R.createElement(w,{style:Q.bold},"Demo: "),R.createElement(W,{style:K(n)},R.createElement(W,{style:{borderStartColor:'red',borderEndColor:'green',borderStartWidth:10,borderEndWidth:50,borderTopStartRadius:10,borderTopEndRadius:20,borderBottomStartRadius:30,borderBottomEndRadius:40,padding:10}},R.createElement(W,null,R.createElement(P,{setRTL:l,isRTL:n})))))}),K=function(t){return null},Q=p.create({container:{backgroundColor:'#e9eaed',paddingTop:15},directionBox:{flex:1,backgroundColor:'#f8f8f8',borderWidth:.5,borderColor:'black',marginBottom:15},directionText:{padding:10,fontSize:16,textAlign:'center',fontWeight:'bold'},switchRowTextView:{flex:1,marginBottom:5,marginTop:5,textAlign:'center'},switchRowSwitchView:{flex:3},rightAlignStyle:{right:10,position:'absolute'},list:{height:120,marginBottom:5,borderTopWidth:.5,borderLeftWidth:.5,borderRightWidth:.5,borderColor:'#e5e5e5'},row:{height:60,flexDirection:'row',borderBottomWidth:.5,borderColor:'#e5e5e5'},column1:{width:60},column2:{flex:2.5,padding:6},column3:{flex:1.5},icon:{width:48,height:48,margin:6,borderWidth:.5,borderColor:'#e5e5e5'},withRTLStyle:{transform:[{scaleX:k?-1:1}]},image:{left:30,width:48,height:48},img:{width:A[0]/v,height:A[1]/v},view:{flex:1},block:{padding:10,alignItems:'center'},smallButton:{top:18,borderRadius:5,height:24,width:64,backgroundColor:'#e5e5e5',justifyContent:'center',alignItems:'center'},fontSizeSmall:{fontSize:10},fontSizeExtraSmall:{fontSize:8},textAlignLeft:{textAlign:'left'},textAlignRight:{textAlign:'right'},textBox:{width:28},flexDirectionRow:{flexDirection:'row'},bold:{fontWeight:'bold'},rtlToggler:{color:'gray',padding:8,textAlign:'center',fontWeight:'500'}});e.title='RTLExample',e.description='Examples to show how to apply components to RTL layout.',e.examples=[{title:'Current Layout Direction',render:function(){return R.createElement(O,null)}},{title:'A Simple List Item Layout',render:function(){return R.createElement(U,null)}},{title:'Default Text Alignment',description:"In iOS, it depends on active language. In Android, it depends on the text content.",render:function(){return R.createElement(I,{style:Q.fontSizeSmall})}},{title:"Using textAlign: 'left'",description:"In iOS/Android, text alignment flips regardless of languages or text content.",render:function(){return R.createElement(I,{style:[Q.fontSizeSmall,Q.textAlignLeft]})}},{title:"Using textAlign: 'right'",description:"In iOS/Android, text alignment flips regardless of languages or text content.",render:function(){return R.createElement(I,{style:[Q.fontSizeSmall,Q.textAlignRight]})}},{title:'Working With Icons',render:function(){return R.createElement(z,null)}},{title:'Controlling Animation',description:'Animation direction according to layout',render:function(){return R.createElement(X,null)}},{title:'Padding Start/End',render:function(){return R.createElement(j,null)}},{title:'Margin Start/End',render:function(){return R.createElement(F,null)}},{title:'Position Start/End',render:function(){return R.createElement(N,null)}},{title:'Border Width Start/End',render:function(){return R.createElement(q,null)}},{title:'Border Color Start/End',render:function(){return R.createElement(G,null)}},{title:'Border Radii Start/End',render:function(){return R.createElement(H,null)}},{title:'Border',render:function(){return R.createElement(J,null)}}]},666788,[52,51,14,3,4,5,8,9,22,11,15,356,666691,666700]);