import classNames from "classnames" ; import * as React from "react" ; import { Props , Utils as CoreUtils } from "@blueprintjs/core" ; import * as Classes from "../common/classes" ; import { QuadrantType } from "../quadrants/tableQuadrant" ; import { Region , Regions } from "../regions" ; export type RegionStyler = ( region : Region , quadrantType ? : QuadrantType ) => React . CSSProperties ; export interface RegionLayerProps extends Props { /**
     * The array of regions to render.
     */ regions ? : Region [ ] ; /**
     * The array of CSS styles to apply to each region. The ith style object in this array will be
     * applied to the ith region in `regions`.
     */ regionStyles ? : React . CSSProperties [ ] ; } const UPDATE_PROPS_KEYS = [ "className" ] as Array < keyof RegionLayerProps > ; export class RegionLayer extends React . Component < RegionLayerProps > { public shouldComponentUpdate ( nextProps ) { return ( ! CoreUtils . arraysEqual ( this . props . regions , nextProps . regions , Regions . regionsEqual ) || ! CoreUtils . arraysEqual ( this . props . regionStyles , nextProps . regionStyles , CoreUtils . shallowCompareKeys ) || ! CoreUtils . shallowCompareKeys ( this . props , nextProps , { include : UPDATE_PROPS_KEYS } ) ) ; } public render ( ) { return < div className = { Classes . TABLE_OVERLAY_LAYER } > { this . renderRegionChildren ( ) } < /div>; } private renderRegionChildren ( ) { const { regions } = this . props ; if ( regions == null ) { return undefined ; } return regions . map ( this . renderRegion ) ; } private renderRegion = ( _region , index ) => { const { className , regionStyles } = this . props ; return ( < div className = { classNames ( Classes . TABLE_OVERLAY , Classes . TABLE_REGION , className ) } key = { index } style = { regionStyles [ index ] } / > ) ; } ; }