/**
 * 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 , allTrueOnKey , allFalseOnKey } from "../utils" ; import { ClassNames } from "./ClassNames" ; import { Button } from "../forms/button" ; import { DataGridColumn } from "./DataGrid" ; import { CheckBox } from "../forms/checkbox" ; /**
 * General component description :
 * HideShowColumns :
 * component to render hide and show columns menu
 */ param { columns } datagrid param { updateColumns } Function param { className } CSS export type HideShowColumnsProps = { columns : DataGridColumn [ ] ; updateColumns : ( columns : DataGridColumn [ ] ) => void ; className ? : string ; } ; param { isOpen } true param { transformVal } CSS param { SelectAll } true type HideShowColumnsState = { isOpen : boolean ; transformVal : string ; SelectAll : boolean ; } ; export class HideShowColumns extends React . PureComponent < HideShowColumnsProps , HideShowColumnsState > { private refParent = React . createRef < HTMLDivElement > ( ) ; private refChild = React . createRef < HTMLDivElement > ( ) ; state : HideShowColumnsState = { isOpen : false , transformVal : "translateX(0px) translateY(0px)" , SelectAll : allTrueOnKey ( this . props . columns , "isVisible" ) , } ; componentWillMount ( ) { window . addEventListener ( "resize" , this . resize as any , true ) ; } componentWillUnmount ( ) { window . removeEventListener ( "resize" , this . resize as any , true ) ; } componentDidUpdate ( ) { const { isOpen } = this . state ; if ( isOpen ) { const HideShowColumnsMenuTop = this . refParent . current ! . getClientRects ( ) [ 0 ] . top - this . refChild . current ! . getClientRects ( ) [ 0 ] . width + 50 ; const HideShowColumnsMenuLeft = this . refParent . current ! . getClientRects ( ) [ 0 ] . left ; const transformVal = "translateX(" + HideShowColumnsMenuLeft + "px) " + "translateY(" + HideShowColumnsMenuTop + "px)" ; this . setState ( { transformVal : transformVal } ) ; } } private handleButtonClick = ( ) => { this . toggle ( ) ; } ; private toggle ( ) { this . setState ( prevState => ( { isOpen : ! prevState . isOpen , } ) , this . afterToggle ) ; } private afterToggle = ( ) => { if ( this . state . isOpen ) { window . addEventListener ( "click" , this . handleDocumentClick as any , true ) ; } else { window . removeEventListener ( "click" , this . handleDocumentClick as any , true ) ; } } ; private resize = ( ) => { if ( this . state . isOpen ) { this . toggle ( ) ; } } ; private handleDocumentClick = ( evt ) => { if ( this . state . isOpen ) { const target = ( evt . target as any ) as HTMLElement ; const el = this . refChild . current ; if ( el && typeof el !== "string" && ! el . contains ( target ) ) { this . toggle ( ) ; } } } ; private handleSelectAll = ( ) => { this . updateDatagridColumns ( "All" ) ; } ; private handleSingleSelect = ( columnName ) => { this . updateDatagridColumns ( columnName ) ; } ; private updateDatagridColumns = ( columnName ) => { let { columns } = this . props ; const { updateColumns } = this . props ; columns . forEach ( ( column ) => { if ( columnName === column . columnName ) { column . isVisible = ! column . isVisible ; if ( allFalseOnKey ( columns , "isVisible" ) ) { column . isVisible = ! column . isVisible ; } } else if ( columnName === "All" ) { column . isVisible = true ; } } ) ; this . setState ( { SelectAll : allTrueOnKey ( columns , "isVisible" ) , } , ( ) => updateColumns && updateColumns ( columns ) ) ; } ; private buildColumnList ( column , index ) { return ( < li key = { index } > < div className = { ClassNames . CLR_CHECKBOX_WRAPPER } key = { "selectCol_" + index } > < CheckBox id = { column . columnName } ariaLabel = "Select" label = { column . displayName ? column . displayName : column . columnName } onChange = { evt => this . handleSingleSelect ( column . columnName ) } checked = { column . isVisible !== undefined ? column . isVisible : undefined } / > < /div> < /li>); } render ( ) { const { isOpen , transformVal , SelectAll } = this . state ; const { className , columns } = this . props ; return ( < div > < div ref = { this . refParent } className = { classNames ( [ ClassNames . COLUMN_SWITCH_WRAPPER ] ) } > < Button className = { ClassNames . COLUMN_TOGGLE } onClick = { this . handleButtonClick } icon = { { shape : "view-columns" , } } /> < /div> { isOpen && ( < div > < span className = { ClassNames . OFFSCREEN_FOCUS_REBOUNDER } /> < div ref = { this . refChild } className = { classNames ( [ ClassNames . COLUMN_SWITCH , ClassNames . CLR_POPOVER_CONTENT , className , ] ) } role = "dialog" style = { { top : 0 , bottom : "auto" , right : "auto" , left : 0 , transform : transformVal , } } > < div className = { ClassNames . SWITCH_HEADER } > Select Columns < Button className = { ClassNames . SWITCH_BUTTON } onClick = { this . handleButtonClick } icon = { { shape : "close" , } } /> < /div> < ul className = { ClassNames . SWITCH_CONTENT } > { columns && columns . map ( ( column , index ) => { return this . buildColumnList ( column , index ) ; } ) } < /ul> < div className = { ClassNames . SWITCH_FOOTER } > < Button className = { ClassNames . SWITCH_BUTTON } link disabled = { SelectAll } onClick = { this . handleSelectAll } > Select All < /Button> < /div> < /div> < /div>)} < /div>); } }