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

Comparing version 0.9.1 to 0.10.0

package.json

 {
   "name": "react-native-popup-menu",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "extensible popup/context menu for react native",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/Menu.js

@@ -13,9 +13,2 @@ import React, { Component } from 'react';
 
-const childrenToArray = children => {
-  if (children) {
-    return Array.isArray(children) ? children : [ children ];
-  }
-  return [];
-};
-
 export default class Menu extends Component {
@@ -57,2 +50,8 @@
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.name !== nextProps.name) {
+      console.warn('Menu name cannot be changed');
+    }
+  }
+
   open() {
@@ -81,3 +80,3 @@ this.context.menuActions.openMenu(this._name);
   _reduceChildren() {
-    return childrenToArray(this.props.children).reduce((r, child) => {
+    return React.Children.toArray(this.props.children).reduce((r, child) => {
       if (isTrigger(child)) {
@@ -109,5 +108,3 @@ r.push(React.cloneElement(child, {
   _getOptions() {
-    const { children, onSelect } = this.props;
-    const optionsElem = childrenToArray(children).find(isMenuOptions);
-    return React.cloneElement(optionsElem, { onSelect });
+    return React.Children.toArray(this.props.children).find(isMenuOptions);
   }
@@ -124,3 +121,3 @@
   _validateChildren() {
-    const children = childrenToArray(this.props.children);
+    const children = React.Children.toArray(this.props.children);
     const options = children.find(isMenuOptions);
@@ -127,0 +124,0 @@ if (!options) {

src/MenuContext.js

@@ -30,3 +30,4 @@ import React, { Component } from 'react';
       isMenuOpen: () => this.isMenuOpen(),
-      _notify: force => this._notify(force)
+      _getOpenedMenu: () => this._getOpenedMenu(),
+      _notify: force => this._notify(force),
     };
@@ -159,3 +160,3 @@ const menuRegistry = this._menuRegistry;
       }
-      this._placeholderRef.setState({ openedMenu: this.openedMenu }, afterSetState);
+      this._placeholderRef.setState({ openedMenuName: this.openedMenu && this.openedMenu.name }, afterSetState);
       debug('notify ended');
@@ -212,3 +213,4 @@ });
   _getOpenedMenu() {
-    return this._placeholderRef && this._placeholderRef.state.openedMenu
+    const name = this._placeholderRef && this._placeholderRef.state.openedMenuName;
+    return name ? this._menuRegistry.getMenu(name) : undefined;
   }
@@ -215,0 +217,0 @@

src/MenuOption.js

@@ -10,3 +10,4 @@ import React, { Component } from 'react';
   _onSelect() {
-    const { value, onSelect } = this.props;
+    const { value } = this.props;
+    const onSelect = this.props.onSelect || this._getMenusOnSelect()
     const shouldClose = onSelect(value) !== false;
@@ -19,4 +20,18 @@ debug('select option', value, shouldClose);
 
+  _getMenusOnSelect() {
+    const menu = this.context.menuActions._getOpenedMenu();
+    return menu.instance.props.onSelect;
+  }
+
+  _getCustomStyles() {
+    const { optionsCustomStyles } = this.context.menuActions._getOpenedMenu();
+    return {
+      ...optionsCustomStyles,
+      ...this.props.customStyles,
+    }
+  }
+
   render() {
-    const { text, disabled, disableTouchable, children, style, customStyles } = this.props;
+    const { text, disabled, disableTouchable, children, style } = this.props;
+    const customStyles = this._getCustomStyles()
     if (text && React.Children.count(children) > 0) {
@@ -23,0 +38,0 @@ console.warn("MenuOption: Please don't use text property together with explicit children. Children are ignored.");

src/MenuOptions.js

@@ -5,18 +5,30 @@ import React from 'react';
 
-const MenuOptions = ({ style, children, onSelect, customStyles }) => (
-  <View style={[customStyles.optionsWrapper, style]}>
-    {
-      React.Children.map(children, c =>
-        React.isValidElement(c) ?
-          React.cloneElement(c, {
-            onSelect: c.props.onSelect || onSelect,
-            customStyles: Object.keys(c.props.customStyles || {}).length ? c.props.customStyles : customStyles
-          }) : c
-      )
-    }
-  </View>
-);
+class MenuOptions extends React.Component {
 
+  updateCustomStyles(_props) {
+    const { customStyles } = _props
+    const menu = this.context.menuActions._getOpenedMenu()
+    const menuName = menu.instance.getName()
+    this.context.menuRegistry.setOptionsCustomStyles(menuName, customStyles)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.updateCustomStyles(nextProps)
+  }
+
+  componentWillMount() {
+    this.updateCustomStyles(this.props)
+  }
+
+  render() {
+    const { customStyles, style, children } = this.props
+    return (
+      <View style={[customStyles.optionsWrapper, style]}>
+        {children}
+      </View>
+    )
+  }
+}
+
 MenuOptions.propTypes = {
-  onSelect: PropTypes.func,
   customStyles: PropTypes.object,
@@ -35,2 +47,7 @@ renderOptionsContainer: PropTypes.func,
 
+MenuOptions.contextTypes = {
+  menuRegistry: PropTypes.object,
+  menuActions: PropTypes.object,
+};
+
 export default MenuOptions;

src/menuRegistry.js

@@ -10,2 +10,3 @@ import { iterator2array } from './helpers';
  *   optionsLayout: Object - layout of menu options if known
+ *   optionsCustomStyles: Object - custom styles of options
  * }
@@ -50,2 +51,10 @@ */
 
+  function setOptionsCustomStyles(name, optionsCustomStyles) {
+    if (!menus.has(name)) {
+      return;
+    }
+    const menu = { ...menus.get(name), optionsCustomStyles };
+    menus.set(name, menu);
+  }
+
   /**
@@ -65,3 +74,3 @@ * Get `menu data` by name.
 
-  return { subscribe, unsubscribe, updateLayoutInfo, getMenu, getAll };
+  return { subscribe, unsubscribe, updateLayoutInfo, getMenu, getAll, setOptionsCustomStyles };
 }

No alert changes

Improved metrics

Total package byte prevSize

37364

increased by2.89%

Lines of code

1029

increased by3.21%

No dependency changes