Removing default props as they won't work with React 19 (#296)

* Removing default props as they work with React 19

for functional component - but we use it in our withCtx

* remove menu def props

Author: sodik82

__tests__/MenuOption-test.js

@@ -38,7 +38,8 @@ describe('MenuOption', () => {
       <MenuOption />,
       makeMockContext()
     );
-    expect(instance.props.disabled).toBe(false);
+    // react deprecated default props -> disabled = undefined
+    expect(instance.props.disabled).toBe(undefined);
   });
 
   it('should trigger on select event with value', () => {

__tests__/MenuTrigger-test.js

@@ -38,7 +38,8 @@ describe('MenuTrigger', () => {
     const { instance } = render(
       <MenuTrigger />
     );
-    expect(instance.props.disabled).toBe(false);
+    // react deprecated default props -> disabled = undefined
+    expect(instance.props.disabled).toBe(undefined);
   });
 
   it('should trigger on ref event', () => {

src/Menu.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import MenuOptions from './MenuOptions';
 import MenuTrigger from './MenuTrigger';
-import ContextMenu from './renderers/ContextMenu';
 import { makeName } from './helpers';
 import { debug, CFG } from './logger';
 import { withCtx } from './MenuProvider';
+import { menuConfig } from './config';
 
 const isRegularComponent = c => c.type !== MenuOptions && c.type !== MenuTrigger;
 const isTrigger = c => c.type === MenuTrigger;
@@ -139,14 +139,6 @@ Menu.propTypes = {
   onBackdropPress: PropTypes.func,
 };
 
-Menu.defaultProps = {
-  renderer: ContextMenu,
-  rendererProps: {},
-  onSelect: () => {},
-  onOpen: () => {},
-  onClose: () => {},
-  onBackdropPress: () => {},
-};
 
 const MenuExternal = withCtx(Menu);
 Object.defineProperty(MenuExternal, 'debug', 
@@ -155,9 +147,9 @@ Object.defineProperty(MenuExternal, 'debug',
       set: function(val) { CFG.debug = val }, 
     });
 MenuExternal.setDefaultRenderer = (renderer) => {
-  Menu.defaultProps.renderer = renderer;
+  menuConfig.defRenderer = renderer;
 }
 MenuExternal.setDefaultRendererProps = (rendererProps) => {
-  Menu.defaultProps.rendererProps = rendererProps;
+  menuConfig.defRendererProps = rendererProps;
 }
 export default MenuExternal;

src/MenuOption.js

@@ -5,6 +5,7 @@ import { debug } from './logger';
 import { makeTouchable } from './helpers';
 import { withCtx } from './MenuProvider';
 
+const noop = () => {};
 
 export class MenuOption extends Component {
 
@@ -20,7 +21,7 @@ export class MenuOption extends Component {
 
   _getMenusOnSelect() {
     const menu = this.props.ctx.menuActions._getOpenedMenu();
-    return menu.instance.props.onSelect;
+    return menu.instance.props.onSelect || noop;
   }
 
   _getCustomStyles() {
@@ -81,13 +82,6 @@ MenuOption.propTypes = {
   testID: PropTypes.string,
 };
 
-MenuOption.defaultProps = {
-  disabled: false,
-  disableTouchable: false,
-  customStyles: {},
-  testID: undefined,
-};
-
 const defaultStyles = StyleSheet.create({
   option: {
     padding: 5,

src/MenuOptions.js

@@ -6,7 +6,7 @@ import { withCtx } from './MenuProvider';
 export class MenuOptions extends React.Component {
 
   updateCustomStyles(_props) {
-    const { customStyles } = _props
+    const { customStyles = {} } = _props
     const menu = this.props.ctx.menuActions._getOpenedMenu()
     // FIXME react 16.3 workaround for ControlledExample!
     if (!menu) return
@@ -23,7 +23,7 @@ export class MenuOptions extends React.Component {
   }
 
   render() {
-    const { customStyles, style, children } = this.props
+    const { customStyles = {}, style, children } = this.props
     return (
       <View style={[customStyles.optionsWrapper, style]}>
         {children}
@@ -42,8 +42,4 @@ MenuOptions.propTypes = {
   ]),
 };
 
-MenuOptions.defaultProps = {
-  customStyles: {},
-};
-
 export default withCtx(MenuOptions);

src/MenuProvider.js

@@ -8,6 +8,7 @@ import MenuPlaceholder from './MenuPlaceholder';
 import { measure, isClassComponent } from './helpers';
 import { debug } from './logger.js';
 import MenuOutside from './renderers/MenuOutside';
+import { menuConfig } from './config.js';
 
 const defaultOptionsContainerRenderer = options => options;
 const layoutsEqual = (a, b) => (
@@ -62,7 +63,7 @@ export default class MenuProvider extends Component {
   }
 
   componentDidMount() {
-    const { customStyles, skipInstanceCheck } = this.props;
+    const { customStyles = {}, skipInstanceCheck } = this.props;
     if (customStyles.menuContextWrapper) {
       console.warn('menuContextWrapper custom style is deprecated and it might be removed in future releases, use menuProviderWrapper instead.');
     }
@@ -171,10 +172,10 @@ export default class MenuProvider extends Component {
     if (prev.name !== next.name) {
       if (prev !== NULL && !prev.instance.isOpen()) {
         beforeSetState = () => this._beforeClose(prev)
-          .then(() => prev.instance.props.onClose());
+          .then(() => prev.instance.props.onClose && prev.instance.props.onClose());
       }
       if (next !== NULL) {
-        next.instance.props.onOpen();
+        next.instance.props.onOpen && next.instance.props.onOpen();
         afterSetState = () => this._initOpen(next);
       }
     }
@@ -208,7 +209,7 @@ export default class MenuProvider extends Component {
   }
 
   render() {
-    const { style, customStyles } = this.props;
+    const { style, customStyles = {} } = this.props;
     debug('render menu', this.isMenuOpen(), this._ownLayout);
     return (
       <PopupMenuContext.Provider value={this.menuCtx}>
@@ -262,7 +263,7 @@ export default class MenuProvider extends Component {
     debug('on backdrop press');
     const menu = this._getOpenedMenu();
     if (menu) {
-      menu.instance.props.onBackdropPress();
+      menu.instance.props.onBackdropPress && menu.instance.props.onBackdropPress();
     }
     this.closeMenu();
   }
@@ -293,10 +294,10 @@ export default class MenuProvider extends Component {
   _makeOptions() {
     const { instance, triggerLayout, optionsLayout } = this._getOpenedMenu();
     const options = instance._getOptions();
-    const { renderer, rendererProps } = instance.props;
+    const { renderer = menuConfig.defRenderer, rendererProps = menuConfig.defRendererProps } = instance.props;
     const windowLayout = this._ownLayout;
     const safeAreaLayout = this._safeAreaLayout;
-    const { optionsContainerStyle, renderOptionsContainer, customStyles } = options.props;
+    const { optionsContainerStyle, renderOptionsContainer, customStyles = {} } = options.props;
     const optionsRenderer = renderOptionsContainer || defaultOptionsContainerRenderer;
     const isOutside = !triggerLayout || !optionsLayout;
     const onLayout = e => this._onOptionsLayout(e, instance.getName(), isOutside);
@@ -349,12 +350,6 @@ MenuProvider.propTypes = {
   skipInstanceCheck: PropTypes.bool,
 }
 
-MenuProvider.defaultProps = {
-  customStyles: {},
-  backHandler: false,
-  skipInstanceCheck: false,
-};
-
 const styles = StyleSheet.create({
   flex1: {
     flex: 1,

src/MenuTrigger.js

@@ -14,7 +14,7 @@ export class MenuTrigger extends Component {
   }
 
   render() {
-    const { disabled, onRef, text, children, style, customStyles, menuName, 
+    const { disabled, onRef, text, children, style, customStyles = {}, menuName, 
       triggerOnLongPress, onAlternativeAction, testID, ...other } = this.props;
     const onPress = () => !disabled && this._onPress();
     const { Touchable, defaultTouchableProps } = makeTouchable(customStyles.TriggerTouchableComponent);
@@ -47,10 +47,4 @@ MenuTrigger.propTypes = {
   testID: PropTypes.string,
 };
 
-MenuTrigger.defaultProps = {
-  disabled: false,
-  customStyles: {},
-  testID: undefined,
-};
-
 export default withCtx(MenuTrigger)

src/config.js

@@ -0,0 +1,6 @@
+import ContextMenu from './renderers/ContextMenu';
+
+export const menuConfig = {
+  defRenderer: ContextMenu,
+  defRendererProps: {},
+}

src/renderers/Popover.js

@@ -233,10 +233,10 @@ export default class Popover extends React.Component {
       children,
       layouts,
       anchorStyle,
-      preferredPlacement,
+      preferredPlacement = 'top',
       openAnimationDuration,
       closeAnimationDuration,
-      placement: userPlacement,
+      placement: userPlacement = 'auto',
       ...other
     } = this.props;
     const isRTL = I18nManager.isRTL;
@@ -288,11 +288,6 @@ Popover.propTypes = {
   closeAnimationDuration: PropTypes.number,
 };
 
-Popover.defaultProps = {
-  preferredPlacement: 'top',
-  placement: 'auto',
-};
-
 const getContainerStyle = ({ placement, isRTL }) => ({
   left: {
     flexDirection: isRTL ? 'row' : 'row-reverse',

src/with-context.js

@@ -33,8 +33,6 @@ export function withContext(Context, propName = "context") {
     enhanceForwardRef.displayName = `enhanceContext-${consumerName}(${name})`;
 
     const FC = React.forwardRef(enhanceForwardRef);
-    FC.defaultProps = Component.defaultProps;
-    FC.propTypes = Component.propTypes;
     return FC
   };
 }