PropertiesCard.tsx 2.08 KB
Newer Older
1
2
3
4
import * as React from 'react';
import Grid from '@material-ui/core/Grid';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import {PageSection} from 'ui/layout/PageLayout';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
5
import { translate } from 'react-i18next';
6
7
8
9
10
11

interface IBundledProps extends React.ClassAttributes<any> {
    children?: any;
    propertiesList: Array<{title: string, value: any}>;
    title: string;
    small?: boolean;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
12
    t: any;
13
14
    topSection?: any;
    propertyItemProps: any;
15
16
17
18
19
20
21
}


class PropertiesCard extends React.Component<IBundledProps, any> {

    public render() {

22
        const {children = null, propertiesList, title, small = false, topSection, t, propertyItemProps} = this.props;
23
24
25
26

        return (
            <Grid item  lg={ small ? 6 : 12 } md={ 12 } xs={ 12 }>
                <PageSection title={ title }>
27
28
29
                    <Grid>
                      { topSection }
                    </Grid>
30
                    <Grid container justify={ 'center' } spacing={ 16 }>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
31
                        <Grid item md={ children ? 7 : 12 } sm={ 12 } style={ {width: '100%'} }>
32
33
                            <Properties>
                                {
34
                                    propertiesList.map((property, i) => (
35
                                        <PropertiesItem key={ `${i}-${property.title}` } numeric title={ property.title } { ...propertyItemProps } >
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
36
37
38
                                            { property.value &&  typeof property.value === 'number' ? t(`common:label.prettyNumber`, {value: property.value}) : property.value }
                                        </PropertiesItem>
                                    ))
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
                                }
                            </Properties>
                        </Grid>
                        { children &&
                            <Grid container justify={ 'center' } item md={ 5 }>
                                { children }
                            </Grid>
                        }
                    </Grid>
                </PageSection>
            </Grid>
        );
    }
}

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
54
export default translate()(PropertiesCard);