import * as React from 'react' ; import { Table } from 'antd' ; import { ColumnProps , TableProps } from 'antd/lib/table' ; import OlGeometry from 'ol/geom/Geometry' ; import OlFeature from 'ol/Feature' ; import { getUid } from 'ol' ; import _get from 'lodash/get' ; import { CSS_PREFIX } from '../../constants' ; import './PropertyGrid.less' ; type AttributeNames = { [ key ] : string ; } ; interface DefaultProps { /**
     * Title of the attribute name column
     */ attributeNameColumnTitle ? : string ; /**
     * Value in percent representing the width of the attribute name column
     * The width of attribute value column wil be calculated depending in this
     */ attributeNameColumnWidthInPercent ? : number ; /**
     * Title of the attribute value column
     */ attributeValueColumnTitle ? : string ; } export interface BaseProps { /**
     * A CSS class which should be added.
     */ className ? : string ; /**
     * Array of attribute names to filter
     */ attributeFilter ? : string [ ] ; /**
     * Object containing a mapping of attribute names in OL feature to custom ones
     *
     */ attributeNames ? : AttributeNames ; /**
     * Feature for which the properties should be shown
     */ feature : OlFeature < OlGeometry > ; } interface PropertyGridState { dataSource : any [ ] ; columns : ColumnProps < any > [ ] ; } export type PropertyGridProps = BaseProps & Partial < DefaultProps > & TableProps < any > ; class extends React . Component class PropertyGrid extends React . Component < PropertyGridProps , PropertyGridState > { static defaultProps : DefaultProps = { attributeNameColumnTitle : 'Attribute name' , attributeNameColumnWidthInPercent : 50 , attributeValueColumnTitle : 'Attribute value' , } ; private className = `${ CSS_PREFIX }propertygrid` ; param props constructor ( props ) { super ( props ) ; const { feature , attributeFilter , attributeNames , attributeNameColumnWidthInPercent } = props ; const { dataSource , columns } = this . generatePropertyGrid ( { feature , attributeFilter , attributeNames , attributeNameColumnWidthInPercent } ) ; this . state = { dataSource , columns } ; } param feature param attributeFilter param attributeNames param attributeNameColumnWidthInPercent generatePropertyGrid ( { feature , attributeFilter , attributeNames , attributeNameColumnWidthInPercent } ) { if ( ! attributeFilter ) { attributeFilter = feature . getKeys ( ) . filter ( ( attrName ) => attrName !== 'geometry' ) ; } const dataSource = attributeFilter . map ( ( attr ) => { const fid = getUid ( feature ) ; const rowObj = { attributeName : ( attributeNames && _get ( attributeNames , attr ) ) ? _get ( attributeNames , attr ) : attr , attributeValue : feature . get ( attr ) , key : `ATTR_${ attr }_fid_${ fid }` } ; return rowObj ; } ) ; const columns = [ { title : this . props . attributeNameColumnTitle , dataIndex : 'attributeName' , key : 'attributeName' , width : `${ attributeNameColumnWidthInPercent }%` } , { title : this . props . attributeValueColumnTitle , dataIndex : 'attributeValue' , key : 'attributeValue' , width : `${ 100 - attributeNameColumnWidthInPercent }%` } ] ; return { dataSource , columns } ; } return render ( ) { const { className , feature , ... passThroughProps } = this . props ; const { columns , dataSource } = this . state ; const finalClassName = className ? `${ className } ${ this . className }` : this . className ; return ( < Table className = { finalClassName } rowKey = { record => record . key } dataSource = { dataSource } columns = { columns } pagination = { false } scroll = { { y : 250 } } { ... passThroughProps } />); } } export default PropertyGrid ;