@qoretechnologies/reqore 0.35.0 → 0.35.2

package/src/components/Table/index.tsx

@@ -1,13 +1,15 @@
 /* @flow */
 import { size as count, isArray } from 'lodash';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
+import styled, { css } from 'styled-components';
 import { ReqoreMessage, ReqorePanel, ReqoreVerticalSpacer } from '../..';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
 import { IReqoreIntent, IReqoreTooltip } from '../../types/global';
 import { IReqoreButtonProps, TReqoreBadge } from '../Button';
+import { IReqoreDropdownItem } from '../Dropdown/list';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import { IReqorePanelAction, IReqorePanelProps, IReqorePanelSubAction } from '../Panel';
 import ReqoreTableBody from './body';
@@ -16,20 +18,21 @@ import { IReqoreTableHeaderCellProps } from './headerCell';
 import {
   fixSort,
   flipSortDirection,
+  getColumnsByPinType,
   getColumnsCount,
   getOnlyShownColumns,
   getZoomActions,
+  hasGroupedColumns,
   hasHiddenColumns,
   prepareColumns,
   sizeToZoom,
   sortTableData,
-  updateColumnData,
   zoomToSize,
 } from './helpers';
 import { IReqoreTableRowOptions } from './row';
 
 export type TReqoreTableColumnContent =
-  | React.FC<{ [key: string]: any; _selectId?: string | number }>
+  | React.FC<{ [key: string]: any; _selectId?: string | number; _size: TSizes; _dataId: string }>
   | 'time-ago'
   | 'tag'
   | `tag:${TReqoreIntent}`
@@ -44,12 +47,16 @@ export interface IReqoreTableColumn extends IReqoreIntent {
   show?: boolean;
   grow?: 1 | 2 | 3 | 4;
   width?: number;
+  minWidth?: number;
+  maxWidth?: number;
   resizedWidth?: number;
   align?: 'center' | 'left' | 'right';
+  pin?: 'left' | 'right';
 
   resizable?: boolean;
   sortable?: boolean;
   hideable?: boolean;
+  pinnable?: boolean;
 
   filterable?: boolean;
   filterPlaceholder?: string;
@@ -58,13 +65,16 @@ export interface IReqoreTableColumn extends IReqoreIntent {
   header?: {
     columns?: IReqoreTableColumn[];
     component?: React.FC<IReqoreTableHeaderCellProps>;
-  } & IReqoreButtonProps;
+    actions?: IReqoreDropdownItem[];
+  } & Omit<IReqoreButtonProps, 'maxWidth'>;
 
   cell?: {
     onClick?: (cellValue: any) => void;
     tooltip?: (cellValue: any) => string | IReqoreTooltip;
     content?: TReqoreTableColumnContent;
+    actions?: (data: IReqoreTableRowData) => IReqoreButtonProps[];
     intent?: TReqoreIntent;
+    padded?: 'both' | 'horizontal' | 'vertical' | 'none';
   };
 }
 
