Properties.tsx 4.63 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
import * as React from 'react';
Matija Obreza's avatar
Matija Obreza committed
2
import { withStyles, WithStyles } from '@material-ui/core/styles';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
3
import { WithTranslation, withTranslation } from 'react-i18next';
Maxym Borodenko's avatar
Maxym Borodenko committed
4

Matija Obreza's avatar
Matija Obreza committed
5
import Grid from '@material-ui/core/Grid';
6
import { WithGridSpacing } from 'model/commonInterfaces';
Maxym Borodenko's avatar
Maxym Borodenko committed
7 8 9 10 11 12

const styles = (theme) => ({
    propertiesContainer: {
        // marginTop: '1rem',
        // marginBottom: '0',
        color: '#4d4c46',
Matija Obreza's avatar
Matija Obreza committed
13 14
        display: 'flex' as 'flex',
        flexWrap: 'wrap' as 'wrap',
Maxym Borodenko's avatar
Maxym Borodenko committed
15 16
    },
    propertiesRow: {
17
        /* eslint-disable */
Maxym Borodenko's avatar
Maxym Borodenko committed
18 19
        'marginTop': '2px',
        'marginBottom': '2px',
Matija Obreza's avatar
Matija Obreza committed
20 21 22
        // '& > *:first-child': {
        //     borderRight: 'solid 2px white',
        // },
23 24 25
        '& a' : {
            overflowWrap: 'break-word' as 'break-word',
        },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
26
        '&:nth-child(even) > div': {
Maxym Borodenko's avatar
Maxym Borodenko committed
27
            backgroundColor: '#f8f7f5',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
28
            height: '100%',
Maxym Borodenko's avatar
Maxym Borodenko committed
29
        },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
        '&:nth-child(odd) > div': {
Maxym Borodenko's avatar
Maxym Borodenko committed
31
            backgroundColor: '#f3f2ee',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
32
            height: '100%',
Maxym Borodenko's avatar
Maxym Borodenko committed
33
        },
34
        /* eslint-enable */
Maxym Borodenko's avatar
Maxym Borodenko committed
35
    },
36 37 38
    propertiesRowLabel: {
        fontSize: '1rem',
        fontFamily: 'Roboto, sans-serif',
Maxym Borodenko's avatar
Maxym Borodenko committed
39 40
        display: 'flex' as 'flex',
        alignItems: 'center' as 'center',
41
    },
Maxym Borodenko's avatar
Maxym Borodenko committed
42
    propertiesValue: {
Matija Obreza's avatar
Matija Obreza committed
43 44 45 46 47
        // display: 'flex' as 'flex',
        // flexWrap: 'wrap' as 'wrap',
        // alignItems: 'center' as 'center',
        fontSize: '1rem',
        padding: '.7rem 1rem',
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
48 49
    },
    propertiesValueSmall: {
Matija Obreza's avatar
Matija Obreza committed
50 51 52 53 54 55
        display: 'flex' as 'flex',
        overflowX: 'hidden' as 'hidden',
        alignItems: 'flex-end' as 'flex-end',
        [theme.breakpoints.down('sm')]: {
            justifyContent: 'flex-end' as 'flex-end',
        },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
56 57
    },
    propertiesValueNumeric: {
Matija Obreza's avatar
Matija Obreza committed
58 59 60
        display: 'flex' as 'flex',
        overflowX: 'hidden' as 'hidden',
        justifyContent: 'flex-end' as 'flex-end',
Maxym Borodenko's avatar
Maxym Borodenko committed
61 62 63 64 65
    },
});

interface IItemProps extends React.ClassAttributes<any> {
    // classes: any;
Matija Obreza's avatar
Matija Obreza committed
66
    title?: any;
Matija Obreza's avatar
Matija Obreza committed
67
    small?: boolean;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
68
    md?: boolean;
Matija Obreza's avatar
Matija Obreza committed
69
    keepEmpty?: boolean;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
70
    numeric?: boolean;
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
71
    t: any;
Maxym Borodenko's avatar
Maxym Borodenko committed
72
    // children: any;
73
    style?: any;
Matija Obreza's avatar
Matija Obreza committed
74
    className?: string;
Maxym Borodenko's avatar
Maxym Borodenko committed
75 76
}

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
77
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesRowLabel' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'> & WithTranslation & any, any> {
Maxym Borodenko's avatar
Maxym Borodenko committed
78 79

    public render() {
80
        const { keepEmpty, small, md, numeric, suggestion, title, classes, className, children, t, style, ...other} = this.props;
Matija Obreza's avatar
Matija Obreza committed
81 82 83
        if (!keepEmpty && ! children) {
          return null;
        }
Matija Obreza's avatar
Matija Obreza committed
84
        const hasTitle: boolean = title !== null && title;
Maxym Borodenko's avatar
Maxym Borodenko committed
85
        return (
86
          <Grid item xs={ 12 } md={ small ? 3 : md ? 6 : 12 } lg={ md ? 4 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` } { ...other }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
87
            <Grid container  style={ small ? {height: '100%' } : {} } spacing={ 0 }>
Matija Obreza's avatar
Matija Obreza committed
88
              { hasTitle && (
89 90 91 92 93 94
                <Grid
                  item
                  xs={ (small || md) && numeric ? 8 : suggestion ? 8 : 6 }
                  md={ small ? 12 : (numeric ? 10 : suggestion ? 8 : 4) }
                  className={ `font-bold p-halfrem ${classes.propertiesRowLabel}` }
                >
Matija Obreza's avatar
Matija Obreza committed
95 96 97
                    { title && typeof title === 'string' ? t(title) : title }
                </Grid>
              ) }
98 99 100 101 102 103 104
              <Grid
                item
                xs={ !hasTitle ? 12 : (small || md) && numeric ? 4 : suggestion ? 4 : 6 }
                md={ !hasTitle ? 12 : small ? 12 : (numeric ? 2 : suggestion ? 4 : 8) }
                style={ style }
                className={ style ? `${style}` : `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }
              >
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
105 106
                  { children }
              </Grid>
Maxym Borodenko's avatar
Maxym Borodenko committed
107
            </Grid>
Matija Obreza's avatar
Matija Obreza committed
108
          </Grid>
Maxym Borodenko's avatar
Maxym Borodenko committed
109 110 111 112
        );
    }
}

113
interface IProps extends React.ClassAttributes<any>, WithStyles, WithGridSpacing {
114
    className?: string;
Maxym Borodenko's avatar
Maxym Borodenko committed
115 116 117 118
    // classes: any;
    // children: any;
}

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
119
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
Maxym Borodenko's avatar
Maxym Borodenko committed
120
    public render() {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
121
        const { children, classes, spacing} = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
122
        return (
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
123
          <Grid container spacing={ spacing || 0 } className={ classes.propertiesContainer }>
Matija Obreza's avatar
Matija Obreza committed
124 125
              { children }
          </Grid>
Maxym Borodenko's avatar
Maxym Borodenko committed
126 127 128 129 130
        );
    }
}

const styledProperties = withStyles(styles)(Properties1);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
131
const styledPropertiesItem = withStyles(styles)(withTranslation()(PropertiesItem1));
Maxym Borodenko's avatar
Maxym Borodenko committed
132 133

export { styledProperties as Properties, styledPropertiesItem as PropertiesItem };