crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 5.37 kB
JavaScript
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),o=r(d[1]),n=r(d[2]),s=r(d[3]),h=r(d[4]),l=r(d[5]),c=r(d[6]),p=r(d[7]),u=p.CameraRoll,f=p.Image,_=p.ImageEditor,S=(p.Platform,p.ScrollView),y=p.StyleSheet,z=p.Text,I=p.TouchableHighlight,E=p.View,v=(function(p){function S(t){var n;return o(this,S),(n=s(this,h(S).call(this,t)))._isMounted=!0,n.state={randomPhoto:null,measuredSize:null,croppedImageURI:null,cropError:null},n._fetchRandomPhoto(),n}return l(S,p),n(S,[{key:"_fetchRandomPhoto",value:function(){var o,n,s,h;return t.async(function(l){for(;;)switch(l.prev=l.next){case 0:return l.prev=0,l.next=3,t.awrap(u.getPhotos({first:20}));case 3:if(o=l.sent,this._isMounted){l.next=6;break}return l.abrupt("return");case 6:n=o.edges,s=n[Math.floor(Math.random()*n.length)],(h=s&&s.node&&s.node.image)&&this.setState({randomPhoto:h}),l.next=15;break;case 12:l.prev=12,l.t0=l.catch(0);case 15:case"end":return l.stop()}},null,this,[[0,12]])}},{key:"componentWillUnmount",value:function(){this._isMounted=!1}},{key:"render",value:function(){var t=this;return this.state.measuredSize?this.state.croppedImageURI?this._renderCroppedImage():this._renderImageCropper():c.createElement(E,{style:C.container,onLayout:function(o){var n=o.nativeEvent.layout.width;n&&t.setState({measuredSize:{width:n,height:n}})}})}},{key:"_renderImageCropper",value:function(){var t=this;if(!this.state.randomPhoto)return c.createElement(E,{style:C.container});var o=null;return this.state.cropError&&(o=c.createElement(z,null,this.state.cropError.message)),c.createElement(E,{style:C.container},c.createElement(z,null,"Drag the image within the square to crop:"),c.createElement(w,{image:this.state.randomPhoto,size:this.state.measuredSize,style:[C.imageCropper,this.state.measuredSize],onTransformDataChange:function(o){return t._transformData=o}}),c.createElement(I,{style:C.cropButtonTouchable,onPress:this._crop.bind(this)},c.createElement(E,{style:C.cropButton},c.createElement(z,{style:C.cropButtonLabel},"Crop"))),o)}},{key:"_renderCroppedImage",value:function(){return c.createElement(E,{style:C.container},c.createElement(z,null,"Here is the cropped image:"),c.createElement(f,{source:{uri:this.state.croppedImageURI},style:[C.imageCropper,this.state.measuredSize]}),c.createElement(I,{style:C.cropButtonTouchable,onPress:this._reset.bind(this)},c.createElement(E,{style:C.cropButton},c.createElement(z,{style:C.cropButtonLabel},"Try again"))))}},{key:"_crop",value:function(){var t=this;_.cropImage(this.state.randomPhoto.uri,this._transformData,function(o){return t.setState({croppedImageURI:o})},function(o){return t.setState({cropError:o})})}},{key:"_reset",value:function(){this.setState({randomPhoto:null,croppedImageURI:null,cropError:null}),this._fetchRandomPhoto()}}]),S})(c.Component),w=(function(t){function p(){return o(this,p),s(this,h(p).apply(this,arguments))}return l(p,t),n(p,[{key:"UNSAFE_componentWillMount",value:function(){var t=this.props.image.width/this.props.size.width,o=this.props.image.height/this.props.size.height;this._horizontal=t>o,this._horizontal?this._scaledImageSize={width:this.props.image.width/o,height:this.props.size.height}:(this._scaledImageSize={width:this.props.size.width,height:this.props.image.height/t},this._scaledImageSize.width*=2,this._scaledImageSize.height*=2,this._horizontal=!0),this._contentOffset={x:(this._scaledImageSize.width-this.props.size.width)/2,y:(this._scaledImageSize.height-this.props.size.height)/2},this._maximumZoomScale=Math.min(this.props.image.width/this._scaledImageSize.width,this.props.image.height/this._scaledImageSize.height),this._minimumZoomScale=Math.max(this.props.size.width/this._scaledImageSize.width,this.props.size.height/this._scaledImageSize.height),this._updateTransformData(this._contentOffset,this._scaledImageSize,this.props.size)}},{key:"_onScroll",value:function(t){this._updateTransformData(t.nativeEvent.contentOffset,t.nativeEvent.contentSize,t.nativeEvent.layoutMeasurement)}},{key:"_updateTransformData",value:function(t,o,n){var s=t.x/o.width,h=t.y/o.height,l=n.width/o.width,c=n.height/o.height,p={offset:{x:this.props.image.width*s,y:this.props.image.height*h},size:{width:this.props.image.width*l,height:this.props.image.height*c}};this.props.onTransformDataChange&&this.props.onTransformDataChange(p)}},{key:"render",value:function(){return c.createElement(S,{alwaysBounceVertical:!0,automaticallyAdjustContentInsets:!1,contentOffset:this._contentOffset,decelerationRate:"fast",horizontal:this._horizontal,maximumZoomScale:this._maximumZoomScale,minimumZoomScale:this._minimumZoomScale,onMomentumScrollEnd:this._onScroll.bind(this),onScrollEndDrag:this._onScroll.bind(this),showsHorizontalScrollIndicator:!1,showsVerticalScrollIndicator:!1,style:this.props.style,scrollEventThrottle:16},c.createElement(f,{source:this.props.image,style:this._scaledImageSize}))}}]),p})(c.Component),C=y.create({container:{flex:1,alignSelf:'stretch'},imageCropper:{alignSelf:'center',marginTop:12},cropButtonTouchable:{alignSelf:'center',marginTop:12},cropButton:{padding:12,backgroundColor:'blue',borderRadius:4},cropButtonLabel:{color:'white',fontSize:16,fontWeight:'500'}});e.framework='React',e.title='ImageEditor',e.description='Cropping and scaling with ImageEditor',e.examples=[{title:'Image Cropping',render:function(){return c.createElement(v,null)}}]},666774,[139,3,4,5,8,9,11,15]);