Published reactxp 1.6.0. Published updated extensions. Updated samples and extensions.

Author: msfterictraut

docs/versions/version_history.md

@@ -16,6 +16,12 @@ A new version of ReactXP will be released a monthly basis (approximately), follo
 
 ### Version History
 
+#### Version 1.6.0 of reactxp-imagesvg, reactxp-navigation, reactxp-video - _16 Mar 2019_
+* No new features; updated dependencies.
+
+#### Version 1.6.0 of reactxp - _16 Mar 2019_
+* No new features; updated dependencies.
+
 #### Version 1.6.0-rc.4 of reactxp - _15 Mar 2019_
 * #1055: Fixed crash due to incompatibilty with newly-released RN 59.
 

extensions/imagesvg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactxp-imagesvg",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Plugin for ReactXP that provides support for SVG (scalable vector graphics) for all platforms",
   "author": "ReactXP Team <reactxp@microsoft.com>",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "assert": "1.4.1",
-    "react-native-svg": "8.0.8"
+    "react-native-svg": "9.3.3"
   },
   "peerDependencies": {
     "react": "^16.4.0",
@@ -19,12 +19,12 @@
     "react-native-windows": "^0.54.0"
   },
   "devDependencies": {
-    "@types/react-native": "0.57.15",
-    "@types/node": "10.12.11",
-    "reactxp": "1.5.0",
-    "tslint": "5.11.0",
-    "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "3.2.1"
+    "@types/react-native": "0.57.40",
+    "@types/node": "11.11.3",
+    "reactxp": "1.6.0",
+    "tslint": "5.14.0",
+    "tslint-microsoft-contrib": "6.1.0",
+    "typescript": "3.3.3333"
   },
   "types": "dist/web/PluginBase.d.ts"
 }

extensions/imagesvg/src/common/Types.ts

@@ -7,9 +7,11 @@
  */
 
 import { Types as RXTypes } from 'reactxp';
+import * as React from 'react';
 
 export interface ImageSvgStyle extends RXTypes.ViewStyle {
 }
