/**
 * Copyright (c) 2018 Dell Inc., or its subsidiaries. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 */ import * as React from "react" ; import { classNames } from "../utils" ; import { ClassNames , Styles } from "./ClassNames" ; import { DataGridColumn } from "./DataGrid" ; /**
 * General component description :
 * DataGridColumnResize :
 * component to manage dynamic chnages in datagrid width
 */ const MIN_COLUMN_WIDTH = 96 ; param { column } datagrid param { height } datagrid param { updateColumn } callback param { className } CSS param { style } CSS export type DataGridColumnResizeProps = { column : DataGridColumn ; height : number | null ; updateColumn ? : ( column : DataGridColumn ) => void ; className ? : string ; style ? : any ; } ; param { startX } start param { moveX } moved param { showTracker } show param { isLessThanMinWidth } show type DataGridColumnResizeState = { startX : number ; moveX : number ; showTracker : boolean ; isLessThanMinWidth : boolean ; } ; export class DataGridColumnResize extends React . PureComponent < DataGridColumnResizeProps , DataGridColumnResizeState > { state : DataGridColumnResizeState = { startX : 0 , moveX : 0 , showTracker : false , isLessThanMinWidth : false , } ; calculateResizedBy = ( clientX ) : Promise < any > => { return new Promise ( ( resolve , reject ) => { const { startX } = this . state ; const { column } = this . props ; let resizedBy = clientX - startX ; let isLessThanMinWidth = false ; if ( column && column . width ) { const minWidth = column . width - MIN_COLUMN_WIDTH ; let newWidth = column . width + resizedBy ; if ( minWidth !== undefined && resizedBy < - minWidth ) { resizedBy = - minWidth ; isLessThanMinWidth = true ; } newWidth = column . width + resizedBy ; resolve ( { resizedBy , isLessThanMinWidth , newWidth } ) ; } } ) ; } ; moveTracker = ( event ) => { this . calculateResizedBy ( event . clientX ) . then ( result => { this . setState ( { moveX : result . resizedBy , isLessThanMinWidth : result . isLessThanMinWidth , } ) ; } ) ; } ; showTracker = ( event ) => { this . setState ( { startX : event . clientX , moveX : 0 , showTracker : true , } ) ; } ; hideTracker = ( event ) => { const { column , updateColumn } = this . props ; if ( column ) { this . calculateResizedBy ( event . clientX ) . then ( result => { column . width = Math . abs ( result . newWidth ) ; column . className = ClassNames . STRICT_WIDTH_CLASS ; this . setState ( { showTracker : false , moveX : 0 , startX : 0 , } , ( ) => updateColumn && updateColumn ( column ) ) ; } ) ; } } ; render ( ) { const { height } = this . props ; const { moveX , showTracker , isLessThanMinWidth } = this . state ; const transformVal = "translateX(" + moveX + "px)" ; return ( < div className = { classNames ( [ ClassNames . DATAGRID_COLUMN_SEPARATOR , ClassNames . DATAGRID_NG_STAR_INSERTED ] ) } > < div aria - hidden = "true" draggable = { true } onDragStart = { ( evt ) => this . showTracker ( evt ) } onDrag = { ( evt ) => this . moveTracker ( evt ) } onDragEndCapture = { ( evt ) => this . hideTracker ( evt ) } className = { classNames ( [ ClassNames . DATAGRID_COLUMN_HANDLE , showTracker && ClassNames . BEING_DRAGGED ] ) } /> { < div className = { classNames ( [ ClassNames . NG_TNS_C81_13 , ClassNames . DRAGGABLE_GHOST , ClassNames . NG_TRIGGER , ClassNames . NG_TRIGGER_LEAVE_ANIMATION , ClassNames . DATAGRID_NG_STAR_INSERTED , ] ) } style = { Styles . DRAGGABLE_GHOST } > < div aria - hidden = "true" draggable = { true } className = { classNames ( [ ClassNames . DATAGRID_COLUMN_HANDLE , ClassNames . NG_TNS_C81_13 ] ) } / > < /div>} < span className = { ClassNames . CLR_SR_ONLY } > < /span> < div className = { classNames ( [ ClassNames . DATAGRID_COLUMN_RESIZE , isLessThanMinWidth && ClassNames . DATAGRID_COL_WIDTH_EXCEEDED_MAX , ] ) } style = { { display : showTracker ? "block" : "none" , height : height ? height + "px" : "auto" , transform : transformVal , } } /> < /div>); } }