packages/instant/src/components/ui/flex.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import * as _ from 'lodash';

import { media } from '../../style/media';
import { ColorOption, styled } from '../../style/theme';
import { cssRuleIfExists } from '../../style/util';

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';
    width?: string;
    height?: string;
    backgroundColor?: ColorOption;
    inline?: boolean;
    flexGrow?: number | string;

    smallWidth?: string;
    smallHeight?: string;
}

const mediaStyles = (props: FlexProps) => {
    if (!_.some([props.smallWidth, props.smallHeight])) {
        return '';
    }

    return media.small`
        width: ${props.smallWidth || props.width || 'auto'}
        height: ${props.smallHeight || props.height || 'auto'}
    `;
};

export const Flex =
    styled.div <
    FlexProps >
    `
    display: ${props => (props.inline ? 'inline-flex' : 'flex')};
    flex-direction: ${props => props.direction};
    flex-wrap: ${props => props.flexWrap};
    ${props => cssRuleIfExists(props, 'flexGrow')}
    justify-content: ${props => props.justify};
    align-items: ${props => props.align};
    ${props => cssRuleIfExists(props, 'width')}
    ${props => cssRuleIfExists(props, 'height')}
    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
    ${props => mediaStyles(props)}
`;

Flex.defaultProps = {
    direction: 'row',
    flexWrap: 'nowrap',
    justify: 'center',
    align: 'center',
};

Flex.displayName = 'Flex';