From 15e9e45652ee1a4694bbe17bb54000a931976004 Mon Sep 17 00:00:00 2001 From: Nicholas Murray Date: Fri, 2 Jul 2021 09:31:17 -0700 Subject: [PATCH 001/751] Added new ButtonWithMenu component --- src/components/ButtonWithMenu.js | 104 +++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 src/components/ButtonWithMenu.js diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js new file mode 100644 index 000000000000..346bf7123ac7 --- /dev/null +++ b/src/components/ButtonWithMenu.js @@ -0,0 +1,104 @@ +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import styles from '../styles/styles'; +import Button from './Button'; +import _ from 'underscore'; +import CreateMenu from "./CreateMenu"; +import ButtonWithDropdown from "./ButtonWithDropdown"; + +const propTypes = { + /** Text to display for the menu header */ + menuHeaderText: PropTypes.string, + + /** Callback to execute when the main button is pressed */ + onButtonPress: PropTypes.func, + + /** Callback to execute when a menu item is selected */ + onChange: PropTypes.func, + + /** Whether we should show a loading state for the main button */ + isLoading: PropTypes.bool, + + /** Menu options to display */ + /** [{text: "Pay with Expensify", icon: Wallet}, {text: "PayPal", icon: PayPal}, {text: "Venmo", icon: Venmo}] */ + options: PropTypes.arrayOf(PropTypes.shape({ + text: PropTypes.string.isRequired, + icon: PropTypes.elementType, + iconWidth: PropTypes.number, + iconHeight: PropTypes.number, + iconDescription: PropTypes.string, + })).isRequired, +}; + +const defaultProps = { + onButtonPress: () => {}, + onChange: () => {}, + isLoading: false, + menuHeaderText: '' +}; + +class ButtonWithMenu extends PureComponent { + constructor(props) { + super(props); + + this.state = { + selectedItem: props.options[0], + isMenuVisible: false, + }; + } + + setMenuVisibility(isMenuVisible) { + this.setState({isMenuVisible}); + } + + render() { + const selectedItemText = this.state.selectedItem.text; + return ( + + {this.props.options.length > 1 ? ( + { + this.setMenuVisibility(true); + }} + /> + ) : ( +