UNPKG

crn-cli

Version:

The Ctrip React Native CLI Tools

1 lines 17.4 kB
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),l=r(d[1]),n=r(d[2]),o=r(d[3]),c=r(d[4]),s=r(d[5]),f=r(d[6]),u=f.Image,E=f.StyleSheet,y=f.Text,h=f.View,b=r(d[7]),p=r(d[8]),S=r(d[9]),x=(function(f){function u(){return t(this,u),n(this,o(u).apply(this,arguments))}return c(u,f),l(u,[{key:"render",value:function(){return s.createElement(y,{style:{fontWeight:'bold',color:'#527fe4'}},this.props.children)}}]),u})(s.Component),w=(function(f){function u(){var l,c;t(this,u);for(var s=arguments.length,f=new Array(s),E=0;E<s;E++)f[E]=arguments[E];return(c=n(this,(l=o(u)).call.apply(l,[this].concat(f)))).state={fontWeight:'bold',fontSize:15},c.toggleWeight=function(){c.setState({fontWeight:'bold'===c.state.fontWeight?'normal':'bold'})},c.increaseSize=function(){c.setState({fontSize:c.state.fontSize+1})},c}return c(u,f),l(u,[{key:"render",value:function(){var t={fontWeight:this.state.fontWeight,fontSize:this.state.fontSize};return s.createElement(h,null,s.createElement(y,{style:t},"Tap the controls below to change attributes."),s.createElement(y,null,s.createElement(y,null,"See how it will even work on",' ',s.createElement(y,{style:t},"this nested text"))),s.createElement(y,null,s.createElement(y,{onPress:this.toggleWeight},"Toggle Weight"),' (with highlight onPress)'),s.createElement(y,{onPress:this.increaseSize,suppressHighlighting:!0},"Increase Size (suppressHighlighting true)"))}}]),u})(s.Component),T=(function(f){function E(){return t(this,E),n(this,o(E).apply(this,arguments))}return c(E,f),l(E,[{key:"render",value:function(){return s.createElement(p,{title:"<Text>"},s.createElement(b,{title:"Wrap"},s.createElement(y,null,"The text should wrap if it goes on multiple lines. See, this is going to the next line.")),s.createElement(b,{title:"Padding"},s.createElement(y,{style:{padding:10}},"This text is indented by 10px padding on all sides.")),s.createElement(b,{title:"Text metrics legend"},s.createElement(S,null)),s.createElement(b,{title:"Font Family"},s.createElement(y,{style:{fontFamily:'sans-serif'}},"Sans-Serif"),s.createElement(y,{style:{fontFamily:'sans-serif',fontWeight:'bold'}},"Sans-Serif Bold"),s.createElement(y,{style:{fontFamily:'serif'}},"Serif"),s.createElement(y,{style:{fontFamily:'serif',fontWeight:'bold'}},"Serif Bold"),s.createElement(y,{style:{fontFamily:'monospace'}},"Monospace"),s.createElement(y,{style:{fontFamily:'monospace',fontWeight:'bold'}},"Monospace Bold (After 5.0)")),s.createElement(b,{title:"Android Material Design fonts"},s.createElement(h,{style:{flexDirection:'row',alignItems:'flex-start'}},s.createElement(h,{style:{flex:1}},s.createElement(y,{style:{fontFamily:'sans-serif'}},"Roboto Regular"),s.createElement(y,{style:{fontFamily:'sans-serif',fontStyle:'italic'}},"Roboto Italic"),s.createElement(y,{style:{fontFamily:'sans-serif',fontWeight:'bold'}},"Roboto Bold"),s.createElement(y,{style:{fontFamily:'sans-serif',fontStyle:'italic',fontWeight:'bold'}},"Roboto Bold Italic"),s.createElement(y,{style:{fontFamily:'sans-serif-light'}},"Roboto Light"),s.createElement(y,{style:{fontFamily:'sans-serif-light',fontStyle:'italic'}},"Roboto Light Italic"),s.createElement(y,{style:{fontFamily:'sans-serif-thin'}},"Roboto Thin (After 4.2)"),s.createElement(y,{style:{fontFamily:'sans-serif-thin',fontStyle:'italic'}},"Roboto Thin Italic (After 4.2)"),s.createElement(y,{style:{fontFamily:'sans-serif-condensed'}},"Roboto Condensed"),s.createElement(y,{style:{fontFamily:'sans-serif-condensed',fontStyle:'italic'}},"Roboto Condensed Italic"),s.createElement(y,{style:{fontFamily:'sans-serif-condensed',fontWeight:'bold'}},"Roboto Condensed Bold"),s.createElement(y,{style:{fontFamily:'sans-serif-condensed',fontStyle:'italic',fontWeight:'bold'}},"Roboto Condensed Bold Italic"),s.createElement(y,{style:{fontFamily:'sans-serif-medium'}},"Roboto Medium (After 5.0)"),s.createElement(y,{style:{fontFamily:'sans-serif-medium',fontStyle:'italic'}},"Roboto Medium Italic (After 5.0)")))),s.createElement(b,{title:"Custom Fonts"},s.createElement(h,{style:{flexDirection:'row',alignItems:'flex-start'}},s.createElement(h,{style:{flex:1}},s.createElement(y,{style:{fontFamily:'notoserif'}},"NotoSerif Regular"),s.createElement(y,{style:{fontFamily:'notoserif',fontStyle:'italic',fontWeight:'bold'}},"NotoSerif Bold Italic"),s.createElement(y,{style:{fontFamily:'notoserif',fontStyle:'italic'}},"NotoSerif Italic (Missing Font file)")))),s.createElement(b,{title:"Font Size"},s.createElement(y,{style:{fontSize:23}},"Size 23"),s.createElement(y,{style:{fontSize:8}},"Size 8")),s.createElement(b,{title:"Color"},s.createElement(y,{style:{color:'red'}},"Red color"),s.createElement(y,{style:{color:'blue'}},"Blue color")),s.createElement(b,{title:"Font Weight"},s.createElement(y,{style:{fontWeight:'bold'}},"Move fast and be bold"),s.createElement(y,{style:{fontWeight:'normal'}},"Move fast and be bold")),s.createElement(b,{title:"Font Style"},s.createElement(y,{style:{fontStyle:'italic'}},"Move fast and be bold"),s.createElement(y,{style:{fontStyle:'normal'}},"Move fast and be bold")),s.createElement(b,{title:"Font Style and Weight"},s.createElement(y,{style:{fontStyle:'italic',fontWeight:'bold'}},"Move fast and be bold")),s.createElement(b,{title:"Text Decoration"},s.createElement(y,{style:{textDecorationLine:'underline'}},"Solid underline"),s.createElement(y,{style:{textDecorationLine:'none'}},"None textDecoration"),s.createElement(y,{style:{textDecorationLine:'line-through',textDecorationStyle:'solid'}},"Solid line-through"),s.createElement(y,{style:{textDecorationLine:'underline line-through'}},"Both underline and line-through"),s.createElement(y,null,"Mixed text with",' ',s.createElement(y,{style:{textDecorationLine:'underline'}},"underline")," and",' ',s.createElement(y,{style:{textDecorationLine:'line-through'}},"line-through"),' ',"text nodes")),s.createElement(b,{title:"Nested"},s.createElement(y,{onPress:function(){}},"(Normal text,",s.createElement(y,{style:{color:'red',fontWeight:'bold'}},"(R)red",s.createElement(y,{style:{color:'green',fontWeight:'normal'}},"(G)green",s.createElement(y,{style:{color:'blue',fontWeight:'bold'}},"(B)blue",s.createElement(y,{style:{color:'cyan',fontWeight:'normal'}},"(C)cyan",s.createElement(y,{style:{color:'magenta',fontWeight:'bold'}},"(M)magenta",s.createElement(y,{style:{color:'yellow',fontWeight:'normal'}},"(Y)yellow",s.createElement(y,{style:{color:'black',fontWeight:'bold'}},"(K)black"))))))),s.createElement(y,{style:{fontWeight:'bold'},onPress:function(){}},"(and bold",s.createElement(y,{style:{fontStyle:'italic',fontSize:11,color:'#527fe4'},onPress:function(){}},"(and tiny bold italic blue",s.createElement(y,{style:{fontWeight:'normal',fontStyle:'normal'},onPress:function(){}},"(and tiny normal blue)"),")"),")"),")"),s.createElement(y,{style:{fontFamily:'serif'},onPress:function(){}},"(Serif",s.createElement(y,{style:{fontStyle:'italic',fontWeight:'bold'},onPress:function(){}},"(Serif Bold Italic",s.createElement(y,{style:{fontFamily:'monospace',fontStyle:'normal',fontWeight:'normal'},onPress:function(){}},"(Monospace Normal",s.createElement(y,{style:{fontFamily:'sans-serif',fontWeight:'bold'},onPress:function(){}},"(Sans-Serif Bold",s.createElement(y,{style:{fontWeight:'normal'},onPress:function(){}},"(and Sans-Serif Normal)"),")"),")"),")"),")"),s.createElement(y,{style:{fontSize:12}},s.createElement(x,null,"Entity Name"))),s.createElement(b,{title:"Text Align"},s.createElement(y,null,"auto (default) - english LTR"),s.createElement(y,null,"\u0623\u062d\u0628 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 auto (default) - arabic RTL"),s.createElement(y,{style:{textAlign:'left'}},"left left left left left left left left left left left left left left left"),s.createElement(y,{style:{textAlign:'center'}},"center center center center center center center center center center center"),s.createElement(y,{style:{textAlign:'right'}},"right right right right right right right right right right right right right"),s.createElement(y,{style:{textAlign:'justify'}},"justify (works when api level >= 26 otherwise fallbacks to \"left\"): this text component","'","s contents are laid out with \"textAlign: justify\" and as you can see all of the lines except the last one span the available width of the parent container.")),s.createElement(b,{title:"Unicode"},s.createElement(h,null,s.createElement(h,{style:{flexDirection:'row'}},s.createElement(y,{style:{backgroundColor:'red'}},"\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002")),s.createElement(h,null,s.createElement(y,{style:{backgroundColor:'red'}},"\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002")),s.createElement(h,{style:{alignItems:'center'}},s.createElement(y,{style:{backgroundColor:'red'}},"\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002")),s.createElement(h,null,s.createElement(y,{style:{backgroundColor:'red'}},"\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002\u661f\u9645\u4e89\u9738\u662f\u4e16\u754c\u4e0a\u6700\u597d\u7684\u6e38\u620f\u3002")))),s.createElement(b,{title:"Spaces"},s.createElement(y,null,"A ",'generated'," ",'string'," and some \xa0\xa0\xa0 spaces")),s.createElement(b,{title:"Line Height"},s.createElement(y,{style:{lineHeight:35}},"Holisticly formulate inexpensive ideas before best-of-breed benefits. ",s.createElement(y,{style:{fontSize:20}},"Continually")," expedite magnetic potentialities rather than client-focused interfaces.")),s.createElement(b,{title:"Letter Spacing"},s.createElement(h,null,s.createElement(y,{style:{letterSpacing:0}},"letterSpacing = 0"),s.createElement(y,{style:{letterSpacing:2,marginTop:5}},"letterSpacing = 2"),s.createElement(y,{style:{letterSpacing:9,marginTop:5}},"letterSpacing = 9"),s.createElement(h,{style:{flexDirection:'row'}},s.createElement(y,{style:{fontSize:12,letterSpacing:2,backgroundColor:'fuchsia',marginTop:5}},"With size and background color")),s.createElement(y,{style:{letterSpacing:-1,marginTop:5}},"letterSpacing = -1"),s.createElement(y,{style:{letterSpacing:3,backgroundColor:'#dddddd',marginTop:5}},"[letterSpacing = 3]",s.createElement(y,{style:{letterSpacing:0,backgroundColor:'#bbbbbb'}},"[Nested letterSpacing = 0]"),s.createElement(y,{style:{letterSpacing:6,backgroundColor:'#eeeeee'}},"[Nested letterSpacing = 6]")))),s.createElement(b,{title:"Empty Text"},s.createElement(y,null)),s.createElement(b,{title:"Toggling Attributes"},s.createElement(w,null)),s.createElement(b,{title:"backgroundColor attribute"},s.createElement(y,{style:{backgroundColor:'#ffaaaa'}},"Red background,",s.createElement(y,{style:{backgroundColor:'#aaaaff'}},' ',"blue background,",s.createElement(y,null,' ',"inherited blue background,",s.createElement(y,{style:{backgroundColor:'#aaffaa'}},' ',"nested green background.")))),s.createElement(y,{style:{backgroundColor:'rgba(100, 100, 100, 0.3)'}},"Same alpha as background,",s.createElement(y,null,"Inherited alpha from background,",s.createElement(y,{style:{backgroundColor:'rgba(100, 100, 100, 0.3)'}},"Reapply alpha")))),s.createElement(b,{title:"containerBackgroundColor attribute"},s.createElement(h,{style:{flexDirection:'row',height:85}},s.createElement(h,{style:{backgroundColor:'#ffaaaa',width:150}}),s.createElement(h,{style:{backgroundColor:'#aaaaff',width:150}})),s.createElement(y,{style:[k.backgroundColorText,{top:-80}]},"Default containerBackgroundColor (inherited) + backgroundColor wash"),s.createElement(y,{style:[k.backgroundColorText,{top:-70,backgroundColor:'transparent'}]},"containerBackgroundColor: 'transparent' + backgroundColor wash")),s.createElement(b,{title:"numberOfLines attribute"},s.createElement(y,{numberOfLines:1},"Maximum of one line no matter now much I write here. If I keep writing it","'","ll just truncate after one line"),s.createElement(y,{numberOfLines:2,style:{marginTop:20}},"Maximum of two lines no matter now much I write here. If I keep writing it","'","ll just truncate after two lines"),s.createElement(y,{style:{marginTop:20}},"No maximum lines specified no matter now much I write here. If I keep writing it","'","ll just keep going and going")),s.createElement(b,{title:"allowFontScaling attribute"},s.createElement(y,null,"By default, text will respect Text Size accessibility setting on Android. It means that all font sizes will be increased or decreased depending on the value of the Text Size setting in the OS's Settings app."),s.createElement(y,{style:{marginTop:10}},"You can disable scaling for your Text component by passing ",'"',"allowFontScaling=",'{',"false",'}"'," prop."),s.createElement(y,{allowFontScaling:!1,style:{marginTop:20,fontSize:15}},"This text will not scale.",' ',s.createElement(y,{style:{fontSize:15}},"This text also won't scale because it inherits \"allowFontScaling\" from its parent."))),s.createElement(b,{title:"selectable attribute"},s.createElement(y,{selectable:!0},"This text is selectable if you click-and-hold, and will offer the native Android selection menus.")),s.createElement(b,{title:"selectionColor attribute"},s.createElement(y,{selectable:!0,selectionColor:"orange"},"This text will have a orange highlight on selection.")),s.createElement(b,{title:"Inline images"},s.createElement(y,null,"This text contains an inline image",' ',s.createElement(u,{source:r(d[10])}),". Neat, huh?")),s.createElement(b,{title:"Text shadow"},s.createElement(y,{style:{fontSize:20,textShadowOffset:{width:2,height:2},textShadowRadius:1,textShadowColor:'#00cccc'}},"Demo text shadow")),s.createElement(b,{title:"Ellipsize mode"},s.createElement(y,{numberOfLines:1},"This very long text should be truncated with dots in the end."),s.createElement(y,{ellipsizeMode:"middle",numberOfLines:1},"This very long text should be truncated with dots in the middle."),s.createElement(y,{ellipsizeMode:"head",numberOfLines:1},"This very long text should be truncated with dots in the beginning."),s.createElement(y,{ellipsizeMode:"clip",numberOfLines:1},"This very long text should be clipped and this will not be visible.")),s.createElement(b,{title:"Include Font Padding"},s.createElement(h,{style:{flexDirection:'row',justifyContent:'space-around',marginBottom:10}},s.createElement(h,{style:{alignItems:'center'}},s.createElement(y,{style:k.includeFontPaddingText},"Ey"),s.createElement(y,null,"Default")),s.createElement(h,{style:{alignItems:'center'}},s.createElement(y,{style:[k.includeFontPaddingText,{includeFontPadding:!1,marginLeft:10}]},"Ey"),s.createElement(y,null,"includeFontPadding: false"))),s.createElement(y,null,"By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.")),s.createElement(b,{title:"Text transform"},s.createElement(y,{style:{textTransform:'uppercase'}},"This text should be uppercased."),s.createElement(y,{style:{textTransform:'lowercase'}},"This TEXT SHOULD be lowercased."),s.createElement(y,{style:{textTransform:'capitalize'}},"This text should be CAPITALIZED."),s.createElement(y,{style:{textTransform:'capitalize'}},"Mixed: ",s.createElement(y,{style:{textTransform:'uppercase'}},"uppercase "),s.createElement(y,{style:{textTransform:'lowercase'}},"LoWeRcAsE "),s.createElement(y,{style:{textTransform:'capitalize'}},"capitalize each word")),s.createElement(y,null,"Should be \"ABC\":",s.createElement(y,{style:{textTransform:'uppercase'}},"a",s.createElement(y,null,"b"),"c")),s.createElement(y,null,"Should be \"AbC\":",s.createElement(y,{style:{textTransform:'uppercase'}},"a",s.createElement(y,{style:{textTransform:'none'}},"b"),"c")),s.createElement(y,{style:{textTransform:'none'}},'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n\u4e2d\u6587\xe9\xe9 \u6211\u559c\u6b22\u5403\u82f9\u679c\u3002awdawd '),s.createElement(y,{style:{textTransform:'uppercase'}},'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n\u4e2d\u6587\xe9\xe9 \u6211\u559c\u6b22\u5403\u82f9\u679c\u3002awdawd '),s.createElement(y,{style:{textTransform:'lowercase'}},'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n\u4e2d\u6587\xe9\xe9 \u6211\u559c\u6b22\u5403\u82f9\u679c\u3002awdawd '),s.createElement(y,{style:{textTransform:'capitalize'}},'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n\u4e2d\u6587\xe9\xe9 \u6211\u559c\u6b22\u5403\u82f9\u679c\u3002awdawd '),s.createElement(y,{style:{textTransform:'uppercase',fontSize:16,color:'turquoise',backgroundColor:'blue',lineHeight:32,letterSpacing:2,alignSelf:'flex-start'}},"Works with other text styles")),s.createElement(b,{title:"Substring Emoji (should only see 'test')"},s.createElement(y,null,'test\ud83d\ude43'.substring(0,5))))}}]),E})(s.Component),k=E.create({backgroundColorText:{left:5,backgroundColor:'rgba(100, 100, 100, 0.3)'},includeFontPaddingText:{fontSize:120,fontFamily:'sans-serif',backgroundColor:'#EEEEEE',color:'#000000',textAlignVertical:'center',alignSelf:'center'}});e.title='<Text>',e.description='Base component for rendering styled text.',e.examples=[{title:'Basic text',render:function(){return s.createElement(T,null)}}]},666821,[3,4,5,8,9,11,15,666679,666681,666740,666822]);