@qoretechnologies/reqore 0.35.2 → 0.36.0

package/src/components/KeyValueTable/index.tsx

@@ -0,0 +1,123 @@
+import { keys } from 'lodash';
+import { useMemo } from 'react';
+import { TReqoreIntent } from '../../constants/theme';
+import { IReqoreIconName } from '../../types/icons';
+import { IReqorePanelProps } from '../Panel';
+import ReqoreTable, {
+  IReqoreTableColumn,
+  IReqoreTableProps,
+  IReqoreTableRowData,
+  TReqoreTableColumnContent,
+} from '../Table';
+import { IReqoreTableValueProps, ReqoreTableValue } from '../Table/value';
+
+export type TReqoreKeyValueTablePrimitiveValue = string | number | boolean | null | undefined;
+export type TReqoreKeyValueTableValue =
+  | TReqoreKeyValueTablePrimitiveValue
+  | TReqoreKeyValueTablePrimitiveValue[]
+  | { [key: string]: TReqoreKeyValueTableValue };
+
+export interface IReqoreKeyValueTableProps
+  extends IReqorePanelProps,
+    Pick<IReqoreTableProps, 'striped' | 'width' | 'height' | 'fill'> {
+  data: { [key: string | number]: TReqoreKeyValueTableValue };
+
+  keyLabel?: string;
+  keyIcon?: IReqoreIconName;
+  keyColumnIntent?: TReqoreIntent;
+  keyAlign?: IReqoreTableColumn['align'];
+  maxKeyWidth?: number;
+
+  valueLabel?: string;
+  valueIcon?: IReqoreIconName;
+  valueAlign?: IReqoreTableColumn['align'];
+  minValueWidth?: number;
+  defaultValueFilter?: string | number;
+
+  valueRenderer?: (
+    data: IReqoreTableRowData,
+    defaultComponent?: ({
+      value,
+    }: IReqoreTableValueProps) => TReqoreTableColumnContent | JSX.Element
+  ) => JSX.Element;
+}
+
+export const ReqoreKeyValueTable = ({
+  data,
+  keyLabel,
+  keyIcon,
+  valueLabel,
+  valueIcon,
+  valueRenderer,
+  keyColumnIntent = 'muted',
+  minValueWidth = 100,
+  maxKeyWidth = 200,
+  keyAlign = 'left',
+  valueAlign = 'left',
+  defaultValueFilter,
+  ...rest
+}: IReqoreKeyValueTableProps) => {
+  const { columns, items } = useMemo(() => {
+    let columns: IReqoreTableColumn[] = [
+      {
+        dataId: 'tableKey',
+        grow: 1,
+        width: maxKeyWidth < 150 ? maxKeyWidth : 150,
+        pin: 'left',
+        hideable: false,
+        intent: keyColumnIntent,
+        maxWidth: maxKeyWidth,
+        align: keyAlign,
+
+        header: {
+          icon: keyIcon,
+          label: keyLabel,
+        },
+
+        cell: {
+          content: 'title',
+        },
+      },
+      {
+        dataId: 'value',
+        grow: 3,
+        hideable: false,
+        filterable: true,
+        pinnable: false,
+        minWidth: minValueWidth,
+        filter: defaultValueFilter,
+        align: valueAlign,
+
+        header: {
+          icon: valueIcon,
+          label: valueLabel,
+        },
+
+        cell: {
+          content: (data) =>
+            valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
+        },
+      },
+    ];
+
+    let items: IReqoreTableRowData[] = [];
+
+    keys(data).map((key) => {
+      items.push({
+        tableKey: key,
+        value: data[key],
+      });
+    });
+
+    return { columns, items };
+  }, [data]);
+
+  return (
+    <ReqoreTable
+      columns={columns}
+      data={items}
+      {...rest}
+      className={`${rest.className || ''} reqore-key-value-table`}
+    />
+  );
+};

package/src/components/Table/body.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
 import styled from 'styled-components';
@@ -7,7 +7,6 @@ import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import ReqoreTableRow, { IReqoreTableRowOptions } from './row';
 
 export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
-  rowHeight?: number;
   height: number;
   refs: {
     left: React.RefObject<HTMLDivElement>;
@@ -30,7 +29,6 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
     {
       data,
       height,
-      rowHeight,
       size = 'normal',
       refs,
       type,
@@ -70,11 +68,18 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
       });
     });
 
