@qoretechnologies/reqore 0.34.12 → 0.35.0

package/src/components/Table/header.tsx

@@ -1,12 +1,33 @@
+import { omit } from 'lodash';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { IWithReqoreSize } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import ReqoreTableHeaderCell, { StyledTableHeader } from './headerCell';
+import { IReqoreButtonProps } from '../Button';
+import { IReqoreTableHeaderCellProps, ReqoreTableHeaderCell } from './headerCell';
+import { calculateMinimumCellWidth, getOnlyShownColumns } from './helpers';
+
+export type TColumnsUpdater = <T extends keyof IReqoreTableColumn>(
+  id: string,
+  key: T,
+  value: IReqoreTableColumn[T]
+) => void;
+
+export interface IReqoreCustomHeaderCellProps
+  extends Pick<
+      IReqoreTableHeaderCellProps,
+      'sortData' | 'onSortChange' | 'onColumnsUpdate' | 'onFilterChange'
+    >,
+    Omit<IReqoreTableColumn, 'cell' | 'header'>,
+    IReqoreButtonProps {
+  hasColumns?: boolean;
+}
+export interface IReqoreCustomHeaderCellComponent extends React.FC<IReqoreCustomHeaderCellProps> {}
 
-export interface IReqoreTableSectionProps {
+export interface IReqoreTableSectionProps extends IWithReqoreSize {
   columns: IReqoreTableColumn[];
   leftScroll: number;
   onSortChange?: (sort: string) => void;
@@ -16,6 +37,9 @@ export interface IReqoreTableSectionProps {
   onToggleSelectClick: () => void;
   hasVerticalScroll: boolean;
   selectToggleTooltip?: string;
+  onColumnsUpdate: TColumnsUpdater;
+  onFilterChange?: (dataId: string, value: any) => void;
+  component?: IReqoreCustomHeaderCellComponent;
 }
 
 export interface IReqoreTableSectionStyle {
@@ -70,11 +94,7 @@ const StyledTableHeaderRow = styled.div<{ theme: IReqoreTheme }>`
   display: flex;
   flex: 1;
 
-  ${({ leftScroll }) => css`
-    transform: translate3d(${-leftScroll}px, 0, 0);
-  `}
-
-  ${StyledTableHeader}, ${StyledColumnGroupHeader} {
+  ${StyledColumnGroupHeader} {
     font-size: 13px;
     font-weight: 600;
     padding: 5px 10px;
@@ -95,39 +115,72 @@ const ReqoreTableHeader = ({
   onToggleSelectClick,
   selectToggleTooltip,
   hasVerticalScroll,
+  onColumnsUpdate,
+  onFilterChange,
+  size,
+  component,
 }: IReqoreTableSectionProps) => {
+  const renderHeaderCell = (
+    headerCellComponent: IReqoreCustomHeaderCellComponent,
+    props: IReqoreCustomHeaderCellProps
+  ) => {
+    const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
+
+    return <HeaderCell key={props.dataId} {...props} />;
+  };
+
   const renderColumns = (columns: IReqoreTableColumn[]) =>
-    columns.map(
-      ({ grow, header, props = {}, columns: cols, align, content, onCellClick, ...rest }, index) =>
-        cols ? (
+    getOnlyShownColumns(columns).map(
+      (
+        {
+          grow,
+          align,
+          dataId,
+          header: { columns, onClick, component: headerComponent, ...rest },
+          ...colRest
+        },
+        index
+      ) =>
+        columns ? (
           <StyledColumnGroup
-            width={cols.reduce((wid, col) => wid + (col.width || 80), 0)}
             grow={grow}
             key={index}
             className='reqore-table-column-group'
+            width={getOnlyShownColumns(columns).reduce(
+              (wid, col) => wid + (col.resizedWidth || col.width || 80),
+              0
+            )}
           >
-            <StyledColumnGroupHeader
-              align={align}
-              {...props}
-              className='reqore-table-column-group-header'
-            >
-              {header}
-            </StyledColumnGroupHeader>
+            {renderHeaderCell(headerComponent, {
+              ...rest,
+              ...omit(colRest, ['cell']),
+              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(cols)}
+              {renderColumns(columns)}
             </StyledColumnGroupHeaders>
           </StyledColumnGroup>
         ) : (
-          <ReqoreTableHeaderCell
-            {...props}
-            {...rest}
-            key={index}
-            sortData={sortData}
-            grow={grow}
-            align={align}
-            header={header}
-            onSortChange={onSortChange}
-          />
+          renderHeaderCell(headerComponent, {
+            ...rest,
+            ...omit(colRest, ['cell']),
+            dataId,
+            size,
+            sortData,
+            grow,
+            align,
+            onSortChange,
+            onColumnsUpdate,
+            onFilterChange,
+          })
         )
     );
 
@@ -147,23 +200,27 @@ const ReqoreTableHeader = ({
       className='reqore-table-header-wrapper'
       hasVerticalScroll={hasVerticalScroll}
     >
-      <StyledTableHeaderRow leftScroll={leftScroll}>
-        {selectable && (
-          <ReqoreTableHeaderCell
-            dataId='selectbox'
-            key='selectbox'
-            sortData={sortData}
-            align='center'
-            onSortChange={onSortChange}
-            icon={getSelectedIcon()}
-            iconSize='15px'
-            width={60}
-            tooltip={selectToggleTooltip || 'Toggle selection on all data'}
-            onClick={() => {
+      <StyledTableHeaderRow
+        style={{
+          transform: `translate3d(${leftScroll ? -leftScroll : 0}px, 0, 0)`,
+        }}
+      >
+        {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>

package/src/components/Table/headerCell.tsx

@@ -1,18 +1,23 @@
 /* @flow */
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import { Resizable } from 're-resizable';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { ReqoreButton, ReqoreControlGroup, ReqoreDropdown } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import { changeLightness, getReadableColor } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
-import { useTooltip } from '../../hooks/useTooltip';
-import ReqoreIcon from '../Icon';
+import { getReadableColor } from '../../helpers/colors';
+import { IReqoreButtonProps } from '../Button';
+import { IReqoreDropdownItem } from '../Dropdown/list';
+import { TColumnsUpdater } from './header';
 
 export interface IReqoreTableHeaderCellProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    IReqoreTableColumn {
+  extends Omit<IReqoreTableColumn, 'cell'>,
+    IReqoreButtonProps {
   onSortChange?: (sort: string) => void;
-  sortData: IReqoreTableSort;
+  sortData?: IReqoreTableSort;
+  onColumnsUpdate?: TColumnsUpdater;
+  onFilterChange?: (dataId: string, filter: string) => void;
 }
 
 export interface IReqoreTableHeaderStyle {
@@ -23,95 +28,133 @@ export interface IReqoreTableHeaderStyle {
   interactive?: boolean;
 }
 
-export const StyledTableHeader = styled.div<IReqoreTableHeaderStyle>`
-  ${({ width, grow }) =>
-    css`
-      width: ${!width || width < 80 ? 80 : width}px;
-      flex-grow: ${grow || (width ? undefined : 1)};
-    `};
-
-  ${({ align, theme }) => css`
-    background-color: ${changeLightness(theme.main, 0.03)};
-    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
-  `}
-
-  ${({ interactive, theme }) =>
-    interactive &&
-    css`
-      cursor: pointer;
-      transition: background-color 0.2s ease-out;
-
-      &:hover {
-        color: ${getReadableColor(theme, undefined, undefined)};
-        background-color: ${changeLightness(theme.main, 0.06)};
-      }
-    `};
-`;
-
-const StyledTableHeaderLabel = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+export const StyledTableHeaderResize = styled.div`
+  &:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 1px;
+    height: 70%;
+    border-left: 1px dashed ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  }
 `;
 
-const ReqoreTableHeaderCell = ({
+export const ReqoreTableHeaderCell = ({
   width,
+  resizedWidth,
   grow,
   align,
-  header,
   onSortChange,
   dataId,
   sortable,
   sortData,
-  onClick,
   className,
-  icon,
-  iconSize,
-  tooltip,
-  ...props
+  onClick,
+  onColumnsUpdate,
+  resizable = true,
+  filterPlaceholder,
+  filterable,
+  hideable = true,
+  filter,
+  onFilterChange,
+  ...rest
 }: IReqoreTableHeaderCellProps) => {
-  const [ref, setRef] = useState(null);
+  const items = useMemo(() => {
+    const _items: IReqoreDropdownItem[] = [];
 
-  useTooltip(ref, { content: tooltip || header, delay: 300 });
+    if (resizable || hideable) {
+      _items.push({
+        divider: true,
+        label: 'Options',
+      });
+
+      if (resizable) {
+        _items.push({
+          label: 'Reset size',
+          icon: 'HistoryLine',
+          disabled: !resizedWidth || width === resizedWidth,
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'resizedWidth', width);
+          },
+        });
+      }
+
+      if (hideable) {
+        _items.push({
+          label: 'Hide column',
+          icon: 'EyeCloseLine',
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'show', false);
+          },
+        });
+      }
+    }
+
+    return _items;
+  }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
 
   return (
-    <StyledTableHeader
-      {...props}
-      className={`${className || ''} reqore-table-header-cell`}
-      ref={setRef}
-      width={width}
-      grow={grow}
-      align={align}
-      interactive={sortable || !!onClick}
-      onClick={(event: React.MouseEvent<HTMLDivElement>) => {
-        if (sortable) {
-          onSortChange(dataId);
-        }
-        if (onClick) {
-          onClick(event);
-        }
+    <Resizable
+      minWidth={width}
+      onResize={(_event, _direction, _component) => {
+        onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
+      }}
+      handleComponent={{
+        right: <StyledTableHeaderResize />,
+      }}
+      style={{
+        overflow: 'hidden',
+        flexGrow: grow,
+      }}
+      size={{
+        width: resizedWidth || width,
+        height: undefined,
+      }}
+      enable={{
+        right: resizable,
       }}
     >
-      {icon && (
-        <ReqoreIcon icon={icon} size={iconSize || '13px'} margin={header ? 'right' : undefined} />
-      )}
-      <StyledTableHeaderLabel>{header}</StyledTableHeaderLabel>
-      {sortable && (
-        <ReqoreIcon
-          icon={
-            `Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
-              | 'ArrowDownFill'
-              | 'ArrowUpFill'
+      <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
+        <ReqoreButton
+          {...rest}
+          readOnly={!sortable && !onClick}
+          className={`${className || ''} reqore-table-header-cell`}
+          rounded={false}
+          textAlign={align}
+          rightIcon={
+            sortable && sortData.by === dataId
+              ? (`Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
+                  | 'ArrowDownFill'
+                  | 'ArrowUpFill')
+              : rest.rightIcon
           }
-          size={iconSize || '13px'}
-          margin='left'
-          style={{
-            opacity: sortData.by === dataId ? 1 : 0.2,
+          onClick={(e) => {
+            if (sortable) {
+              onSortChange?.(dataId);
+            }
+
+            onClick?.(e);
           }}
         />
-      )}
-    </StyledTableHeader>
+        {filterable || hideable || resizable ? (
+          <ReqoreDropdown<IReqoreButtonProps>
+            icon='MoreLine'
+            className='reqore-table-header-cell-options'
+            fixed
+            rounded={false}
+            intent={filter ? 'info' : undefined}
+            filterable={filterable}
+            filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
+            filter={filter}
+            onFilterChange={(value) => {
+              onFilterChange?.(dataId, value);
+            }}
+            items={items}
+          />
+        ) : null}
+      </ReqoreControlGroup>
+    </Resizable>
   );
 };
-
-export default ReqoreTableHeaderCell;

package/src/components/Table/helpers.ts

@@ -1,5 +1,9 @@
+import { size } from 'lodash';
 import { firstBy } from 'thenby';
-import { IReqoreTableSort } from '.';
+import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { ICON_FROM_SIZE, SIZE_TO_PX, TSizes } from '../../constants/sizes';
+import { IReqoreIconName } from '../../types/icons';
+import { IReqorePanelAction } from '../Panel';
 
 export const flipSortDirection = (direction: 'asc' | 'desc'): 'asc' | 'desc' =>
   direction === 'asc' ? 'desc' : 'asc';
@@ -23,3 +27,204 @@ export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
 
   return [...data].sort(firstBy(by, { ignoreCase: true, direction }));
 };
+
+export const updateColumnData = (
+  columns: IReqoreTableColumn[],
+  columnId: string,
+  key: keyof IReqoreTableColumn,
+  value: any
+): IReqoreTableColumn[] => {
+  const newColumns: IReqoreTableColumn[] = columns.map((column): IReqoreTableColumn => {
+    if (column.dataId === columnId) {
+      return { ...column, [key]: value };
+    }
+
+    if (column.header?.columns) {
+      return {
+        ...column,
+        header: {
+          ...column.header,
+          columns: updateColumnData(column.header.columns, columnId, key, value),
+        },
+      };
+    }
+
+    return column;
+  });
+
+  return newColumns;
+};
+
+export const sizeToZoom = {
+  tiny: 0,
+  small: 0.5,
+  normal: 1,
+  big: 1.5,
+  huge: 2,
+};
+
+export const zoomToSize = {
+  0: 'tiny',
+  0.5: 'small',
+  1: 'normal',
+  1.5: 'big',
+  2: 'huge',
+};
+
+export const zoomToWidth = {
+  0: '200px',
+  0.5: '300px',
+  1: '400px',
+  1.5: '500px',
+  2: '600px',
+};
+
+// This code converts a zoom level to a label.
+export const zoomToLabel = {
+  0: '0.6x',
+  0.5: '0.8x',
+  1: '1x',
+  1.5: '1.2x',
+  2: '1.4x',
+};
+
+export const getZoomActions = (
+  type: string,
+  zoom: number,
+  setter: (zoom: number) => void
+): IReqorePanelAction[] => [
+  {
+    icon: 'ZoomInLine',
+    tooltip: 'Zoom in',
+    disabled: zoom === 2,
+    className: `${type}-zoom-in`,
+    onClick: () => {
+      setter(zoom + 0.5);
+    },
+  },
+  {
+    icon: 'RestartLine',
+    label: zoomToLabel[zoom],
+    tooltip: 'Reset zoom',
+    disabled: zoom === 1,
+    className: `${type}-zoom-reset`,
+    onClick: () => {
+      setter(1);
+    },
+  },
+  {
+    icon: 'ZoomOutLine',
+    tooltip: 'Zoom out',
+    disabled: zoom === 0,
+    className: `${type}-zoom-out`,
+    onClick: () => {
+      setter(zoom - 0.5);
+    },
+  },
+];
+
+export const getColumnsCount = (columns: IReqoreTableColumn[]): number => {
+  let count = 0;
+
+  columns.forEach((column) => {
+    if (column.header.columns) {
+      count += getColumnsCount(column.header.columns);
+    } else {
+      count += 1;
+    }
+  });
+
+  return count;
+};
+
+export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
+  return columns.some((column) => {
+    if (column.header.columns) {
+      return column.header.columns.some((subColumn) => subColumn.show === false);
+    }
+
+    return column.show === false;
+  });
+};
+
+export const getOnlyShownColumns = (columns: IReqoreTableColumn[]): IReqoreTableColumn[] => {
+  return columns.reduce((newColumns, column) => {
+    if (column.header.columns) {
+      const subColumns = getOnlyShownColumns(column.header.columns);
+
+      if (size(subColumns)) {
+        return [
+          ...newColumns,
+          {
+            ...column,
+            header: { ...column.header, columns: getOnlyShownColumns(column.header.columns) },
+          },
+        ];
+      }
+
+      return newColumns;
+    }
+
+    if (column.show !== false) {
+      return [...newColumns, column];
+    }
+
+    return newColumns;
+  }, []);
+};
+
+export const prepareColumns = (
+  columns: IReqoreTableColumn[],
+  size: TSizes = 'normal'
+): IReqoreTableColumn[] => {
+  // We need to set the width of each column
+  return columns.map((column) => {
+    if (column.header.columns) {
+      return {
+        ...column,
+        header: { ...column.header, columns: prepareColumns(column.header.columns) },
+      };
+    }
+
+    let newWidth = calculateMinimumCellWidth(
+      column.width || 50,
+      size,
+      column.header.icon,
+      column.sortable,
+      column.filterable,
+      column.hideable,
+      column.resizable
+    );
+
+    return {
+      ...column,
+      width: newWidth,
+    };
+  });
+};
+
+export const calculateMinimumCellWidth = (
+  currentWidth: number = 50,
+  size?: TSizes,
+  icon?: IReqoreIconName,
+  sortable?: boolean,
+  filterable?: boolean,
+  hideable?: boolean,
+  resizable?: boolean
+): number => {
+  let width = currentWidth;
+
+  if (icon) {
+    width += ICON_FROM_SIZE[size];
+  }
+
+  if (sortable) {
+    width += ICON_FROM_SIZE[size];
+  }
+
+  if (filterable || hideable || resizable) {
+    width += SIZE_TO_PX[size];
+  }
+
+  return width;
+};