@veeqo/ui 0.0.1 → 0.0.4

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,634 @@
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { Checkbox } from '../Checkbox';
+import { Radio } from '../Radio';
+
+import { Tooltip } from '../Tooltip';
+import { theme } from '../../theme';
+
+import {
+  SpecificStateType,
+  DataTableHeader,
+  DataTableId,
+  DataTableProps,
+  DataTableRow,
+  DataTableNestedRow,
+  DataTableSortDirection,
+  FixedColumnInlineStyle,
+} from './utils/types';
+
+import {
+  Wrapper,
+  WrapperBordered,
+  Table,
+  Head,
+  Body,
+  Row,
+  Cell,
+  HeaderCell,
+  HeaderCellLayout,
+  Footer,
+  TooltipContent,
+} from './styled';
+
+import { SpecificState } from './SpecificState';
+
+import { ClickableCell, EditableCell } from './cells';
+import { SkeletonCell } from './cells/SkeletonCell';
+
+import { defaultEmptyState, defaultErrorState, ScrollPosition } from './utils/constants';
+import { StickyHeader } from './StickyHeader';
+import { convertFixedColumnInlineStyleToStyled } from './utils';
+import { SkeletonHeaderCell } from './cells/SkeletonHeaderCell';
+import { SkeletonContent } from './SkeletonContent';
+
+import { DoubleArrowIcon } from '../../tempIcons/DoubleArrowIconIcon';
+import { DoubleArrowAscIcon } from '../../tempIcons/DoubleArrowAscIcon';
+import { DoubleArrowDescIcon } from '../../tempIcons/DoubleArrowDescIcon';
+
+export const IconUnsorted = () => (
+  <DoubleArrowIcon width={theme.sizes.base} height={theme.sizes.base} color="lightgrey" />
+);
+export const IconSortAsc = () => (
+  <DoubleArrowAscIcon width={theme.sizes.base} height={theme.sizes.base} color="lightgrey" />
+);
+export const IconSortDesc = () => (
+  <DoubleArrowDescIcon width={theme.sizes.base} height={theme.sizes.base} color="lightgrey" />
+);
+
+export const DataTable = ({
+  borderless = false,
+  striped = true,
+  noWrap = false,
+  showScrollbar = false,
+  headers,
+  rows,
+  renderRow,
+  renderNestedRow,
+  expandedRowIds,
+  renderLoadingRow,
+  renderFooterRow,
+  renderFooterLoadingRow,
+  omitFooterSelectionCell = false,
+  selectedRowIds,
+  disabledSelectionInputRowIds,
+  selectionMode = 'multiple',
+  onChangeSelectedRowIds,
+  sortColumnId,
+  sortDirection,
+  onChangeSort,
+  isError = false,
+  isLoading = false,
+  skeletonRowsNumber = 5,
+  isHeaderSticky = true,
+  stickyHeaderStyle,
+  customSpecificState,
+  bodyHeightInSpecificStates = 375,
+  startFixedColumnsNumber,
+  endFixedColumnsNumber,
+}: DataTableProps) => {
+  const WrapperComponent = borderless ? Wrapper : WrapperBordered;
+
+  const isEmpty = rows ? rows.length === 0 : false;
+  const isFixedLayout = Boolean(startFixedColumnsNumber || endFixedColumnsNumber);
+  const isFixedColumnsNotEnabled = !startFixedColumnsNumber && !endFixedColumnsNumber;
+
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const selectionColumnWidth = 58;
+
+  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(ScrollPosition.none);
+
+  useEffect(() => {
+    let refValue: HTMLDivElement | null = null;
+
+    const handleScroll = () => {
+      if (!wrapperRef.current || isFixedColumnsNotEnabled) return;
+      const el = wrapperRef.current;
+      const scrollWidth = el.scrollWidth + 2; // 2 here is 2px which adds by border
+      const { scrollLeft } = el;
+      const { width } = el.getBoundingClientRect();
+      const scrollValue = scrollLeft + width;
+
+      if (scrollWidth === width) setScrollPosition(ScrollPosition.none);
+      else if (scrollLeft === 0) setScrollPosition(ScrollPosition.start);
+      else if (scrollLeft > 0 && scrollValue < scrollWidth)
+        setScrollPosition(ScrollPosition.middle);
+      else if (scrollValue === scrollWidth) setScrollPosition(ScrollPosition.end);
+    };
+
+    if (wrapperRef.current) {
+      refValue = wrapperRef.current;
+      handleScroll();
+      wrapperRef.current?.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      refValue?.removeEventListener('scroll', handleScroll);
+    };
+  }, [tableRef, isFixedColumnsNotEnabled]);
+
+  const castWidthToNumber = useCallback((width: number | string | undefined): null | number => {
+    if (typeof width === 'string') {
+      // eslint-disable-next-line no-console
+      console.error(
+        "You can only use a numeric value in the 'width' property when you use fixed columns",
+      );
+      return null;
+    }
+    if (width === undefined) {
+      // eslint-disable-next-line no-console
+      console.error(
+        "You should provide numeric value in the 'width' attribute in all fixed columns when you use fixed columns",
+      );
+      return null;
+    }
+
+    return width;
+  }, []);
+
+  const generateFixedColumnInlineStyle = useCallback(
+    (index: number, offset: number, side: 'left' | 'right'): FixedColumnInlineStyle => ({
+      index: side === 'left' ? index : -index,
+      style: {
+        position: 'sticky',
+        [side]: offset,
+        zIndex: 1,
+      },
+    }),
+    [],
+  );
+
+  const generateFixedColumnsStyle = useCallback((): FixedColumnInlineStyle[] | null => {
+    if (!headers || isLoading) return null;
+
+    const startColumns: FixedColumnInlineStyle[] = [];
+    const endColumns: FixedColumnInlineStyle[] = [];
+
+    let totalStartOffset = 0;
+    let totalEndOffset = 0;
+
+    if (startFixedColumnsNumber) {
+      if (selectedRowIds) {
+        startColumns.push(generateFixedColumnInlineStyle(1, totalStartOffset, 'left'));
+        totalStartOffset += selectionColumnWidth;
+      }
+
+      for (let i = 0; i < startFixedColumnsNumber; i += 1) {
+        const headerWidth = castWidthToNumber(headers[i].width);
+        if (headerWidth) {
+          startColumns.push(
+            generateFixedColumnInlineStyle(
+              selectedRowIds ? i + 2 : i + 1,
+              totalStartOffset,
+              'left',
+            ),
+          );
+          totalStartOffset += headerWidth;
+        }
+      }
+    }
+
+    if (endFixedColumnsNumber) {
+      for (let i = 0; i < endFixedColumnsNumber; i += 1) {
+        const headerWidth = castWidthToNumber(headers.slice(-i - 1)[0].width);
+        if (headerWidth) {
+          endColumns.push(generateFixedColumnInlineStyle(i + 1, totalEndOffset, 'right'));
+          totalEndOffset += headerWidth;
+        }
+      }
+    }
+
+    if (startColumns.length === 0 && endColumns.length === 0) return null;
+
+    return [...startColumns, ...endColumns];
+  }, [
+    isLoading,
+    castWidthToNumber,
+    endFixedColumnsNumber,
+    generateFixedColumnInlineStyle,
+    headers,
+    startFixedColumnsNumber,
+    selectedRowIds,
+  ]);
+
+  const fixedColumnsStyle = useMemo(() => generateFixedColumnsStyle(), [generateFixedColumnsStyle]);
+
+  const handleSelectRow = useCallback(
+    (checked: boolean, row: DataTableRow) => {
+      if (!selectedRowIds || !onChangeSelectedRowIds) return;
+
+      if (checked) {
+        if (selectionMode === 'single') {
+          onChangeSelectedRowIds([row.id]);
+          return;
+        }
+        onChangeSelectedRowIds([...selectedRowIds, row.id]);
+        return;
+      }
+
+      const newSelectedRowIds = [...selectedRowIds];
+      const index = newSelectedRowIds.findIndex((id) => id === row.id);
+      newSelectedRowIds.splice(index, 1);
+      onChangeSelectedRowIds(newSelectedRowIds);
+    },
+    [onChangeSelectedRowIds, selectedRowIds, selectionMode],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (!selectedRowIds || !onChangeSelectedRowIds) return;
+
+    if (selectedRowIds.length === rows.length) {
+      onChangeSelectedRowIds([]);
+      return;
+    }
+
+    const rowIds = rows.map((row) => row.id);
+    onChangeSelectedRowIds(rowIds);
+  }, [onChangeSelectedRowIds, rows, selectedRowIds]);
+
+  const handleClickSortableHeader = useCallback(
+    (columnId: DataTableId) => {
+      if (sortColumnId === undefined || onChangeSort === undefined) return;
+
+      let nextColumnId = sortColumnId;
+      let nextDirection: DataTableSortDirection = 'ascending';
+
+      if (sortDirection === 'ascending') {
+        nextDirection = 'descending';
+      }
+
+      if (columnId !== sortColumnId) {
+        nextColumnId = columnId;
+        nextDirection = 'ascending';
+      }
+
+      onChangeSort(nextColumnId, nextDirection);
+    },
+    [onChangeSort, sortColumnId, sortDirection],
+  );
+
+  const renderHeaderCell = useCallback(
+    (header: DataTableHeader, style: React.CSSProperties) => {
+      let className = '';
+      let onClick = () => {};
+      let sortIcon = <IconUnsorted />;
+      const { tooltip, align, icon, title, sortable, id } = header;
+
+      if (sortable) {
+        className = 'sortable';
+        onClick = () => handleClickSortableHeader(id);
+
+        if (sortColumnId === id) {
+          sortIcon = sortDirection === 'ascending' ? <IconSortAsc /> : <IconSortDesc />;
+        }
+      }
+
+      const headerContents = (
+        <HeaderCellLayout align={align}>
+          {icon && icon}
+          {title && <span>{title}</span>}
+          {sortable && sortIcon}
+        </HeaderCellLayout>
+      );
+
+      return (
+        <HeaderCell
+          key={id}
+          id={`data-table-header-${id}`}
+          className={className}
+          onClick={onClick}
+          align={header.align}
+          grow={header.grow}
+          style={{ width: header.width || 'auto', ...style }}
+        >
+          {tooltip ? (
+            <Tooltip text={tooltip}>
+              <TooltipContent>{headerContents}</TooltipContent>
+            </Tooltip>
+          ) : (
+            headerContents
+          )}
+        </HeaderCell>
+      );
+    },
+    [handleClickSortableHeader, sortColumnId, sortDirection],
+  );
+  const renderSkeletonHeaderCell = useCallback(
+    (header: DataTableHeader, style: React.CSSProperties) => (
+      <SkeletonHeaderCell
+        key={header.id}
+        width={header.width || 'auto'}
+        style={style}
+        isLoading={isLoading}
+      />
+    ),
+    [isLoading],
+  );
+
+  const renderHeader = useCallback(() => {
+    if (!headers) return null;
+
+    const styles: FixedColumnInlineStyle[] | null = generateFixedColumnsStyle();
+    const selectionCellStyle = styles ? styles[0].style : {};
+
+    return (
+      <Head>
+        <Row>
+          {selectedRowIds && (
+            <HeaderCell style={{ width: selectionColumnWidth, ...selectionCellStyle }}>
+              {selectionMode === 'multiple' && (
+                <Checkbox
+                  checked={(rows.length > 0 && selectedRowIds?.length === rows.length) || false}
+                  onChange={handleSelectAll}
+                  disabled={
+                    (disabledSelectionInputRowIds && disabledSelectionInputRowIds.length > 0) ||
+                    isLoading ||
+                    isEmpty
+                  }
+                  ariaLabel="Select all"
+                />
+              )}
+            </HeaderCell>
+          )}
+          {headers.map((header, index) => {
+            const startHeaderIndex = selectedRowIds ? index + 2 : index + 1;
+            const endHeaderIndex = index - headers.length;
+            const headerCellStyle = styles?.find(
+              (style) => style.index === startHeaderIndex || style.index === endHeaderIndex,
+            );
+
+            return header.skeleton && (isLoading || isError || isEmpty)
+              ? renderSkeletonHeaderCell(header, header.skeletonStyle || {})
+              : renderHeaderCell(header, headerCellStyle?.style || {});
+          })}
+        </Row>
+      </Head>
+    );
+  }, [
+    generateFixedColumnsStyle,
+    handleSelectAll,
+    headers,
+    isEmpty,
+    isError,
+    isLoading,
+    renderSkeletonHeaderCell,
+    renderHeaderCell,
+    rows.length,
+    selectedRowIds,
+    selectionMode,
+    disabledSelectionInputRowIds,
+  ]);
+
+  const renderSelectionInput = useCallback(
+    (isSelected: boolean, row: DataTableRow) => {
+      const inputProps = {
+        checked: isSelected,
+        onChange: (checked: boolean) => handleSelectRow(checked, row),
+        disabled: disabledSelectionInputRowIds?.includes(row.id) || false,
+      };
+
+      if (selectionMode === 'single') {
+        return <Radio {...inputProps} />;
+      }
+      return <Checkbox {...inputProps} />;
+    },
+    [handleSelectRow, selectionMode, disabledSelectionInputRowIds],
+  );
+
+  const renderSkeletonSelectionInput = useCallback(
+    (rowIndex?: number) => {
+      const generalStyle: React.CSSProperties = {
+        width: 18,
+        height: 18,
+        margin: 3,
+        animationDuration: '0s',
+      };
+
+      if (selectionMode === 'single') {
+        return (
+          <SkeletonCell
+            key={rowIndex === undefined ? null : `radio-skeleton-${rowIndex}`}
+            style={{ ...generalStyle, borderRadius: '50%' }}
+          />
+        );
+      }
+      return (
+        <SkeletonCell
+          key={rowIndex === undefined ? null : `checkbox-skeleton-${rowIndex}`}
+          style={{ ...generalStyle, borderRadius: '0.25rem' }}
+        />
+      );
+    },
+    [selectionMode],
+  );
+
+  const getNestedRow = useCallback(
+    (nestedRow: DataTableNestedRow, isHidden: boolean) => {
+      if (!renderNestedRow) return null;
+
+      const content = renderNestedRow(nestedRow);
+      if (!content) return null;
+
+      const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row || '';
+
+      return (
+        <Row key={nestedRow.id} className={`${nestedRowE2eClassName} ${isHidden ? 'hidden' : ''}`}>
+          {selectedRowIds && <Cell />}
+          {content}
+        </Row>
+      );
+    },
+    [renderNestedRow, selectedRowIds],
+  );
+
+  const renderDefaultLoadingRow = useCallback(
+    (rowIndex: number) => {
+      if (!headers) return <SkeletonCell />;
+
+      // Otherwise render a cell for each column
+      const cells = headers.map((header) => <SkeletonCell key={`${rowIndex}-${header.id}`} />);
+
+      if (selectedRowIds) cells.unshift(renderSkeletonSelectionInput(rowIndex));
+
+      return cells;
+    },
+    [headers, renderSkeletonSelectionInput, selectedRowIds],
+  );
+
+  const getFooter = () => {
+    if (!renderFooterRow) return null;
+    if (isLoading && !renderFooterLoadingRow) return null;
+    if (!isLoading && isEmpty) return null;
+    return (
+      <Footer fixedColumnsStyle={convertFixedColumnInlineStyleToStyled(fixedColumnsStyle || [])}>
+        <Row>
+          {selectedRowIds && !omitFooterSelectionCell && <Cell />}
+          {!isLoading && renderFooterRow(rows)}
+          {isLoading && renderFooterLoadingRow && renderFooterLoadingRow()}
+        </Row>
+      </Footer>
+    );
+  };
+
+  let lastStartFixedColumnsIndex = startFixedColumnsNumber;
+
+  if (selectedRowIds && lastStartFixedColumnsIndex) lastStartFixedColumnsIndex += 1;
+
+  const renderedRows = useMemo(
+    () =>
+      rows.map((row: DataTableRow) => {
+        const { data } = row;
+        const isSelected = selectedRowIds ? selectedRowIds.includes(row.id) : false;
+        const isExpanded = expandedRowIds ? expandedRowIds.includes(row.id) : true;
+
+        const bodyClassName = data?.e2eClassNames?.body;
+        const rowE2eClassName = data?.e2eClassNames?.row ?? '';
+        const rowClassName = isSelected ? `selected ${rowE2eClassName}` : `${rowE2eClassName}`;
+
+        return (
+          <Body
+            key={row.id}
+            className={bodyClassName}
+            fixedColumnsStyle={convertFixedColumnInlineStyleToStyled(fixedColumnsStyle || [])}
+          >
+            <Row key={row.id} className={rowClassName} accentColor={row.accentColor}>
+              {selectedRowIds && <Cell>{renderSelectionInput(isSelected, row)}</Cell>}
+              {renderRow(row)}
+            </Row>
+            {row.nestedRows && row.nestedRows.map((item) => getNestedRow(item, !isExpanded))}
+          </Body>
+        );
+      }),
+    [
+      rows,
+      expandedRowIds,
+      fixedColumnsStyle,
+      getNestedRow,
+      renderRow,
+      renderSelectionInput,
+      selectedRowIds,
+    ],
+  );
+
+  /* Loading state */
+
+  if (isLoading) {
+    const loadingRows = [];
+
+    for (let i = 0; i < skeletonRowsNumber; i += 1) {
+      loadingRows.push(
+        <Body
+          key={`loading-row-${i}`}
+          fixedColumnsStyle={convertFixedColumnInlineStyleToStyled(fixedColumnsStyle || [])}
+        >
+          <Row>
+            {renderLoadingRow ? (
+              <>
+                {selectedRowIds && renderSkeletonSelectionInput()}
+                {renderLoadingRow()}
+              </>
+            ) : (
+              renderDefaultLoadingRow(i)
+            )}
+          </Row>
+        </Body>,
+      );
+    }
+
+    return (
+      <WrapperComponent
+        ref={wrapperRef}
+        scrollDisabled
+        scrollPosition={scrollPosition}
+        lastStartFixedColumnsIndex={lastStartFixedColumnsIndex}
+        firstEndFixedColumnsIndex={endFixedColumnsNumber}
+      >
+        {isHeaderSticky && headers && (
+          <StickyHeader
+            renderHeader={renderHeader}
+            tableRef={tableRef}
+            wrapperRef={wrapperRef}
+            isFixedLayout={isFixedLayout}
+            wrapperStyle={stickyHeaderStyle}
+          />
+        )}
+        <Table
+          ref={tableRef}
+          striped={striped}
+          noWrap={noWrap}
+          tableLoading
+          isFixedLayout={isFixedLayout}
+        >
+          {renderHeader()}
+          {loadingRows}
+          {getFooter()}
+        </Table>
+      </WrapperComponent>
+    );
+  }
+
+  /* Empty & Error states */
+
+  if (isEmpty || isError) {
+    let specificStateValues: SpecificStateType = defaultEmptyState;
+    if (customSpecificState) specificStateValues = customSpecificState;
+    else if (isError) specificStateValues = defaultErrorState;
+
+    return (
+      <WrapperComponent scrollDisabled>
+        <Table
+          ref={tableRef}
+          striped={striped}
+          noWrap={noWrap}
+          tableLoading={false}
+          isFixedLayout={isFixedLayout}
+        >
+          {renderHeader()}
+          {getFooter()}
+        </Table>
+        <SpecificState height={bodyHeightInSpecificStates} {...specificStateValues} />
+      </WrapperComponent>
+    );
+  }
+
+  /* Populated state */
+
+  return (
+    <WrapperComponent
+      scrollDisabled={false}
+      ref={wrapperRef}
+      scrollPosition={scrollPosition}
+      lastStartFixedColumnsIndex={lastStartFixedColumnsIndex}
+      firstEndFixedColumnsIndex={endFixedColumnsNumber}
+      showScrollbar={showScrollbar}
+    >
+      {isHeaderSticky && headers && (
+        <StickyHeader
+          renderHeader={renderHeader}
+          tableRef={tableRef}
+          wrapperRef={wrapperRef}
+          isFixedLayout={isFixedLayout}
+          wrapperStyle={stickyHeaderStyle}
+        />
+      )}
+      <Table
+        ref={tableRef}
+        striped={striped}
+        noWrap={noWrap}
+        tableLoading={false}
+        isFixedLayout={isFixedLayout}
+      >
+        {renderHeader()}
+        {renderedRows}
+        {getFooter()}
+      </Table>
+    </WrapperComponent>
+  );
+};
+
+DataTable.Cell = Cell;
+DataTable.ClickableCell = ClickableCell;
+DataTable.EditableCell = EditableCell;
+DataTable.SkeletonCell = SkeletonCell;
+DataTable.SkeletonContent = SkeletonContent;