MapConfigSection.tsx 1.46 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import * as React from 'react';
import { connect } from 'react-redux';
// model
import MapLayer from 'model/genesys/MapTileLayer';
// ui
import withStyles from '@material-ui/core/styles/withStyles';
import ExpandFiltersComponent from 'ui/common/filter/ExpandFiltersComponent';
import { Divider } from '@material-ui/core';
import MapLayerConfig from './MapLayerConfig';

/*tslint:disable*/
const styles = (theme) => ({
  root: {
    overflow: 'hidden' as 'hidden',
  },
  layersTitle: {
Oleksii Savran's avatar
Oleksii Savran committed
17 18 19 20 21 22
    'html[dir="ltr"] &' : {
      paddingLeft: '8px',
    },
    'html[dir="rtl"] &' : {
      paddingRight: '8px',
    },
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
    fontSize: '15px',
    fontWeight: 700,
    lineHeight: '40px',
    color: '#81807f',
    textTransform: 'uppercase' as 'uppercase',
  },
});

interface IMapConfigSectionProps extends React.ClassAttributes<any> {
  classes: any;
  mapLayers: MapLayer[];
}

class MapConfigSection extends React.Component<IMapConfigSectionProps> {

  public render() {
    const {classes, mapLayers} = this.props;
    return (
      <div className={ classes.root }>
        <ExpandFiltersComponent title="Configure map"/>
        <span className={ classes.layersTitle }>Layers</span>
        <Divider/>
45
        { mapLayers.map((layer, idx) => <MapLayerConfig key={ idx } layer={ layer }/>) }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
46 47 48 49 50 51 52 53 54 55 56
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  mapLayers: state.accessions.public.mapLayers,
});


export default connect(mapStateToProps, null)(withStyles(styles)(MapConfigSection));