@qoretechnologies/reqore 0.34.13 → 0.35.1

package/src/components/Table/headerCell.tsx

@@ -1,18 +1,24 @@
 /* @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;
+  actions?: IReqoreTableColumn['header']['actions'];
 }
 
 export interface IReqoreTableHeaderStyle {
@@ -23,95 +29,142 @@ 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,
+  size,
+  onFilterChange,
+  actions,
+  ...rest
 }: IReqoreTableHeaderCellProps) => {
-  const [ref, setRef] = useState(null);
+  const items = useMemo(() => {
+    let _items: IReqoreDropdownItem[] = [];
+
+    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',
+          className: 'reqore-table-header-hide',
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'show', false);
+          },
+        });
+      }
+    }
 
-  useTooltip(ref, { content: tooltip || header, delay: 300 });
+    if (actions) {
+      _items = [..._items, { divider: true, label: 'Other' }, ...actions];
+    }
+
+    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}
+          size={size}
+          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
+            size={size}
+            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,209 @@ 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[],
+  columnModifiers: { [key: string]: { [key: string]: any } },
+  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, columnModifiers, size),
+        },
+      };
+    }
+
+    let newWidth = calculateMinimumCellWidth(
+      column.width || 50,
+      size,
+      column.header.icon,
+      column.sortable,
+      column.filterable,
+      column.hideable,
+      column.resizable
+    );
+
+    return {
+      ...column,
+      width: newWidth,
+      ...(columnModifiers?.[column.dataId] || {}),
+    };
+  });
+};
+
+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;
+};