@qoretechnologies/reqore 0.36.0 → 0.36.2

package/src/components/Table/index.tsx

@@ -3,14 +3,22 @@ import { size as count, isArray } from 'lodash';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { ReqoreMessage, ReqorePaginationContainer, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+import {
+  ReqoreMessage,
+  ReqorePaginationContainer,
+  ReqorePanel,
+  ReqoreVerticalSpacer,
+  useReqoreTheme,
+} from '../..';
 import { TReqorePaginationType, getPagingObjectFromType } from '../../constants/paging';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
 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 +29,13 @@ import {
   flipSortDirection,
   getColumnsByPinType,
   getColumnsCount,
+  getExportActions,
   getOnlyShownColumns,
   getZoomActions,
   hasGroupedColumns,
   hasHiddenColumns,
   prepareColumns,
+  removeInternalData,
   sizeToZoom,
   sortTableData,
   zoomToSize,
@@ -104,8 +114,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 +149,7 @@ export interface IReqoreTableStyle {
 }
 
 export interface IReqoreTableSort {
-  by?: string;
+  by: string;
   thenBy?: string;
   direction?: 'asc' | 'desc';
 }
@@ -178,7 +190,6 @@ const ReqoreTable = ({
   selected,
   onSelectedChange,
   selectToggleTooltip,
-  customTheme,
   onRowClick,
   striped,
   selectedRowIntent = 'info',
@@ -188,7 +199,7 @@ const ReqoreTable = ({
   fill,
   filterable,
   zoomable,
-  filter,
+  filter = '',
   actions = [],
   onFilterChange,
   filterProps,
@@ -198,16 +209,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 +227,15 @@ const ReqoreTable = ({
   }>({});
   const [_internalColumns, setColumns] = useState<IReqoreTableColumn[]>(columns);
   const [zoom, setZoom] = useState<number>(sizeToZoom[size]);
+  const [showExportModal, setShowExportModal] = useState<'full' | 'current' | undefined>(undefined);
+  const theme = useReqoreTheme('main', rest.customTheme, intent);
 
   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 +278,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,
             },
           ],
         },
@@ -345,7 +363,7 @@ const ReqoreTable = ({
   }, [data]);
 
   useUpdateEffect(() => {
-    if (selectable) {
+    if (selectable && selected) {
       setSelected(selected);
     }
   }, [selected]);
@@ -370,7 +388,7 @@ const ReqoreTable = ({
     }
   }, [_selected]);
 
-  const handleSortChange = (by?: string) => {
+  const handleSortChange = (by: string) => {
     setSort((currentSort: IReqoreTableSort) => {
       const newSort: IReqoreTableSort = { ...currentSort };
 
@@ -444,7 +462,7 @@ const ReqoreTable = ({
 
     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),
@@ -498,7 +516,6 @@ const ReqoreTable = ({
 
     if (count(columnsList)) {
       finalActions.push({
-        label: 'Columns',
         icon: 'LayoutColumnLine',
         className: 'reqore-table-columns-options',
         badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
@@ -529,13 +546,6 @@ const ReqoreTable = ({
       });
     }
 
-    if (zoomable) {
-      finalActions.push({
-        fluid: false,
-        group: getZoomActions('reqore-table', zoom, setZoom),
-      });
-    }
-
     if (isScrolled) {
       finalActions.push({
         icon: 'ArrowUpSFill',
@@ -546,11 +556,30 @@ const ReqoreTable = ({
       });
     }
 
-    if (count(columnModifiers) || zoomable || filterable) {
+    if (count(columnModifiers) || zoomable || filterable || exportable) {
+      let moreActions: IReqorePanelSubAction[] = [];
+
+      if (exportable) {
+        moreActions = [
+          ...moreActions,
+          ...getExportActions((type) => setShowExportModal(type)),
+          { divider: true, line: true },
+        ];
+      }
+
+      if (zoomable) {
+        moreActions = [
+          ...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',
@@ -581,7 +610,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)) {
@@ -661,58 +690,73 @@ 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 ? (
+        <ReqoreThemeProvider theme={theme}>
+          <ReqorePaginationContainer<IReqoreTableRowData>
+            items={transformedData}
+            type={
+              pagingOptions
+                ? {
+                    ...pagingOptions,
+                    onPageChange: () => {
+                      if (!pagingOptions.infinite) {
+                        handleScrollToTop();
+                      }
+                    },
+                  }
+                : undefined
+            }
+          >
+            {(pagedData) => (
               <>
-                <ReqoreVerticalSpacer height={10} />
-                <ReqoreMessage flat size={size} icon='Search2Line'>
-                  {emptyMessage}
-                </ReqoreMessage>
+                {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}
               </>
-            ) : null}
-          </>
-        )}
-      </ReqorePaginationContainer>
-    </ReqorePanel>
+            )}
+          </ReqorePaginationContainer>
+        </ReqoreThemeProvider>
+      </ReqorePanel>
+    </>
   );
 };
 

package/src/components/Table/row.tsx

@@ -3,7 +3,7 @@ import { isFunction, isString } from 'lodash';
 import React, { ReactElement, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableData, IReqoreTableRowClick } from '.';
-import { ReqoreButton, ReqoreControlGroup, ReqorePopover } from '../..';
+import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreTooltip } from '../../types/global';
@@ -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;
@@ -181,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);
         }
 
@@ -195,48 +200,44 @@ const ReqoreTableRow = ({
           : {};
 
         return (
-          <ReqorePopover
+          <CellComponent
             key={dataId}
-            component={CellComponent}
-            isReqoreComponent
-            componentProps={
-              {
-                width: resizedWidth || width,
-                minWidth,
-                maxWidth,
-                grow,
-                align,
-                size,
-                striped,
-                padded: cell?.padded,
-                disabled: data[index]._disabled,
-                selected: !!isSelected,
-                selectedIntent: selectedRowIntent,
-                flat,
-                even: index % 2 === 0 ? true : false,
-                intent: cell?.intent || data[index]._intent || intent,
-                hovered: isHovered,
-                interactive: !!cell?.onClick || !!onRowClick,
-                interactiveCell: !!cell?.onClick,
-                onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-                  if (cell?.onClick) {
-                    e.stopPropagation();
-                    cell.onClick(data[index]);
-                  } else if (onRowClick) {
-                    e.stopPropagation();
-                    onRowClick(data[index]);
-                  } else if (selectable && data[index]._selectId) {
-                    // Otherwise select the row if selectable
-                    onSelectClick(data[index]._selectId);
-                  }
-                },
-                className: 'reqore-table-cell',
-              } as IReqoreTableCellStyle
-            }
-            {...tooltip}
+            {...({
+              width: resizedWidth || width,
+              minWidth,
+              maxWidth,
+              grow,
+              align,
+              size,
+              striped,
+              tooltip,
+              padded: cell?.padded,
+              disabled: data[index]._disabled,
+              selected: !!isSelected,
+              selectedIntent: selectedRowIntent,
+              flat,
+              even: index % 2 === 0 ? true : false,
+              intent: cell?.intent || data[index]._intent || intent,
+              hovered: isHovered,
+              interactive: !!cell?.onClick || !!onRowClick,
+              interactiveCell: !!cell?.onClick,
+              onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+                if (cell?.onClick) {
+                  e.stopPropagation();
+                  cell.onClick(data[index]);
+                } else if (onRowClick) {
+                  e.stopPropagation();
+                  onRowClick(data[index]);
+                } else if (selectable && data[index]._selectId) {
+                  // Otherwise select the row if selectable
+                  onSelectClick(data[index]._selectId!);
+                }
+              },
+              className: 'reqore-table-cell',
+            } as IReqoreTableCellStyle)}
           >
             {renderContent(cell, data[index], dataId, align)}
-          </ReqorePopover>
+          </CellComponent>
         );
       }
     );

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);