playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,38 +1,32 @@
-import React, { useState, useEffect, useCallback, useRef } from "react"
-import classnames from "classnames"
+import React, { useRef, useEffect, useState, useCallback } from "react";
+import classnames from "classnames";
 
-import { GenericObject } from "../types"
+import { GenericObject } from "../types";
+import { Row, RowSelectionState } from "@tanstack/react-table";
 
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  Row,
-  useReactTable,
-  Getter,
-  RowSelectionState
-} from "@tanstack/react-table"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
-import { globalProps, GlobalProps } from "../utilities/globalProps"
+import Table from "../pb_table/_table";
+import { AdvancedTableProvider } from "./Context/AdvancedTableContext";
+import { getVirtualizedContainerStyles } from "./Utilities/TableContainerStyles";
 
-import Table from "../pb_table/_table"
-import Card from "../pb_card/_card"
-import Caption from "../pb_caption/_caption"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
+import { TableHeader } from "./SubKits/TableHeader";
+import { TableBody } from "./SubKits/TableBody";
+import TablePagination from "./Components/TablePagination";
+import TableActionBar from "./Components/TableActionBar";
 
-import AdvancedTableContext from "./Context/AdvancedTableContext"
+import { useTableState } from "./Hooks/useTableState";
+import { useTableActions } from "./Hooks/useTableActions";
 
-import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
-import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
+import Card from "../pb_card/_card"
+import Flex from "../pb_flex/_flex"
+import Icon from "../pb_icon/_icon"
 
-import { CustomCell } from "./Components/CustomCell"
-import { TableHeader } from "./SubKits/TableHeader"
-import { TableBody } from "./SubKits/TableBody"
-import Pagination from "../pb_pagination/_pagination"
+type FullscreenControls = {
+  toggleFullscreen: () => void;
+  isFullscreen: boolean;
+};
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -63,7 +57,11 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-} & GlobalProps
+  virtualizedRows?: boolean
+  fullscreenable?: boolean
+  onFullscreenChange?: (isFullscreen: boolean) => void
+  getFullscreenControls?: (controls: FullscreenControls) => void
+} & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -95,316 +93,260 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
-  } = props
+    virtualizedRows = false,
+    fullscreenable = false,
+    onFullscreenChange,
+    getFullscreenControls,
+  } = props;
 
-  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
-    initialLoadingRowsCount
-  )
+  // Component refs
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
 
-  // Create a local state for expanded and setExpanded if expandedControl not used
-  const [localExpanded, setLocalExpanded] = useState({})
-
-  // Determine whether to use the prop or the local state
-  const expanded = expandedControl ? expandedControl.value : localExpanded
-  const setExpanded = expandedControl
-    ? expandedControl.onChange
-    : setLocalExpanded
-
-  const columnHelper = createColumnHelper()
-
-  //Row Selection
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  // Initialize table state
+  const {
+    table,
+    expanded,
+    setExpanded,
+    hasAnySubRows,
+    selectedRowsLength,
+    fetchNextPage,
+    updateLoadingStateRowCount,
+    fullData,
+    totalFetched,
+    isFetching
+  } = useTableState({
+    tableData,
+    columnDefinitions,
+    expandedControl,
+    sortControl,
+    onRowToggleClick,
+    selectableRows,
+    initialLoadingRowsCount,
+    loading,
+    pagination,
+    paginationProps,
+    virtualizedRows,
+    tableOptions,
+    onRowSelectionChange
+  });
 
