aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-05 05:04:56 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-05 05:04:56 +0800
commit85c34b17aa074e67ed9263094cc0ee75a8f00e60 (patch)
treed2db68e31811d47f9092a051474073b07bfe260e /packages/instant
parent4b8348da8cc50ef0da6e6b2bb7d276f1246437cf (diff)
downloaddexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.tar
dexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.tar.gz
dexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.tar.bz2
dexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.tar.lz
dexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.tar.xz
dexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.tar.zst
dexon-sol-tools-85c34b17aa074e67ed9263094cc0ee75a8f00e60.zip
Add Flex and Container component
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/ui/container.tsx47
-rw-r--r--packages/instant/src/components/ui/flex.tsx34
-rw-r--r--packages/instant/src/style/util.ts10
3 files changed, 91 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
new file mode 100644
index 000000000..f928ed25b
--- /dev/null
+++ b/packages/instant/src/components/ui/container.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
+
+export interface ContainerProps {
+ display?: string;
+ position?: string;
+ top?: string;
+ right?: string;
+ bottom?: string;
+ left?: string;
+ maxWidth?: string;
+ margin: string;
+ marginTop?: string;
+ marginRight?: string;
+ marginBottom?: string;
+ marginLeft?: string;
+ padding?: string;
+ className?: string;
+ backgroundColor?: ColorOption;
+}
+
+const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
+ <div className={className}>{children}</div>
+);
+
+export const Container = styled(PlainContainer)`
+ ${props => cssRuleIfExists(props, 'display')}
+ ${props => cssRuleIfExists(props, 'position')}
+ ${props => cssRuleIfExists(props, 'top')}
+ ${props => cssRuleIfExists(props, 'right')}
+ ${props => cssRuleIfExists(props, 'bottom')}
+ ${props => cssRuleIfExists(props, 'left')}
+ ${props => cssRuleIfExists(props, 'max-width')}
+ ${props => cssRuleIfExists(props, 'margin')}
+ ${props => cssRuleIfExists(props, 'margin-top')}
+ ${props => cssRuleIfExists(props, 'margin-right')}
+ ${props => cssRuleIfExists(props, 'margin-bottom')}
+ ${props => cssRuleIfExists(props, 'margin-left')}
+ ${props => cssRuleIfExists(props, 'padding')}
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Container.defaultProps = {
+ display: 'inline-block',
+};
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
new file mode 100644
index 000000000..544d9fe23
--- /dev/null
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+export interface FlexProps {
+ direction: 'row' | 'column';
+ flexWrap: 'wrap' | 'nowrap';
+ justify: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ align: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ backgroundColor?: ColorOption;
+ className?: string;
+}
+
+const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
+ <div className={className}>{children}</div>
+);
+
+export const Flex = styled(PlainFlex)`
+ display: flex;
+ direction: ${props => props.direction};
+ flex-wrap: ${props => props.flexWrap};
+ justify-content: ${props => props.justify};
+ align-items: ${props => props.align};
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Flex.defaultProps = {
+ direction: 'row',
+ flexWrap: 'nowrap',
+ justify: 'center',
+ align: 'center',
+};
+
+Flex.displayName = 'Flex';
diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts
new file mode 100644
index 000000000..7cf13133f
--- /dev/null
+++ b/packages/instant/src/style/util.ts
@@ -0,0 +1,10 @@
+import * as _ from 'lodash';
+
+export const cssRuleIfExists = (props: any, rule: string): string => {
+ const camelCaseRule = _.camelCase(rule);
+ const ruleValueIfExists = props[camelCaseRule];
+ if (!_.isUndefined(ruleValueIfExists)) {
+ return `${rule}: ${ruleValueIfExists};`;
+ }
+ return '';
+};