meriadec
7 years ago
9 changed files with 303 additions and 33 deletions
@ -0,0 +1,30 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import styled, { keyframes } from 'styled-components' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import IconLoader from 'icons/Loader' |
|||
|
|||
const rotate = keyframes` |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
` |
|||
|
|||
const Container = styled(Box)` |
|||
width: ${p => p.size}px; |
|||
height: ${p => p.size}px; |
|||
animation: ${rotate} 1.5s linear infinite; |
|||
` |
|||
|
|||
export default function Spinner({ size, ...props }: { size: number }) { |
|||
return ( |
|||
<Container size={size} {...props}> |
|||
<IconLoader size={size} /> |
|||
</Container> |
|||
) |
|||
} |
|||
@ -0,0 +1,159 @@ |
|||
// @flow
|
|||
|
|||
import React, { PureComponent } from 'react' |
|||
import styled from 'styled-components' |
|||
|
|||
import { darken } from 'styles/helpers' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import Radio from 'components/base/Radio' |
|||
import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon' |
|||
import FormattedVal from 'components/base/FormattedVal' |
|||
import Input from 'components/base/Input' |
|||
import IconEdit from 'icons/Edit' |
|||
import IconCheck from 'icons/Check' |
|||
|
|||
type Props = { |
|||
account: Account, |
|||
isChecked: boolean, |
|||
onClick: Account => void, |
|||
onAccountUpdate: Account => void, |
|||
} |
|||
|
|||
type State = { |
|||
isEditing: boolean, |
|||
accountNameCopy: string, |
|||
} |
|||
|
|||
export default class AccountRow extends PureComponent<Props, State> { |
|||
state = { |
|||
isEditing: false, |
|||
accountNameCopy: '', |
|||
} |
|||
|
|||
componentDidUpdate(prevProps, prevState) { |
|||
const startedEditing = !prevState.isEditing && this.state.isEditing |
|||
if (startedEditing) { |
|||
this._input.handleSelectEverything() |
|||
} |
|||
} |
|||
|
|||
handleEditClick = e => { |
|||
this.handlePreventSubmit(e) |
|||
const { account } = this.props |
|||
this.setState({ isEditing: true, accountNameCopy: account.name }) |
|||
} |
|||
|
|||
handleSubmitName = e => { |
|||
this.handlePreventSubmit(e) |
|||
const { account, onAccountUpdate, isChecked, onClick } = this.props |
|||
const { accountNameCopy } = this.state |
|||
const updatedAccount = { ...account, name: accountNameCopy } |
|||
this.setState({ isEditing: false, accountNameCopy: '' }) |
|||
onAccountUpdate(updatedAccount) |
|||
if (!isChecked) { |
|||
onClick(updatedAccount) |
|||
} |
|||
} |
|||
|
|||
handlePreventSubmit = e => { |
|||
// prevent account row to be submitted
|
|||
e.preventDefault() |
|||
e.stopPropagation() |
|||
} |
|||
|
|||
handleChangeName = accountNameCopy => this.setState({ accountNameCopy }) |
|||
|
|||
_input = null |
|||
|
|||
render() { |
|||
const { account, isChecked, onClick } = this.props |
|||
const { isEditing, accountNameCopy } = this.state |
|||
|
|||
return ( |
|||
<AccountRowContainer onClick={() => onClick(account)}> |
|||
<CryptoCurrencyIcon currency={account.currency} size={16} color={account.currency.color} /> |
|||
<Box shrink grow ff="Open Sans|SemiBold" color="dark" fontSize={4}> |
|||
{isEditing ? ( |
|||
<Input |
|||
containerProps={{ style: { width: 260 } }} |
|||
value={accountNameCopy} |
|||
onChange={this.handleChangeName} |
|||
onClick={this.handlePreventSubmit} |
|||
onEnter={this.handleSubmitName} |
|||
renderRight={ |
|||
<InputRight onClick={this.handleSubmitName}> |
|||
<IconCheck size={16} /> |
|||
</InputRight> |
|||
} |
|||
ref={input => (this._input = input)} |
|||
/> |
|||
) : ( |
|||
<div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>{account.name}</div> |
|||
)} |
|||
</Box> |
|||
{!isEditing && ( |
|||
<Edit onClick={this.handleEditClick}> |
|||
<IconEdit size={13} /> |
|||
<span>{'edit name'}</span> |
|||
</Edit> |
|||
)} |
|||
<FormattedVal |
|||
val={account.balance} |
|||
unit={account.unit} |
|||
showCode |
|||
fontSize={4} |
|||
color="grey" |
|||
/> |
|||
<Radio isChecked={isChecked} /> |
|||
</AccountRowContainer> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const AccountRowContainer = styled(Box).attrs({ |
|||
horizontal: true, |
|||
align: 'center', |
|||
bg: 'lightGrey', |
|||
px: 3, |
|||
flow: 3, |
|||
})` |
|||
height: 48px; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background-color: ${p => darken(p.theme.colors.lightGrey, 0.015)}; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: ${p => darken(p.theme.colors.lightGrey, 0.03)}; |
|||
} |
|||
` |
|||
|
|||
const Edit = styled(Box).attrs({ |
|||
color: 'wallet', |
|||
fontSize: 3, |
|||
horizontal: true, |
|||
align: 'center', |
|||
flow: 1, |
|||
py: 1, |
|||
})` |
|||
display: none; |
|||
${AccountRowContainer}:hover & { |
|||
display: flex; |
|||
} |
|||
&:hover { |
|||
text-decoration: underline; |
|||
} |
|||
` |
|||
|
|||
const InputRight = styled(Box).attrs({ |
|||
bg: 'wallet', |
|||
color: 'white', |
|||
align: 'center', |
|||
justify: 'center', |
|||
shrink: 0, |
|||
})` |
|||
width: 40px; |
|||
` |
|||
Loading…
Reference in new issue