UNPKG

crn-cli

Version:

The Ctrip React Native CLI Tools

1 lines 11.3 kB
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),n=r(d[1]),s=r(d[2]),o=r(d[3]),l=r(d[4]),c=r(d[5]),u=r(d[6]),h=u.Animated,p=u.Image,b=u.StyleSheet,f=u.Text,y=u.TouchableHighlight,v=u.TouchableOpacity,E=(u.Platform,u.TouchableNativeFeedback),P=u.TouchableWithoutFeedback,w=u.View,_=r(d[7]),k=_.PlatformConstants&&_.PlatformConstants.forceTouchAvailable||!1,T=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={timesPressed:0},l.touchableOnPress=function(){l.setState({timesPressed:l.state.timesPressed+1})},l}return l(h,u),n(h,[{key:"render",value:function(){var t='';return this.state.timesPressed>1?t=this.state.timesPressed+'x TouchableHighlight onPress':this.state.timesPressed>0&&(t='TouchableHighlight onPress'),c.createElement(w,null,c.createElement(w,{style:L.row},c.createElement(y,{style:L.wrapper,testID:"touchable_highlight_image_button",onPress:this.touchableOnPress},c.createElement(p,{source:S,style:L.image})),c.createElement(y,{style:L.wrapper,testID:"touchable_highlight_text_button",activeOpacity:1,tvParallaxProperties:{pressMagnification:1.3,pressDuration:.6},underlayColor:"rgb(210, 230, 255)",onPress:this.touchableOnPress},c.createElement(w,{style:L.wrapperCustom},c.createElement(f,{style:L.text},"Tap Here For Custom Highlight!")))),c.createElement(w,{style:L.logBox},c.createElement(f,{testID:"touchable_highlight_console"},t)))}}]),h})(c.Component),x=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={timesPressed:0},l.textOnPress=function(){l.setState({timesPressed:l.state.timesPressed+1})},l}return l(h,u),n(h,[{key:"render",value:function(){var t='';return this.state.timesPressed>1?t=this.state.timesPressed+'x TouchableWithoutFeedback onPress':this.state.timesPressed>0&&(t='TouchableWithoutFeedback onPress'),c.createElement(w,null,c.createElement(P,{onPress:this.textOnPress,testID:"touchable_without_feedback_button"},c.createElement(w,{style:L.wrapperCustom},c.createElement(f,{style:L.text},"Tap Here For No Feedback!"))),c.createElement(w,{style:L.logBox},c.createElement(f,{testID:"touchable_without_feedback_console"},t)))}}]),h})(c.Component),C=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={timesPressed:0},l.textOnPress=function(){l.setState({timesPressed:l.state.timesPressed+1})},l}return l(h,u),n(h,[{key:"render",value:function(){var t='';return this.state.timesPressed>1?t=this.state.timesPressed+'x text onPress':this.state.timesPressed>0&&(t='text onPress'),c.createElement(w,null,c.createElement(f,{style:L.textBlock,testID:"tappable_text",onPress:this.textOnPress},"Text has built-in onPress handling"),c.createElement(w,{style:L.logBox},c.createElement(f,{testID:"tappable_text_console"},t)))}}]),h})(c.Component),D=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={eventLog:[]},l._appendEvent=function(t){var n=l.state.eventLog.slice(0,5);n.unshift(t),l.setState({eventLog:n})},l}return l(h,u),n(h,[{key:"render",value:function(){var t=this;return c.createElement(w,{testID:"touchable_feedback_events"},c.createElement(w,{style:[L.row,L.centered]},c.createElement(v,{style:L.wrapper,testID:"touchable_feedback_events_button",accessibilityLabel:"touchable feedback events",accessibilityRole:"button",onPress:function(){return t._appendEvent('press')},onPressIn:function(){return t._appendEvent('pressIn')},onPressOut:function(){return t._appendEvent('pressOut')},onLongPress:function(){return t._appendEvent('longPress')}},c.createElement(f,{style:L.button},"Press Me"))),c.createElement(w,{testID:"touchable_feedback_events_console",style:L.eventLogBox},this.state.eventLog.map(function(t,n){return c.createElement(f,{key:n},t)})))}}]),h})(c.Component),I=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={eventLog:[]},l._appendEvent=function(t){var n=l.state.eventLog.slice(0,5);n.unshift(t),l.setState({eventLog:n})},l}return l(h,u),n(h,[{key:"render",value:function(){var t=this;return c.createElement(w,{testID:"touchable_delay_events"},c.createElement(w,{style:[L.row,L.centered]},c.createElement(v,{style:L.wrapper,testID:"touchable_delay_events_button",onPress:function(){return t._appendEvent('press')},delayPressIn:400,onPressIn:function(){return t._appendEvent('pressIn - 400ms delay')},delayPressOut:1e3,onPressOut:function(){return t._appendEvent('pressOut - 1000ms delay')},delayLongPress:800,onLongPress:function(){return t._appendEvent('longPress - 800ms delay')}},c.createElement(f,{style:L.button},"Press Me"))),c.createElement(w,{style:L.eventLogBox,testID:"touchable_delay_events_console"},this.state.eventLog.map(function(t,n){return c.createElement(f,{key:n},t)})))}}]),h})(c.Component),B=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={force:0},l._renderConsoleText=function(){return k?'Force: '+l.state.force.toFixed(3):'3D Touch is not available on this device'},l}return l(h,u),n(h,[{key:"render",value:function(){var t=this;return c.createElement(w,{testID:"touchable_3dtouch_event"},c.createElement(w,{style:L.forceTouchBox,testID:"touchable_3dtouch_output"},c.createElement(f,null,this._renderConsoleText())),c.createElement(w,{style:[L.row,L.centered]},c.createElement(w,{style:L.wrapper,testID:"touchable_3dtouch_button",onStartShouldSetResponder:function(){return!0},onResponderMove:function(n){return t.setState({force:n.nativeEvent.force})},onResponderRelease:function(n){return t.setState({force:0})}},c.createElement(f,{style:L.button},"Press Me"))))}}]),h})(c.Component),F=(function(u){function h(){var n,l;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(l=s(this,(n=o(h)).call.apply(n,[this].concat(u)))).state={timesPressed:0},l.onPress=function(){l.setState({timesPressed:l.state.timesPressed+1})},l}return l(h,u),n(h,[{key:"render",value:function(){var t='';return this.state.timesPressed>1?t=this.state.timesPressed+'x onPress':this.state.timesPressed>0&&(t='onPress'),c.createElement(w,{testID:"touchable_hit_slop"},c.createElement(w,{style:[L.row,L.centered]},c.createElement(v,{onPress:this.onPress,style:L.hitSlopWrapper,hitSlop:{top:30,bottom:30,left:60,right:60},testID:"touchable_hit_slop_button"},c.createElement(f,{style:L.hitSlopButton},"Press Outside This View"))),c.createElement(w,{style:L.logBox},c.createElement(f,null,t)))}}]),h})(c.Component),O=(function(u){function h(){return t(this,h),s(this,o(h).apply(this,arguments))}return l(h,u),n(h,[{key:"render",value:function(){return c.createElement(w,null,c.createElement(v,{disabled:!0,style:[L.row,L.block]},c.createElement(f,{style:L.disabledButton},"Disabled TouchableOpacity")),c.createElement(v,{disabled:!1,style:[L.row,L.block]},c.createElement(f,{style:L.button},"Enabled TouchableOpacity")),c.createElement(y,{activeOpacity:1,disabled:!0,underlayColor:"rgb(210, 230, 255)",style:[L.row,L.block],onPress:function(){}},c.createElement(f,{style:L.disabledButton},"Disabled TouchableHighlight")),c.createElement(y,{activeOpacity:1,underlayColor:"rgb(210, 230, 255)",style:[L.row,L.block],onPress:function(){}},c.createElement(f,{style:L.button},"Enabled TouchableHighlight")),c.createElement(P,{onPress:function(){},disabled:!0},c.createElement(w,{style:L.wrapperCustom},c.createElement(f,{style:[L.button,L.nativeFeedbackButton,L.disabledButton]},"Disabled TouchableWithoutFeedback"))),c.createElement(P,{onPress:function(){},disabled:!1},c.createElement(w,{style:L.wrapperCustom},c.createElement(f,{style:[L.button,L.nativeFeedbackButton]},"Enabled TouchableWithoutFeedback"))),!1,!1)}}]),h})(c.Component),S={uri:'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'},L=b.create({row:{justifyContent:'center',flexDirection:'row'},centered:{justifyContent:'center'},image:{width:50,height:50},text:{fontSize:16},block:{padding:10},button:{color:'#007AFF'},disabledButton:{color:'#007AFF',opacity:.5},nativeFeedbackButton:{textAlign:'center',margin:10},hitSlopButton:{color:'white'},wrapper:{borderRadius:8},wrapperCustom:{borderRadius:8,padding:6},hitSlopWrapper:{backgroundColor:'red',marginVertical:30},logBox:{padding:20,margin:10,borderWidth:b.hairlineWidth,borderColor:'#f0f0f0',backgroundColor:'#f9f9f9'},eventLogBox:{padding:10,margin:10,height:120,borderWidth:b.hairlineWidth,borderColor:'#f0f0f0',backgroundColor:'#f9f9f9'},forceTouchBox:{padding:10,margin:10,borderWidth:b.hairlineWidth,borderColor:'#f0f0f0',backgroundColor:'#f9f9f9',alignItems:'center'},textBlock:{fontWeight:'500',color:'blue'}});e.displayName=void 0,e.description='Touchable and onPress examples.',e.title='<Touchable*> and onPress',e.examples=[{title:'<TouchableHighlight>',description:"TouchableHighlight works by adding an extra view with a black background under the single child view. This works best when the child view is fully opaque, although it can be made to work as a simple background color change as well with the activeOpacity and underlayColor props.",render:function(){return c.createElement(T,null)}},{title:'<TouchableWithoutFeedback>',render:function(){return c.createElement(x,null)}},{title:'TouchableNativeFeedback with Animated child',description:"TouchableNativeFeedback can have an AnimatedComponent as adirect child.",platform:'android',render:function(){var t=new h.Value(1);h.timing(t,{toValue:.3,duration:1e3}).start();var n={backgroundColor:'rgb(180, 64, 119)',width:200,height:100,transform:[{scale:t}]};return c.createElement(w,null,c.createElement(w,{style:L.row},c.createElement(E,null,c.createElement(h.View,{style:n}))))}},{title:'<Text onPress={fn}> with highlight',render:function(){return c.createElement(C,null)}},{title:'Touchable feedback events',description:"<Touchable*> components accept onPress, onPressIn, onPressOut, and onLongPress as props.",render:function(){return c.createElement(D,null)}},{title:'Touchable delay for events',description:"<Touchable*> components also accept delayPressIn, delayPressOut, and delayLongPress as props. These props impact the timing of feedback events.",render:function(){return c.createElement(I,null)}},{title:'3D Touch / Force Touch',description:'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',render:function(){return c.createElement(B,null)},platform:'ios'},{title:'Touchable Hit Slop',description:"<Touchable*> components accept hitSlop prop which extends the touch area without changing the view bounds.",render:function(){return c.createElement(F,null)}},{title:'Disabled Touchable*',description:"<Touchable*> components accept disabled prop which prevents any interaction with component",render:function(){return c.createElement(O,null)}}]},666742,[3,4,5,8,9,11,15,21]);