1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Add ButtonGroup component

This commit is contained in:
Alexander Tseung 2018-07-20 10:25:45 -07:00
parent 6d04c80302
commit cdda52d799
5 changed files with 151 additions and 0 deletions

View File

@ -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>
)
}
}

View File

@ -0,0 +1,49 @@
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import ButtonGroup from './'
import Button from '../button'
import { text, boolean } from '@storybook/addon-knobs/react'
storiesOf('ButtonGroup', module)
.add('with Buttons', () =>
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
defaultActiveButtonIndex={1}
>
<Button
onClick={action('cheap')}
>
{text('Button1', 'Cheap')}
</Button>
<Button
onClick={action('average')}
>
{text('Button2', 'Average')}
</Button>
<Button
onClick={action('fast')}
>
{text('Button3', 'Fast')}
</Button>
</ButtonGroup>
)
.add('with a disabled Button', () =>
<ButtonGroup
style={{ width: '300px' }}
disabled={boolean('Disabled', false)}
>
<Button
onClick={action('enabled')}
>
{text('Button1', 'Enabled')}
</Button>
<Button
onClick={action('disabled')}
disabled
>
{text('Button2', 'Disabled')}
</Button>
</ButtonGroup>
)

View File

@ -0,0 +1 @@
export { default } from './button-group.component'

View File

@ -0,0 +1,38 @@
.button-group {
display: flex;
justify-content: center;
align-items: center;
&__button {
font-family: Roboto;
font-size: 1rem;
color: $tundora;
border-style: solid;
border-color: $alto;
border-width: 1px 1px 1px;
border-left: 0;
flex: 1;
padding: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:first-child {
border-left: 1px solid $alto;
border-radius: 4px 0 0 4px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
&--active {
background-color: $dodger-blue;
color: $white;
}
&:disabled {
opacity: .5;
}
}
}

View File

@ -1,3 +1,5 @@
@import './button-group/index';
@import './export-text-container/index';
@import './selected-account/index';