Properties.tsx 2.11 KB
Newer Older
1
2
3
4
5
6
import * as React from 'react';
import { withStyles, WithStyles } from 'material-ui/styles';

import Grid from 'material-ui/Grid';

const styles = (theme) => ({
Maxim Babichev's avatar
Maxim Babichev committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    propertiesContainer: {
        // marginTop: '1rem',
        // marginBottom: '0',
    },
    propertiesRow: {
        /* tslint:disable */
        'marginTop': '2px',
        'marginBottom': '2px',
        '& > *:first-child': {
            borderRight: 'solid 2px white',
        },
        '&:nth-child(even)': {
            backgroundColor: '#f8f7f5',
        },
        '&:nth-child(odd)': {
            backgroundColor: '#f3f2ee',
        },
        /* tslint:enable */
    },
Matija Obreza's avatar
Matija Obreza committed
26
27
28
    propertiesValue: {
      overflowX: 'hidden' as 'hidden',
    },
29
30
31
});

interface IItemProps extends React.ClassAttributes<any> {
Maxim Babichev's avatar
Maxim Babichev committed
32
33
34
    // classes: any;
    title: any;
    // children: any;
35
36
}

Matija Obreza's avatar
Matija Obreza committed
37
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
38

Maxim Babichev's avatar
Maxim Babichev committed
39
40
41
42
    public render() {
        const { title, classes, children } = this.props;
        return (
            <Grid container spacing={ 0 } className={ classes.propertiesRow }>
Matija Obreza's avatar
Matija Obreza committed
43
44
                <Grid item xs={ 4 } md={ 3 } className="font-bold p-halfrem">{ title }</Grid>
                <Grid item xs={ 8 } md={ 9 } className={ `${classes.propertiesValue} p-halfrem` }>{ children }</Grid>
Maxim Babichev's avatar
Maxim Babichev committed
45
46
47
            </Grid>
        );
    }
48
49
50
}

interface IProps extends React.ClassAttributes<any> {
Maxim Babichev's avatar
Maxim Babichev committed
51
52
    // classes: any;
    // children: any;
53
54
}

Matija Obreza's avatar
Matija Obreza committed
55
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
Maxim Babichev's avatar
Maxim Babichev committed
56
57
58
59
60
61
62
63
64
65
    public render() {
        const { children, classes} = this.props;
        return (
            <Grid container spacing={ 0 }>
                <Grid item xs={ 12 } className={ classes.propertiesContainer }>
                    { children }
                </Grid>
            </Grid>
        );
    }
66
67
68
69
70
71
}

const styledProperties = withStyles(styles)(Properties1);
const styledPropertiesItem = withStyles(styles)(PropertiesItem1);

export { styledProperties as Properties, styledPropertiesItem as PropertiesItem };