@qoretechnologies/reqore 0.36.0 → 0.36.1

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,
             },
           ],
         },
@@ -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 };
 
@@ -444,7 +455,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 +509,6 @@ const ReqoreTable = ({
 
     if (count(columnsList)) {
       finalActions.push({
-        label: 'Columns',
         icon: 'LayoutColumnLine',
         className: 'reqore-table-columns-options',
         badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
@@ -529,13 +539,6 @@ const ReqoreTable = ({
       });
     }
 
-    if (zoomable) {
-      finalActions.push({
-        fluid: false,
-        group: getZoomActions('reqore-table', zoom, setZoom),
-      });
-    }
-
     if (isScrolled) {
       finalActions.push({
         icon: 'ArrowUpSFill',
@@ -546,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',
@@ -581,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)) {
@@ -661,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;
@@ -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);
         }
 
@@ -227,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/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);
 

package/src/components/Tree/index.tsx

@@ -1,14 +1,15 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqorePanel, ReqoreTextarea, useReqoreProperty } from '../..';
+import { ReqoreMessage, ReqorePanel, useReqoreProperty } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
 import { getTypeFromValue } from '../../helpers/utils';
 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 { ReqoreExportModal } from '../ExportModal';
+import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
+import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
 import ReqoreTag from '../Tag';
 
 export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
@@ -20,6 +21,7 @@ export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
   withLabelCopy?: boolean;
   showControls?: boolean;
   zoomable?: boolean;
+  exportable?: boolean;
   defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
 }
 
@@ -41,29 +43,23 @@ export const ReqoreTree = ({
   onItemClick,
   withLabelCopy,
   showControls = true,
+
+  exportable,
   zoomable,
   defaultZoom,
   ...rest
 }: IReqoreTreeProps) => {
-  const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
   const [items, setItems] = useState({});
   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');
-  };
+  const [showExportModal, setShowExportModal] = useState<'full' | 'current' | undefined>(undefined);
 
   const handleTypesClick = () => {
     setShowTypes(!_showTypes);
   };
 
-  const handleTreeClick = () => {
-    setMode('tree');
-  };
-
   const handleExpandClick = () => {
     setItems({});
     setAllExpanded(true);
@@ -173,73 +169,84 @@ export const ReqoreTree = ({
     return text;
   };
 
+  const actions = useMemo(() => {
+    let _actions: IReqorePanelAction[] = [];
+
+    if (showControls) {
+      _actions = [
+        {
+          className: 'reqore-tree-expand-all',
+          icon: 'ArrowDownFill',
+          onClick: handleExpandClick,
+          show: !!(isDeep() && !allExpanded),
+          label: 'Expand all',
+        },
+        {
+          show: !!(isDeep() && (allExpanded || lodashSize(items) > 0)),
+          className: 'reqore-tree-collapse-all',
+          icon: 'ArrowUpFill',
+          onClick: handleCollapseClick,
+
+          label: 'Collapse all',
+        },
+        {
+          className: 'reqore-tree-show-types',
+          icon: 'CodeBoxFill',
+          active: _showTypes,
+          onClick: handleTypesClick,
+          label: 'Show types',
+        },
+      ];
+    }
+
+    if (zoomable || exportable) {
+      const moreActions: IReqorePanelAction = {
+        className: 'reqore-tree-more',
+        icon: 'MoreLine',
+        actions: [],
+      };
+
+      if (zoomable) {
+        moreActions.actions = [
+          ...moreActions.actions,
+          ...getZoomActions('reqore-tree', zoom, setZoom, true),
+        ];
+      }
+
+      if (exportable) {
+        moreActions.actions = [
+          ...moreActions.actions,
+          { divider: true, line: true },
+          ...getExportActions((type) => setShowExportModal(type)),
+        ];
+      }
+
+      _actions = [..._actions, moreActions];
+    }
+
+    return _actions;
+  }, [allExpanded, items, showControls, _showTypes, isDeep(), zoom]);
+
   if (!data || !Object.keys(data).length) {
     return <p>No data</p>;
   }
 
-  const textData: string = renderText(data);
-
   return (
-    <ReqorePanel
-      className='reqore-tree'
-      minimal
-      flat
-      transparent
-      size={size}
-      {...rest}
-      actions={
-        showControls
-          ? [
-              {
-                fluid: false,
-                group: getZoomActions('reqore-tree', zoom, setZoom),
-                show: !!zoomable,
-              },
-              {
-                className: 'reqore-tree-expand-all',
-                icon: 'ArrowDownFill',
-                onClick: handleExpandClick,
-                show: !!(isDeep() && !allExpanded),
-                label: 'Expand all',
-              },
-              {
-                show: !!(isDeep() && (allExpanded || lodashSize(items) > 0)),
-                className: 'reqore-tree-collapse-all',
-                icon: 'ArrowUpFill',
-                onClick: handleCollapseClick,
-
-                label: 'Collapse all',
-              },
-              {
-                className: 'reqore-tree-show-types',
-                icon: 'CodeBoxFill',
-                active: _showTypes,
-                onClick: handleTypesClick,
-                label: 'Show types',
-              },
-              {
-                className: _mode === 'tree' ? 'reqore-tree-as-text' : 'reqore-tree-as-tree',
-                onClick: _mode === 'tree' ? handleCopyClick : handleTreeClick,
-                icon: _mode === 'tree' ? 'Menu2Fill' : 'ClipboardFill',
-                label: _mode === 'tree' ? 'Text View' : 'Tree View',
-              },
-            ]
-          : undefined
-      }
-    >
-      {_mode === 'tree' && renderTree(data, true)}
-
-      {_mode === 'copy' && (
-        <ReqoreTextarea
-          className='reqore-tree-textarea'
-          id='tree-content'
-          value={textData}
-          scaleWithContent
-          size={size}
-          fluid
-          readOnly
-        />
+    <>
+      {showExportModal && (
+        <ReqoreExportModal data={data} onClose={() => setShowExportModal(undefined)} />
       )}
-    </ReqorePanel>
+      <ReqorePanel
+        className='reqore-tree'
+        minimal
+        flat
+        transparent
+        size={size}
+        {...rest}
+        actions={actions}
+      >
+        {renderTree(data, true)}
+      </ReqorePanel>
+    </>
   );
 };

package/src/helpers/utils.ts

@@ -45,14 +45,22 @@ export const getTypeFromValue: Function = (item: any): string => {
   return 'null';
 };
 
-export const getLineCount = (value: string): number => {
+export const getLineCount = (value: string | null): number => {
   try {
-    return value.match(/[^\n]*\n[^\n]*/gi).length;
+    return value?.match(/[^\n]*\n[^\n]*/gi)?.length ?? 0;
   } catch (e) {
     return 0;
   }
 };
 
+// A function that takes list of objects and transforms it
+// to a CSV string
+export const convertToCSV = (objArray: any[]): string => {
+  const header = Object.keys(objArray[0]).join(',');
+  const rows = objArray.map((obj) => Object.values(obj).join(','));
+  return [header, ...rows].join('\n');
+};
+
 export const calculateStringSizeInPixels = (value: string = '', fontSize: number): number => {
   const widths = [
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

package/src/hooks/useAutoFocus.ts

@@ -15,7 +15,7 @@ export interface IReqoreAutoFocusRules {
 export const useAutoFocus = (
   element: HTMLInputElement | HTMLTextAreaElement,
   rules?: IReqoreAutoFocusRules,
-  onChange?: (e: unknown) => void
+  onChange?: (event: any) => void
 ) => {
   const isInViewport = useRef<boolean>(false);
   const observer = useRef<IntersectionObserver>(null);

package/src/index.tsx

@@ -24,7 +24,7 @@ export {
 } from './components/Header';
 export { default as ReqoreIcon } from './components/Icon';
 export { default as ReqoreInput } from './components/Input';
-export { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from './components/KeyValueTable';
+export { ReqoreKeyValueTable } from './components/KeyValueTable';
 export { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';

package/src/mock/tableData.ts

@@ -1,6 +1,18 @@
 import { IReqoreTableProps } from '../components/Table';
 import data from './data.json';
 
+export type TestTableItem = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  address: string;
+  age: number;
+  occupation: string;
+  group: string;
+  _selectId: number;
+  _disabled: boolean;
+};
+
 export const tableData = data;
 export const testColumns: IReqoreTableProps['columns'] = [
   {