styles

styles.ts

import { createStyles, rem } from '@mantine/core';
import { getSize } from '@steklo24/utils';

interface DynamicTableStylesParams {
  hasActions?: boolean;
  atStart?: boolean;
  atEnd?: boolean;
  hasScroll?: boolean;
  hasExtraColumnsAtTheEnd?: boolean;
}

export const useDynamicTableStyles = createStyles(
  (
    theme,
    { hasActions, atStart, atEnd, hasScroll, hasExtraColumnsAtTheEnd }: DynamicTableStylesParams,
  ) => {
    return {
      root: {
        marginBottom: '1rem',
      },
      tableContainer: {
        border: `${rem(1)} solid ${
          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
        }`,
        height: '100%',
        overflowX: 'auto',
        overflowY: 'auto',
        borderRadius: 0,
      },
      table: {
        // cellHeader
        '& thead tr th, & tfoot tr th, & tbody tr th': {
          backgroundColor: theme.colors.white,
          borderBottom: `${rem(1)} solid ${
            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
          }`,
          fontWeight: 'bold',
          textTransform: 'uppercase',
          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[4],
          fontSize: getSize({ size: 'sm', sizes: theme.fontSizes }),
        },

        // last cell with actions
        '& thead tr th:last-of-type, & tbody tr td:last-of-type': hasActions && {
          position: 'sticky',
          right: 0,
          width: hasExtraColumnsAtTheEnd ? 'auto !important' : undefined,
          maxWidth: !hasExtraColumnsAtTheEnd ? `${rem(70)} !important` : undefined,
          minWidth: `${rem(40)} !important`,
          backgroundColor:
            hasScroll && !atEnd
              ? theme.colorScheme === 'dark'
                ? theme.fn.rgba(theme.colors.dark[7], 0.9)
                : theme.fn.rgba(theme.white, 0.9)
              : undefined,

          '&::before': hasScroll &&
            !atEnd && {
              content: '""',
              position: 'absolute',
              left: 0,
              top: 0,
              bottom: 0,
              transform: 'translateX(-100%)',
              width: rem(32),
              backgroundImage: `linear-gradient(to left, ${
                theme.colorScheme === 'dark'
                  ? theme.fn.rgba(theme.colors.dark[7], 0.9)
                  : theme.fn.rgba(theme.white, 0.9)
              } 10%, ${
                theme.colorScheme === 'dark'
                  ? theme.fn.rgba(theme.colors.dark[7], 0)
                  : theme.fn.rgba(theme.white, 0)
              } 90%)`,
              pointerEvents: 'none',
            },
        },
      },

      // last item
    };
  },
);