aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/button-group/button-group.component.js
diff options
context:
space:
mode:
authorDan J Miller <danjm.com@gmail.com>2018-07-25 08:17:44 +0800
committerGitHub <noreply@github.com>2018-07-25 08:17:44 +0800
commit1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0 (patch)
tree513b1c9f69893329462d69d90d856606016100a1 /ui/app/components/button-group/button-group.component.js
parent3667f3cb8556d55ad893ec8c1a0f84447273906f (diff)
parenta146e5ebbcdf3ff334d2a5fb3b7aba1dcac9ab12 (diff)
downloadtangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.tar
tangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.tar.gz
tangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.tar.bz2
tangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.tar.lz
tangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.tar.xz
tangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.tar.zst
tangerine-wallet-browser-1f9c52fbf03e527dbd7f91c7e6e38b3cc6dc5be0.zip
Merge pull request #4845 from MetaMask/button-group
Add ButtonGroup component
Diffstat (limited to 'ui/app/components/button-group/button-group.component.js')
-rw-r--r--ui/app/components/button-group/button-group.component.js61
1 files changed, 61 insertions, 0 deletions
diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
new file mode 100644
index 000000000..f99f710ce
--- /dev/null
+++ b/ui/app/components/button-group/button-group.component.js
@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class ButtonGroup extends PureComponent {
+ static propTypes = {
+ defaultActiveButtonIndex: PropTypes.number,
+ disabled: PropTypes.bool,
+ children: PropTypes.array,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ }
+
+ static defaultProps = {
+ className: 'button-group',
+ }
+
+ state = {
+ activeButtonIndex: this.props.defaultActiveButtonIndex || 0,
+ }
+
+ handleButtonClick (activeButtonIndex) {
+ this.setState({ activeButtonIndex })
+ }
+
+ renderButtons () {
+ const { children, disabled } = this.props
+
+ return React.Children.map(children, (child, index) => {
+ return child && (
+ <button
+ className={classnames(
+ 'button-group__button',
+ { 'button-group__button--active': index === this.state.activeButtonIndex },
+ )}
+ onClick={() => {
+ this.handleButtonClick(index)
+ child.props.onClick && child.props.onClick()
+ }}
+ disabled={disabled || child.props.disabled}
+ key={index}
+ >
+ { child.props.children }
+ </button>
+ )
+ })
+ }
+
+ render () {
+ const { className, style } = this.props
+
+ return (
+ <div
+ className={className}
+ style={style}
+ >
+ { this.renderButtons() }
+ </div>
+ )
+ }
+}