Skip to content

Commit

Permalink
chore: styling fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@tewarig
tewarig committed Jan 15, 2025
1 parent fc37ce6 commit 1aaf188
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 30 deletions.
45 changes: 29 additions & 16 deletions packages/blade/src/components/Table/Table.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Table as ReactTable } from '@table-library/react-table-library/table';
import { useTheme as useTableTheme } from '@table-library/react-table-library/theme';
import type { MiddlewareFunction } from '@table-library/react-table-library/types/common';
import { useSort } from '@table-library/react-table-library/sort';
import { Virtualized } from '@table-library/react-table-library/virtualized';
import { usePagination } from '@table-library/react-table-library/pagination';
import {
SelectClickTypes,
Expand Down Expand Up @@ -44,6 +43,7 @@ import getIn from '~utils/lodashButBetter/get';
import { makeAccessible } from '~utils/makeAccessible';
import { useIsMobile } from '~utils/useIsMobile';
import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
import { Virtualized } from '@table-library/react-table-library/virtualized';

const rowSelectType: Record<
NonNullable<TableProps<unknown>['selectionType']>,
Expand All @@ -57,8 +57,26 @@ const rowSelectType: Record<
// Get the number of TableHeaderCell components.
// This is very complicated but the only way to iterate through the structure and get number of header cells.
// Assuming number of header cells is the same as number of columns
const getTableHeaderCellCount = (children: (data: []) => React.ReactElement): number => {
const getTableHeaderCellCount = (
children: (data: []) => React.ReactElement,
isVirtualized: boolean,
): number => {
const tableRootComponent = children([]);
if (isVirtualized) {
if (React.isValidElement(tableRootComponent)) {
console.log('tableRootComponent', tableRootComponent);
if (React.isValidElement(tableRootComponent.props.header())) {
const tableHeaderRow = tableRootComponent.props.header().props.children;
if (React.isValidElement(tableHeaderRow)) {
const tableHeaderCells = tableHeaderRow.props.children;
return tableHeaderCells.length;
}
}
// const tableHeaderArray = tableRootComponent.props.header().props.children;
// return tableHeaderArray;
}
}

if (tableRootComponent && React.isValidElement(tableRootComponent)) {
const tableComponentArray = React.Children.toArray(tableRootComponent);
if (React.isValidElement(tableComponentArray[0])) {
Expand Down Expand Up @@ -174,7 +192,7 @@ const _Table = <Item,>({
});

// Table Theme
const columnCount = getTableHeaderCellCount(children);
const columnCount = getTableHeaderCellCount(children, true);
const firstColumnStickyHeaderCellCSS = isFirstColumnSticky
? `
&:nth-of-type(1) {
Expand Down Expand Up @@ -435,6 +453,8 @@ const _Table = <Item,>({
showBorderedCells,
hasHoverActions,
setHasHoverActions,
columnCount,
gridTemplateColumns,
}),
[
selectionType,
Expand All @@ -443,8 +463,10 @@ const _Table = <Item,>({
toggleRowSelectionById,
toggleAllRowsSelection,
deselectAllRows,
gridTemplateColumns,
rowDensity,
toggleSort,
columnCount,
currentSortedState,
setPaginationPage,
setPaginationRowSize,
Expand Down Expand Up @@ -535,17 +557,8 @@ const Table = assignWithoutSideEffects(_Table, {
componentId: ComponentIds.Table,
});

const TableVirtulized = ({ header, body, tableData }) => {
console.log({ header, body });

return (
<Virtualized
tableList={tableData}
rowHeight={57}
header={header}
body={body}
/>
);
};
const VirtualizedTable = assignWithoutSideEffects(_Table, {
componentId: ComponentIds.Table,
});

export { Table, TableVirtulized };
export { Table, VirtualizedTable };
172 changes: 168 additions & 4 deletions packages/blade/src/components/Table/TableBody.web.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import { Body, Row, Cell } from '@table-library/react-table-library/table';
import { Virtualized } from '@table-library/react-table-library/virtualized';
import styled from 'styled-components';
import { useTableContext } from './TableContext';
import { checkboxCellWidth, classes, tableBackgroundColor, tableRow } from './tokens';
Expand Down Expand Up @@ -65,6 +66,159 @@ const getTableActionsHoverStyles = ({
};
};

const StyledVirtualized = styled(Virtualized)<{
$isSelectable: boolean;
$showStripedRows: boolean;
}>(({ theme, $showStripedRows, $isSelectable }) => {
const rowBackgroundTransition = getTableRowBackgroundTransition(theme);
return {};
// return {
// '&&&': {
// border: 'none',
// transition: rowBackgroundTransition,

// '& tr:last-child .cell-wrapper': {
// borderBottom: 'none',
// },

// '& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),
// },
// '& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.nonStripe.backgroundColorSelectedHover,
// backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover,
// theme,
// }),
// },
// '& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus,
// backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus,
// theme,
// }),
// },
// '& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.nonStripe.backgroundColorSelectedActive,
// backgroundGradientColor: tableRow.nonStripe.backgroundColorHover,
// theme,
// }),
// },

// ...($isSelectable && {
// '& tr:active:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),
// },
// }),

// ...($showStripedRows && {
// '& tr:nth-child(even) .cell-wrapper': {
// backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),
// },
// '& tr:nth-child(even) .cell-wrapper-base': {
// backgroundColor: tableRow.stripe.backgroundColor,
// },
// }),

// ...($showStripedRows &&
// $isSelectable && {
// '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),
// },
// '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),
// },
// '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),
// },
// '& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': {
// backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected),
// },
// '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(
// theme.colors,
// tableRow.stripeWrapper.backgroundColorSelectedHover,
// ),
// },
// '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(
// theme.colors,
// tableRow.stripeWrapper.backgroundColorSelectedFocus,
// ),
// },
// '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': {
// backgroundColor: getIn(
// theme.colors,
// tableRow.stripeWrapper.backgroundColorSelectedActive,
// ),
// },

// '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorHover,
// theme,
// backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover,
// }),
// },
// '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorFocus,
// theme,
// backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus,
// }),
// },
// '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorActive,
// backgroundGradientColor: tableRow.stripe.backgroundColorHover,
// theme,
// }),
// },

// '& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorSelected,
// theme,
// backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected,
// }),
// },
// '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorSelectedHover,
// theme,
// backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover,
// }),
// },
// '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorSelectedFocus,
// theme,
// backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus,
// }),
// },
// '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': {
// backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),
// ...getTableActionsHoverStyles({
// hoverColor: tableRow.stripe.backgroundColorSelectedActive,
// theme,
// backgroundGradientColor: tableRow.stripe.backgroundColorHover,
// }),
// },
// }),
// },
// };
});

const StyledBody = styled(Body)<{
$isSelectable: boolean;
$showStripedRows: boolean;
Expand Down Expand Up @@ -245,6 +399,7 @@ export const StyledCell = styled(Cell)<{
'&&&': {
height: '100%',
backgroundColor: getIn(theme.colors, $backgroundColor),
// todo: add check only in case of virtulizatoin
'& > div:first-child': {
alignSelf: 'stretch',
},
Expand Down Expand Up @@ -337,7 +492,8 @@ const TableCheckboxCell = ({
isDisabled?: boolean;
}): React.ReactElement => {
return (
<TableCell>
// false in case of virtualization
<TableCell _hasPadding={false}>
<BaseBox
display="flex"
alignItems="center"
Expand Down Expand Up @@ -366,13 +522,13 @@ const StyledRow = styled(Row)<{
return {
'&&&': {
backgroundColor: 'transparent',
display: 'flex',
// display: 'grid',
// gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))',
'& .cell-wrapper': $showBorderedCells
? {
borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
borderRightStyle: 'solid',
borderRightColor: getIn(theme.colors, tableRow.borderColor),
display: 'flex',
}
: undefined,
'& td:last-child .cell-wrapper': {
Expand Down Expand Up @@ -545,8 +701,16 @@ const _TableRow = <Item,>({
);
};

const TableVirtulized = ({ header, body, tableData, rowHeight }) => {
console.log({ header, body });

return (
<StyledVirtualized tableList={tableData} rowHeight={rowHeight} header={header} body={body} />
);
};

const TableRow = assignWithoutSideEffects(_TableRow, {
componentId: ComponentIds.TableRow,
});

export { TableBody, TableRow, TableCell };
export { TableBody, TableRow, TableCell, TableVirtulized };
4 changes: 4 additions & 0 deletions packages/blade/src/components/Table/TableContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export type TableContextType = {
showBorderedCells: NonNullable<TableProps<unknown>['showBorderedCells']>;
hasHoverActions: boolean;
setHasHoverActions: (hasHoverActions: boolean) => void;
columnCount: number;
gridTemplateColumns: string | undefined;
};

const TableContext = React.createContext<TableContextType>({
Expand All @@ -66,6 +68,8 @@ const TableContext = React.createContext<TableContextType>({
showBorderedCells: false,
hasHoverActions: false,
setHasHoverActions: () => {},
columnCount: 0,
gridTemplateColumns: undefined,
});

const useTableContext = (): TableContextType => {
Expand Down
Loading

0 comments on commit 1aaf188

Please sign in to comment.