crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 5.48 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]),s=r(d[3]),p=r(d[4]),u=r(d[5]),l=r(d[6]),c=r(d[7]),h=r(d[8]),v=r(d[9]),y=v.Animated,f=v.LayoutAnimation,L=v.PanResponder,R=v.StyleSheet,V=v.View,A=r(d[10]),k=30,w=(function(v){function R(t){var n;return o(this,R),(n=p(this,u(R).call(this)))._onLongPress=n._onLongPress.bind(l(n)),n._toggleIsActive=n._toggleIsActive.bind(l(n)),n.state={isActive:!1,pan:new y.ValueXY,pop:new y.Value(0)},n}return c(R,v),s(R,[{key:"_onLongPress",value:function(){var t=this,o={tension:40,friction:3};this.state.pan.addListener(function(n){t.props.onMove&&t.props.onMove(n)}),y.spring(this.state.pop,n({toValue:1},o)).start(),this.setState({panResponder:L.create({onPanResponderMove:y.event([null,{dx:this.state.pan.x,dy:this.state.pan.y}]),onPanResponderRelease:function(s,p){f.easeInEaseOut(),y.spring(t.state.pop,n({toValue:0},o)).start(),t.setState({panResponder:void 0}),t.props.onMove&&t.props.onMove({x:p.dx+t.props.restLayout.x,y:p.dy+t.props.restLayout.y}),t.props.onDeactivate(),t.state.pan.removeAllListeners()}})},function(){t.props.onActivate()})}},{key:"render",value:function(){var o,s=this,p=null;this.state.panResponder?(o=this.state.panResponder.panHandlers,p=n({position:'absolute'},this.state.pan.getLayout())):o={onStartShouldSetResponder:function(){return!s.state.isActive},onResponderGrant:function(){s.state.pan.setValue({x:0,y:0}),s.state.pan.setOffset(s.props.restLayout),s.longTimer=setTimeout(s._onLongPress,300)},onResponderRelease:function(){s.state.panResponder||(clearTimeout(s.longTimer),s._toggleIsActive())}};var u={shadowOpacity:this.state.pop,transform:[{scale:this.state.pop.interpolate({inputRange:[0,1],outputRange:[1,1.3]})}]},l=this.props.openVal,c=null;return this.props.dummy?u.opacity=0:this.state.isActive&&(c=[E.open,{left:l.interpolate({inputRange:[0,1],outputRange:[this.props.restLayout.x,0]}),top:l.interpolate({inputRange:[0,1],outputRange:[this.props.restLayout.y,0]}),width:l.interpolate({inputRange:[0,1],outputRange:[80,this.props.containerLayout.width]}),height:l.interpolate({inputRange:[0,1],outputRange:[80,this.props.containerLayout.height]}),margin:l.interpolate({inputRange:[0,1],outputRange:[18,0]}),borderRadius:l.interpolate({inputRange:[-.15,0,.5,1],outputRange:[0,40,104,0]})}]),h.createElement(y.View,t({onLayout:this.props.onLayout,style:[E.dragView,p,u,this.state.isActive?E.open:null]},o),h.createElement(y.View,{style:[E.circle,c]},h.createElement(A,{containerLayout:this.props.containerLayout,id:this.props.id,isActive:this.state.isActive,openVal:this.props.openVal,onDismiss:this._toggleIsActive})))}},{key:"_toggleIsActive",value:function(t){var o=this,s={tension:30,friction:7};this.state.isActive?y.spring(this.props.openVal,n({toValue:0},s)).start(function(){o.setState({isActive:!1},o.props.onDeactivate)}):(this.props.onActivate(),this.setState({isActive:!0,panResponder:void 0},function(){y.spring(o.props.openVal,n({toValue:1},s)).start()}))}}]),R})(h.Component),b=(function(t){function n(t){var s;o(this,n),s=p(this,u(n).call(this,t));for(var c=[],h=0;h<k;h++)c.push('E'+h);return s.state={keys:c,restLayouts:[],openVal:new y.Value(0)},s._onMove=s._onMove.bind(l(s)),s}return c(n,t),s(n,[{key:"render",value:function(){var t=this,n=this.state.keys.map(function(n,o){if(n===t.state.activeKey)return h.createElement(w,{key:n+'d',dummy:!0});var s=null;return t.state.restLayouts[o]||(s=function(t,n){var o=n.nativeEvent.layout;this.setState(function(n){return n.restLayouts[t]=o,n})}.bind(t,o)),h.createElement(w,{key:n,id:n,openVal:t.state.openVal,onLayout:s,restLayout:t.state.restLayouts[o],onActivate:t.setState.bind(t,{activeKey:n,activeInitialLayout:t.state.restLayouts[o]})})});return this.state.activeKey&&(n.push(h.createElement(y.View,{key:"dark",style:[E.darkening,{opacity:this.state.openVal}]})),n.push(h.createElement(w,{openVal:this.state.openVal,key:this.state.activeKey,id:this.state.activeKey,restLayout:this.state.activeInitialLayout,containerLayout:this.state.layout,onMove:this._onMove,onDeactivate:function(){t.setState({activeKey:void 0})}}))),h.createElement(V,{style:E.container},h.createElement(V,{style:E.grid,onLayout:function(n){return t.setState({layout:n.nativeEvent.layout})}},n))}},{key:"_onMove",value:function(t){var n=x(this.state,t);n!==this.state.keys&&(f.easeInEaseOut(),this.setState({keys:n}))}}]),n})(h.Component);function x(t,n){var o=t.activeKey,s=t.keys,p=t.restLayouts,u=-1,l=1/0,c=[];return s.forEach(function(t,s){var h,v,y,f,L=(h=n,v=p[s],y=h.x-v.x,f=h.y-v.y,y*y+f*f);t===o?s=-1:c.push(t),L<l&&(l=L,u=s)}),-1===u?s:(c.splice(u,0,o),c)}var E=R.create({container:{flex:1},grid:{flex:1,justifyContent:'center',flexDirection:'row',flexWrap:'wrap',backgroundColor:'transparent'},circle:{width:80,height:80,borderRadius:40,borderWidth:1,borderColor:'black',margin:18,overflow:'hidden'},dragView:{shadowRadius:10,shadowColor:'rgba(0,0,0,0.7)',shadowOffset:{height:8},alignSelf:'flex-start',backgroundColor:'transparent'},open:{position:'absolute',left:0,top:0,right:0,bottom:0,width:void 0,height:void 0,borderRadius:0},darkening:{backgroundColor:'black',position:'absolute',left:0,top:0,right:0,bottom:0}});e.title='Animated - Gratuitous App',e.description='Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.',e.examples=[{title:'And example app',render:function(){return h.createElement(b,null)}}]},666754,[14,51,3,4,5,8,7,9,11,15,666755]);