@@ -101,6 +111,7 @@ export interface IReqoreTableProps extends IReqorePanelProps {
   selected?: string[];
   selectedRowIntent?: TReqoreIntent;
   onSelectedChange?: (selected?: any[]) => void;
+  onSelectClick?: (dataId: string | number) => void;
   selectToggleTooltip?: string;
 
   striped?: boolean;
@@ -128,6 +139,28 @@ export interface IReqoreTableSort {
   direction?: 'asc' | 'desc';
 }
 
+const StyledTableWrapper = styled.div`
+  overflow: hidden;
+
+  ${({ isPinned }) =>
+    isPinned
+      ? css`
+          flex-shrink: 0;
+        `
+      : css`
+          width: 100%;
+          display: flex;
+          flex-flow: column;
+          flex: 1;
+        `};
+`;
+
+const StyledTablesWrapper = styled.div`
+  display: flex;
+  flex-flow: row;
+  overflow: hidden;
+`;
+
 const ReqoreTable = ({
   className,
   height = 300,
@@ -143,7 +176,7 @@ const ReqoreTable = ({
   customTheme,
   onRowClick,
   striped,
-  selectedRowIntent,
+  selectedRowIntent = 'info',
   size = 'normal',
   wrapperSize = 'normal',
   intent,
@@ -158,19 +191,97 @@ const ReqoreTable = ({
   headerCellComponent,
   rowComponent,
   bodyCellComponent,
+  onSelectClick,
   ...rest
 }: IReqoreTableProps) => {
-  const [leftScroll, setLeftScroll] = useState<number>(0);
+  const leftTableRef = useRef<HTMLDivElement>(undefined);
+  const rightTableRef = useRef<HTMLDivElement>(undefined);
+  const mainTableRef = useRef<HTMLDivElement>(undefined);
+  const mainHeaderRef = useRef<HTMLDivElement>(undefined);
+
+  const [isScrolled, setIsScrolled] = useState<boolean>(false);
   const [_data, setData] = useState<IReqoreTableData>(data || []);
   const [_sort, setSort] = useState<IReqoreTableSort>(fixSort(sort));
-  const [_selected, setSelected] = useState<(string | number)[]>([]);
+  const [_selected, setSelected] = useState<(string | number)[]>(selected || []);
   const [_selectedQuant, setSelectedQuant] = useState<'all' | 'none' | 'some'>('none');
-  const [internalColumns, setColumns] = useState<IReqoreTableColumn[]>(prepareColumns(columns));
+  const [columnModifiers, setColumnModifiers] = useState<{
+    [dataId: string]: { [modifier: string]: any };
+  }>({});
+  const [_internalColumns, setColumns] = useState<IReqoreTableColumn[]>(columns);
   const [zoom, setZoom] = useState<number>(sizeToZoom[size]);
 
   const [wrapperRef, sizes] = useMeasure();
   const { query, preQuery, setQuery, setPreQuery } = useQueryWithDelay(filter, 300, onFilterChange);
 
+  const selectedIcon = useMemo(() => {
+    switch (_selectedQuant) {
+      case 'all':
+        return 'CheckboxCircleLine';
+      case 'some':
+        return 'IndeterminateCircleLine';
+      default:
+        return 'CheckboxBlankCircleLine';
+    }
+  }, [_selectedQuant]);
+
+  const finalColumns = useMemo(() => {
+    let fullColumns = [..._internalColumns];
+
+    if (selectable) {
+      fullColumns.unshift({
+        dataId: 'selectbox',
+        width: 50,
+        sortable: false,
+        hideable: false,
+        filterable: false,
+        resizable: false,
+        pin: 'left',
+        pinnable: false,
+        align: 'center',
+
+        header: {
+          icon: selectedIcon,
+          tooltip: 'Toggle selection on all data',
+          onClick: () => {
+            handleToggleSelectClick();
+          },
+        },
+
+        cell: {
+          padded: 'none',
+          actions: ({ _selectId }) => [
+            {
+              tooltip: selectToggleTooltip,
+              icon: !_selectId
+                ? 'Forbid2Line'
+                : _selected?.find((s) => s === _selectId)
+                ? 'CheckboxCircleLine'
+                : 'CheckboxBlankCircleLine',
+              intent: !_selectId
+                ? 'muted'
+                : _selected?.find((s) => s === _selectId)
+                ? selectedRowIntent
+                : undefined,
+              onClick: () => handleSelectClick(_selectId),
+            },
+          ],
+        },
+      });
+    }
+
+    return prepareColumns(fullColumns, columnModifiers, zoomToSize[zoom]);
+  }, [
+    _internalColumns,
+    columnModifiers,
+    zoom,
+    selectable,
+    _selectedQuant,
+    selectedIcon,
+    selectToggleTooltip,
+    _selected,
+    selectedRowIntent,
+  ]);
+
   const filters: { [key: string]: string } = useMemo(() => {
     const getFilters = (columnsToTransform: IReqoreTableColumn[]) =>
       columnsToTransform.reduce((filterObject, column) => {
@@ -191,8 +302,8 @@ const ReqoreTable = ({
         return filterObject;
       }, {});
 
-    return getFilters(internalColumns);
-  }, [internalColumns]);
+    return getFilters(finalColumns);
+  }, [finalColumns]);
 
   const transformedData = useMemo(() => {
     // Filter by global query
@@ -220,7 +331,7 @@ const ReqoreTable = ({
   }, [_sort]);
 
   useUpdateEffect(() => {
-    setColumns(prepareColumns(columns));
+    setColumns(columns);
   }, [columns]);
 
   useUpdateEffect(() => {
@@ -266,6 +377,11 @@ const ReqoreTable = ({
   };
 
   const handleSelectClick = (selectId: string | number) => {
+    if (onSelectClick) {
+      onSelectClick(selectId);
+      return;
+    }
+
     setSelected((current) => {
       let newSelected = [...current];
       const isSelected = newSelected.find((selected) => selectId === selected);
@@ -300,9 +416,17 @@ const ReqoreTable = ({
 
   const handleColumnsUpdate = useCallback(
     <T extends keyof IReqoreTableColumn>(id: string, key: T, value: IReqoreTableColumn[T]) => {
-      setColumns(updateColumnData(internalColumns, id, key, value));
+      setColumnModifiers((current) => {
+        return {
+          ...current,
+          [id]: {
+            ...current[id],
+            [key]: value,
+          },
+        };
+      });
     },
-    [internalColumns]
+    [columnModifiers]
   );
 
   const handlePreQueryChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -327,7 +451,11 @@ const ReqoreTable = ({
       });
     };
 
-    internalColumns.forEach((column) => {
+    finalColumns.forEach((column) => {
+      if (column.hideable === false) {
+        return;
+      }
+
       if (column.header?.columns) {
         column.header?.columns.forEach((subColumn) => {
           addColumn(subColumn);
@@ -338,7 +466,7 @@ const ReqoreTable = ({
     });
 
     return _columnsList;
-  }, [internalColumns]);
+  }, [finalColumns]);
 
   const tableActions = useMemo<IReqorePanelAction[]>(() => {
     const finalActions: IReqorePanelAction[] = [...actions];
@@ -347,8 +475,8 @@ const ReqoreTable = ({
       label: 'Columns',
       icon: 'LayoutColumnLine',
       className: 'reqore-table-columns-options',
-      badge: getColumnsCount(getOnlyShownColumns(internalColumns)),
-      intent: hasHiddenColumns(internalColumns) ? 'info' : undefined,
+      badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
+      intent: hasHiddenColumns(finalColumns) ? 'info' : undefined,
       multiSelect: true,
       actions: columnsList,
     });
@@ -381,6 +509,51 @@ const ReqoreTable = ({
       });
     }
 
+    if (isScrolled) {
+      finalActions.push({
+        icon: 'ArrowUpSFill',
+        tooltip: 'Scroll to top',
+        className: 'reqore-table-columns-scroll-top',
+        responsive: true,
+        onClick: () => {
+          mainTableRef.current?.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          });
+          leftTableRef.current?.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          });
+          rightTableRef.current?.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+          });
+
+          setIsScrolled(false);
+        },
+      });
+    }
+
+    if (count(columnModifiers) || zoomable || filterable) {
+      finalActions.push({
+        icon: 'MoreLine',
+        className: 'reqore-table-more',
+        actions: [
+          {
+            label: 'Reset table',
+            icon: 'RestartLine',
+            className: 'reqore-table-reset',
+            onClick: () => {
+              setZoom(1);
+              setPreQuery('');
+              setQuery('');
+              setColumnModifiers({});
+            },
+          },
+        ],
+      });
+    }
+
     return finalActions;
   }, [
     preQuery,
@@ -388,10 +561,11 @@ const ReqoreTable = ({
     actions,
     filterable,
     filterProps,
-    internalColumns,
+    finalColumns,
     zoomable,
     zoom,
     columnsList,
+    isScrolled,
   ]);
 
   const badge = useMemo(() => {
@@ -408,12 +582,80 @@ const ReqoreTable = ({
     return badgeList;
   }, [transformedData, rest.badge]);
 
+  const refs = {
+    left: leftTableRef,
+    right: rightTableRef,
+    main: mainTableRef,
+    header: mainHeaderRef,
+  };
+
+  const columnsByType = useMemo(
+    () => ({
+      left: getColumnsByPinType(finalColumns, 'left'),
+      right: getColumnsByPinType(finalColumns, 'right'),
+      main: getColumnsByPinType(finalColumns, 'main'),
+    }),
+    [finalColumns]
+  );
+
+  const renderTable = (type: 'left' | 'main' | 'right' = 'main') => {
+    const tableColumns = columnsByType[type];
+    const isPinned = type === 'left' || type === 'right';
+
+    if (count(tableColumns) === 0) {
+      return null;
+    }
+
+    return (
+      <StyledTableWrapper isPinned={isPinned}>
+        <ReqoreTableHeader
+          size={zoomToSize[zoom]}
+          columns={tableColumns}
+          scrollable={type === 'main'}
+          ref={type === 'main' ? mainHeaderRef : undefined}
+          bodyRef={mainTableRef}
+          onSortChange={handleSortChange}
+          heightAsGroup={hasGroupedColumns(finalColumns)}
+          sortData={_sort}
+          hasVerticalScroll={count(transformedData) * TABLE_SIZE_TO_PX[size] > height}
+          onColumnsUpdate={handleColumnsUpdate}
+          onFilterChange={(dataId: string, value: any) => {
+            handleColumnsUpdate(dataId, 'filter', value);
+          }}
+          component={headerCellComponent}
+        />
+        {count(transformedData) === 0 ? null : (
+          <ReqoreTableBody
+            ref={refs[type]}
+            refs={refs}
+            type={type}
+            data={transformedData}
+            columns={tableColumns}
+            height={fill ? sizes.height : height}
+            selectable={selectable}
+            onSelectClick={handleSelectClick}
+            onRowClick={onRowClick}
+            onScrollChange={(isScrolled) => setIsScrolled(isScrolled)}
+            selected={_selected}
+            selectedRowIntent={selectedRowIntent}
+            size={zoomToSize[zoom]}
+            striped={striped}
+            flat={rest.flat}
+            rowComponent={rowComponent}
+            cellComponent={bodyCellComponent}
+          />
+        )}
+      </StyledTableWrapper>
+    );
+  };
+
   return (
     <ReqorePanel
       transparent
       flat
       padded={false}
       contentStyle={{ display: 'flex', flexFlow: 'column', overflow: 'hidden' }}
+      responsiveActions={false}
       {...rest}
       size={wrapperSize}
       actions={tableActions}
@@ -423,23 +665,11 @@ const ReqoreTable = ({
       getContentRef={wrapperRef}
       badge={badge}
     >
-      <ReqoreTableHeader
-        size={zoomToSize[zoom]}
-        columns={internalColumns}
-        leftScroll={leftScroll}
-        onSortChange={handleSortChange}
-        sortData={_sort}
-        selectable={selectable}
-        selectedQuant={_selectedQuant}
-        onToggleSelectClick={handleToggleSelectClick}
-        hasVerticalScroll={count(transformedData) * TABLE_SIZE_TO_PX[size] > height}
-        selectToggleTooltip={selectToggleTooltip}
-        onColumnsUpdate={handleColumnsUpdate}
-        onFilterChange={(dataId: string, value: any) => {
-          handleColumnsUpdate(dataId, 'filter', value);
-        }}
-        component={headerCellComponent}
-      />
+      <StyledTablesWrapper className='reqore-table-wrapper'>
+        {renderTable('left')}
+        {renderTable()}
+        {renderTable('right')}
+      </StyledTablesWrapper>
       {count(transformedData) === 0 ? (
         <>
           <ReqoreVerticalSpacer height={10} />
@@ -447,24 +677,7 @@ const ReqoreTable = ({
             {emptyMessage}
           </ReqoreMessage>
         </>
-      ) : (
-        <ReqoreTableBody
-          data={transformedData}
-          columns={internalColumns}
-          setLeftScroll={setLeftScroll}
-          height={fill ? sizes.height : height}
-          selectable={selectable}
-          onSelectClick={handleSelectClick}
-          onRowClick={onRowClick}
-          selected={_selected}
-          selectedRowIntent={selectedRowIntent}
-          size={zoomToSize[zoom]}
-          striped={striped}
-          flat={rest.flat}
-          rowComponent={rowComponent}
-          cellComponent={bodyCellComponent}
-        />
-      )}
+      ) : null}
     </ReqorePanel>
   );
 };

package/src/components/Table/row.tsx

@@ -2,24 +2,18 @@
 import { isFunction, isString } from 'lodash';
 import React, { ReactElement, useState } from 'react';
 import styled, { css } from 'styled-components';
-import {
-  IReqoreTableColumn,
-  IReqoreTableData,
-  IReqoreTableRowClick,
-  TReqoreTableColumnContent,
-} from '.';
-import { ReqorePopover } from '../..';
+import { IReqoreTableColumn, IReqoreTableData, IReqoreTableRowClick } from '.';
+import { ReqoreButton, ReqoreControlGroup, ReqorePopover } from '../..';
 import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreTooltip } from '../../types/global';
 import { TReqoreHexColor } from '../Effect';
 import { ReqoreH4 } from '../Header';
-import ReqoreIcon from '../Icon';
 import { ReqoreP } from '../Paragraph';
 import ReqoreTag from '../Tag';
 import { TimeAgo } from '../TimeAgo';
 import { IReqoreCustomTableBodyCell, ReqoreTableBodyCell } from './cell';
-import { calculateMinimumCellWidth, getOnlyShownColumns } from './helpers';
+import { getOnlyShownColumns } from './helpers';
 
 export interface IReqoreTableRowOptions {
   columns: IReqoreTableColumn[];
@@ -62,8 +56,8 @@ export const StyledTableRow = styled.div<IReqoreTableRowStyle>`
 
 export interface IReqoreTableCellStyle {
   width?: number;
-  grow?: number;
   theme?: IReqoreTheme;
+  grow: 1 | 2 | 3 | 4;
   align?: 'center' | 'left' | 'right';
   intent?: TReqoreIntent;
   interactive?: boolean;
@@ -76,6 +70,7 @@ export interface IReqoreTableCellStyle {
   selectedIntent?: TReqoreIntent;
   even?: boolean;
   striped?: boolean;
+  padded?: IReqoreTableColumn['cell']['padded'];
 }
 
 const ReqoreTableRow = ({
@@ -88,7 +83,7 @@ const ReqoreTableRow = ({
     onRowClick,
     striped,
     size,
-    selectedRowIntent = 'info',
+    selectedRowIntent,
     flat,
     cellComponent,
     rowComponent,
@@ -103,14 +98,38 @@ const ReqoreTableRow = ({
   const RowComponent = rowComponent || StyledTableRow;
 
   const renderContent = (
-    content: TReqoreTableColumnContent,
+    cell: IReqoreTableColumn['cell'],
     data: any,
-    dataId: string
+    dataId: string,
+    align?: 'center' | 'left' | 'right'
   ): ReactElement<any, any> => {
+    if (cell?.actions) {
+      return (
+        <ReqoreControlGroup size={size} stack fill fluid style={{ height: '100%' }} rounded={false}>
+          {cell.actions(data).map((action, index) => (
+            <ReqoreButton
+              key={index}
+              rounded={false}
+              iconsAlign={align === 'center' ? 'center' : 'sides'}
+              textAlign={align}
+              {...action}
+              onClick={(e) => {
+                e.stopPropagation();
+
+                action.onClick?.(e);
+              }}
+            />
+          ))}
+        </ReqoreControlGroup>
+      );
+    }
+
+    const content = cell?.content;
+
     if (isFunction(content)) {
       const Content = content;
 
-      return <Content {...data} />;
+      return <Content {...data} _size={size} _dataId={dataId} />;
     }
 
     if (isString(content)) {
@@ -155,7 +174,7 @@ const ReqoreTableRow = ({
 
   const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
     getOnlyShownColumns(columns).map(
-      ({ width, resizedWidth, grow, dataId, cell, header, align, intent }) => {
+      ({ width, minWidth, maxWidth, resizedWidth, grow, dataId, cell, header, align, intent }) => {
         if (header.columns) {
           return renderCells(header.columns, data);
         }
@@ -177,10 +196,13 @@ const ReqoreTableRow = ({
             componentProps={
               {
                 width: resizedWidth || width,
+                minWidth,
+                maxWidth,
                 grow,
                 align,
                 size,
                 striped,
+                padded: cell?.padded,
                 disabled: data[index]._disabled,
                 selected: !!isSelected,
                 selectedIntent: selectedRowIntent,
@@ -207,7 +229,7 @@ const ReqoreTableRow = ({
             }
             {...tooltip}
           >
-            {renderContent(cell?.content, data[index], dataId)}
+            {renderContent(cell, data[index], dataId, align)}
           </ReqorePopover>
         );
       }
@@ -228,45 +250,6 @@ const ReqoreTableRow = ({
         setIsHovered(false);
       }}
     >
-      {selectable && (
-        <CellComponent
-          align='center'
-          width={calculateMinimumCellWidth(50, size)}
-          className='reqore-table-cell'
-          {...{
-            size,
-            striped,
-            disabled: data[index]._disabled,
-            selected: !!isSelected,
-            selectedIntent: selectedRowIntent,
-            flat,
-            even: index % 2 === 0 ? true : false,
-            intent: data[index]._intent,
-            hovered: isHovered,
-            interactiveCell: data[index]._selectId,
-          }}
-          onClick={
-            data[index]._selectId
-              ? (e: React.MouseEvent<HTMLDivElement>) => {
-                  e.stopPropagation();
-                  onSelectClick(data[index]._selectId);
-                }
-              : undefined
-          }
-        >
-          <ReqoreIcon
-            icon={
-              !data[index]._selectId
-                ? 'Forbid2Line'
-                : isSelected
-                ? 'CheckboxCircleLine'
-                : 'CheckboxBlankCircleLine'
-            }
-            size={size}
-            style={{ opacity: !data[index]._selectId || !isSelected ? 0.4 : 1 }}
-          />
-        </CellComponent>
-      )}
       {renderCells(columns, data)}
     </RowComponent>
   );

package/src/constants/sizes.ts

@@ -11,6 +11,23 @@ export const ReqoreSizes = {
 
 export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
 
+export const SIZE_TO_MODIFIER = {
+  tiny: 0.6,
+  small: 0.8,
+  normal: 1,
+  big: 1.2,
+  huge: 1.4,
+};
+
+export const LINE_SIZE_TO_NUMBER = {
+  none: 0,
+  tiny: 1,
+  small: 1,
+  normal: 1.5,
+  big: 2,
+  huge: 3,
+};
+
 export const SIZE_TO_NUMBER = {
   none: 0,
   tiny: 1,

package/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -16,9 +16,6 @@ export default {
     },
     ...SizeArg,
   },
-  parameters: {
-    jest: ['breadcrumbs.test.tsx'],
-  },
 } as ComponentMeta<typeof ReqoreBreadcrumbs & { withTabs?: boolean }>;
 
 const Template: ComponentStory<typeof ReqoreBreadcrumbs & { withTabs?: boolean }> = (