import classNames from "classnames" ; import * as React from "react" ; import { Props , Utils as CoreUtils } from "@blueprintjs/core" ; import * as Classes from "../common/classes" ; export interface IGuideLayerProps extends Props { /**
     *  The left-offset location of the vertical guides
     */ verticalGuides ? : number [ ] ; /**
     *  The top-offset location of the horizontal guides
     */ horizontalGuides ? : number [ ] ; } export class GuideLayer extends React . Component < IGuideLayerProps > { public shouldComponentUpdate ( nextProps ) { if ( this . props . className !== nextProps . className ) { return true ; } return ( ! CoreUtils . arraysEqual ( this . props . verticalGuides , nextProps . verticalGuides ) || ! CoreUtils . arraysEqual ( this . props . horizontalGuides , nextProps . horizontalGuides ) ) ; } public render ( ) { const { verticalGuides , horizontalGuides , className } = this . props ; const verticals = verticalGuides == null ? undefined : verticalGuides . map ( this . renderVerticalGuide ) ; const horizontals = horizontalGuides == null ? undefined : horizontalGuides . map ( this . renderHorizontalGuide ) ; return ( < div className = { classNames ( className , Classes . TABLE_OVERLAY_LAYER ) } > { verticals } { horizontals } < /div>); } private renderVerticalGuide = ( offset , index ) => { const style = { left : `${ offset }px` , } ; const className = classNames ( Classes . TABLE_OVERLAY , Classes . TABLE_VERTICAL_GUIDE , { [ `${ Classes . TABLE_VERTICAL_GUIDE }-flush-left` ] : offset === 0 , } ) ; return < div className = { className } key = { index } style = { style } / > ; } ; private renderHorizontalGuide = ( offset , index ) => { const style = { top : `${ offset }px` , } ; const className = classNames ( Classes . TABLE_OVERLAY , Classes . TABLE_HORIZONTAL_GUIDE , { [ `${ Classes . TABLE_HORIZONTAL_GUIDE }-flush-top` ] : offset === 0 , } ) ; return < div className = { className } key = { index } style = { style } / > ; } ; }