react-native-popup-menu - npm Package Compare versions

Comparing version 0.12.4 to 0.13.0-beta.1

package.json

 {
   "name": "react-native-popup-menu",
-  "version": "0.12.4",
+  "version": "0.13.0-beta.1",
   "description": "extensible popup/context menu for react native",
@@ -64,3 +64,4 @@ "main": "src/index.js",
     "sinon": "^2.2.0"
-  }
+  },
+  "dependencies": {}
 }

README.md

 # react-native-popup-menu
 [![](https://img.shields.io/npm/dm/react-native-popup-menu.svg?style=flat-square)](https://www.npmjs.com/package/react-native-popup-menu)
 
-Extensible popup menu component for React Native for Android, iOS and (unofficially) UWP and react-native-web.
+Extensible popup menu component for React Native for Android, iOS and (unofficially) UWP.
 
@@ -6,0 +6,0 @@ Features:

src/helpers.js

@@ -30,5 +30,4 @@ import React from 'react';
   const Touchable = TouchableComponent || Platform.select({
+    ios: TouchableHighlight,
     android: TouchableNativeFeedback,
-    ios: TouchableHighlight,
-    web: TouchableHighlight,
     windows:TouchableHighlight,
@@ -35,0 +34,0 @@ });

src/Menu.js

@@ -8,2 +8,3 @@ import React, { Component } from 'react';
 import { debug } from './logger';
+import { withCtx } from './MenuProvider';
 
@@ -14,8 +15,9 @@ const isRegularComponent = c => c.type !== MenuOptions && c.type !== MenuTrigger;
 
-export default class Menu extends Component {
+class Menu extends Component {
 
-  constructor(props, ctx) {
-    super(props, ctx);
+  constructor(props) {
+    super(props);
     this._name = this.props.name || makeName();
     this._forceClose = false;
+    const { ctx } = props;
     if(!(ctx && ctx.menuActions)) {
@@ -31,11 +33,14 @@ throw new Error("Menu component must be ancestor of MenuProvider");
     debug('subscribing menu', this._name);
-    this.context.menuRegistry.subscribe(this);
-    this.context.menuActions._notify();
+    this.props.ctx.menuRegistry.subscribe(this);
+    this.props.ctx.menuActions._notify();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
+    if (this.props.name !== prevProps.name) {
+      console.warn('Menu name cannot be changed');
+    }
     // force update if menu is opened as its content might have changed
     const force = this._isOpen();
     debug('component did update', this._name, force);
-    this.context.menuActions._notify(force);
+    this.props.ctx.menuActions._notify(force);
   }
@@ -47,19 +52,13 @@
       this._forceClose = true;
-      this.context.menuActions._notify();
+      this.props.ctx.menuActions._notify();
     }
-    this.context.menuRegistry.unsubscribe(this);
+    this.props.ctx.menuRegistry.unsubscribe(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.name !== nextProps.name) {
-      console.warn('Menu name cannot be changed');
-    }
-  }
-
   open() {
-    return this.context.menuActions.openMenu(this._name);
+    return this.props.ctx.menuActions.openMenu(this._name);
   }
 
   close() {
-    return this.context.menuActions.closeMenu();
+    return this.props.ctx.menuActions.closeMenu();
   }
@@ -163,5 +162,2 @@
 
-Menu.contextTypes = {
-  menuRegistry: PropTypes.object,
-  menuActions: PropTypes.object,
-};
+export default withCtx(Menu);

src/MenuOption.js

@@ -6,5 +6,7 @@ import React, { Component } from 'react';
 import { makeTouchable } from './helpers';
+import { withCtx } from './MenuProvider';
 
-export default class MenuOption extends Component {
 
+class MenuOption extends Component {
+
   _onSelect() {
@@ -16,3 +18,3 @@ const { value } = this.props;
     if (shouldClose) {
-        this.context.menuActions.closeMenu();
+        this.props.ctx.menuActions.closeMenu();
     }
@@ -22,3 +24,3 @@ }
   _getMenusOnSelect() {
-    const menu = this.context.menuActions._getOpenedMenu();
+    const menu = this.props.ctx.menuActions._getOpenedMenu();
     return menu.instance.props.onSelect;
@@ -28,3 +30,5 @@ }
   _getCustomStyles() {
-    const { optionsCustomStyles } = this.context.menuActions._getOpenedMenu();
+    // FIXME react 16.3 workaround for ControlledExample!
+    const menu = this.props.ctx.menuActions._getOpenedMenu() || {}
+    const { optionsCustomStyles } = menu;
     return {
@@ -88,6 +92,2 @@ ...optionsCustomStyles,
 
-MenuOption.contextTypes = {
-  menuActions: PropTypes.object,
-};
-
 const defaultStyles = StyleSheet.create({
@@ -102,1 +102,3 @@ option: {
 });
+
+export default withCtx(MenuOption);

src/MenuOptions.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
+import { withCtx } from './MenuProvider';
 
-class MenuOptions extends React.Component {
+class _MenuOptions extends React.Component {
 
   updateCustomStyles(_props) {
     const { customStyles } = _props
-    const menu = this.context.menuActions._getOpenedMenu()
+    const menu = this.props.ctx.menuActions._getOpenedMenu()
+    // FIXME react 16.3 workaround for ControlledExample!
+    if (!menu) return
     const menuName = menu.instance.getName()
-    this.context.menuRegistry.setOptionsCustomStyles(menuName, customStyles)
+    this.props.ctx.menuRegistry.setOptionsCustomStyles(menuName, customStyles)
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.updateCustomStyles(nextProps)
+  componentDidMount() {
+    this.updateCustomStyles(this.props)
   }
 
-  componentWillMount() {
+  componentDidUpdate() {
     this.updateCustomStyles(this.props)
@@ -32,2 +35,4 @@ }
 
+const MenuOptions = withCtx(_MenuOptions)
+
 MenuOptions.propTypes = {
@@ -47,7 +52,2 @@ customStyles: PropTypes.object,
 
-MenuOptions.contextTypes = {
-  menuRegistry: PropTypes.object,
-  menuActions: PropTypes.object,
-};
-
 export default MenuOptions;

src/MenuProvider.js

@@ -1,4 +0,6 @@
-import React, { Component } from 'react';
+import React, { Component, createContext } from 'react';
 import PropTypes from 'prop-types';
 import { View, BackHandler } from 'react-native';
+
+import { withContext } from './with-context';
 import makeMenuRegistry from './menuRegistry';
@@ -17,2 +19,8 @@ import MenuPlaceholder from './MenuPlaceholder';
 
+if (!createContext) {
+  console.warn('New React context API not available - are you using RN 0.55+ ?')
+}
+const PopupMenuContext = createContext({})
+export const withCtx = withContext(PopupMenuContext, "ctx");
+
 export default class MenuProvider extends Component {
@@ -24,5 +32,2 @@
     this._isMenuClosing = false;
-  }
-
-  getChildContext() {
     const menuActions = {
@@ -36,4 +41,3 @@ openMenu: name => this.openMenu(name),
     };
-    const menuRegistry = this._menuRegistry;
-    return { menuRegistry, menuActions };
+    this.menuCtx = { menuRegistry: this._menuRegistry, menuActions }
   }
@@ -202,17 +206,19 @@
     return (
-      <View style={{flex:1}} onLayout={this._onLayout}>
-        <View style={[
-          {flex:1},
-          customStyles.menuContextWrapper,
-          customStyles.menuProviderWrapper,
-          style,
-        ]}>
-          { this.props.children }
+      <PopupMenuContext.Provider value={this.menuCtx}>
+        <View style={{flex:1}} onLayout={this._onLayout}>
+          <View style={[
+            {flex:1},
+            customStyles.menuContextWrapper,
+            customStyles.menuProviderWrapper,
+            style,
+          ]}>
+            { this.props.children }
+          </View>
+          <MenuPlaceholder
+            ctx={this}
+            backdropStyles={customStyles.backdrop}
+            ref={this._onPlaceholderRef}
+            />
         </View>
-        <MenuPlaceholder
-          ctx={this}
-          backdropStyles={customStyles.backdrop}
-          ref={this._onPlaceholderRef}
-          />
-      </View>
+      </PopupMenuContext.Provider>
     );
@@ -233,3 +239,5 @@ }
     const name = this._placeholderRef && this._placeholderRef.state.openedMenuName;
-    return name ? this._menuRegistry.getMenu(name) : undefined;
+    const menu = name ? this._menuRegistry.getMenu(name) : undefined;
+    debug('_getOpenedMenu', name, !!menu)
+    return menu
   }
@@ -243,3 +251,2 @@
     }
-    
     this.closeMenu();
@@ -320,6 +327,1 @@ }
 };
-
-MenuProvider.childContextTypes = {
-  menuRegistry: PropTypes.object,
-  menuActions: PropTypes.object,
-};

src/MenuTrigger.js

@@ -6,4 +6,5 @@ import React, { Component } from 'react';
 import { makeTouchable } from './helpers';
+import { withCtx } from './MenuProvider';
 
-export default class MenuTrigger extends Component {
+class MenuTrigger extends Component {
 
@@ -13,3 +14,3 @@ _onPress() {
     this.props.onPress && this.props.onPress();
-    this.context.menuActions.openMenu(this.props.menuName);
+    this.props.ctx.menuActions.openMenu(this.props.menuName);
   }
@@ -50,5 +51,2 @@
 
-MenuTrigger.contextTypes = {
-  menuActions: PropTypes.object,
-};
-
+export default withCtx(MenuTrigger)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184211

increased by0.83%

Number of package files

28

increased by3.7%

Lines of code

1474

increased by2.22%

No dependency changes