aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-20 04:45:12 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-20 04:45:12 +0800
commitd5105b5c9f74a4f52e4952b845a37692bb824fd4 (patch)
tree2d7d5cd24088ce9652d5b79a9d5bc133436cfcb5
parent43ad2fe23bec01b077f5c55a23736fdcb24781a3 (diff)
downloaddexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar
dexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.gz
dexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.bz2
dexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.lz
dexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.xz
dexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.tar.zst
dexon-sol-tools-d5105b5c9f74a4f52e4952b845a37692bb824fd4.zip
feat: user better syntax for defining ui components
-rw-r--r--packages/instant/src/components/ui/container.tsx6
-rw-r--r--packages/instant/src/components/ui/flex.tsx2
-rw-r--r--packages/instant/src/components/ui/input.tsx6
-rw-r--r--packages/instant/src/components/ui/text.tsx8
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};