+    const rowHeight = useMemo(
+      () => (rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1),
+      [size, rest.flat]
+    );
+
     return (
       <StyledList
         outerRef={targetRef}
         itemCount={data.length}
-        height={height}
+        // If the defined height is less than the count of items' height
+        // use that height instead
+        height={height > data.length * rowHeight ? data.length * rowHeight : height}
         className='reqore-table-body'
         itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
         itemData={{

package/src/components/Table/index.tsx

@@ -3,7 +3,8 @@ 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, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+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';
@@ -96,6 +97,8 @@ export interface IReqoreTableProps extends IReqorePanelProps {
   height?: number;
   wrapperSize?: TSizes;
 
+  paging?: TReqorePaginationType<IReqoreTableRowData>;
+
   sort?: IReqoreTableSort;
   onSortChange?: (sort?: IReqoreTableSort) => void;
 
@@ -141,16 +144,18 @@ export interface IReqoreTableSort {
 
 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%;
-          display: flex;
-          flex-flow: column;
           flex: 1;
         `};
 `;
@@ -192,6 +197,7 @@ const ReqoreTable = ({
   rowComponent,
   bodyCellComponent,
   onSelectClick,
+  paging,
   ...rest
 }: IReqoreTableProps) => {
   const leftTableRef = useRef<HTMLDivElement>(undefined);
@@ -308,7 +314,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
@@ -434,12 +440,7 @@ const ReqoreTable = ({
   }, []);
 
   const columnsList = useMemo(() => {
-    const _columnsList: IReqorePanelSubAction[] = [
-      {
-        divider: true,
-        label: 'Show / hide columns',
-      },
-    ];
+    const _columnsList: IReqorePanelSubAction[] = [];
 
     const addColumn = (column: IReqoreTableColumn) => {
       _columnsList.push({
@@ -465,21 +466,47 @@ const ReqoreTable = ({
       }
     });
 
+    if (count(_columnsList)) {
+      _columnsList.unshift({
+        divider: true,
+        label: 'Show / hide columns',
+      });
+    }
+
     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];
 
-    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({
+        label: 'Columns',
+        icon: 'LayoutColumnLine',
+        className: 'reqore-table-columns-options',
+        badge: getColumnsCount(getOnlyShownColumns(finalColumns)),
+        intent: hasHiddenColumns(finalColumns) ? 'info' : undefined,
+        multiSelect: true,
+        actions: columnsList,
+      });
+    }
 
     if (filterable) {
       finalActions.push({
@@ -515,22 +542,7 @@ const ReqoreTable = ({
         tooltip: 'Scroll to top',
         className: 'reqore-table-columns-scroll-top',
         responsive: true,
-        onClick: () => {
-          mainTableRef.current?.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-          leftTableRef.current?.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-          rightTableRef.current?.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-
-          setIsScrolled(false);
-        },
+        onClick: handleScrollToTop,
       });
     }
 
@@ -598,7 +610,7 @@ const ReqoreTable = ({
     [finalColumns]
   );
 
-  const renderTable = (type: 'left' | 'main' | 'right' = 'main') => {
+  const renderTable = (type: 'left' | 'main' | 'right' = 'main', items: IReqoreTableRowData[]) => {
     const tableColumns = columnsByType[type];
     const isPinned = type === 'left' || type === 'right';
 
@@ -617,19 +629,19 @@ const ReqoreTable = ({
           onSortChange={handleSortChange}
           heightAsGroup={hasGroupedColumns(finalColumns)}
           sortData={_sort}
-          hasVerticalScroll={count(transformedData) * TABLE_SIZE_TO_PX[size] > height}
+          hasVerticalScroll={count(items) * TABLE_SIZE_TO_PX[size] > height}
           onColumnsUpdate={handleColumnsUpdate}
           onFilterChange={(dataId: string, value: any) => {
             handleColumnsUpdate(dataId, 'filter', value);
           }}
           component={headerCellComponent}
         />
-        {count(transformedData) === 0 ? null : (
+        {count(items) === 0 ? null : (
           <ReqoreTableBody
             ref={refs[type]}
             refs={refs}
             type={type}
-            data={transformedData}
+            data={items}
             columns={tableColumns}
             height={fill ? sizes.height : height}
             selectable={selectable}
@@ -649,6 +661,8 @@ const ReqoreTable = ({
     );
   };
 
+  const pagingOptions = useMemo(() => getPagingObjectFromType(paging), [paging]);
+
   return (
     <ReqorePanel
       transparent
@@ -665,19 +679,39 @@ const ReqoreTable = ({
       getContentRef={wrapperRef}
       badge={badge}
     >
-      <StyledTablesWrapper className='reqore-table-wrapper'>
-        {renderTable('left')}
-        {renderTable()}
-        {renderTable('right')}
-      </StyledTablesWrapper>
-      {count(transformedData) === 0 ? (
-        <>
-          <ReqoreVerticalSpacer height={10} />
-          <ReqoreMessage flat size={size} icon='Search2Line'>
-            {emptyMessage}
-          </ReqoreMessage>
-        </>
-      ) : null}
+      <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

@@ -124,12 +124,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)) {

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/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/index.tsx

@@ -24,6 +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 { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';
@@ -49,6 +50,7 @@ export { default as ReqoreTable } from './components/Table';
 export { ReqoreTableBodyCell } from './components/Table/cell';
 export { ReqoreTableHeaderCell } from './components/Table/headerCell';
 export { default as ReqoreTableRow } from './components/Table/row';
+export { ReqoreTableValue } from './components/Table/value';
 export { default as ReqoreTabs } from './components/Tabs';
 export { default as ReqoreTabsContent } from './components/Tabs/content';
 export { default as ReqoreTabsListItem } from './components/Tabs/item';

package/src/stories/Collection/Collection.stories.tsx

@@ -125,6 +125,22 @@ SelectedFirst.args = {
   showSelectedFirst: true,
 };
 
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  label: 'Collection of items',
+  items,
+  zoomable: true,
+};
+
+export const WithDefaultZoom = Template.bind({});
+WithDefaultZoom.args = {
+  label: 'Collection of items',
+  items,
+  zoomable: true,
+  size: 'tiny',
+  defaultZoom: 2,
+};
+
 export const CustomColumnsData = Template.bind({});
 CustomColumnsData.args = {
   columns: 2,