diff --git a/__tests__/MenuOption-test.js b/__tests__/MenuOption-test.js index bbb8f95..f51a21a 100644 --- a/__tests__/MenuOption-test.js +++ b/__tests__/MenuOption-test.js @@ -38,7 +38,8 @@ describe('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', () => { diff --git a/__tests__/MenuTrigger-test.js b/__tests__/MenuTrigger-test.js index 71ad492..8bee254 100644 --- a/__tests__/MenuTrigger-test.js +++ b/__tests__/MenuTrigger-test.js @@ -38,7 +38,8 @@ describe('MenuTrigger', () => { const { instance } = render( ); - expect(instance.props.disabled).toBe(false); + // react deprecated default props -> disabled = undefined + expect(instance.props.disabled).toBe(undefined); }); it('should trigger on ref event', () => { diff --git a/src/Menu.js b/src/Menu.js index 40a21d9..88a07bd 100644 --- a/src/Menu.js +++ b/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; diff --git a/src/MenuOption.js b/src/MenuOption.js index bc944ef..84b1791 100644 --- a/src/MenuOption.js +++ b/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, diff --git a/src/MenuOptions.js b/src/MenuOptions.js index b848456..423c7af 100644 --- a/src/MenuOptions.js +++ b/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 ( {children} @@ -42,8 +42,4 @@ MenuOptions.propTypes = { ]), }; -MenuOptions.defaultProps = { - customStyles: {}, -}; - export default withCtx(MenuOptions); diff --git a/src/MenuProvider.js b/src/MenuProvider.js index f3efd35..1fc0f6e 100644 --- a/src/MenuProvider.js +++ b/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 ( @@ -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, diff --git a/src/MenuTrigger.js b/src/MenuTrigger.js index f23ff32..2f20071 100644 --- a/src/MenuTrigger.js +++ b/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) diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..b64351e --- /dev/null +++ b/src/config.js @@ -0,0 +1,6 @@ +import ContextMenu from './renderers/ContextMenu'; + +export const menuConfig = { + defRenderer: ContextMenu, + defRendererProps: {}, +} diff --git a/src/renderers/Popover.js b/src/renderers/Popover.js index 45b9c9d..2eab69e 100644 --- a/src/renderers/Popover.js +++ b/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', diff --git a/src/with-context.js b/src/with-context.js index 642fecb..1c67812 100644 --- a/src/with-context.js +++ b/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 }; }