crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 12.5 kB
JavaScript
__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]),y=r(d[10]),T=y.Alert,b=y.Animated,f=y.I18nManager,L=y.Image,S=y.PixelRatio,p=y.StyleSheet,w=y.Text,x=y.TouchableWithoutFeedback,C=y.Switch,W=y.View,v=y.Button,B=(r(d[11]),S.get()),A=100*B,k=[A,A],D=f.isRTL;function I(t){return R.createElement(W,{style:Y.row},R.createElement(W,{style:Y.column1},R.createElement(L,{source:t.imageSource,style:Y.icon})),R.createElement(W,{style:Y.column2},R.createElement(W,{style:Y.textBox},R.createElement(w,null,"Text Text Text"))),R.createElement(W,{style:Y.column3},R.createElement(W,{style:Y.smallButton},R.createElement(w,{style:Y.fontSizeSmall},"Button"))))}var z=_(function(t){var n=t.isRTL,l=t.setRTL,o=h(t,["isRTL","setRTL"]);return R.createElement(W,null,R.createElement(O,{setRTL:l,isRTL:n}),R.createElement(W,{style:Q(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")))}),P=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(O,{setRTL:l,isRTL:n}),R.createElement(W,{style:[Y.flexDirectionRow,Q(n)]},R.createElement(W,null,R.createElement(L,{source:r(d[12]),style:Y.image}),R.createElement(w,{style:Y.fontSizeExtraSmall},"Without directional meaning")),R.createElement(W,{style:Y.rightAlignStyle},R.createElement(L,{source:r(d[13]),style:[Y.image,Y.withRTLStyle]}),R.createElement(w,{style:Y.fontSizeExtraSmall},"With directional meaning"))))});function V(t){return R.createElement(W,{style:Y.block},R.createElement(x,{onPress:t.onPress},R.createElement(b.Image,{style:[Y.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:D},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 O=function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(v,{onPress:function(){return l(!n)},title:n?'RTL':'LTR',color:"gray",accessibilityLabel:"Change layout direction"})},U=(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}),T.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:D},l}return E(n,t),c(n,[{key:"render",value:function(){return R.createElement(W,null,R.createElement(W,{style:Y.directionBox},R.createElement(w,{style:Y.directionText},this.state.isRTL?'Right-to-Left':'Left-to-Right')),R.createElement(W,{style:Y.flexDirectionRow},R.createElement(w,{style:Y.switchRowTextView},"forceRTL"),R.createElement(W,{style:Y.switchRowSwitchView},R.createElement(C,{onValueChange:this._onDirectionChange,style:Y.rightAlignStyle,value:this.state.isRTL}))))}}]),n})(R.Component),X=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(O,{setRTL:l,isRTL:n}),R.createElement(W,{style:[Y.list,Q(n)]},R.createElement(I,{imageSource:r(d[12])}),R.createElement(I,{imageSource:r(d[13])})))}),M=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(j,{isRTL:n,setRTL:l})}),j=(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=k[0]/B/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(O,{setRTL:this.props.setRTL,isRTL:this.props.isRTL}),R.createElement(W,{style:Y.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),F=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.bold},"Styles"),R.createElement(w,null,"paddingStart: 50,"),R.createElement(w,null,"paddingEnd: 10"),R.createElement(w,null),R.createElement(w,{style:Y.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(O,{setRTL:l,isRTL:n}))))}),N=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.bold},"Styles"),R.createElement(w,null,"marginStart: 50,"),R.createElement(w,null,"marginEnd: 10"),R.createElement(w,null),R.createElement(w,{style:Y.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(O,{setRTL:l,isRTL:n}))))}),q=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.bold},"Styles"),R.createElement(w,null,"start: 50"),R.createElement(w,null),R.createElement(w,{style:Y.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(O,{setRTL:l,isRTL:n}))),R.createElement(w,null),R.createElement(w,{style:Y.bold},"Styles"),R.createElement(w,null,"end: 50"),R.createElement(w,null),R.createElement(w,{style:Y.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(O,{setRTL:l,isRTL:n}))))}),G=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.bold},"Styles"),R.createElement(w,null,"borderStartWidth: 10,"),R.createElement(w,null,"borderEndWidth: 50"),R.createElement(w,null),R.createElement(w,{style:Y.bold},"Demo: "),R.createElement(W,{style:Q(n)},R.createElement(W,{style:{borderStartWidth:10,borderEndWidth:50}},R.createElement(W,null,R.createElement(O,{setRTL:l,isRTL:n})))))}),H=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.bold},"Styles"),R.createElement(w,null,"borderStartColor: 'red',"),R.createElement(w,null,"borderEndColor: 'green',"),R.createElement(w,null),R.createElement(w,{style:Y.bold},"Demo: "),R.createElement(W,{style:Q(n)},R.createElement(W,{style:{borderStartColor:'red',borderEndColor:'green',borderLeftWidth:20,borderRightWidth:20,padding:10}},R.createElement(W,null,R.createElement(O,{setRTL:l,isRTL:n})))))}),J=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.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:Y.bold},"Demo: "),R.createElement(W,{style:Q(n)},R.createElement(W,{style:{borderWidth:10,borderTopStartRadius:10,borderTopEndRadius:20,borderBottomStartRadius:30,borderBottomEndRadius:40,padding:10}},R.createElement(W,null,R.createElement(O,{setRTL:l,isRTL:n})))))}),K=_(function(t){var n=t.isRTL,l=t.setRTL;return R.createElement(W,null,R.createElement(w,{style:Y.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:Y.bold},"Demo: "),R.createElement(W,{style:Q(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(O,{setRTL:l,isRTL:n})))))}),Q=function(t){return{direction:t?'rtl':'ltr'}},Y=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:D?-1:1}]},image:{left:30,width:48,height:48},img:{width:k[0]/B,height:k[1]/B},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(U,null)}},{title:'A Simple List Item Layout',render:function(){return R.createElement(X,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(z,{style:Y.fontSizeSmall})}},{title:"Using textAlign: 'left'",description:"In iOS/Android, text alignment flips regardless of languages or text content.",render:function(){return R.createElement(z,{style:[Y.fontSizeSmall,Y.textAlignLeft]})}},{title:"Using textAlign: 'right'",description:"In iOS/Android, text alignment flips regardless of languages or text content.",render:function(){return R.createElement(z,{style:[Y.fontSizeSmall,Y.textAlignRight]})}},{title:'Working With Icons',render:function(){return R.createElement(P,null)}},{title:'Controlling Animation',description:'Animation direction according to layout',render:function(){return R.createElement(M,null)}},{title:'Padding Start/End',render:function(){return R.createElement(F,null)}},{title:'Margin Start/End',render:function(){return R.createElement(N,null)}},{title:'Position Start/End',render:function(){return R.createElement(q,null)}},{title:'Border Width Start/End',render:function(){return R.createElement(G,null)}},{title:'Border Color Start/End',render:function(){return R.createElement(H,null)}},{title:'Border Radii Start/End',render:function(){return R.createElement(J,null)}},{title:'Border',render:function(){return R.createElement(K,null)}}]},666788,[52,51,14,3,4,5,8,9,22,11,15,53,666691,666700]);