@veeqo/ui 0.0.4 → 0.0.7

package/src/components/DataTable/DataTable.tsx

@@ -1,634 +0,0 @@
-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;