@qoretechnologies/reqore 0.36.1 → 0.36.2

package/src/components/Table/index.tsx

@@ -3,10 +3,17 @@ 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';
@@ -183,7 +190,6 @@ const ReqoreTable = ({
   selected,
   onSelectedChange,
   selectToggleTooltip,
-  customTheme,
   onRowClick,
   striped,
   selectedRowIntent = 'info',
@@ -222,6 +228,7 @@ 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(
@@ -554,6 +561,7 @@ const ReqoreTable = ({
 
       if (exportable) {
         moreActions = [
+          ...moreActions,
           ...getExportActions((type) => setShowExportModal(type)),
           { divider: true, line: true },
         ];
@@ -561,6 +569,7 @@ const ReqoreTable = ({
 
       if (zoomable) {
         moreActions = [
+          ...moreActions,
           ...getZoomActions('reqore-table', zoom, setZoom, true),
           { divider: true, line: true },
         ];
@@ -703,47 +712,49 @@ const ReqoreTable = ({
         getContentRef={wrapperRef}
         badge={badge}
       >
-        <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>
+        <ReqoreThemeProvider theme={theme}>
+          <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>
+        </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';
@@ -200,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/constants/sizes.ts

@@ -110,11 +110,11 @@ export const TEXT_FROM_SIZE = {
 };
 
 export const ICON_FROM_SIZE = {
-  tiny: 11,
-  small: 14,
-  normal: 17,
-  big: 20,
-  huge: 23,
+  tiny: 13,
+  small: 17,
+  normal: 20,
+  big: 26,
+  huge: 33,
 };
 
 export const PADDING_FROM_SIZE = {

package/src/stories/KeyValueTable/KeyValueTable.stories.tsx

@@ -3,6 +3,7 @@ import ReqoreIcon from '../../components/Icon';
 import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
 import { IReqoreTableRowData, TReqoreTableColumnContent } from '../../components/Table';
 import { TReqorePaginationType } from '../../constants/paging';
+import { Exportable as ExportableTable } from '../Table/Table.stories';
 import { StoryMeta } from '../utils';
 import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
@@ -112,6 +113,23 @@ export const Striped: Story = {
   },
 };
 
+export const Exportable: Story = {
+  args: {
+    exportable: true,
+    zoomable: true,
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    // @ts-ignore
+    await ExportableTable.play({ canvasElement, ...rest });
+  },
+};
+
+export const Sortable: Story = {
+  args: {
+    sortable: true,
+  },
+};
+
 export const Filterable: Story = {
   args: {
     filterable: true,
@@ -139,6 +157,29 @@ export const AllFiltersActive: Story = {
   },
 };
 
+export const WithActions: Story = {
+  args: {
+    rowActions: () => [
+      {
+        icon: 'EditLine',
+      },
+      {
+        icon: 'DeleteBinLine',
+        intent: 'danger',
+      },
+    ],
+    zoomable: true,
+  },
+};
+
+export const CustomTheme: Story = {
+  args: {
+    customTheme: { main: '#ff0000' },
+    flat: false,
+    transparent: false,
+  },
+};
+
 export const NoDataMessage: Story = {
   args: {
     filterable: true,

package/src/stories/Message/Message.stories.tsx

@@ -109,6 +109,31 @@ export const CustomTheme: Story = {
   },
 };
 
+export const WithMargin: Story = {
+  render: () => (
+    <>
+      <ReqoreMessage margin='both' title='Bottom & top margin'>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
+        happiness commanded daughters as.
+      </ReqoreMessage>
+      <ReqoreMessage margin='top' title='Top margin'>
+        In to am attended desirous raptures declared diverted confined at.
+      </ReqoreMessage>
+      <ReqoreMessage margin='bottom' size='big' title='Bottom margin'>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
+        happiness commanded daughters as.
+      </ReqoreMessage>
+      <ReqoreMessage margin='bottom' size='small' title='Bottom small margin'>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
+        happiness commanded daughters as.
+      </ReqoreMessage>
+    </>
+  ),
+};
+
 export const Effect: Story = {
   render: Template,