m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

broaden usage options for list-item (#8587)

Browse Source
This commit is contained in:
Brad Decker 2020-05-13 16:19:14 -05:00 committed by GitHub
parent 0ca5d1dc8a
commit 73272124b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 107 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/components/ui/list-item/index.js
View File

@ -1,3 +1,2 @@
import ListItem from './list-item.component'
export { default } from './list-item.component'
export default ListItem

28
ui/app/components/ui/list-item/index.scss
View File

@ -1,25 +1,27 @@
.list-item {
width: 100%;
min-width: 374px;
min-height: 86px;
margin: 0 20px;
margin: 0;
background: #FFFFFF;
padding: 24px 16px;
@extend %font;
border-top: 1px solid $mercury;
border-bottom: 1px solid $mercury;
color: $Grey-500;
color: $Black-100;
display: flex;
justify-content: flex-start;
align-items: stretch;
&__icon {
&__icon > * {
margin: 8px 14px 0 0;
}
&__col {
align-self: flex-start;
&-main {
flex-grow: 1;
}
}
&__heading {
@ -40,24 +42,10 @@
&__subheading {
font-size: 12px;
line-height: 14px;
color: $Grey-500;
}
&__status {
&--unapproved {
color: $flamingo;
}
&--failed {
color: $valencia;
}
}
&__approved {
.list-item__heading {
color: $shark;
}
}
&__amount {
&__rightContent {
margin: 0 0 0 auto;
text-align: right;
}

173
ui/app/components/ui/list-item/list-item.component.js
View File

@ -1,138 +1,51 @@
import React, { Component } from 'react'
import React from 'react'
import PropTypes from 'prop-types'
import Approve from '../icon/approve-icon.component'
import Interaction from '../icon/interaction-icon.component'
import Preloader from '../icon/preloader'
import Send from '../icon/send-icon.component'
import classnames from 'classnames'
const SendIcon = () => (
<Send
className="list-item__icon"
size={28}
color="#2F80ED"
/>
)
export default function ListItem ({ title, subtitle, onClick, subtitleStatus, children, titleIcon, icon, rightContent, className }) {
const primaryClassName = classnames('list-item', className)
const InteractionIcon = () => (
<Interaction
className="list-item__icon"
size={28}
color="#2F80ED"
/>
)
const ApproveIcon = () => (
<Approve
className="list-item__icon"
size={28}
color="#2F80ED"
/>
)
const FailIcon = () => (
<Interaction
className="list-item__icon"
size={28}
color="#D73A49"
/>
)
export default class ListItem extends Component {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
className: PropTypes.string,
status: PropTypes.string,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
children: PropTypes.node,
primaryCurrency: PropTypes.string,
secondaryCurrency: PropTypes.string,
}
static defaultProps = {
status: 'pending',
}
render () {
const {
className,
status,
title,
subtitle,
children,
primaryCurrency,
secondaryCurrency,
} = this.props
const { t } = this.context
const isApproved = status === 'approved'
const isUnapproved = status === 'unapproved'
const isPending = status === 'pending'
const isFailed = status === 'failed'
let icon = <InteractionIcon />
if (isApproved) {
icon = <ApproveIcon />
} else if (isPending) {
icon = <SendIcon />
} else if (isFailed) {
icon = <FailIcon />
}
let subtitleStatus = null
if (isUnapproved) {
subtitleStatus = (
<span><span className="list-item__status--unapproved">{t('unapproved')}</span> · </span>
)
} else if (isFailed) {
subtitleStatus = (
<span><span className="list-item__status--failed">{t('failed')}</span> · </span>
)
}
return (
<div className={className}>
<div className="list-item__col">
{ icon }
return (
<div className={primaryClassName} onClick={onClick}>
{icon && (
<div className="list-item__col list-item__icon">
{icon}
</div>
<div
className={classnames('list-item__col', {
'list-item__approved': isApproved,
})}
>
<h2 className="list-item__heading">
{ title } {isPending && (
<span className="list-item__heading-wrap">
<Preloader
size={16}
color="#D73A49"
/>
</span>
)}
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}
{subtitle}
</h3>
{children && (
<div className="list-item__more">
{ children }
</div>
)}
<div className="list-item__col list-item__col-main">
<h2 className="list-item__heading">
{ title } {titleIcon && (
<span className="list-item__heading-wrap">
{titleIcon}
</span>
)}
</div>
<div
className={classnames('list-item__col list-item__amount', {
'list-item__approved': isApproved,
})}
>
<h2 className="list-item__heading">{primaryCurrency}</h2>
<h3 className="list-item__subheading">{secondaryCurrency}</h3>
</div>
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}{subtitle}
</h3>
{children && (
<div className="list-item__more">
{ children }
</div>
)}
</div>
)
}
{rightContent && (
<div className="list-item__col list-item__rightContent">
{rightContent}
</div>
)}
</div>
)
}
ListItem.propTypes = {
title: PropTypes.string.isRequired,
titleIcon: PropTypes.node,
subtitle: PropTypes.string,
subtitleStatus: PropTypes.node,
children: PropTypes.node,
icon: PropTypes.node,
rightContent: PropTypes.node,
className: PropTypes.string,
onClick: PropTypes.func,
}

70
ui/app/components/ui/list-item/list-item.stories.js
View File

@ -1,51 +1,91 @@
import React from 'react'
import PropTypes from 'prop-types'
import ListItem from './list-item.component'
import { text } from '@storybook/addon-knobs/react'
import Send from '../icon/send-icon.component'
import Interaction from '../icon/interaction-icon.component'
import Approve from '../icon/approve-icon.component'
import Receive from '../icon/receive-icon.component'
import Preloader from '../icon/preloader'
import Button from '../button'
export default {
title: 'ListItem',
}
function Currencies ({ primary, secondary }) {
return (
<div>
<div>{primary}</div>
<div>{secondary}</div>
</div>
)
}
Currencies.propTypes = {
primary: PropTypes.string,
secondary: PropTypes.string,
}
const okColor = '#2F80ED'
const failColor = '#D73A49'
export const send = () => (
<ListItem
icon={<Send color={okColor} size={28} />}
titleIcon={ (
<Preloader
size={16}
color="#D73A49"
/>
)}
title={text('title', 'Send DAI')}
className="list-item"
status="pending"
subtitle={text('subtitle', 'Sept 20 · To: 00X4...3058')}
primaryCurrency={text('primaryCurrency', '- 0.0732 DAI')}
secondaryCurrency={text('secondaryCurrency', '- $6.04 USD')}
/>
rightContent={<Currencies primary={text('primaryCurrency', '- 0.0732 DAI')} secondary={text('secondaryCurrency', '- $6.04 USD')} />}
>
<div style={{ display: 'flex', marginTop: 8 }}>
<Button
type="secondary"
style={{ marginRight: 16, maxWidth: 150 }}
>
{ text('button1', 'Speed Up')}
</Button>
<Button style={{ maxWidth: 150 }}>
{ text('button2', 'Cancel') }
</Button>
</div>
</ListItem>
)
export const pending = () => (
<ListItem
icon={<Interaction color={failColor} size={28} />}
title={text('title', 'Hatch Turtles')}
className="list-item"
status="unapproved"
subtitleStatus={<span><span style={{ color: '#F56821' }}>Unapproved</span> · </span>}
subtitle={text('subtitle', 'Turtlefarm.com')}
primaryCurrency={text('primaryCurrency', '- 0.0732 ETH')}
secondaryCurrency={text('secondaryCurrency', '- $6.00 USD')}
rightContent={<Currencies primary={text('primaryCurrency', '- 0.0732 ETH')} secondary={text('secondaryCurrency', '- $6.00 USD')} />}
/>
)
export const approve = () => (
<ListItem
icon={<Approve color={okColor} size={28} />}
title={text('title', 'Approve spend limit')}
className="list-item"
status="approved"
subtitle={text('subtitle', 'Sept 20 · oxuniverse.com')}
primaryCurrency={text('primaryCurrency', '0.00070 DAI')}
secondaryCurrency={text('secondaryCurrency', '$0.02 USD')}
rightContent={<Currencies primary={text('primaryCurrency', '- 0 ETH')} secondary={text('secondaryCurrency', '- $0.00 USD')} />}
/>
)
export const failed = () => (
export const receive = () => (
<ListItem
icon={<Receive color={okColor} size={28} />}
title={text('title', 'Hatch Turtles')}
className="list-item"
status="failed"
subtitle={text('subtitle', 'Turtlefarm.com')}
primaryCurrency={text('primaryCurrency', '- 0.0732 ETH')}
secondaryCurrency={text('secondaryCurrency', '- $6.00 USD')}
subtitle={text('subtitle', 'Sept 20 · From: 00X4...3058')}
rightContent={<Currencies primary={text('primaryCurrency', '7.5 ETH')} secondary={text('secondaryCurrency', '$1,425.00 USD')} />}
/>
)