/**
 * 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 { State , Store } from "@sambego/storybook-state" ; import { Icon } from "../icon" ; import { Button } from "../forms/button" ; import { SortOrder , DataGridRow , DataGridFilterResult , DataGridColumn } from "." ; import { Password } from "../forms/password/Password" ; /**
 * General file description :
 * Data to render diffrent datagrids in storybook
 */ /**
 * Data for Columns
 */ export const normalColumns = [ { columnName : "User ID" } , { columnName : "Name" } , { columnName : "Creation Date" } , { columnName : "Favorite color" } , ] ; export const hideableColumns = [ { columnName : "User ID" } , { columnName : "Name" , displayName : "User name" } , { columnName : "Creation Date" , isVisible : false } , { columnName : "Favorite color" , isVisible : false } , ] ; /**
 * Data for datagrid cell
 */ const cellData = [ [ 41512 , "Georgia" , "Sep 11, 2008" , "Blue" ] , [ 16166 , "Brynn" , "Aug 2, 2014" , "Orange" ] , [ 30574 , "Brad" , "Jan 4, 2019" , "Yellow" ] , [ 2459 , "Beverly" , "Mar 2, 2019" , "Pink" ] , [ 14262 , "Johnson" , "Jun 23, 2019" , "Blue" ] , [ 59729 , "Sibyl" , "Feb 27, 2016" , "Red" ] , [ 92422 , "Roslyn" , "Apr 26, 2016" , "Blue" ] , [ 83941 , "Lottie" , "Mar 2, 2019" , "Yellow" ] , [ 83942 , "Lottie" , "Mar 2, 2019" , "Yellow" ] , [ 83943 , "Lottie" , "Mar 2, 2019" , "Yellow" ] , ] ; /**
 * Data for Rows
 */ export const normalRows = [ { rowData : [ { columnName : "User ID" , cellData : 41512 } , { columnName : "Name" , cellData : "Georgia" } , { columnName : "Creation Date" , cellData : "Sep 11, 2008" } , { columnName : "Favorite color" , cellData : "Blue" } , ] , } , { rowData : [ { columnName : "User ID" , cellData : 16166 } , { columnName : "Name" , cellData : "Brynn" } , { columnName : "Creation Date" , cellData : "Aug 2, 2014" } , { columnName : "Favorite color" , cellData : "Orange" } , ] , } , { rowData : [ { columnName : "User ID" , cellData : 30574 } , { columnName : "Name" , cellData : "Brad" } , { columnName : "Creation Date" , cellData : "Jan 4, 2019" } , { columnName : "Favorite color" , cellData : "Yellow" } , ] , } , ] ; /**
 * Data for Custom content rendering
 */ export const customRows = [ { rowData : [ { columnName : "User ID" , cellData : 41512 } , { columnName : "Name" , cellData : "Georgia" } , { columnName : "Creation Date" , cellData : "Sep 11, 2008" } , { columnName : "Favorite color" , cellData : ( < div > < Icon shape = "time" / > { "Critical" } < /div>), } , ] , } , { rowData : [ { columnName : "User ID" , cellData : 16166 } , { columnName : "Name" , cellData : "Brynn" } , { columnName : "Creation Date" , cellData : "Aug 2, 2014" } , { columnName : "Favorite color" , cellData : ( < div > < Icon shape = "time" / > { "Critical" } < /div>), } , ] , } , ] ; export const customRowsWithPassword = [ { rowData : [ { columnName : "User ID" , cellData : 41512 } , { columnName : "Name" , cellData : "Georgia" } , { columnName : "Creation Date" , cellData : "Sep 11, 2008" } , { columnName : "Favorite color" , cellData : ( < div style = { { marginTop : "-35px" } } > < Password name = "Password" value = "Georgia-pass" minPasswordLength = { 8 } readOnly = { true } style = { { border : "none" } } /> < /div>), } , ] , } , { rowData : [ { columnName : "User ID" , cellData : 16166 } , { columnName : "Name" , cellData : "Brynn" } , { columnName : "Creation Date" , cellData : "Aug 2, 2014" } , { columnName : "Favorite color" , cellData : ( < div style = { { marginTop : "-35px" } } > < Password name = "Password" value = "Brynn-pass" minPasswordLength = { 8 } readOnly = { true } style = { { border : "none" } } /> < /div>), } , ] , } , ] ; /**
 * Data for Expandable Rows
 */ const expandableContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. Aenean sagittis nibh lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. Vestibulum vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam posuere ipsum tincidunt velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis sit amet metus finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, at suscipit diam." ; export const loadExpandableContent = ( rows ) : Promise < any > => { return new Promise ( ( resolve , reject ) => { setTimeout ( function ( ) { resolve ( < div > { expandableContent } < /div>); } , 2000 ) ; } ) ; } ; export const expandableRows = [ { rowData : [ { columnName : "User ID" , cellData : 41512 } , { columnName : "Name" , cellData : "Georgia" } , { columnName : "Creation Date" , cellData : "Sep 11, 2008" } , { columnName : "Favorite color" , cellData : "Blue" } , ] , expandableRowData : { expandableContent : expandableContent , } , } , { rowData : [ { columnName : "User ID" , cellData : 16166 } , { columnName : "Name" , cellData : "Brynn" } , { columnName : "Creation Date" , cellData : "Aug 2, 2014" } , { columnName : "Favorite color" , cellData : "Orange" } , ] , expandableRowData : { expandableContent : expandableContent , } , } , { rowData : [ { columnName : "User ID" , cellData : 30574 } , { columnName : "Name" , cellData : "Brad" } , { columnName : "Creation Date" , cellData : "Jan 4, 2019" } , { columnName : "Favorite color" , cellData : "Yellow" } , ] , expandableRowData : { onRowExpand : loadExpandableContent , onRowContract : ( ) => { console . log ( "I have contracted!" ) ; } , } , } , { rowData : [ { columnName : "User ID" , cellData : 345574 } , { columnName : "Name" , cellData : "Harry" } , { columnName : "Creation Date" , cellData : "Jan 8, 2009" } , { columnName : "Favorite color" , cellData : "Pink" } , ] , expandableRowData : { expandableContent : null , hideRowExpandIcon : true , } , } , { rowData : [ { columnName : "User ID" , cellData : 1366768 } , { columnName : "Name" , cellData : "Gaurav" } , { columnName : "Creation Date" , cellData : "Nov 11, 1994" } , { columnName : "Favorite color" , cellData : "Blue" } , ] , expandableRowData : { onRowContract : ( ) => { alert ( "I have contracted!" ) ; } , } , } , ] ; export function getRowData ( ) { let rowValues = [ ] ; cellData . forEach ( function ( element ) { const row = { rowData : [ { columnName : "User ID" , cellData : element [ 0 ] , } , { columnName : "Name" , cellData : element [ 1 ] , } , { columnName : "Creation Date" , cellData : element [ 2 ] , } , { columnName : "Favorite color" , cellData : element [ 3 ] , } , ] , } ; rowValues . push ( row ) ; } ) ; return rowValues ; } export function getRowDataWithLink ( functionToAttach ) { let rowValues = [ ] ; cellData . forEach ( function ( element , index ) { const row = { rowData : [ { columnName : "User ID" , cellData : element [ 0 ] , } , { columnName : "Name" , cellDisplayData : ( < a href = "javascript:void(0);" className = "nameLink" onClick = { event => functionToAttach ( index ) } > { element [ 1 ] } < /a>), cellData : element [ 1 ] , } , { columnName : "Creation Date" , cellData : element [ 2 ] , } , { columnName : "Favorite color" , cellData : element [ 3 ] , } , ] , detailPaneData : { detailPaneContent : < React . Fragment > Details Panel for : { element [ 1 ] } < /React.Fragment>, } , } ; rowValues . push ( row ) ; } ) ; return rowValues ; } export const getSelectableRowsData = ( ) : DataGridRow [ ] => { let disableRowSelection = true ; let updatedRows = getRowData ( ) ; updatedRows . forEach ( ( row ) => { disableRowSelection = ! disableRowSelection ; row . disableRowSelection = disableRowSelection ; } ) ; return updatedRows ; } ; export let selectedRows = [ 41512 , 2459 , 83942 ] ; export const getSelectedRowsData = ( ) : DataGridRow [ ] => { let updatedRows = getRowData ( ) ; updatedRows . forEach ( ( row ) => { row . isSelected = selectedRows . includes ( row . rowData [ 0 ] . cellData ) ; } ) ; return updatedRows ; } ; export const paginationRows = getRowData ( ) ; export const paginationRowsWithLinks = ( linkFunction ) => getRowDataWithLink ( linkFunction ) ; export const alreadySelectedRows = getSelectedRowsData ( ) ; /**
 * Data for Footer
 */ export const customFooter = { footerData : "Total 2 users" , showFooter : true , } ; export const defaultFooter = { showFooter : true , } ; export const noFooter = { showFooter : false , } ; export const hideShowColFooter = { hideShowColumns : { hideShowColBtn : true , } , showFooter : true , } ; /**
 * Data for Filtering
 */ function filterRows ( rows , columnValues ) { const newRows = rows . filter ( row => { let matchFound = false ; for ( const index in row . rowData ) { const content = String ( row . rowData [ index ] . cellData ) ; columnValues . forEach ( columnValue => { if ( content . indexOf ( columnValue ) !== - 1 ) { matchFound = true ; } } ) ; } if ( matchFound ) { return row ; } } ) ; return newRows ; } export const filterFunction = ( rows , columnValue , columnName ) : Promise < DataGridFilterResult > => { return new Promise ( ( resolve , reject ) => { let result = { rows : [ ] , totalItems : 0 , } ; if ( columnValue === "" || columnValue === undefined || ( Array . isArray ( columnValue ) && columnValue . length === 0 ) ) { result = { rows : normalRows , totalItems : normalRows . length , } ; } else { const newRows = filterRows ( normalRows , Array . isArray ( columnValue ) ? columnValue : [ columnValue ] ) ; result = { rows : newRows , totalItems : newRows . length , } ; } resolve ( result ) ; } ) ; } ; /**
 * Data for Sorting
 */ export const sortFunction = ( rows , sortOrder , columnName ) : Promise < DataGridRow [ ] > => { return new Promise ( ( resolve , reject ) => { rows . sort ( ( first , second ) : number => { let result = 0 ; let firstRecord = first . rowData . find ( function ( element ) { if ( element . columnName === columnName ) return element ; } ) ; let secondRecord = second . rowData . find ( function ( element ) { if ( element . columnName === columnName ) return element ; } ) ; if ( firstRecord && secondRecord ) { const contentType = typeof firstRecord . cellData ; if ( sortOrder === SortOrder . ASC ) { if ( contentType === "number" ) { result = firstRecord . cellData - secondRecord . cellData ; } else if ( contentType === "string" ) { if ( firstRecord . cellData > secondRecord . cellData ) result = - 1 ; else if ( firstRecord . cellData < secondRecord . cellData ) result = 1 ; } } else if ( sortOrder == SortOrder . DESC ) { if ( contentType === "number" ) { result = secondRecord . cellData - firstRecord . cellData ; } else if ( contentType === "string" ) { if ( secondRecord . cellData > firstRecord . cellData ) result = - 1 ; else if ( secondRecord . cellData < firstRecord . cellData ) result = 1 ; } } } return result ; } ) ; setTimeout ( function ( ) { resolve ( rows ) ; } , 2000 ) ; } ) ; } ; export const sortColumns = [ { columnName : "User ID" , sort : { defaultSortOrder : SortOrder . ASC , sortFunction : sortFunction } , } , { columnName : "Name" , sort : { defaultSortOrder : SortOrder . NONE , sortFunction : sortFunction } , } , { columnName : "Creation Date" } , { columnName : "Favorite color" , sort : { defaultSortOrder : SortOrder . ASC , sortFunction : sortFunction , isSorted : true } , } , ] ; /**
 * Data for Pagination
 */ export const getPageData = ( pageIndex , pageSize ) : Promise < DataGridRow [ ] > => { return new Promise ( ( resolve , reject ) => { let rows = [ ] ; if ( pageSize === 5 ) { if ( pageIndex === 2 ) { rows = paginationRows . slice ( 5 , 10 ) ; } if ( pageIndex === 1 ) { rows = paginationRows . slice ( 0 , 5 ) ; } } else if ( pageSize === 10 ) { rows = paginationRows ; } setTimeout ( function ( ) { resolve ( rows ) ; } , 2000 ) ; } ) ; } ; export const getPageDataForSelectedRows = ( pageIndex , pageSize ) : Promise < DataGridRow [ ] > => { return new Promise ( ( resolve , reject ) => { let rows = [ ] ; if ( pageSize === 5 ) { if ( pageIndex === 2 ) { rows = alreadySelectedRows . slice ( 5 , 10 ) ; } if ( pageIndex === 1 ) { rows = alreadySelectedRows . slice ( 0 , 5 ) ; } } else if ( pageSize === 10 ) { rows = paginationRows ; } setTimeout ( function ( ) { resolve ( rows ) ; } , 2000 ) ; } ) ; } ; export const getPageDataForDetailPane = ( pageIndex , pageSize ) : Promise < DataGridRow [ ] > => { return new Promise ( ( resolve , reject ) => { let rows = [ ] ; if ( pageSize === 5 ) { if ( pageIndex === 2 ) { rows = rowsWithDetailPane . slice ( 5 , 10 ) ; } if ( pageIndex === 1 ) { rows = rowsWithDetailPane . slice ( 0 , 5 ) ; } } else if ( pageSize === 10 ) { rows = rowsWithDetailPane ; } setTimeout ( function ( ) { resolve ( rows ) ; } , 2000 ) ; } ) ; } ; export const paginationDetails = { totalItems : paginationRows . length , getPageData : getPageData , pageSize : 5 , pageSizes : [ 5 , 10 ] , } ; export const paginationDetailsWithCompactFooter = { totalItems : paginationRows . length , getPageData : getPageData , pageSize : 5 , pageSizes : [ 5 , 10 ] , compactFooter : true , } ; export const paginationDetailsForAlreadySelectedRows = { totalItems : alreadySelectedRows . length , getPageData : getPageDataForSelectedRows , pageSize : 5 , pageSizes : [ 5 , 10 ] , } ; export const pageFilterFunction = ( rows , columnValue , columnName ) : Promise < DataGridFilterResult > => { return new Promise ( ( resolve , reject ) => { let result = { rows : [ ] , totalItems : 0 , } ; if ( columnValue === "" || columnValue === undefined ) { result = { rows : paginationRows . slice ( 0 , 5 ) , totalItems : paginationRows . length , } ; } else { const newRows = filterRows ( rows , [ columnValue ] ) ; result = { rows : newRows , totalItems : newRows . length , } ; } setTimeout ( function ( ) { resolve ( result ) ; } , 2000 ) ; } ) ; } ; /**
 * Data for Batch Actions
 */ type GridActionsState = { selectedRows : any [ ] ; showEdit : boolean ; } ; export class GridActions extends React . PureComponent < any , GridActionsState > { state = { selectedRows : [ ] , showEdit : false , } ; updateActions ( rows ) { this . setState ( { selectedRows : rows , showEdit : rows . length === 1 ? true : false , } ) ; } render ( ) { const { selectedRows , showEdit } = this . state ; return ( < div > < Button key = "new" > NEW < /Button> < Button key = "edit" show = { showEdit } > EDIT < /Button> < Button key = "delete" onClick = { ( ) => { alert ( "Deleted" + selectedRows . length ) ; } } > DELETE < /Button> < /div>); } } const DetailPane = ( < React . Fragment > < b > Additional Details < /b> < table className = "table" > < thead > < tr > < th > Property < /th> < th > Value < /th> < /tr> < /thead> < tbody > < tr > < td > ID < /td> < td > 38808 < /td> < /tr> < tr > < td > Wins < /td> < td > 69 < /td> < /tr> < /tbody> < /table> < /React.Fragment>); const getDetailPaneColumns = ( hideNameSort = false ) : DataGridColumn [ ] => { return [ { columnName : "User ID" , sort : { defaultSortOrder : SortOrder . ASC , sortFunction : sortFunction , hideSort : hideNameSort } , } , { columnName : "Name" , sort : { defaultSortOrder : SortOrder . NONE , sortFunction : sortFunction } , } , { columnName : "Creation Date" } , { columnName : "Favorite color" , sort : { defaultSortOrder : SortOrder . ASC , sortFunction : sortFunction , isSorted : true } , } , ] ; } ; const onOpenDetails = ( ) => { return new Promise ( ( resolve , reject ) => { storeForDetailPane . set ( { columns : getDetailPaneColumns ( true ) , } ) ; resolve ( false ) ; } ) ; } ; const onCloseDetails = ( ) => { storeForDetailPane . set ( { columns : getDetailPaneColumns ( ) , } ) ; } ; function getRowsWithDetailPane ( ) { let rowValues = [ ] ; cellData . forEach ( function ( element ) { const row = { rowData : [ { columnName : "User ID" , cellData : element [ 0 ] , } , { columnName : "Name" , cellData : element [ 1 ] , } , { columnName : "Creation Date" , cellData : element [ 2 ] , } , { columnName : "Favorite color" , cellData : element [ 3 ] , } , ] , detailPaneData : { detailPaneContent : DetailPane , title : element [ 1 ] , onOpenDetails , onCloseDetails , } , expandableRowData : { expandableContent : expandableContent , } , } ; rowValues . push ( row ) ; } ) ; return rowValues ; } const rowsWithDetailPane = getRowsWithDetailPane ( ) ; export const storeForDetailPane = new Store ( { rows : rowsWithDetailPane . slice ( 0 , 5 ) , columns : getDetailPaneColumns ( ) , } ) ; export const paginationDetailsForDetailsPane = { totalItems : rowsWithDetailPane . length , getPageData : getPageDataForDetailPane , pageSize : 5 , pageSizes : [ 5 , 10 ] , } ;