feature: add see more button and create WalletSummary docz
This commit is contained in:
parent
518de62956
commit
d49c38449a
|
@ -1,16 +1,20 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { IoIosMore } from 'react-icons/io';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
import { RowComponent } from './row';
|
||||
import { DropdownComponent } from './dropdown';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const AllAddresses = styled(TextComponent)`
|
||||
|
@ -35,6 +39,20 @@ const ShieldedValue = styled(Label)`
|
|||
color: ${props => props.theme.colors.activeItem};
|
||||
`;
|
||||
|
||||
const SeeMoreButton = styled.button`
|
||||
outline: none;
|
||||
border-radius: 100%;
|
||||
border-width: 1px;
|
||||
border-color: ${props => (props.isOpen ? props.theme.colors.activeItem : props.theme.colors.text)};
|
||||
background-color: transparent;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
total: number,
|
||||
shielded: number,
|
||||
|
@ -48,6 +66,14 @@ export const WalletSummaryComponent = ({
|
|||
total, shielded, transparent, dollarValue,
|
||||
}: Props) => (
|
||||
<Wrapper>
|
||||
<DropdownComponent
|
||||
renderTrigger={(toggleVisibility, isOpen) => (
|
||||
<SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
|
||||
<IoIosMore color={theme.colors.text} size={35} />
|
||||
</SeeMoreButton>
|
||||
)}
|
||||
options={[]}
|
||||
/>
|
||||
<AllAddresses value='ALL ADDRESSES' isBold />
|
||||
<ValueBox>
|
||||
<TextComponent size='3em' value={`ZEC ${formatNumber(total)}`} isBold />
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
name: Wallet Summary
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
|
||||
import { WalletSummaryComponent } from './wallet-summary.js'
|
||||
import { DoczWrapper } from '../theme.js'
|
||||
|
||||
# Wallet Summary
|
||||
|
||||
<PropsTable of={WalletSummaryComponent} />
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() => (
|
||||
<div style={{ width: '700px' }}>
|
||||
<WalletSummaryComponent total={5000} shielded={2500} transparent={2500} dollarValue={56} />
|
||||
</div>
|
||||
)}
|
||||
</DoczWrapper>
|
||||
</Playground>
|
Loading…
Reference in New Issue