@qoretechnologies/reqore 0.35.3 → 0.36.1

package/src/components/Table/helpers.ts

@@ -1,15 +1,15 @@
 import { size } from 'lodash';
 import { firstBy } from 'thenby';
-import { IReqoreTableColumn, IReqoreTableSort } from '.';
+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 { IReqorePanelAction } from '../Panel';
+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 fixSort = (sort: IReqoreTableSort) => {
+  return { ...sort, direction: sort?.direction || 'desc' };
 };
 
 export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
@@ -81,20 +81,38 @@ export const zoomToWidth = {
 
 // 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',
+  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
-): IReqorePanelAction[] => [
+  setter: (zoom: number) => void,
+  withLabels?: boolean
+): IReqorePanelSubAction[] => [
   {
     icon: 'ZoomInLine',
+    label: withLabels ? 'Zoom in' : undefined,
     tooltip: 'Zoom in',
     disabled: zoom === 2,
     className: `${type}-zoom-in`,
@@ -104,7 +122,7 @@ export const getZoomActions = (
   },
   {
     icon: 'RestartLine',
-    label: zoomToLabel[zoom],
+    label: `${zoomToLabel[zoom]}${withLabels ? ' (reset)' : ''}`,
     tooltip: 'Reset zoom',
     disabled: zoom === 1,
     className: `${type}-zoom-reset`,
@@ -115,6 +133,7 @@ export const getZoomActions = (
   {
     icon: 'ZoomOutLine',
     tooltip: 'Zoom out',
+    label: withLabels ? 'Zoom out' : undefined,
     disabled: zoom === 0,
     className: `${type}-zoom-out`,
     onClick: () => {
@@ -127,7 +146,7 @@ export const getColumnsCount = (columns: IReqoreTableColumn[]): number => {
   let count = 0;
 
   columns.forEach((column) => {
-    if (column.header.columns) {
+    if (column.header?.columns) {
       count += getColumnsCount(column.header.columns);
     } else {
       count += 1;
@@ -145,7 +164,7 @@ export const hasGroupedColumns = (columns: IReqoreTableColumn[]): boolean => {
 
 export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
   return columns.some((column) => {
-    if (column.header.columns) {
+    if (column.header?.columns) {
       return column.header.columns.some((subColumn) => subColumn.show === false);
     }
 
@@ -157,8 +176,8 @@ export const getColumnsByPinType = (
   columns: IReqoreTableColumn[],
   type: 'left' | 'right' | 'main'
 ): IReqoreTableColumn[] => {
-  return columns.reduce((newColumns, column) => {
-    if (column.header.columns) {
+  return columns.reduce((newColumns: IReqoreTableColumn[], column): IReqoreTableColumn[] => {
+    if (column.header?.columns) {
       const subColumns: IReqoreTableColumn[] = getColumnsByPinType(column.header.columns, type);
 
       if (!size(subColumns)) {
@@ -188,8 +207,8 @@ export const getColumnsByPinType = (
 };
 
 export const getOnlyShownColumns = (columns: IReqoreTableColumn[]): IReqoreTableColumn[] => {
-  return columns.reduce((newColumns, column) => {
-    if (column.header.columns) {
+  return columns.reduce((newColumns: IReqoreTableColumn[], column) => {
+    if (column.header?.columns) {
       const subColumns = getOnlyShownColumns(column.header.columns);
 
       if (size(subColumns)) {
@@ -220,7 +239,7 @@ export const prepareColumns = (
 ): IReqoreTableColumn[] => {
   // We need to set the width of each column
   return columns.map((column) => {
-    if (column.header.columns) {
+    if (column.header?.columns) {
       return {
         ...column,
         header: {
@@ -233,7 +252,7 @@ export const prepareColumns = (
     let newWidth = calculateMinimumCellWidth(
       column.width || 50,
       size,
-      column.header.icon,
+      column.header?.icon,
       column.sortable,
       column.filterable,
       column.hideable,
@@ -250,7 +269,7 @@ export const prepareColumns = (
 
 export const calculateMinimumCellWidth = (
   currentWidth: number = 50,
-  size?: TSizes,
+  size: TSizes,
   icon?: IReqoreIconName,
   sortable?: boolean,
   filterable?: boolean,
@@ -273,3 +292,15 @@ export const calculateMinimumCellWidth = (
 
   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;
+  });
+};

package/src/components/Table/index.tsx

@@ -11,6 +11,7 @@ import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
 import { IReqoreIntent, IReqoreTooltip } from '../../types/global';
 import { IReqoreButtonProps, TReqoreBadge } from '../Button';
 import { IReqoreDropdownItem } from '../Dropdown/list';
+import { ReqoreExportModal } from '../ExportModal';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import { IReqorePanelAction, IReqorePanelProps, IReqorePanelSubAction } from '../Panel';
 import ReqoreTableBody from './body';
@@ -21,11 +22,13 @@ import {
   flipSortDirection,
   getColumnsByPinType,
   getColumnsCount,
+  getExportActions,
   getOnlyShownColumns,
   getZoomActions,
   hasGroupedColumns,
   hasHiddenColumns,
   prepareColumns,
+  removeInternalData,
   sizeToZoom,
   sortTableData,
   zoomToSize,
@@ -104,8 +107,10 @@ export interface IReqoreTableProps extends IReqorePanelProps {
 
   filterable?: boolean;
   filterProps?: (data: IReqoreTableData) => IReqoreInputProps;
-  filter?: string;
-  onFilterChange?: (query: string) => void;
+  filter?: string | number;
+  onFilterChange?: (query: string | number) => void;
+
+  exportable?: boolean;
 
   zoomable?: boolean;
   defaultZoom?: number;
@@ -137,7 +142,7 @@ export interface IReqoreTableStyle {
 }
 
 export interface IReqoreTableSort {
-  by?: string;
+  by: string;
   thenBy?: string;
   direction?: 'asc' | 'desc';
 }
@@ -188,7 +193,7 @@ const ReqoreTable = ({
   fill,
   filterable,
   zoomable,
-  filter,
+  filter = '',
   actions = [],
   onFilterChange,
   filterProps,
@@ -198,16 +203,17 @@ const ReqoreTable = ({
   bodyCellComponent,
   onSelectClick,
   paging,
+  exportable,
   ...rest
 }: IReqoreTableProps) => {
-  const leftTableRef = useRef<HTMLDivElement>(undefined);
-  const rightTableRef = useRef<HTMLDivElement>(undefined);
-  const mainTableRef = useRef<HTMLDivElement>(undefined);
-  const mainHeaderRef = useRef<HTMLDivElement>(undefined);
+  const leftTableRef = useRef<HTMLDivElement>(null);
+  const rightTableRef = useRef<HTMLDivElement>(null);
+  const mainTableRef = useRef<HTMLDivElement>(null);
+  const mainHeaderRef = useRef<HTMLDivElement>(null);
 
   const [isScrolled, setIsScrolled] = useState<boolean>(false);
   const [_data, setData] = useState<IReqoreTableData>(data || []);
-  const [_sort, setSort] = useState<IReqoreTableSort>(fixSort(sort));
+  const [_sort, setSort] = useState<IReqoreTableSort | undefined>(fixSort(sort));
   const [_selected, setSelected] = useState<(string | number)[]>(selected || []);
   const [_selectedQuant, setSelectedQuant] = useState<'all' | 'none' | 'some'>('none');
   const [columnModifiers, setColumnModifiers] = useState<{
@@ -215,9 +221,14 @@ const ReqoreTable = ({
   }>({});
   const [_internalColumns, setColumns] = useState<IReqoreTableColumn[]>(columns);
   const [zoom, setZoom] = useState<number>(sizeToZoom[size]);
+  const [showExportModal, setShowExportModal] = useState<'full' | 'current' | undefined>(undefined);
 
   const [wrapperRef, sizes] = useMeasure();
-  const { query, preQuery, setQuery, setPreQuery } = useQueryWithDelay(filter, 300, onFilterChange);
+  const { query, preQuery, setQuery, setPreQuery } = useQueryWithDelay(
+    filter.toString(),
+    300,
+    onFilterChange
+  );
 
   const selectedIcon = useMemo(() => {
     switch (_selectedQuant) {
@@ -260,15 +271,15 @@ const ReqoreTable = ({
               tooltip: selectToggleTooltip,
               icon: !_selectId
                 ? 'Forbid2Line'
-                : _selected?.find((s) => s === _selectId)
+                : _selected?.find((s) => s.toString() === _selectId.toString())
                 ? 'CheckboxCircleLine'
                 : 'CheckboxBlankCircleLine',
               intent: !_selectId
                 ? 'muted'
-                : _selected?.find((s) => s === _selectId)
+                : _selected?.find((s) => s.toString() === _selectId.toString())
                 ? selectedRowIntent
                 : undefined,
-              onClick: () => handleSelectClick(_selectId),
+              onClick: _selectId ? () => handleSelectClick(_selectId) : undefined,
             },
           ],
         },
@@ -314,7 +325,7 @@ const ReqoreTable = ({
   const transformedData = useMemo(() => {
     // Filter by global query
     let filteredData = _data.filter((datum) =>
-      JSON.stringify(datum).toLowerCase().includes(query.toLowerCase())
+      JSON.stringify(datum).toLowerCase().includes(query.toString().toLowerCase())
     );
 
     // Filter by column filters
@@ -345,7 +356,7 @@ const ReqoreTable = ({
   }, [data]);
 
   useUpdateEffect(() => {
-    if (selectable) {
+    if (selectable && selected) {
       setSelected(selected);
     }
   }, [selected]);
@@ -370,7 +381,7 @@ const ReqoreTable = ({
     }
   }, [_selected]);
 
-  const handleSortChange = (by?: string) => {
+  const handleSortChange = (by: string) => {
     setSort((currentSort: IReqoreTableSort) => {
       const newSort: IReqoreTableSort = { ...currentSort };
 
@@ -440,16 +451,11 @@ const ReqoreTable = ({
   }, []);
 
   const columnsList = useMemo(() => {
-    const _columnsList: IReqorePanelSubAction[] = [
-      {
-        divider: true,
-        label: 'Show / hide columns',
-      },
-    ];
+    const _columnsList: IReqorePanelSubAction[] = [];
 
     const addColumn = (column: IReqoreTableColumn) => {
       _columnsList.push({
-        label: typeof column.header.label === 'string' ? column.header.label : column.dataId,
+        label: typeof column.header?.label === 'string' ? column.header.label : column.dataId,
         selected: column.show !== false,
         onClick: () =>
           handleColumnsUpdate(column.dataId, 'show', column.show !== false ? false : true),
@@ -471,6 +477,13 @@ const ReqoreTable = ({
       }
     });
 
+    if (count(_columnsList)) {
+      _columnsList.unshift({
+        divider: true,
+        label: 'Show / hide columns',
+      });
+    }
+
     return _columnsList;
   }, [finalColumns]);
 
@@ -494,15 +507,16 @@ const ReqoreTable = ({
   const tableActions = useMemo<IReqorePanelAction[]>(() => {
     const finalActions: IReqorePanelAction[] = [...actions];
 
-    finalActions.push({
-      label: 'Columns',
-      icon: 'LayoutColumnLine',
-      className: 'reqore-table-columns-options',
-      badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
-      intent: hasHiddenColumns(finalColumns) ? 'info' : undefined,
-      multiSelect: true,
-      actions: columnsList,
-    });
+    if (count(columnsList)) {
+      finalActions.push({
+        icon: 'LayoutColumnLine',
+        className: 'reqore-table-columns-options',
+        badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
+        intent: hasHiddenColumns(finalColumns) ? 'info' : undefined,
+        multiSelect: true,
+        actions: columnsList,
+      });
+    }
 
     if (filterable) {
       finalActions.push({
@@ -525,13 +539,6 @@ const ReqoreTable = ({
       });
     }
 
-    if (zoomable) {
-      finalActions.push({
-        fluid: false,
-        group: getZoomActions('reqore-table', zoom, setZoom),
-      });
-    }
-
     if (isScrolled) {
       finalActions.push({
         icon: 'ArrowUpSFill',
@@ -542,11 +549,28 @@ const ReqoreTable = ({
       });
     }
 
-    if (count(columnModifiers) || zoomable || filterable) {
+    if (count(columnModifiers) || zoomable || filterable || exportable) {
+      let moreActions: IReqorePanelSubAction[] = [];
+
+      if (exportable) {
+        moreActions = [
+          ...getExportActions((type) => setShowExportModal(type)),
+          { divider: true, line: true },
+        ];
+      }
+
+      if (zoomable) {
+        moreActions = [
+          ...getZoomActions('reqore-table', zoom, setZoom, true),
+          { divider: true, line: true },
+        ];
+      }
+
       finalActions.push({
         icon: 'MoreLine',
         className: 'reqore-table-more',
         actions: [
+          ...moreActions,
           {
             label: 'Reset table',
             icon: 'RestartLine',
@@ -577,7 +601,7 @@ const ReqoreTable = ({
   ]);
 
   const badge = useMemo(() => {
-    const badgeList: TReqoreBadge[] = rest.label ? [count(transformedData)] : undefined;
+    const badgeList: TReqoreBadge[] = rest.label ? [count(transformedData)] : [];
 
     if (rest.badge) {
       if (isArray(rest.badge)) {
@@ -657,58 +681,71 @@ const ReqoreTable = ({
     );
   };
 
-  const pagingOptions = useMemo(() => getPagingObjectFromType(paging), [paging]);
+  const pagingOptions = useMemo(
+    () => (paging ? getPagingObjectFromType(paging) : undefined),
+    [paging]
+  );
 
   return (
-    <ReqorePanel
-      transparent
-      flat
-      padded={false}
-      contentStyle={{ display: 'flex', flexFlow: 'column', overflow: 'hidden' }}
-      responsiveActions={false}
-      {...rest}
-      size={wrapperSize}
-      actions={tableActions}
-      fill={fill}
-      className={`${className || ''} reqore-table`}
-      style={{ width, ...(rest.style || {}) }}
-      getContentRef={wrapperRef}
-      badge={badge}
-    >
-      <ReqorePaginationContainer<IReqoreTableRowData>
-        items={transformedData}
-        type={
-          paging
-            ? {
-                ...pagingOptions,
-                onPageChange: () => {
-                  if (!pagingOptions.infinite) {
-                    handleScrollToTop();
-                  }
-                },
-              }
-            : undefined
-        }
+    <>
+      <ReqorePanel
+        transparent
+        flat
+        padded={false}
+        contentStyle={{ display: 'flex', flexFlow: 'column', overflow: 'hidden' }}
+        responsiveActions={false}
+        {...rest}
+        size={wrapperSize}
+        actions={tableActions}
+        fill={fill}
+        className={`${className || ''} reqore-table`}
+        style={{ width, ...(rest.style || {}) }}
+        getContentRef={wrapperRef}
+        badge={badge}
       >
-        {(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>
+        <ReqorePaginationContainer<IReqoreTableRowData>
+          items={transformedData}
+          type={
+            pagingOptions
+              ? {
+                  ...pagingOptions,
+                  onPageChange: () => {
+                    if (!pagingOptions.infinite) {
+                      handleScrollToTop();
+                    }
+                  },
+                }
+              : undefined
+          }
+        >
+          {(pagedData) => (
+            <>
+              {showExportModal && (
+                <ReqoreExportModal
+                  data={removeInternalData(
+                    showExportModal === 'current' ? pagedData : transformedData
+                  )}
+                  onClose={() => setShowExportModal(undefined)}
+                />
+              )}
+              <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

@@ -17,10 +17,10 @@ import { getOnlyShownColumns } from './helpers';
 
 export interface IReqoreTableRowOptions {
   columns: IReqoreTableColumn[];
-  data?: IReqoreTableData;
+  data: IReqoreTableData;
   selectable?: boolean;
-  onSelectClick?: (selectId: string | number) => void;
-  selected?: (string | number)[];
+  onSelectClick: (selectId: string | number) => void;
+  selected: (string | number)[];
   onRowClick?: IReqoreTableRowClick;
   striped?: boolean;
   selectedRowIntent?: TReqoreIntent;
@@ -29,7 +29,10 @@ export interface IReqoreTableRowOptions {
   cellComponent?: IReqoreCustomTableBodyCell;
   rowComponent?: IReqoreCustomTableRow;
 }
-export interface IReqoreCustomTableRowProps extends IReqoreTableRowOptions {}
+export interface IReqoreCustomTableRowProps extends IReqoreTableRowOptions {
+  style?: React.CSSProperties;
+  children?: ReactElement;
+}
 export interface IReqoreCustomTableRow extends React.FC<IReqoreCustomTableRowProps> {}
 export interface IReqoreTableRowProps extends React.HTMLAttributes<HTMLDivElement> {
   data: IReqoreTableRowOptions;
@@ -92,7 +95,9 @@ const ReqoreTableRow = ({
   index,
 }: IReqoreTableRowProps) => {
   const [isHovered, setIsHovered] = useState<boolean>(false);
-  const isSelected = selected.find((selectId) => selectId === data[index]._selectId);
+  const isSelected =
+    data[index]._selectId &&
+    selected.find((selectId) => selectId.toString() === data[index]._selectId.toString());
 
   const CellComponent = cellComponent || ReqoreTableBodyCell;
   const RowComponent = rowComponent || StyledTableRow;
@@ -124,12 +129,18 @@ const ReqoreTableRow = ({
       );
     }
 
-    const content = cell?.content;
+    let content = cell?.content;
 
     if (isFunction(content)) {
-      const Content = content;
+      // Check what type does the content function return
+      if (React.isValidElement(content(data))) {
+        const Content = content;
+        // If it's a react element, return it
+        return <Content {...data} _size={size} _dataId={dataId} />;
+      }
 
-      return <Content {...data} _size={size} _dataId={dataId} />;
+      // If it's a function, call it and return the result
+      content = content(data) as any;
     }
 
     if (isString(content)) {
@@ -175,7 +186,7 @@ const ReqoreTableRow = ({
   const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
     getOnlyShownColumns(columns).map(
       ({ width, minWidth, maxWidth, resizedWidth, grow, dataId, cell, header, align, intent }) => {
-        if (header.columns) {
+        if (header?.columns) {
           return renderCells(header.columns, data);
         }
 
@@ -221,7 +232,7 @@ const ReqoreTableRow = ({
                     onRowClick(data[index]);
                   } else if (selectable && data[index]._selectId) {
                     // Otherwise select the row if selectable
-                    onSelectClick(data[index]._selectId);
+                    onSelectClick(data[index]._selectId!);
                   }
                 },
                 className: 'reqore-table-cell',

package/src/components/Table/value.tsx

@@ -0,0 +1,27 @@
+import ReqoreIcon from '../Icon';
+import { ReqoreP } from '../Paragraph';
+
+export interface IReqoreTableValueProps {
+  value?: string | number | boolean | any[] | { [key: string]: any };
+}
+
+export const ReqoreTableValue = ({ value }: IReqoreTableValueProps) => {
+  if (value === undefined || value === null) {
+    return <>-</>;
+  }
+
+  switch (typeof value) {
+    case 'string':
+    case 'number':
+      return <ReqoreP className='reqore-table-text'>{value}</ReqoreP>;
+    case 'boolean':
+      return (
+        <ReqoreIcon
+          icon={value ? 'CheckLine' : 'CloseLine'}
+          intent={value ? 'success' : 'danger'}
+        />
+      );
+    default:
+      return <ReqoreP className='reqore-table-text'>{JSON.stringify(value)}</ReqoreP>;
+  }
+};

package/src/components/Tabs/list.tsx

@@ -252,7 +252,7 @@ const ReqoreTabsList = ({
                                   }
                                 : undefined,
                             selected: activeTab === id,
-                            onClick: (_id, event: React.MouseEvent<any>) => {
+                            onClick: (event: React.MouseEvent<any>) => {
                               if (!disabled) {
                                 onTabChange?.(id);