crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 4.89 kB
JavaScript
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),n=r(d[1]),o=r(d[2]),c=r(d[3]),s=r(d[4]),u=r(d[5]),l=r(d[6]),h=l.StyleSheet,p=l.Text,f=l.View,x=(function(l){function h(){var n,s;t(this,h);for(var u=arguments.length,l=new Array(u),p=0;p<u;p++)l[p]=arguments[p];return(s=o(this,(n=c(h)).call.apply(n,[this].concat(l)))).state={log:[]},s.handleLog=function(t){s.state.log=s.state.log.concat([t])},s.flushReactChanges=function(){s.forceUpdate()},s.handleTouchCapture=function(){s.state.log=s.state.log.concat(['---'])},s}return s(h,l),n(h,[{key:"render",value:function(){return u.createElement(f,null,u.createElement(f,{onTouchEndCapture:this.handleTouchCapture,onTouchStart:this.flushReactChanges},u.createElement(this.props.Component,{onLog:this.handleLog})),u.createElement(f,{style:C.logBox},u.createElement(E,{style:C.logText},this.state.log.join('\n'))))}}]),h})(u.Component),y=(function(l){function h(){return t(this,h),o(this,c(h).apply(this,arguments))}return s(h,l),n(h,[{key:"render",value:function(){var t=this;return u.createElement(f,{onTouchStart:function(){return t.props.onLog('A unspecified touched')},style:C.box},u.createElement(E,{style:C.text},"A: unspecified"),u.createElement(f,{pointerEvents:"none",onTouchStart:function(){return t.props.onLog('B none touched')},style:[C.box,C.boxPassedThrough]},u.createElement(E,{style:[C.text,C.textPassedThrough]},"B: none"),u.createElement(f,{onTouchStart:function(){return t.props.onLog('C unspecified touched')},style:[C.box,C.boxPassedThrough]},u.createElement(E,{style:[C.text,C.textPassedThrough]},"C: unspecified"))))}}]),h})(u.Component),E=(function(l){function h(){return t(this,h),o(this,c(h).apply(this,arguments))}return s(h,l),n(h,[{key:"render",value:function(){return u.createElement(f,{pointerEvents:"none"},u.createElement(p,{style:this.props.style},this.props.children))}}]),h})(u.Component),b=[{Component:y,title:'`none`',description:'`none` causes touch events on the container and its child components to pass through to the parent container.'},{Component:(function(l){function h(){return t(this,h),o(this,c(h).apply(this,arguments))}return s(h,l),n(h,[{key:"render",value:function(){var t=this;return u.createElement(f,{onTouchStart:function(){return t.props.onLog('A unspecified touched')},style:C.box},u.createElement(E,{style:C.text},"A: unspecified"),u.createElement(f,{pointerEvents:"box-none",onTouchStart:function(){return t.props.onLog('B box-none touched')},style:[C.box,C.boxPassedThrough]},u.createElement(E,{style:[C.text,C.textPassedThrough]},"B: box-none"),u.createElement(f,{onTouchStart:function(){return t.props.onLog('C unspecified touched')},style:C.box},u.createElement(E,{style:C.text},"C: unspecified")),u.createElement(f,{pointerEvents:"auto",onTouchStart:function(){return t.props.onLog('C explicitly unspecified touched')},style:[C.box]},u.createElement(E,{style:[C.text]},"C: explicitly unspecified"))))}}]),h})(u.Component),title:'`box-none`',description:'`box-none` causes touch events on the container to pass through and will only detect touch events on its child components.'},{Component:(function(l){function h(){return t(this,h),o(this,c(h).apply(this,arguments))}return s(h,l),n(h,[{key:"render",value:function(){var t=this;return u.createElement(f,{onTouchStart:function(){return t.props.onLog('A unspecified touched')},style:C.box},u.createElement(E,{style:C.text},"A: unspecified"),u.createElement(f,{pointerEvents:"box-only",onTouchStart:function(){return t.props.onLog('B box-only touched')},style:C.box},u.createElement(E,{style:C.text},"B: box-only"),u.createElement(f,{onTouchStart:function(){return t.props.onLog('C unspecified touched')},style:[C.box,C.boxPassedThrough]},u.createElement(E,{style:[C.text,C.textPassedThrough]},"C: unspecified")),u.createElement(f,{pointerEvents:"auto",onTouchStart:function(){return t.props.onLog('C explicitly unspecified touched')},style:[C.box,C.boxPassedThrough]},u.createElement(E,{style:[C.text,C.textPassedThrough]},"C: explicitly unspecified"))))}}]),h})(u.Component),title:'`box-only`',description:"`box-only` causes touch events on the container's child components to pass through and will only detect touch events on the container itself."}],C=h.create({text:{fontSize:10,color:'#5577cc'},textPassedThrough:{color:'#88aadd'},box:{backgroundColor:'#aaccff',borderWidth:1,borderColor:'#7799cc',padding:10,margin:5},boxPassedThrough:{borderColor:'#99bbee'},logText:{fontSize:9},logBox:{padding:20,margin:10,borderWidth:.5,borderColor:'#f0f0f0',backgroundColor:'#f9f9f9'}});e.framework='React',e.title='Pointer Events',e.description="Demonstrates the use of the pointerEvents prop of a View to control how touches should be handled.",e.examples=b.map(function(t){return{title:t.title,description:t.description,render:function(){return u.createElement(x,{key:t.title,Component:t.Component})}}})},666785,[3,4,5,8,9,11,15]);