@qoretechnologies/reqore 0.35.1 → 0.35.3

package/src/components/Table/header.tsx

@@ -1,14 +1,17 @@
 import { omit } from 'lodash';
+import { forwardRef, useCallback } from 'react';
+import { useMount } from 'react-use';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { IWithReqoreSize } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
 import { IReqoreTableHeaderCellProps, ReqoreTableHeaderCell } from './headerCell';
-import { calculateMinimumCellWidth, getOnlyShownColumns } from './helpers';
+import { getOnlyShownColumns } from './helpers';
 
 export type TColumnsUpdater = <T extends keyof IReqoreTableColumn>(
   id: string,
@@ -22,37 +25,45 @@ export interface IReqoreCustomHeaderCellProps
       'sortData' | 'onSortChange' | 'onColumnsUpdate' | 'onFilterChange'
     >,
     Omit<IReqoreTableColumn, 'cell' | 'header'>,
-    IReqoreButtonProps {
+    Omit<IReqoreButtonProps, 'maxWidth'> {
   hasColumns?: boolean;
 }
 export interface IReqoreCustomHeaderCellComponent extends React.FC<IReqoreCustomHeaderCellProps> {}
 
 export interface IReqoreTableSectionProps extends IWithReqoreSize {
   columns: IReqoreTableColumn[];
-  leftScroll: number;
   onSortChange?: (sort: string) => void;
   sortData: IReqoreTableSort;
-  selectable?: boolean;
-  selectedQuant: 'none' | 'all' | 'some';
-  onToggleSelectClick: () => void;
   hasVerticalScroll: boolean;
-  selectToggleTooltip?: string;
   onColumnsUpdate: TColumnsUpdater;
   onFilterChange?: (dataId: string, value: any) => void;
   component?: IReqoreCustomHeaderCellComponent;
+  heightAsGroup?: boolean;
+  scrollable?: boolean;
+  bodyRef: React.RefObject<HTMLDivElement>;
 }
 
 export interface IReqoreTableSectionStyle {
   leftScroll: number;
   hasVerticalScroll: boolean;
   theme: IReqoreTheme;
+  heightAsGroup?: boolean;
+  size?: TSizes;
 }
 
 const StyledTableHeaderWrapper = styled.div<IReqoreTableSectionStyle>`
-  ${({ leftScroll }) => css`
+  ${({ heightAsGroup, size }) => css`
     display: flex;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+    ::-webkit-scrollbar {
+      display: none;
+    }
+
+    flex-shrink: 0;
     flex-flow: column;
-    transform: translate3d(${-leftScroll}px, 0, 0);
+    height: ${heightAsGroup ? `${SIZE_TO_PX[size] * 2}px` : undefined};
 
     ${({ theme }) => css`
       background-color: ${theme.main};
@@ -77,7 +88,10 @@ export const StyledColumnGroupHeader = styled.div<IReqoreTableHeaderStyle>`
 const StyledColumnGroup = styled.div<IReqoreTableHeaderStyle>`
   display: flex;
   flex-flow: column;
+  flex-shrink: 0;
   width: ${({ width }) => width}px;
+  max-width: ${({ maxWidth = 9999 }) => maxWidth}px;
+  min-width: ${({ minWidth, width }) => minWidth || width}px;
 
   ${({ grow }) =>
     grow &&
@@ -105,126 +119,121 @@ const StyledTableHeaderRow = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const ReqoreTableHeader = ({
-  columns,
-  leftScroll,
-  onSortChange,
-  sortData,
-  selectable,
-  selectedQuant,
-  onToggleSelectClick,
-  selectToggleTooltip,
-  hasVerticalScroll,
-  onColumnsUpdate,
-  onFilterChange,
-  size,
-  component,
-}: IReqoreTableSectionProps) => {
-  const renderHeaderCell = (
-    headerCellComponent: IReqoreCustomHeaderCellComponent,
-    props: IReqoreCustomHeaderCellProps
+const ReqoreTableHeader = forwardRef<HTMLDivElement, IReqoreTableSectionProps>(
+  (
+    {
+      columns,
+      onSortChange,
+      sortData,
+      hasVerticalScroll,
+      onColumnsUpdate,
+      onFilterChange,
+      size,
+      component,
+      heightAsGroup,
+      scrollable,
+      bodyRef,
+    }: IReqoreTableSectionProps,
+    ref
   ) => {
-    const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
-
-    return <HeaderCell key={props.dataId} {...props} />;
-  };
-
-  const renderColumns = (columns: IReqoreTableColumn[]) =>
-    getOnlyShownColumns(columns).map(
+    const { targetRef } = useCombinedRefs(ref);
+
+    useMount(() => {
+      if (scrollable) {
+        targetRef.current?.addEventListener('wheel', (e) => {
+          if (e.deltaX) {
+            e.preventDefault();
+
+            targetRef.current?.scrollTo({ left: targetRef.current?.scrollLeft + e.deltaX });
+            bodyRef.current?.scrollTo({ left: bodyRef.current?.scrollLeft + e.deltaX });
+          }
+        });
+      }
+    });
+
+    const renderHeaderCell = useCallback(
       (
-        {
-          grow,
-          align,
-          dataId,
-          header: { columns, onClick, component: headerComponent, ...rest },
-          ...colRest
-        },
-        index
-      ) =>
-        columns ? (
-          <StyledColumnGroup
-            grow={grow}
-            key={index}
-            className='reqore-table-column-group'
-            width={getOnlyShownColumns(columns).reduce(
-              (wid, col) => wid + (col.resizedWidth || col.width || 80),
-              0
-            )}
-          >
-            {renderHeaderCell(headerComponent, {
+        headerCellComponent: IReqoreCustomHeaderCellComponent,
+        props: IReqoreCustomHeaderCellProps
+      ) => {
+        const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
+
+        return <HeaderCell key={props.dataId} {...props} />;
+      },
+      [component]
+    );
+
+    const renderColumns = (columns: IReqoreTableColumn[]) =>
+      getOnlyShownColumns(columns).map(
+        (
+          {
+            grow,
+            align,
+            dataId,
+            header: { columns, onClick, component: headerComponent, ...rest },
+            ...colRest
+          },
+          index
+        ) =>
+          columns ? (
+            <StyledColumnGroup
+              grow={getOnlyShownColumns(columns).reduce((gr, col) => gr + col.grow, 0)}
+              key={index}
+              className='reqore-table-column-group'
+              width={getOnlyShownColumns(columns).reduce(
+                (wid, col) => wid + (col.resizedWidth || col.width || 80),
+                0
+              )}
+              maxWidth={getOnlyShownColumns(columns).reduce((wid, col) => wid + col.maxWidth, 0)}
+              minWidth={getOnlyShownColumns(columns).reduce((wid, col) => wid + col.minWidth, 0)}
+            >
+              {renderHeaderCell(headerComponent, {
+                ...rest,
+                ...omit(colRest, ['cell']),
+                dataId,
+                size,
+                readOnly: !onClick,
+                onClick,
+                rounded: false,
+                textAlign: align,
+                className: 'reqore-table-column-group-header',
+                resizable: false,
+                hideable: false,
+                hasColumns: true,
+              })}
+              <StyledColumnGroupHeaders className='reqore-table-headers'>
+                {renderColumns(columns)}
+              </StyledColumnGroupHeaders>
+            </StyledColumnGroup>
+          ) : (
+            renderHeaderCell(headerComponent, {
               ...rest,
               ...omit(colRest, ['cell']),
+              onClick,
               dataId,
               size,
-              readOnly: !onClick,
-              rounded: false,
-              textAlign: align,
-              className: 'reqore-table-column-group-header',
-              resizable: false,
-              hideable: false,
-              hasColumns: true,
-            })}
-            <StyledColumnGroupHeaders className='reqore-table-headers'>
-              {renderColumns(columns)}
-            </StyledColumnGroupHeaders>
-          </StyledColumnGroup>
-        ) : (
-          renderHeaderCell(headerComponent, {
-            ...rest,
-            ...omit(colRest, ['cell']),
-            dataId,
-            size,
-            sortData,
-            grow,
-            align,
-            onSortChange,
-            onColumnsUpdate,
-            onFilterChange,
-          })
-        )
-    );
-
-  const getSelectedIcon = (): IReqoreIconName => {
-    switch (selectedQuant) {
-      case 'all':
-        return 'CheckboxCircleLine';
-      case 'some':
-        return 'IndeterminateCircleLine';
-      default:
-        return 'CheckboxBlankCircleLine';
-    }
-  };
-
-  return (
-    <StyledTableHeaderWrapper
-      className='reqore-table-header-wrapper'
-      hasVerticalScroll={hasVerticalScroll}
-    >
-      <StyledTableHeaderRow
-        style={{
-          transform: `translate3d(${leftScroll ? -leftScroll : 0}px, 0, 0)`,
-        }}
+              sortData,
+              grow,
+              align,
+              onSortChange,
+              onColumnsUpdate,
+              onFilterChange,
+            })
+          )
+      );
+
+    return (
+      <StyledTableHeaderWrapper
+        className='reqore-table-header-wrapper'
+        hasVerticalScroll={hasVerticalScroll}
+        heightAsGroup={heightAsGroup}
+        size={size}
+        ref={targetRef}
       >
-        {selectable &&
-          renderHeaderCell(component, {
-            dataId: 'selectbox',
-            sortData,
-            align: 'center',
-            size,
-            onSortChange,
-            icon: getSelectedIcon(),
-            width: calculateMinimumCellWidth(50, size),
-            resizable: false,
-            hideable: false,
-            tooltip: selectToggleTooltip || 'Toggle selection on all data',
-            onClick: () => {
-              onToggleSelectClick();
-            },
-          })}
-        {renderColumns(columns)}
-      </StyledTableHeaderRow>
-    </StyledTableHeaderWrapper>
-  );
-};
+        <StyledTableHeaderRow>{renderColumns(columns)}</StyledTableHeaderRow>
+      </StyledTableHeaderWrapper>
+    );
+  }
+);
 
 export default ReqoreTableHeader;

package/src/components/Table/headerCell.tsx

@@ -13,7 +13,7 @@ import { TColumnsUpdater } from './header';
 
 export interface IReqoreTableHeaderCellProps
   extends Omit<IReqoreTableColumn, 'cell'>,
-    IReqoreButtonProps {
+    Omit<IReqoreButtonProps, 'maxWidth'> {
   onSortChange?: (sort: string) => void;
   sortData?: IReqoreTableSort;
   onColumnsUpdate?: TColumnsUpdater;
@@ -44,9 +44,12 @@ export const StyledTableHeaderResize = styled.div`
 
 export const ReqoreTableHeaderCell = ({
   width,
+  maxWidth,
+  minWidth,
   resizedWidth,
   grow,
   align,
+  pin,
   onSortChange,
   dataId,
   sortable,
@@ -58,6 +61,7 @@ export const ReqoreTableHeaderCell = ({
   filterPlaceholder,
   filterable,
   hideable = true,
+  pinnable = true,
   filter,
   size,
   onFilterChange,
@@ -68,11 +72,6 @@ export const ReqoreTableHeaderCell = ({
     let _items: IReqoreDropdownItem[] = [];
 
     if (resizable || hideable) {
-      _items.push({
-        divider: true,
-        label: 'Options',
-      });
-
       if (resizable) {
         _items.push({
           label: 'Reset size',
@@ -84,7 +83,33 @@ export const ReqoreTableHeaderCell = ({
         });
       }
 
+      if (pinnable) {
+        _items.push({ divider: true, size: 'small', line: true });
+
+        _items.push({
+          label: 'Pin left',
+          icon: 'SkipBackLine',
+          active: pin === 'left',
+          intent: pin === 'left' ? 'info' : undefined,
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'pin', pin !== 'left' ? 'left' : undefined);
+          },
+        });
+
+        _items.push({
+          label: 'Pin Right',
+          icon: 'SkipForwardLine',
+          active: pin === 'right',
+          intent: pin === 'right' ? 'info' : undefined,
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'pin', pin !== 'right' ? 'right' : undefined);
+          },
+        });
+      }
+
       if (hideable) {
+        _items.push({ divider: true, size: 'small', line: true });
+
         _items.push({
           label: 'Hide column',
           icon: 'EyeCloseLine',
@@ -105,7 +130,8 @@ export const ReqoreTableHeaderCell = ({
 
   return (
     <Resizable
-      minWidth={width}
+      minWidth={minWidth || width}
+      maxWidth={maxWidth}
       onResize={(_event, _direction, _component) => {
         onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
       }}
@@ -154,7 +180,7 @@ export const ReqoreTableHeaderCell = ({
             fixed
             size={size}
             rounded={false}
-            intent={filter ? 'info' : undefined}
+            intent={filter ? 'info' : rest.intent}
             filterable={filterable}
             filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
             filter={filter}

package/src/components/Table/helpers.ts

@@ -1,7 +1,7 @@
 import { size } from 'lodash';
 import { firstBy } from 'thenby';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
-import { ICON_FROM_SIZE, SIZE_TO_PX, TSizes } from '../../constants/sizes';
+import { ICON_FROM_SIZE, SIZE_TO_MODIFIER, SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqorePanelAction } from '../Panel';
 
@@ -137,6 +137,12 @@ export const getColumnsCount = (columns: IReqoreTableColumn[]): number => {
   return count;
 };
 
+export const hasGroupedColumns = (columns: IReqoreTableColumn[]): boolean => {
+  return columns.some((column) => {
+    return !!column.header?.columns;
+  });
+};
+
 export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
   return columns.some((column) => {
     if (column.header.columns) {
@@ -147,6 +153,40 @@ export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
   });
 };
 
+export const getColumnsByPinType = (
+  columns: IReqoreTableColumn[],
+  type: 'left' | 'right' | 'main'
+): IReqoreTableColumn[] => {
+  return columns.reduce((newColumns, column) => {
+    if (column.header.columns) {
+      const subColumns: IReqoreTableColumn[] = getColumnsByPinType(column.header.columns, type);
+
+      if (!size(subColumns)) {
+        return newColumns;
+      }
+
+      const columnsResult = [
+        ...newColumns,
+        {
+          ...column,
+          header: {
+            ...column.header,
+            columns: subColumns,
+          },
+        },
+      ];
+
+      return columnsResult;
+    }
+
+    if ((type === 'main' && !column.pin) || column.pin === type) {
+      return [...newColumns, column];
+    }
+
+    return newColumns;
+  }, []);
+};
+
 export const getOnlyShownColumns = (columns: IReqoreTableColumn[]): IReqoreTableColumn[] => {
   return columns.reduce((newColumns, column) => {
     if (column.header.columns) {
@@ -202,7 +242,7 @@ export const prepareColumns = (
 
     return {
       ...column,
-      width: newWidth,
+      width: newWidth * SIZE_TO_MODIFIER[size],
       ...(columnModifiers?.[column.dataId] || {}),
     };
   });