+
 export declare type ImageSvgStyleRuleSet = RXTypes.StyleRuleSet<ImageSvgStyle>;
 
 export interface SvgCommonProps {
@@ -21,7 +23,7 @@ export interface SvgCommonProps {
     fillOpacity?: number;
 }
 
-export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps<ImageSvgStyleRuleSet> {
+export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps<ImageSvgStyleRuleSet, ImageSvg> {
     children?: RXTypes.ReactNode;
     height: number;
     width: number;
@@ -31,12 +33,16 @@ export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps
     preserveAspectRatio?: string;
     webShadow?: string;
 }
+
 export interface SvgPathProps extends SvgCommonProps {
     d?: string;
 }
+
 export interface SvgRectProps extends SvgCommonProps {
     width: number;
     height: number;
     x: number;
     y: number;
 }
+
+export class ImageSvg extends React.Component<ImageSvgProps, RXTypes.Stateless> {}

extensions/navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactxp-navigation",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Plugin for ReactXP that provides a navigation framework",
   "scripts": {
     "build": "npm run tslint && tsc",
@@ -16,25 +16,25 @@
     "react"
   ],
   "dependencies": {
-    "@types/lodash": "4.14.118",
-    "@types/node": "10.12.11",
+    "@types/lodash": "4.14.123",
+    "@types/node": "11.11.3",
     "assert": "1.4.1",
     "lodash": "4.17.11",
     "rebound": "0.1.0",
     "reactxp-experimental-navigation": "1.0.14"
   },
   "peerDependencies": {
     "react": "^16.4.0",
-    "reactxp": "^1.5.0",
+    "reactxp": "^1.6.0",
     "react-dom": "^16.4.0",
     "react-native": "^0.55.0",
     "react-native-windows": "^0.54.0"
   },
   "devDependencies": {
-    "@types/react-native": "0.57.15",
-    "reactxp": "^1.5.0",
-    "tslint": "5.11.0",
-    "typescript": "3.2.1"
+    "@types/react-native": "0.57.40",
+    "reactxp": "^1.6.0",
+    "tslint": "5.14.0",
+    "typescript": "3.3.3333"
   },
   "author": "ReactXP Team <reactxp@microsoft.com>",
   "license": "MIT",

extensions/navigation/src/web/Navigator.tsx

@@ -126,6 +126,10 @@ export class NavigatorImpl extends NavigatorBase<NavigatorState> {
     // Keep a map of all rendered scenes, keyed off their routeId
     private _renderedSceneMap: { [routeId: number]: JSX.Element } = {};
 
+    // References to mounted components.
+    private _containerRef: RX.View | null;
+    private _sceneRefs: { [sceneIndex: string]: RX.View } = {};
+
     // Save a public reference to the parent navigator if one was given in props.
     navigatorReference: Navigator;
 
@@ -207,7 +211,7 @@ export class NavigatorImpl extends NavigatorBase<NavigatorState> {
             >
                 <View
                     style={ _styles.transitioner }
-                    ref={ 'transitioner' }
+                    ref={ this._onMountContainer }
                 >
                     { scenes }
                 </View>
@@ -339,13 +343,19 @@ export class NavigatorImpl extends NavigatorBase<NavigatorState> {
         return this.state.routeStack.slice();
     }
 
+    private _onMountContainer = (comp: RX.View | null) => {
+        this._containerRef = comp;
+    }
+
     private _updateDimensionsCache() {
-        const transitioner = ReactDOM.findDOMNode(this.refs['transitioner']) as HTMLElement|null;
-        if (transitioner) {
-            this._dimensions = {
-                width: transitioner.offsetWidth,
-                height: transitioner.offsetHeight
-            };
+        if (this._containerRef) {
+            const transitioner = ReactDOM.findDOMNode(this._containerRef) as HTMLElement | null;
+            if (transitioner) {
+                this._dimensions = {
+                    width: transitioner.offsetWidth,
+                    height: transitioner.offsetHeight
+                };
+            }
         }
     }
 
@@ -372,18 +382,30 @@ export class NavigatorImpl extends NavigatorBase<NavigatorState> {
         return (
             <View
                 key={ 'scene_' + this._getRouteID(route) }
-                ref={ 'scene_' + index }
+                ref={ (comp) => this._onMountScene(comp, index) }
                 style={ styles }
             >
                 { this.props.renderScene(route) }
             </View>
         );
     }
 
+    private _onMountScene(comp: RX.View | null, sceneIndex: number) {
+        const sceneId = 'scene_' + sceneIndex;
+
+        if (!comp) {
+            delete this._sceneRefs[sceneId];
+        } else {
+            this._sceneRefs[sceneId] = comp;
+        }
+    }
+
     // Push a scene below the others so they don't block touches sent to the presented scenes.
     private _disableScene(sceneIndex: number) {
-        if (this.refs['scene_' + sceneIndex]) {
-            this._setNativeStyles(this.refs['scene_' + sceneIndex], {
+        const sceneId = 'scene_' + sceneIndex;
+
+        if (this._sceneRefs[sceneId]) {
+            this._setNativeStyles(this._sceneRefs[sceneId], {
                 opacity: 0,
                 zIndex: -10
             });

extensions/video/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactxp-video",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Plugin for ReactXP that provides a video player component for all platforms",
   "author": "ReactXP Team <reactxp@microsoft.com>",
   "license": "MIT",
@@ -9,22 +9,22 @@
     "tslint": "tslint -p tsconfig.json -r tslint.json -r ./node_modules/tslint-microsoft-contrib --fix || true"
   },
   "dependencies": {
-    "@types/lodash": "4.14.118",
-    "@types/react-native": "0.57.15",
+    "@types/lodash": "4.14.123",
+    "@types/react-native": "0.57.40",
     "lodash": "4.17.11",
     "react-native-video": "2.3.1"
   },
   "peerDependencies": {
-    "reactxp": "^1.5.0",
+    "reactxp": "^1.6.0",
     "react-dom": "^16.4.0",
     "react-native": "^0.55.0",
     "react-native-windows": "^0.54.0"
   },
   "devDependencies": {
-    "reactxp": "^1.5.0",
-    "typescript": "3.2.1",
-    "tslint": "5.11.0",
-    "tslint-microsoft-contrib": "6.0.0"
+    "reactxp": "^1.6.0",
+    "typescript": "3.3.3333",
+    "tslint": "5.14.0",
+    "tslint-microsoft-contrib": "6.1.0"
   },
   "types": "dist/web/PluginBase.d.ts"
 }

extensions/video/src/common/Interfaces.ts

@@ -12,7 +12,7 @@ import * as RX from 'reactxp';
 
 import * as Types from './Types';
 
-export abstract class Video extends RX.Component<Types.VideoProps, any> {
+export abstract class Video extends RX.Component<Types.VideoProps, RX.Stateless> {
     abstract seek(position: number): void;
     abstract play(): void;
     abstract pause(): void;

extensions/video/src/common/Types.ts

@@ -7,6 +7,7 @@
  * Type definitions to support the plugin.
  */
 
+import * as React from 'react';
 import { Types as RXTypes } from 'reactxp';
 
 // Video interfaces from react-native-video
@@ -26,7 +27,7 @@ export interface VideoInfo {
     };
 }
 
-export interface VideoProps extends RXTypes.CommonStyledProps<RXTypes.ViewStyleRuleSet> {
+export interface VideoProps extends RXTypes.CommonStyledProps<RXTypes.ViewStyleRuleSet, Video> {
     source: string;
     accessibilityLabel?: string;
     showControls?: boolean;
@@ -45,3 +46,5 @@ export interface VideoProps extends RXTypes.CommonStyledProps<RXTypes.ViewStyleR
     onLoadedData?: (info: VideoInfo) => void;
     onProgress?: (progress: VideoProgress) => void;
 }
+
+export abstract class Video extends React.Component<VideoProps, RXTypes.Stateless> {}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "reactxp",
-  "version": "1.6.0-rc.4",
+  "version": "1.6.0",
   "description": "Cross-platform abstraction layer for writing React-based applications a single time that work identically across web, React Native, and Electron distribution",
   "author": "ReactXP Team <reactxp@microsoft.com>",
   "license": "MIT",
@@ -12,10 +12,10 @@
     "tslint-release": "tslint --project tsconfig.json -r tslint.json -r ./node_modules/tslint-microsoft-contrib"
   },
   "dependencies": {
-    "@types/lodash": "^4.14.122",
-    "@types/react": "^16.8.7",
+    "@types/lodash": "^4.14.123",
+    "@types/react": "^16.8.8",
     "@types/react-dom": "^16.8.2",
-    "@types/react-native": "^0.57.38",
+    "@types/react-native": "^0.57.40",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "rebound": "^0.1.0",
@@ -29,10 +29,10 @@
     "react-native-windows": "^0.57.0-rc.5"
   },
   "devDependencies": {
-    "tslint": "^5.13.1",
+    "tslint": "^5.14.0",
     "tslint-microsoft-contrib": "^6.1.0",
     "tslint-react": "^3.6.0",
-    "tsutils": "^3.8.0",
+    "tsutils": "^3.9.1",
     "typescript": "^3.3.3333"
   },
   "homepage": "https://microsoft.github.io/reactxp/",