feature: add see more button and create WalletSummary docz
This commit is contained in:
parent
518de62956
commit
d49c38449a
|
@ -1,16 +1,20 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
import { IoIosMore } from 'react-icons/io';
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
import { RowComponent } from './row';
|
import { RowComponent } from './row';
|
||||||
|
import { DropdownComponent } from './dropdown';
|
||||||
|
|
||||||
|
import theme from '../theme';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
margin: 10px;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AllAddresses = styled(TextComponent)`
|
const AllAddresses = styled(TextComponent)`
|
||||||
|
@ -35,6 +39,20 @@ const ShieldedValue = styled(Label)`
|
||||||
color: ${props => props.theme.colors.activeItem};
|
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 = {
|
type Props = {
|
||||||
total: number,
|
total: number,
|
||||||
shielded: number,
|
shielded: number,
|
||||||
|
@ -48,6 +66,14 @@ export const WalletSummaryComponent = ({
|
||||||
total, shielded, transparent, dollarValue,
|
total, shielded, transparent, dollarValue,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
|
<DropdownComponent
|
||||||
|
renderTrigger={(toggleVisibility, isOpen) => (
|
||||||
|
<SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
|
||||||
|
<IoIosMore color={theme.colors.text} size={35} />
|
||||||
|
</SeeMoreButton>
|
||||||
|
)}
|
||||||
|
options={[]}
|
||||||
|
/>
|
||||||
<AllAddresses value='ALL ADDRESSES' isBold />
|
<AllAddresses value='ALL ADDRESSES' isBold />
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<TextComponent size='3em' value={`ZEC ${formatNumber(total)}`} isBold />
|
<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