@qoretechnologies/reqore 0.35.1 → 0.35.3

package/src/components/Table/index.tsx

@@ -1,8 +1,10 @@
 /* @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 { ReqoreMessage, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+import styled, { css } from 'styled-components';
+import { ReqoreMessage, ReqorePaginationContainer, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+import { TReqorePaginationType, getPagingObjectFromType } from '../../constants/paging';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
@@ -17,9 +19,11 @@ import { IReqoreTableHeaderCellProps } from './headerCell';
 import {
   fixSort,
   flipSortDirection,
+  getColumnsByPinType,
   getColumnsCount,
   getOnlyShownColumns,
   getZoomActions,
+  hasGroupedColumns,
   hasHiddenColumns,
   prepareColumns,
   sizeToZoom,
@@ -44,12 +48,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;
@@ -59,12 +67,13 @@ export interface IReqoreTableColumn extends IReqoreIntent {
     columns?: IReqoreTableColumn[];
     component?: React.FC<IReqoreTableHeaderCellProps>;
     actions?: IReqoreDropdownItem[];
-  } & IReqoreButtonProps;
+  } & 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';
   };
@@ -88,6 +97,8 @@ export interface IReqoreTableProps extends IReqorePanelProps {
   height?: number;
   wrapperSize?: TSizes;
 
+  paging?: TReqorePaginationType<IReqoreTableRowData>;
+
   sort?: IReqoreTableSort;
   onSortChange?: (sort?: IReqoreTableSort) => void;
 
@@ -131,6 +142,30 @@ export interface IReqoreTableSort {
   direction?: 'asc' | 'desc';
 }
 
+const StyledTableWrapper = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-flow: column;
+
+  ${({ isPinned }) =>
+    isPinned
+      ? css`
+          flex-shrink: 0;
+          z-index: 1;
+          box-shadow: 1px -1px 20px -2px rgba(0, 0, 0, 0.8);
+        `
+      : css`
+          width: 100%;
+          flex: 1;
+        `};
+`;
+
+const StyledTablesWrapper = styled.div`
+  display: flex;
+  flex-flow: row;
+  overflow: hidden;
+`;
+
 const ReqoreTable = ({
   className,
   height = 300,
@@ -146,7 +181,7 @@ const ReqoreTable = ({
   customTheme,
   onRowClick,
   striped,
-  selectedRowIntent,
+  selectedRowIntent = 'info',
   size = 'normal',
   wrapperSize = 'normal',
   intent,
@@ -162,15 +197,21 @@ const ReqoreTable = ({
   rowComponent,
   bodyCellComponent,
   onSelectClick,
+  paging,
   ...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 [columnModifiers, setColumnModifiers] = useState<{
-    [key: string]: { [dataId: string]: any };
+    [dataId: string]: { [modifier: string]: any };
   }>({});
   const [_internalColumns, setColumns] = useState<IReqoreTableColumn[]>(columns);
   const [zoom, setZoom] = useState<number>(sizeToZoom[size]);
@@ -178,10 +219,74 @@ const ReqoreTable = ({
   const [wrapperRef, sizes] = useMeasure();
   const { query, preQuery, setQuery, setPreQuery } = useQueryWithDelay(filter, 300, onFilterChange);
 
-  const finalColumns = useMemo(
-    () => prepareColumns(_internalColumns, columnModifiers, size),
-    [_internalColumns, columnModifiers]
-  );
+  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[]) =>
@@ -353,6 +458,10 @@ const ReqoreTable = ({
     };
 
     finalColumns.forEach((column) => {
+      if (column.hideable === false) {
+        return;
+      }
+
       if (column.header?.columns) {
         column.header?.columns.forEach((subColumn) => {
           addColumn(subColumn);
@@ -365,6 +474,23 @@ const ReqoreTable = ({
     return _columnsList;
   }, [finalColumns]);
 
+  const handleScrollToTop = () => {
+    mainTableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+    leftTableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+    rightTableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+
+    setIsScrolled(false);
+  };
+
   const tableActions = useMemo<IReqorePanelAction[]>(() => {
     const finalActions: IReqorePanelAction[] = [...actions];
 
@@ -406,6 +532,16 @@ const ReqoreTable = ({
       });
     }
 
+    if (isScrolled) {
+      finalActions.push({
+        icon: 'ArrowUpSFill',
+        tooltip: 'Scroll to top',
+        className: 'reqore-table-columns-scroll-top',
+        responsive: true,
+        onClick: handleScrollToTop,
+      });
+    }
+
     if (count(columnModifiers) || zoomable || filterable) {
       finalActions.push({
         icon: 'MoreLine',
@@ -437,6 +573,7 @@ const ReqoreTable = ({
     zoomable,
     zoom,
     columnsList,
+    isScrolled,
   ]);
 
   const badge = useMemo(() => {
@@ -453,12 +590,82 @@ 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', items: IReqoreTableRowData[]) => {
+    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(items) * TABLE_SIZE_TO_PX[size] > height}
+          onColumnsUpdate={handleColumnsUpdate}
+          onFilterChange={(dataId: string, value: any) => {
+            handleColumnsUpdate(dataId, 'filter', value);
+          }}
+          component={headerCellComponent}
+        />
+        {count(items) === 0 ? null : (
+          <ReqoreTableBody
+            ref={refs[type]}
+            refs={refs}
+            type={type}
+            data={items}
+            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>
+    );
+  };
+
+  const pagingOptions = useMemo(() => getPagingObjectFromType(paging), [paging]);
+
   return (
     <ReqorePanel
       transparent
       flat
       padded={false}
       contentStyle={{ display: 'flex', flexFlow: 'column', overflow: 'hidden' }}
+      responsiveActions={false}
       {...rest}
       size={wrapperSize}
       actions={tableActions}
@@ -468,48 +675,39 @@ const ReqoreTable = ({
       getContentRef={wrapperRef}
       badge={badge}
     >
-      <ReqoreTableHeader
-        size={zoomToSize[zoom]}
-        columns={finalColumns}
-        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}
-      />
-      {count(transformedData) === 0 ? (
-        <>
-          <ReqoreVerticalSpacer height={10} />
-          <ReqoreMessage flat size={size} icon='Search2Line'>
-            {emptyMessage}
-          </ReqoreMessage>
-        </>
-      ) : (
-        <ReqoreTableBody
-          data={transformedData}
-          columns={finalColumns}
-          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}
-        />
-      )}
+      <ReqorePaginationContainer<IReqoreTableRowData>
+        items={transformedData}
+        type={
+          paging
+            ? {
+                ...pagingOptions,
+                onPageChange: () => {
+                  if (!pagingOptions.infinite) {
+                    handleScrollToTop();
+                  }
+                },
+              }
+            : undefined
+        }
+      >
+        {(pagedData) => (
+          <>
+            <StyledTablesWrapper className='reqore-table-wrapper'>
+              {renderTable('left', pagedData)}
+              {renderTable('main', pagedData)}
+              {renderTable('right', pagedData)}
+            </StyledTablesWrapper>
+            {count(pagedData) === 0 ? (
+              <>
+                <ReqoreVerticalSpacer height={10} />
+                <ReqoreMessage flat size={size} icon='Search2Line'>
+                  {emptyMessage}
+                </ReqoreMessage>
+              </>
+            ) : null}
+          </>
+        )}
+      </ReqorePaginationContainer>
     </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[];
@@ -89,7 +83,7 @@ const ReqoreTableRow = ({
     onRowClick,
     striped,
     size,
-    selectedRowIntent = 'info',
+    selectedRowIntent,
     flat,
     cellComponent,
     rowComponent,
@@ -104,10 +98,34 @@ 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;
 
@@ -156,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);
         }
@@ -178,6 +196,8 @@ const ReqoreTableRow = ({
             componentProps={
               {
                 width: resizedWidth || width,
+                minWidth,
+                maxWidth,
                 grow,
                 align,
                 size,
@@ -209,7 +229,7 @@ const ReqoreTableRow = ({
             }
             {...tooltip}
           >
-            {renderContent(cell?.content, data[index], dataId)}
+            {renderContent(cell, data[index], dataId, align)}
           </ReqorePopover>
         );
       }
@@ -230,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/components/Tree/index.tsx

@@ -8,6 +8,7 @@ import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 import { IReqorePanelProps } from '../Panel';
+import { getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
 import ReqoreTag from '../Tag';
 
 export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
@@ -18,6 +19,8 @@ export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
   onItemClick?: (value: any, path?: string[]) => void;
   withLabelCopy?: boolean;
   showControls?: boolean;
+  zoomable?: boolean;
+  defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
 }
 
 export interface ITreeStyle {
@@ -38,6 +41,8 @@ export const ReqoreTree = ({
   onItemClick,
   withLabelCopy,
   showControls = true,
+  zoomable,
+  defaultZoom,
   ...rest
 }: IReqoreTreeProps) => {
   const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
@@ -45,6 +50,7 @@ export const ReqoreTree = ({
   const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
   const addNotification = useReqoreProperty('addNotification');
+  const [zoom, setZoom] = useState(defaultZoom || sizeToZoom[size]);
 
   const handleCopyClick = () => {
     setMode('copy');
@@ -99,7 +105,7 @@ export const ReqoreTree = ({
       return (
         <div key={index} style={{ margin: level === 1 ? '15px 0' : `15px` }}>
           {isObject ? (
-            <ReqoreControlGroup size={size}>
+            <ReqoreControlGroup size={zoomToSize[zoom]}>
               <ReqoreButton
                 className='reqore-tree-toggle'
                 icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
@@ -112,7 +118,7 @@ export const ReqoreTree = ({
               {_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
             </ReqoreControlGroup>
           ) : (
-            <ReqoreControlGroup size={size}>
+            <ReqoreControlGroup size={zoomToSize[zoom]}>
               <ReqoreTag
                 label={displayKey}
                 actions={
@@ -184,6 +190,11 @@ export const ReqoreTree = ({
       actions={
         showControls
           ? [
+              {
+                fluid: false,
+                group: getZoomActions('reqore-tree', zoom, setZoom),
+                show: !!zoomable,
+              },
               {
                 className: 'reqore-tree-expand-all',
                 icon: 'ArrowDownFill',

package/src/constants/paging.ts

@@ -24,6 +24,28 @@ export type TReqorePaginationTypeResult<T> = {
   includeBottomControls?: boolean;
 };
 
+export function getPagingObjectFromType<T>(
+  type: TReqorePaginationType<T>
+): IReqoreComponentPagingOptions<T> {
+  if (typeof type === 'object') {
+    return type;
+  }
+
+  switch (type) {
+    case 'buttons':
+      return {};
+    case 'list':
+      return {
+        showPagesAs: 'list',
+      };
+    case 'infinite':
+    case 'auto-load':
+      return { infinite: true };
+    default:
+      return {};
+  }
+}
+
 export function getPaginationOptionsFromType<T>(
   type: TReqorePaginationType<T>
 ): TReqorePaginationTypeResult<T> {

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 }> = (