diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-20 04:45:12 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-20 04:45:12 +0800 |
commit | d5105b5c9f74a4f52e4952b845a37692bb824fd4 (patch) | |
tree | 2d7d5cd24088ce9652d5b79a9d5bc133436cfcb5 | |
parent | 43ad2fe23bec01b077f5c55a23736fdcb24781a3 (diff) | |
download | dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.gz dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.bz2 dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.lz dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.xz dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.zst dexon-0x-contracts-d5105b5c9f74a4f52e4952b845a37692bb824fd4.zip |
feat: user better syntax for defining ui components
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 6 | ||||
-rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/ui/input.tsx | 6 | ||||
-rw-r--r-- | packages/instant/src/components/ui/text.tsx | 8 |
4 files changed, 4 insertions, 18 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 02b16e39f..b7e17d807 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -29,11 +29,7 @@ export interface ContainerProps { zIndex?: number; } -const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => ( - <div className={className}>{children}</div> -); - -export const Container = styled(PlainContainer)` +export const Container = styled<ContainerProps, 'div'>('div')` box-sizing: border-box; ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index 327e91926..f2013f60f 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -17,7 +17,7 @@ const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) <div className={className}>{children}</div> ); -export const Flex = styled(PlainFlex)` +export const Flex = styled<FlexProps, 'div'>('div')` display: flex; flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx index f8c6b6ef6..9db7d1c4c 100644 --- a/packages/instant/src/components/ui/input.tsx +++ b/packages/instant/src/components/ui/input.tsx @@ -12,11 +12,7 @@ export interface InputProps { 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)` +export const Input = styled<InputProps, 'input'>('input')` font-size: ${props => props.fontSize}; width: ${props => props.width}; padding: 0.1em 0em; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index 9fb8ea26f..d23b0034d 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -23,14 +23,8 @@ export interface TextProps { display?: string; } -const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => ( - <div className={className} onClick={onClick}> - {children} - </div> -); - const darkenOnHoverAmount = 0.3; -export const Text = styled(PlainText)` +export const Text = styled<TextProps, 'div'>('div')` font-family: ${props => props.fontFamily}; font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; |