-  //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
-    const columnCells = ({
-      row,
-      getValue,
-    }: {
-      row: Row<GenericObject>
-      getValue: Getter<string>
-    }) => {
-      const rowData = row.original
+  // Initialize table actions
+  const {
+    handleExpandOrCollapse,
+    onPageChange,
+    fetchMoreOnBottomReached
+  } = useTableActions({
+    table,
+    expanded,
+    setExpanded,
+    onToggleExpansionClick,
+    onRowSelectionChange
+  });
 
-    if (isFirstColumn) {
-      switch (row.depth) {
-        case 0: {
-          return (
-                <CustomCell
-                    customRenderer={customRenderer}
-                    getValue={getValue}
-                    onRowToggleClick={onRowToggleClick}
-                    row={row}
-                    selectableRows={selectableRows}
-                />
-          )
-        }
-        default: {
-          // Handle other depths based on cellAccessors
-          const depthAccessor = cellAccessors[row.depth - 1] // Adjust index for depth
-          const accessorValue = rowData[depthAccessor]
-          return accessorValue ? (
-            <CustomCell
-                customRenderer={customRenderer}
-                onRowToggleClick={onRowToggleClick}
-                row={row} 
-                selectableRows={selectableRows}
-                value={accessorValue} 
-            />
-          ) : (
-            "N/A"
-          )
-        }
-      }
-    }
-    return customRenderer
-    ? customRenderer(row, getValue())
-    : getValue()
+  // Set table row count for loading state
+  useEffect(() => {
+    if (!loading) {
+      updateLoadingStateRowCount();
     }
-    return columnCells
-  }
-
-  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
-    return (
-      columnDefinitions &&
-      columnDefinitions.map((column, index) => {
-        const isFirstColumn = isRoot && index === 0; 
-        //Checking to see if grouped column or not
-        if (column.columns && column.columns.length > 0) {
-          return {
-            header: column.label || "",
-            columns: buildColumns(column.columns, false),
-          };
-        } else {
-          // Define the base column structure
-          const columnStructure = {
-            ...columnHelper.accessor(column.accessor, {
-              header: column.label || "",
-            }),
-          };
+  }, [loading, updateLoadingStateRowCount]);
 
-          if (column.cellAccessors || column.customRenderer) {
-            columnStructure.cell = createCellFunction(
-              column.cellAccessors,
-              column.customRenderer,
-              isFirstColumn
-            );
-          }
-
-          return columnStructure;
-        }
-      })
+  // Check for infinite scroll
+  useEffect(() => {
+    fetchMoreOnBottomReached(
+      tableWrapperRef.current,
+      fetchNextPage,
+      isFetching,
+      totalFetched,
+      fullData.length
     );
-  };
+  }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  //Create column array in format needed by Tanstack
-  const columns = buildColumns(columnDefinitions);
+  // Fullscreen
+  const [isFullscreen, setIsFullscreen] = useState(false)
 
-  //Syntax for sorting Array if we want to manage state ourselves
-  const sorting = [
-    {
-      id: columnDefinitions[0].accessor,
-      desc:
-        sortControl && sortControl.value !== null
-          ? !sortControl.value.desc
-          : false,
-    },
-  ]
+  const toggleFullscreen = useCallback(() => {
+    const newFullscreenState = !isFullscreen
+    setIsFullscreen(newFullscreenState)
+    
+    onFullscreenChange?.(newFullscreenState)
+  }, [isFullscreen, onFullscreenChange])
 
-  const customState = () => {
-    if (sortControl && selectableRows) {
-      return { state: { expanded, sorting, rowSelection } }
-    } else if (sortControl) {
-      return { state: { expanded, sorting } }
-    } else if (selectableRows) {
-      return { state: { expanded, rowSelection } }
-    } else {
-      return { state: { expanded } }
+  useEffect(() => {
+    if (fullscreenable && getFullscreenControls) {
+      getFullscreenControls({
+        toggleFullscreen,
+        isFullscreen
+      })
     }
-  }
-
-  const paginationInitializer = pagination ? {
-    getPaginationRowModel: getPaginationRowModel(),
-    paginateExpandedRows: false,
-    initialState: {
-        pagination: {
-            pageIndex: paginationProps?.pageIndex ?? 0,
-            pageSize: paginationProps?.pageSize ??  20,
-        },
-    },
-} : {}
+  }, [fullscreenable, getFullscreenControls, toggleFullscreen, isFullscreen])
 
-//initialize table
-  const table = useReactTable({
-    data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
-    columns,
-    onExpandedChange: setExpanded,
-    getSubRows: (row: GenericObject) => row.children,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    enableSortingRemoval: false,
-    sortDescFirst: true,
-    onRowSelectionChange: setRowSelection,
-    getRowId: selectableRows ? row => row.id : undefined,
-    ...customState(),
-    ...paginationInitializer,
-    ...tableOptions,
-  })
+  const renderFullscreenHeader = () => {
+    if (!isFullscreen) return null
 
-  const tableRows = table.getRowModel()
+    const defaultMinimizeIcon = (
+      <button
+          className="gray-icon fullscreen-icon"
+          onClick={toggleFullscreen}
+      >
+        <Icon
+            cursor="pointer"
+            fixedWidth
+            icon="grid-2"
+            {...props}
+        />
+      </button>
+    )
 
-  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
-  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          className="advanced-table-fullscreen-header" 
+          {...props}
+        >
+          <Flex justify="end">
+            {defaultMinimizeIcon}
+          </Flex>
+      </Card>
+    )
+  }
 
   useEffect(() => {
-    if (onRowSelectionChange) {
-      onRowSelectionChange(table.getState().rowSelection)
-    }
-  } , [table.getState().rowSelection, onRowSelectionChange])
-
-  // Set table row count for loading state
-  const updateLoadingStateRowCount = useCallback(() => {
-    const rowsCount = table.getRowModel().rows.length
-    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
-      setLoadingStateRowCount(rowsCount)
+    if (!fullscreenable) return
+  
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isFullscreen) {
+        event.preventDefault()
+        toggleFullscreen()
+      }
     }
-  }, [tableData, loadingStateRowCount])
-
-  useEffect(() => {
-    if (!loading) {
-      updateLoadingStateRowCount()
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
     }
-  }, [loading, updateLoadingStateRowCount])
-
-  const handleExpandOrCollapse = async (row: Row<GenericObject>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row)
-  
-    const expandedState = expanded;
-    const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
-    setExpanded(updatedRows)
-  }
+  }, [fullscreenable, toggleFullscreen])
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  // Build CSS classes and props
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
-    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
+    {
+      'advanced-table-fullscreen': isFullscreen,
+      'advanced-table-fullscreenable': fullscreenable
+    },
     globalProps(props),
     className
