diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 09:57:40 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 09:57:40 +0800 |
commit | c5084f023ac0356660b9480f9e1f477001a61284 (patch) | |
tree | b635b3d086ad0a18445d336b82abb06a62b8e87d | |
parent | bf0437324d3499dbb516e85a4eb1fbdceb91707c (diff) | |
download | dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.tar dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.tar.gz dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.tar.bz2 dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.tar.lz dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.tar.xz dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.tar.zst dexon-0x-contracts-c5084f023ac0356660b9480f9e1f477001a61284.zip |
Add Input and AmountInput component
-rw-r--r-- | packages/instant/src/components/amount_input.tsx | 27 | ||||
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 6 | ||||
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/ui/index.ts | 1 | ||||
-rw-r--r-- | packages/instant/src/components/ui/input.tsx | 42 |
5 files changed, 75 insertions, 3 deletions
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx new file mode 100644 index 000000000..699541bfb --- /dev/null +++ b/packages/instant/src/components/amount_input.tsx @@ -0,0 +1,27 @@ +import { BigNumber } from '@0xproject/utils'; +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container, Flex, Input, Text } from './ui'; + +export interface AmountInputProps { + fontColor?: ColorOption; + fontSize?: string; + value?: BigNumber; + onChange?: (value: BigNumber) => void; +} + +export const AmountInput: React.StatelessComponent<AmountInputProps> = props => ( + <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block"> + <Input + fontColor={props.fontColor} + fontSize={props.fontSize} + value={props.value ? props.value.toString() : undefined} + placeholder="0.00" + width="2em" + /> + </Container> +); + +AmountInput.defaultProps = {}; diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 52c4bb2db..3da280652 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -1,7 +1,9 @@ +import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; import { ColorOption } from '../style/theme'; +import { AmountInput } from './amount_input'; import { Container, Flex, Text } from './ui'; export interface InstantHeadingProps {} @@ -22,9 +24,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro </Container> <Flex direction="row" justify="space-between"> <Container> - <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase"> - 0.00 - </Text> + <AmountInput fontSize="45px" /> <Container display="inline-block" marginLeft="10px"> <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase"> rep diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 64b5d4129..c45f6e5e9 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -22,6 +22,7 @@ export interface ContainerProps { border?: string; borderColor?: ColorOption; borderTop?: string; + borderBottom?: string; className?: string; backgroundColor?: ColorOption; hasBoxShadow?: boolean; @@ -50,6 +51,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'border-radius')} ${props => cssRuleIfExists(props, 'border')} ${props => cssRuleIfExists(props, 'border-top')} + ${props => cssRuleIfExists(props, 'border-bottom')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts index dca63b65c..bf5f6c700 100644 --- a/packages/instant/src/components/ui/index.ts +++ b/packages/instant/src/components/ui/index.ts @@ -2,3 +2,4 @@ export { Text, Title } from './text'; export { Button } from './button'; export { Flex } from './flex'; export { Container } from './container'; +export { Input } from './input'; diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx new file mode 100644 index 000000000..fc4fed14e --- /dev/null +++ b/packages/instant/src/components/ui/input.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; + +import { ColorOption, styled } from '../../style/theme'; + +import { Container, Flex, Text } from '../ui'; + +export interface InputProps { + className?: string; + value?: string; + width?: string; + fontSize?: string; + fontColor?: ColorOption; + placeholder?: string; + onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; +} + +const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => ( + <input className={className} value={value} onChange={onChange} placeholder={placeholder} /> +); + +export const Input = styled(PlainInput)` + font-size: ${props => props.fontSize}; + width: ${props => props.width}; + padding: 0.1em 0em; + font-family: 'Inter UI'; + color: ${props => props.theme[props.fontColor || 'white']}; + background: transparent; + outline: none; + border: none; + &::placeholder { + color: ${props => props.theme[props.fontColor || 'white']}; + opacity: 0.5; + } +`; + +Input.defaultProps = { + width: 'auto', + fontColor: ColorOption.white, + fontSize: '12px', +}; + +Input.displayName = 'Input'; |