crn-cli
Version:
The Ctrip React Native CLI Tools
1 lines • 5.4 kB
JavaScript
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),n=r(d[1]),l=r(d[2]),s=r(d[3]),o=r(d[4]),c=r(d[5]),u=r(d[6]),h=u.Modal,p=u.Picker,f=u.Platform,y=u.StyleSheet,S=u.Switch,v=u.Text,E=u.TouchableHighlight,b=u.View,T=p.Item;e.displayName=void 0,e.framework='React',e.title='<Modal>',e.description='Component for presenting modal views.';var w=(function(u){function h(){var n,o;t(this,h);for(var c=arguments.length,u=new Array(c),p=0;p<c;p++)u[p]=arguments[p];return(o=l(this,(n=s(h)).call.apply(n,[this].concat(u)))).state={active:!1},o._onHighlight=function(){o.setState({active:!0})},o._onUnhighlight=function(){o.setState({active:!1})},o}return o(h,u),n(h,[{key:"render",value:function(){var t={color:this.state.active?'#fff':'#000'};return c.createElement(E,{onHideUnderlay:this._onUnhighlight,onPress:this.props.onPress,onShowUnderlay:this._onHighlight,style:[_.button,this.props.style],underlayColor:"#a9d9d4"},c.createElement(v,{style:[_.buttonText,t]},this.props.children))}}]),h})(c.Component),P=[['portrait'],['landscape'],['landscape-left'],['portrait','landscape-right'],['portrait','landscape'],[]],C=(function(u){function y(){var n,o;t(this,y);for(var c=arguments.length,u=new Array(c),h=0;h<c;h++)u[h]=arguments[h];return(o=l(this,(n=s(y)).call.apply(n,[this].concat(u)))).state={animationType:'none',modalVisible:!1,transparent:!1,presentationStyle:'fullScreen',selectedSupportedOrientation:0,currentOrientation:'unknown'},o._setModalVisible=function(t){o.setState({modalVisible:t})},o._setAnimationType=function(t){o.setState({animationType:t})},o._toggleTransparent=function(){o.setState({transparent:!o.state.transparent})},o}return o(y,u),n(y,[{key:"renderSwitch",value:function(){return f.isTV?null:c.createElement(S,{value:this.state.transparent,onValueChange:this._toggleTransparent})}},{key:"render",value:function(){var t=this,n={backgroundColor:this.state.transparent?'rgba(0, 0, 0, 0.5)':'#f5fcff'},l=this.state.transparent?{backgroundColor:'#fff',padding:20}:null,s={backgroundColor:'#ddd'};return c.createElement(b,null,c.createElement(h,{animationType:this.state.animationType,presentationStyle:this.state.presentationStyle,transparent:this.state.transparent,visible:this.state.modalVisible,onRequestClose:function(){return t._setModalVisible(!1)},supportedOrientations:P[this.state.selectedSupportedOrientation],onOrientationChange:function(n){return t.setState({currentOrientation:n.nativeEvent.orientation})}},c.createElement(b,{style:[_.container,n]},c.createElement(b,{style:[_.innerContainer,l]},c.createElement(v,null,"This modal was presented",' ','none'===this.state.animationType?'without':'with',' ',"animation."),c.createElement(v,null,"It is currently displayed in ",this.state.currentOrientation,' ',"mode."),c.createElement(w,{onPress:this._setModalVisible.bind(this,!1),style:_.modalButton},"Close")))),c.createElement(b,{style:_.row},c.createElement(v,{style:_.rowTitle},"Animation Type"),c.createElement(w,{onPress:this._setAnimationType.bind(this,'none'),style:'none'===this.state.animationType?s:{}},"none"),c.createElement(w,{onPress:this._setAnimationType.bind(this,'slide'),style:'slide'===this.state.animationType?s:{}},"slide"),c.createElement(w,{onPress:this._setAnimationType.bind(this,'fade'),style:'fade'===this.state.animationType?s:{}},"fade")),c.createElement(b,{style:_.row},c.createElement(v,{style:_.rowTitle},"Transparent"),this.renderSwitch()),this.renderPickers(),c.createElement(w,{onPress:this._setModalVisible.bind(this,!0)},"Present"))}},{key:"renderPickers",value:function(){var t=this;return f.isTV?null:c.createElement(b,null,c.createElement(b,null,c.createElement(v,{style:_.rowTitle},"Presentation style"),c.createElement(p,{selectedValue:this.state.presentationStyle,onValueChange:function(n){return t.setState({presentationStyle:n})},itemStyle:_.pickerItem},c.createElement(T,{label:"Full Screen",value:"fullScreen"}),c.createElement(T,{label:"Page Sheet",value:"pageSheet"}),c.createElement(T,{label:"Form Sheet",value:"formSheet"}),c.createElement(T,{label:"Over Full Screen",value:"overFullScreen"}),c.createElement(T,{label:"Default presentationStyle",value:null}))),c.createElement(b,null,c.createElement(v,{style:_.rowTitle},"Supported orientations"),c.createElement(p,{selectedValue:this.state.selectedSupportedOrientation,onValueChange:function(n,l){return t.setState({selectedSupportedOrientation:l})},itemStyle:_.pickerItem},c.createElement(T,{label:"Portrait",value:0}),c.createElement(T,{label:"Landscape",value:1}),c.createElement(T,{label:"Landscape left",value:2}),c.createElement(T,{label:"Portrait and landscape right",value:3}),c.createElement(T,{label:"Portrait and landscape",value:4}),c.createElement(T,{label:"Default supportedOrientations",value:5}))))}}]),y})(c.Component);e.examples=[{title:'Modal Presentation',description:'Modals can be presented with or without animation',render:function(){return c.createElement(C,null)}}];var _=y.create({container:{flex:1,justifyContent:'center',padding:20},innerContainer:{borderRadius:10,alignItems:'center'},row:{alignItems:'center',flex:1,flexDirection:'row',marginBottom:20},rowTitle:{flex:1,fontWeight:'bold'},button:{borderRadius:5,flexGrow:1,height:44,alignSelf:'stretch',justifyContent:'center',overflow:'hidden'},buttonText:{fontSize:18,margin:5,textAlign:'center'},modalButton:{marginTop:10},pickerItem:{fontSize:16}})},666719,[3,4,5,8,9,11,15]);