-  )
+  );
 
-  const onPageChange = (page: number) => {
-    table.setPageIndex(page - 1)
-  }
-//When to show the actions bar as a whole
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+  // Table wrapper styling with virtualization support
+  const tableWrapperStyle = virtualizedRows
+    ? getVirtualizedContainerStyles(maxHeight)
+    : {};
 
-  //Ref and useEffect for animating the actions bar
-  const cardRef = useRef(null);
-  useEffect(() => {
-    if (cardRef.current) {
-      if (isActionBarVisible) {
-        showActionBar(cardRef.current);
-      } else {
-        hideActionBar(cardRef.current);
-      }
-    }
-  }, [isActionBarVisible]);
+  // Visibility flag for action bar
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
-        {...htmlProps}
-        className={classes} 
-        id={id}
-    >
-      <AdvancedTableContext.Provider
-          value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
-            expandedControl,
-            handleExpandOrCollapse,
-            inlineRowLoading,
-            isActionBarVisible,
-            loading,
-            responsive,
-            setExpanded,
-            sortControl,
-            table,
-            toggleExpansionIcon,
-            showActionsBar,
-            selectableRows,
-            hasAnySubRows
-          }}
+    <>
+      {/* Top Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="top"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+
+      <div
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+            e.currentTarget,
+            fetchNextPage,
+            isFetching,
+            totalFetched,
+            fullData.length
+          ) : undefined}
+          ref={tableWrapperRef}
+          style={tableWrapperStyle as React.CSSProperties}
       >
-        <>
-          {pagination &&
-              <Pagination
-                  current={table.getState().pagination.pageIndex + 1}
-                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
-                  marginBottom="xs"
-                  onChange={onPageChange}
-                  range={paginationProps?.range ? paginationProps?.range : 5}
-                  total={table.getPageCount()}
-                  />
-          }
-          <Card
-              borderNone={!isActionBarVisible}
-              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
-              htmlOptions={{ ref: cardRef as any }}
-              padding={`${isActionBarVisible ? "xs" : "none"}`}
-          >
-            <Flex alignItems="center" 
-                justify="between"
-            >
-              <Caption color="light" 
-                  paddingLeft="xs" 
-                  size="xs"
-              >
-                {selectedRowsLength} Selected
-              </Caption>
-              <FlexItem>{actions}</FlexItem>
-            </Flex>
-          </Card>
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-          {pagination &&
-            <Pagination
-                current={table.getState().pagination.pageIndex + 1}
-                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
-                marginTop="xs"
-                onChange={onPageChange}
-                range={paginationProps?.range ? paginationProps?.range : 5}
-                total={table.getPageCount()}
+        {renderFullscreenHeader()}
+        <AdvancedTableProvider
+            columnDefinitions={columnDefinitions}
+            enableToggleExpansion={enableToggleExpansion}
+            enableVirtualization={virtualizedRows}
+            expanded={expanded}
+            expandedControl={expandedControl}
+            handleExpandOrCollapse={handleExpandOrCollapse}
+            hasAnySubRows={hasAnySubRows}
+            inlineRowLoading={inlineRowLoading}
+            isActionBarVisible={isActionBarVisible}
+            isFullscreen={isFullscreen}
+            loading={loading}
+            responsive={responsive}
+            selectableRows={selectableRows}
+            setExpanded={setExpanded}
+            showActionsBar={showActionsBar}
+            sortControl={sortControl}
+            subRowHeaders={tableOptions?.subRowHeaders}
+            table={table}
+            tableContainerRef={tableWrapperRef}
+            toggleExpansionIcon={toggleExpansionIcon}
+            virtualizedRows={virtualizedRows}
+        >
+          <React.Fragment>
+            {/* Selection Action Bar */}
+            <TableActionBar
+                actions={actions}
+                isVisible={isActionBarVisible}
+                selectedCount={selectedRowsLength}
             />
-          }
-        </>
-      </AdvancedTableContext.Provider>
-    </div>
-  )
-}
-
-AdvancedTable.Header = TableHeader
-AdvancedTable.Body = TableBody
 
-export default AdvancedTable
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
+          </React.Fragment>
+        </AdvancedTableProvider>
+     
+      </div>
+ {/* Bottom Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="bottom"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+    </>
+  );
+};
+
+// Re-export sub-components
+AdvancedTable.Header = TableHeader;
+AdvancedTable.Body = TableBody;
+
+export default AdvancedTable;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
           <% end %>
         <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -20,6 +20,8 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -32,6 +34,14 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
+
+      def selected_rows
+        @selected_rows ||= []
+      end
+
+      def selected_rows_length
+        selected_rows.length
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -498,4 +498,17 @@ test("customRenderer prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
   expect(pill).toBeInTheDocument()
-})
+})
+
+test("fullscreenable prop adds fullscreen class", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        fullscreenable
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const tableContainer = screen.getByRole("table").closest("div")
+  expect(tableContainer).toHaveClass("advanced-table-fullscreenable")
+})