diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index e82ac17..b242a10 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -41,6 +41,22 @@ type Props = { theme: Theme, }; +type State = { + top: number, + left: number, + menuWidth: number, + menuHeight: number, + buttonWidth: number, + buttonHeight: number, + opacityAnimation: Animated.Value, + menuSizeAnimation: Animated.ValueXY, + menuState: 'hidden' | 'animating' | 'shown', +}; + +const ANIMATION_DURATION = 300; +const EASING = Easing.bezier(0.4, 0, 0.2, 1); +const SCREEN_INDENT = 8; + /** * Menus display a list of choices on temporary surfaces. Their placement varies based on the element that opens them. * @@ -85,23 +101,6 @@ type Props = { * } * ``` */ - -type State = { - top: number, - left: number, - menuWidth: number, - menuHeight: number, - buttonWidth: number, - buttonHeight: number, - opacityAnimation: Animated.Value, - menuSizeAnimation: Animated.ValueXY, - menuState: 'hidden' | 'animating' | 'shown', -}; - -const ANIMATION_DURATION = 300; -const EASING = Easing.bezier(0.4, 0, 0.2, 1); -const SCREEN_INDENT = 8; - class Menu extends React.Component { // @component ./MenuItem.js static Item = MenuItem; @@ -120,7 +119,7 @@ class Menu extends React.Component { componentDidUpdate(prevProps) { if (prevProps.visible !== this.props.visible) { - this._toggle(); + this._updateVisibility(); } } @@ -167,7 +166,7 @@ class Menu extends React.Component { this.setState({ buttonWidth: width, buttonHeight: height }); }; - _toggle = () => { + _updateVisibility = () => { if (this.props.visible) { this._show(); } else { @@ -219,43 +218,38 @@ class Menu extends React.Component { menuSizeAnimation, } = this.state; - const menuSize = { - width: menuSizeAnimation.x, - height: menuSizeAnimation.y, - }; - // Adjust position of menu let { left, top } = this.state; const transforms = []; - const dimensions = Dimensions.get('screen'); + const { width: screenWidth, height: screenHeight } = Dimensions.get( + 'screen' + ); // Flip by X axis if menu hits right screen border - if (left > dimensions.width - menuWidth - SCREEN_INDENT) { + if (left > screenWidth - menuWidth - SCREEN_INDENT) { transforms.push({ translateX: Animated.multiply(menuSizeAnimation.x, -1), }); - left = Math.min(dimensions.width - SCREEN_INDENT, left + buttonWidth); + left = Math.min(screenWidth - SCREEN_INDENT, left + buttonWidth); } // Flip by Y axis if menu hits bottom screen border - if (top > dimensions.height - menuHeight - SCREEN_INDENT) { + if (top > screenHeight - menuHeight - SCREEN_INDENT) { transforms.push({ translateY: Animated.multiply(menuSizeAnimation.y, -1), }); - top = Math.min(dimensions.height - SCREEN_INDENT, top + buttonHeight); + top = Math.min(screenHeight - SCREEN_INDENT, top + buttonHeight); } - // RTL support - const leftOrRight = I18nManager.isRTL ? { right: left } : { left }; - const shadowMenuContainerStyle = { opacity: opacityAnimation, transform: transforms, borderRadius: theme.roundness, - ...leftOrRight, + right: I18nManager.isRTL ? left : {}, + left: I18nManager.isRTL ? {} : left, top, }; @@ -279,7 +273,13 @@ class Menu extends React.Component { ]} > {children}