@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/Table/headerCell.tsx

@@ -1,203 +0,0 @@
-/* @flow */
-import { rgba } from 'polished';
-import { Resizable } from 're-resizable';
-import { memo, useMemo } from 'react';
-import styled from 'styled-components';
-import { IReqoreTableColumn, IReqoreTableSort } from '.';
-import { ReqoreButton, ReqoreControlGroup, ReqoreDropdown } from '../..';
-import { IReqoreTheme } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
-import { IReqoreButtonProps } from '../Button';
-import { IReqoreDropdownItem } from '../Dropdown/list';
-import { TColumnsUpdater } from './header';
-
-export interface IReqoreTableHeaderCellProps
-  extends Omit<IReqoreTableColumn, 'cell'>,
-    Pick<IReqoreTableColumn['header'], 'content' | 'actions'>,
-    Omit<IReqoreButtonProps, 'maxWidth' | 'content'> {
-  onSortChange?: (sort: string) => void;
-  sortData?: IReqoreTableSort;
-  onColumnsUpdate?: TColumnsUpdater;
-  onFilterChange?: (dataId: string, filter: string) => void;
-}
-
-export interface IReqoreTableHeaderStyle {
-  width?: number;
-  grow?: number;
-  theme: IReqoreTheme;
-  align?: 'center' | 'left' | 'right';
-  interactive?: boolean;
-}
-
-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)};
-  }
-`;
-
-export const ReqoreTableHeaderCell = memo(
-  ({
-    width,
-    maxWidth,
-    minWidth,
-    resizedWidth,
-    grow,
-    align,
-    pin,
-    onSortChange,
-    dataId,
-    sortable,
-    sortData,
-    className,
-    onClick,
-    onColumnsUpdate,
-    resizable = true,
-    filterPlaceholder,
-    filterable,
-    hideable = true,
-    pinnable = true,
-    filter,
-    content,
-    size,
-    onFilterChange,
-    actions,
-    ...rest
-  }: IReqoreTableHeaderCellProps) => {
-    const items = useMemo(() => {
-      let _items: IReqoreDropdownItem[] = [];
-
-      if (resizable || hideable) {
-        if (resizable) {
-          _items.push({
-            label: 'Reset size',
-            icon: 'HistoryLine',
-            disabled: !resizedWidth || width === resizedWidth,
-            onClick: () => {
-              onColumnsUpdate?.(dataId, 'resizedWidth', width);
-            },
-          });
-        }
-
-        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',
-            className: 'reqore-table-header-hide',
-            onClick: () => {
-              onColumnsUpdate?.(dataId, 'show', false);
-            },
-          });
-        }
-      }
-
-      if (actions) {
-        _items = [..._items, { divider: true, label: 'Other' }, ...actions];
-      }
-
-      return _items;
-    }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
-
-    return (
-      <Resizable
-        minWidth={minWidth || width}
-        maxWidth={maxWidth}
-        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,
-        }}
-      >
-        <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
-          {content ? (
-            content
-          ) : (
-            <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
-              }
-              onClick={(e) => {
-                if (sortable) {
-                  onSortChange?.(dataId);
-                }
-
-                onClick?.(e);
-              }}
-            />
-          )}
-          {filterable || hideable || resizable ? (
-            <ReqoreDropdown<IReqoreButtonProps>
-              icon='MoreLine'
-              className='reqore-table-header-cell-options'
-              fixed
-              size={size}
-              rounded={false}
-              intent={filter ? 'info' : rest.intent}
-              filterable={filterable}
-              filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
-              filter={filter}
-              onFilterChange={(value) => {
-                onFilterChange?.(dataId, value);
-              }}
-              items={items}
-            />
-          ) : null}
-        </ReqoreControlGroup>
-      </Resizable>
-    );
-  }
-);

package/src/components/Table/helpers.ts

@@ -1,308 +0,0 @@
-import { size } from 'lodash';
-import { firstBy } from 'thenby';
-import { IReqoreTableColumn, IReqoreTableData, IReqoreTableSort } from '.';
-import { ICON_FROM_SIZE, SIZE_TO_MODIFIER, SIZE_TO_PX, TSizes } from '../../constants/sizes';
-import { IReqoreIconName } from '../../types/icons';
-import { IReqorePanelSubAction } from '../Panel';
-
-export const flipSortDirection = (direction: 'asc' | 'desc'): 'asc' | 'desc' =>
-  direction === 'asc' ? 'desc' : 'asc';
-
-export const fixSort = (sort: IReqoreTableSort) => {
-  return { ...sort, direction: sort?.direction || 'desc' };
-};
-
-export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
-  const { by, thenBy, direction } = sort;
-
-  if (!by) {
-    return data;
-  }
-
-  if (thenBy) {
-    return [...data].sort(
-      // @ts-expect-error Needed because of the thenby library
-      firstBy(by, { ignoreCase: true, direction }).thenBy(thenBy, { ignoreCase: true, direction })
-    );
-  }
-
-  // @ts-expect-error Needed because of the thenby library
-  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: '30%',
-  0.5: '60%',
-  1: '100%',
-  1.5: '130%',
-  2: '160%',
-};
-
-export const getExportActions = (
-  onClick: (type: 'current' | 'full') => void,
-  withLabels: boolean = true
-): IReqorePanelSubAction[] => [
-  {
-    label: withLabels ? 'Export current view' : undefined,
-    icon: 'Download2Line',
-    onClick: () => onClick('current'),
-  },
-  {
-    label: withLabels ? 'Export full data' : undefined,
-    icon: 'DownloadLine',
-    onClick: () => onClick('full'),
-  },
-];
-
-export const getZoomActions = (
-  type: string,
-  zoom: number,
-  setter: (zoom: number) => void,
-  withLabels?: boolean
-): IReqorePanelSubAction[] => [
-  {
-    icon: 'ZoomInLine',
-    label: withLabels ? 'Zoom in' : undefined,
-    tooltip: 'Zoom in',
-    disabled: zoom === 2,
-    className: `${type}-zoom-in`,
-    onClick: () => {
-      setter(zoom + 0.5);
-    },
-  },
-  {
-    icon: 'RestartLine',
-    label: `${zoomToLabel[zoom]}${withLabels ? ' (reset)' : ''}`,
-    tooltip: 'Reset zoom',
-    disabled: zoom === 1,
-    className: `${type}-zoom-reset`,
-    onClick: () => {
-      setter(1);
-    },
-  },
-  {
-    icon: 'ZoomOutLine',
-    tooltip: 'Zoom out',
-    label: withLabels ? 'Zoom out' : undefined,
-    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 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) {
-      return column.header.columns.some((subColumn) => subColumn.show === false);
-    }
-
-    return column.show === false;
-  });
-};
-
-export const getColumnsByPinType = (
-  columns: IReqoreTableColumn[],
-  type: 'left' | 'right' | 'main'
-): IReqoreTableColumn[] => {
-  return columns.reduce((newColumns: IReqoreTableColumn[], column): IReqoreTableColumn[] => {
-    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: IReqoreTableColumn[], 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),
-        },
-      };
-    }
-
-    const newWidth = calculateMinimumCellWidth(
-      column.width || 50,
-      size,
-      column.header?.icon,
-      column.sortable,
-      column.filterable,
-      column.hideable,
-      column.resizable
-    );
-
-    return {
-      ...column,
-      width: newWidth * SIZE_TO_MODIFIER[size],
-      ...(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;
-};
-
-export const removeInternalData = (data: IReqoreTableData): any[] => {
-  return data.map((item) => {
-    const newItem = { ...item };
-
-    delete newItem._selectId;
-    delete newItem._disabled;
-    delete newItem._intent;
-
-    return newItem;
-  });
-};