react-native-twopaneview/lib/module/TwoPaneView.js

react-native layout control for dual screen devices (Duo)

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.TwoPaneView=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeDualscreeninfo=require("react-native-dualscreeninfo");var _types=require("./types");var _jsxFileName="D:\\dualscreen\\twopaneview\\src\\TwoPaneView.tsx";var TwoPaneView=function(_Component){(0,_inherits2.default)(TwoPaneView,_Component);function TwoPaneView(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TwoPaneView);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(TwoPaneView)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"state",{spanning:_reactNativeDualscreeninfo.DualScreenInfo.isSpanning,orientation:_reactNativeDualscreeninfo.DualScreenInfo.orientation});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),"_handleSpanningChanged",function(update){_this.setState({spanning:update.isSpanning,orientation:update.orientation});});return _this;}(0,_createClass2.default)(TwoPaneView,[{key:"getPanePriority",value:function getPanePriority(){return this.props.panePriority||_types.PanePriority.Pane1;}},{key:"getPaneMode",value:function getPaneMode(){return this.props.paneMode||_types.PaneMode.Auto;}},{key:"componentDidMount",value:function componentDidMount(){_reactNativeDualscreeninfo.DualScreenInfo.addEventListener('didUpdateSpanning',this._handleSpanningChanged);}},{key:"componentWillUnmount",value:function componentWillUnmount(){_reactNativeDualscreeninfo.DualScreenInfo.removeEventListener('didUpdateSpanning',this._handleSpanningChanged);}},{key:"render",value:function render(){return _react.default.createElement(_reactNative.View,{style:this.isHorizontalOrientation()?styles.flexRow:styles.flexColumn,__source:{fileName:_jsxFileName,lineNumber:47}},this.renderChildPanes());}},{key:"renderChildPanes",value:function renderChildPanes(){var children=_react.default.Children.toArray(this.props.children);var paneMode=this.getPaneMode();switch(paneMode){case _types.PaneMode.Auto:if(this.state.spanning){return this.renderBothPanes();}return this.renderPaneWithPriority();case _types.PaneMode.Single:return this.renderPaneWithPriority();case _types.PaneMode.Double:return this.renderBothPanes();}}},{key:"renderPaneWithPriority",value:function renderPaneWithPriority(){if(this.getPanePriority()===_types.PanePriority.Pane1){return this.renderPane1();}else{return this.renderPane2();}}},{key:"renderBothPanes",value:function renderBothPanes(){var children=_react.default.Children.toArray(this.props.children);var items=[];items.push(this.renderPane1());if(this.state.spanning){items.push(this.renderSeparator());}items.push(this.renderPane2());return items;}},{key:"renderPane1",value:function renderPane1(){var children=_react.default.Children.toArray(this.props.children);return _react.default.createElement(_reactNative.View,{key:_types.PanePriority.Pane1,style:styles.flexOne,__source:{fileName:_jsxFileName,lineNumber:96}},children.length>0?children[0]:null);}},{key:"renderPane2",value:function renderPane2(){var children=_react.default.Children.toArray(this.props.children);return _react.default.createElement(_reactNative.View,{key:_types.PanePriority.Pane2,style:styles.flexOne,__source:{fileName:_jsxFileName,lineNumber:105}},children.length>1?children[1]:null);}},{key:"renderSeparator",value:function renderSeparator(){var horizontal=this.isHorizontalOrientation();var separatorWidth=horizontal?_reactNativeDualscreeninfo.DualScreenInfo.hingeWidth:'100%';var separatorHeight=horizontal?'100%':_reactNativeDualscreeninfo.DualScreenInfo.hingeWidth;return _react.default.createElement(_reactNative.View,{key:"separator",style:{width:separatorWidth,height:separatorHeight},__source:{fileName:_jsxFileName,lineNumber:117}});}},{key:"isHorizontalOrientation",value:function isHorizontalOrientation(){return this.state.orientation===_reactNativeDualscreeninfo.DeviceOrientation.Portrait||this.state.orientation===_reactNativeDualscreeninfo.DeviceOrientation.PortraitFlipped;}}]);return TwoPaneView;}(_react.Component);exports.TwoPaneView=TwoPaneView;var styles=_reactNative.StyleSheet.create({flexRow:{flexDirection:'row'},flexColumn:{flexDirection:'column'},flexOne:{flex:1}});
//# sourceMappingURL=TwoPaneView.js.map