@qoretechnologies/reqore 0.36.5 → 0.36.6

package/src/components/Table/headerCell.tsx

@@ -1,7 +1,7 @@
 /* @flow */
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import styled from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { ReqoreButton, ReqoreControlGroup, ReqoreDropdown } from '../..';
@@ -13,12 +13,12 @@ import { TColumnsUpdater } from './header';
 
 export interface IReqoreTableHeaderCellProps
   extends Omit<IReqoreTableColumn, 'cell'>,
-    Omit<IReqoreButtonProps, 'maxWidth'> {
+    Pick<IReqoreTableColumn['header'], 'content' | 'actions'>,
+    Omit<IReqoreButtonProps, 'maxWidth' | 'content'> {
   onSortChange?: (sort: string) => void;
   sortData?: IReqoreTableSort;
   onColumnsUpdate?: TColumnsUpdater;
   onFilterChange?: (dataId: string, filter: string) => void;
-  actions?: IReqoreTableColumn['header']['actions'];
 }
 
 export interface IReqoreTableHeaderStyle {
@@ -42,155 +42,162 @@ export const StyledTableHeaderResize = styled.div`
   }
 `;
 
-export const ReqoreTableHeaderCell = ({
-  width,
-  maxWidth,
-  minWidth,
-  resizedWidth,
-  grow,
-  align,
-  pin,
-  onSortChange,
-  dataId,
-  sortable,
-  sortData,
-  className,
-  onClick,
-  onColumnsUpdate,
-  resizable = true,
-  filterPlaceholder,
-  filterable,
-  hideable = true,
-  pinnable = true,
-  filter,
-  size,
-  onFilterChange,
-  actions,
-  ...rest
-}: IReqoreTableHeaderCellProps) => {
-  const items = useMemo(() => {
-    let _items: IReqoreDropdownItem[] = [];
+export const ReqoreTableHeaderCell = memo(
+  ({
+    width,
+    maxWidth,
+    minWidth,
+    resizedWidth,
+    grow,
+    align,
+    pin,
+    onSortChange,
+    dataId,
+    sortable,
+    sortData,
+    className,
+    onClick,
+    onColumnsUpdate,
+    resizable = true,
+    filterPlaceholder,
+    filterable,
+    hideable = true,
+    pinnable = true,
+    filter,
+    content,
+    size,
+    onFilterChange,
+    actions,
+    ...rest
+  }: IReqoreTableHeaderCellProps) => {
+    const items = useMemo(() => {
+      let _items: IReqoreDropdownItem[] = [];
 
-    if (resizable || hideable) {
-      if (resizable) {
-        _items.push({
-          label: 'Reset size',
-          icon: 'HistoryLine',
-          disabled: !resizedWidth || width === resizedWidth,
-          onClick: () => {
-            onColumnsUpdate?.(dataId, 'resizedWidth', width);
-          },
-        });
-      }
+      if (resizable || hideable) {
+        if (resizable) {
+          _items.push({
+            label: 'Reset size',
+            icon: 'HistoryLine',
+            disabled: !resizedWidth || width === resizedWidth,
+            onClick: () => {
+              onColumnsUpdate?.(dataId, 'resizedWidth', width);
+            },
+          });
+        }
 
-      if (pinnable) {
-        _items.push({ divider: true, size: 'small', line: true });
+        if (pinnable) {
+          _items.push({ divider: true, size: 'small', line: true });
 
-        _items.push({
-          label: 'Pin left',
-          icon: 'SkipBackLine',
-          active: pin === 'left',
-          intent: pin === 'left' ? 'info' : undefined,
-          onClick: () => {
-            onColumnsUpdate?.(dataId, 'pin', pin !== 'left' ? 'left' : undefined);
-          },
-        });
+          _items.push({
+            label: 'Pin left',
+            icon: 'SkipBackLine',
+            active: pin === 'left',
+            intent: pin === 'left' ? 'info' : undefined,
+            onClick: () => {
+              onColumnsUpdate?.(dataId, 'pin', pin !== 'left' ? 'left' : undefined);
+            },
+          });
 
-        _items.push({
-          label: 'Pin Right',
-          icon: 'SkipForwardLine',
-          active: pin === 'right',
-          intent: pin === 'right' ? 'info' : undefined,
-          onClick: () => {
-            onColumnsUpdate?.(dataId, 'pin', pin !== 'right' ? 'right' : undefined);
-          },
-        });
-      }
+          _items.push({
+            label: 'Pin Right',
+            icon: 'SkipForwardLine',
+            active: pin === 'right',
+            intent: pin === 'right' ? 'info' : undefined,
+            onClick: () => {
+              onColumnsUpdate?.(dataId, 'pin', pin !== 'right' ? 'right' : undefined);
+            },
+          });
+        }
 
-      if (hideable) {
-        _items.push({ divider: true, size: 'small', line: true });
+        if (hideable) {
+          _items.push({ divider: true, size: 'small', line: true });
 
-        _items.push({
-          label: 'Hide column',
-          icon: 'EyeCloseLine',
-          className: 'reqore-table-header-hide',
-          onClick: () => {
-            onColumnsUpdate?.(dataId, 'show', false);
-          },
-        });
+          _items.push({
+            label: 'Hide column',
+            icon: 'EyeCloseLine',
+            className: 'reqore-table-header-hide',
+            onClick: () => {
+              onColumnsUpdate?.(dataId, 'show', false);
+            },
+          });
+        }
       }
-    }
 
-    if (actions) {
-      _items = [..._items, { divider: true, label: 'Other' }, ...actions];
-    }
+      if (actions) {
+        _items = [..._items, { divider: true, label: 'Other' }, ...actions];
+      }
 
-    return _items;
-  }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
+      return _items;
+    }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
 
-  return (
-    <Resizable
-      minWidth={minWidth || width}
-      maxWidth={maxWidth}
-      onResize={(_event, _direction, _component) => {
-        onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
-      }}
-      handleComponent={{
-        right: <StyledTableHeaderResize />,
-      }}
-      style={{
-        overflow: 'hidden',
-        flexGrow: grow,
-      }}
-      size={{
-        width: resizedWidth || width,
-        height: undefined,
-      }}
-      enable={{
-        right: resizable,
-      }}
-    >
-      <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
-        <ReqoreButton
-          {...rest}
-          size={size}
-          readOnly={!sortable && !onClick}
-          className={`${className || ''} reqore-table-header-cell`}
-          rounded={false}
-          textAlign={align}
-          rightIcon={
-            sortable && sortData.by === dataId
-              ? (`Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
-                  | 'ArrowDownFill'
-                  | 'ArrowUpFill')
-              : rest.rightIcon
-          }
-          onClick={(e) => {
-            if (sortable) {
-              onSortChange?.(dataId);
-            }
+    return (
+      <Resizable
+        minWidth={minWidth || width}
+        maxWidth={maxWidth}
+        onResize={(_event, _direction, _component) => {
+          onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
+        }}
+        handleComponent={{
+          right: <StyledTableHeaderResize />,
+        }}
+        style={{
+          overflow: 'hidden',
+          flexGrow: grow,
+        }}
+        size={{
+          width: resizedWidth || width,
+          height: undefined,
+        }}
+        enable={{
+          right: resizable,
+        }}
+      >
+        <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
+          {content ? (
+            content
+          ) : (
+            <ReqoreButton
+              {...rest}
+              size={size}
+              readOnly={!sortable && !onClick}
+              className={`${className || ''} reqore-table-header-cell`}
+              rounded={false}
+              textAlign={align}
+              rightIcon={
+                sortable && sortData.by === dataId
+                  ? (`Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
+                      | 'ArrowDownFill'
+                      | 'ArrowUpFill')
+                  : rest.rightIcon
+              }
+              onClick={(e) => {
+                if (sortable) {
+                  onSortChange?.(dataId);
+                }
 
-            onClick?.(e);
-          }}
-        />
-        {filterable || hideable || resizable ? (
-          <ReqoreDropdown<IReqoreButtonProps>
-            icon='MoreLine'
-            className='reqore-table-header-cell-options'
-            fixed
-            size={size}
-            rounded={false}
-            intent={filter ? 'info' : rest.intent}
-            filterable={filterable}
-            filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
-            filter={filter}
-            onFilterChange={(value) => {
-              onFilterChange?.(dataId, value);
-            }}
-            items={items}
-          />
-        ) : null}
-      </ReqoreControlGroup>
-    </Resizable>
-  );
-};
+                onClick?.(e);
+              }}
+            />
+          )}
+          {filterable || hideable || resizable ? (
+            <ReqoreDropdown<IReqoreButtonProps>
+              icon='MoreLine'
+              className='reqore-table-header-cell-options'
+              fixed
+              size={size}
+              rounded={false}
+              intent={filter ? 'info' : rest.intent}
+              filterable={filterable}
+              filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
+              filter={filter}
+              onFilterChange={(value) => {
+                onFilterChange?.(dataId, value);
+              }}
+              items={items}
+            />
+          ) : null}
+        </ReqoreControlGroup>
+      </Resizable>
+    );
+  }
+);

package/src/components/Table/index.tsx

@@ -59,7 +59,7 @@ export type TReqoreTableColumnContent =
 export interface IReqoreTableColumn extends IReqoreIntent {
   dataId: string;
   show?: boolean;
-  grow?: 1 | 2 | 3 | 4;
+  grow?: 0 | 1 | 2 | 3 | 4;
   width?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -79,8 +79,10 @@ export interface IReqoreTableColumn extends IReqoreIntent {
   header?: {
     columns?: IReqoreTableColumn[];
     component?: React.FC<IReqoreTableHeaderCellProps>;
+    // Content is the same as react children
+    content?: React.ReactNode;
     actions?: IReqoreDropdownItem[];
-  } & Omit<IReqoreButtonProps, 'maxWidth'>;
+  } & Omit<IReqoreButtonProps, 'maxWidth' | 'content'>;
 
   cell?: {
     onClick?: (cellValue: any) => void;

package/src/helpers/utils.ts

@@ -128,3 +128,25 @@ export const alignToFlexAlign = (
       return 'flex-start';
   }
 };
+
+export function decycle(obj, stack = []) {
+  if (!obj || typeof obj !== 'object') return obj;
+
+  if (stack.includes(obj)) return null;
+
+  const s = stack.concat([obj]);
+
+  return Array.isArray(obj)
+    ? obj.map((x) => decycle(x, s))
+    : Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, decycle(v, s)]));
+}
+
+export const stringifyAndDecycleObject = (obj: any): string => {
+  return JSON.stringify(decycle(obj), (_key, value) => {
+    if (typeof value === 'function') {
+      return value.toString();
+    }
+
+    return value;
+  });
+};

package/src/hooks/usePopover.tsx

@@ -57,6 +57,7 @@ export interface IPopover
   maxHeight?: string;
   icon?: IReqoreIconName;
   title?: string;
+  updater?: string | number;
 }
 
 export interface IPopoverOptions extends IPopover {
@@ -164,7 +165,7 @@ const usePopover = ({
     if (openOnMount && targetElement) {
       _addPopover();
     }
-  }, [targetElement?.toString()]);
+  }, [targetElement?.outerHTML]);
 
   useEffect(() => {
     if (targetElement && content) {

package/src/hooks/useTooltip.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { IReqoreTooltip, TReqoreTooltipProp } from '../types/global';
 import usePopover from './usePopover';
 
@@ -8,13 +8,17 @@ export const useTooltip = (
 ): void => {
   const [element, setElement] = useState<HTMLElement | undefined>(undefined);
   const [data, setData] = useState<string | IReqoreTooltip | undefined>(undefined);
+  const content = useMemo(
+    () => (typeof tooltip === 'object' ? tooltip?.content : tooltip),
+    [tooltip]
+  );
 
   useEffect(() => {
-    if (targetElement && tooltip) {
+    if (targetElement && content) {
       setElement(targetElement);
       setData(tooltip);
     }
-  }, [targetElement?.toString(), tooltip?.toString()]);
+  }, [targetElement, content]);
 
   const popoverData = typeof data === 'string' ? { content: data } : data;
 

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -151,7 +151,7 @@ const Template: StoryFn<typeof ReqoreControlGroup> = (args) => {
     <>
       <ReqoreControlGroup {...args}>
         <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-        <ReqoreButton icon='PictureInPictureLine' fluid>
+        <ReqoreButton icon='PictureInPictureLine' fluid shrink={0}>
           Fluid Button
         </ReqoreButton>
         <ReqoreButton

package/src/stories/Table/Table.stories.tsx

@@ -172,7 +172,7 @@ const defaultColumns: IReqoreTableColumn[] = [
     header: {
       icon: 'SettingsLine',
     },
-    width: 100,
+    width: 120,
     align: 'center',
     pin: 'right',
 
@@ -287,6 +287,22 @@ const defaultColumnsWithPinnedColumns: IReqoreTableColumn[] = defaultColumns.map
   }
 );
 
+const defaultColumnsWithCustomContentHeaders: IReqoreTableColumn[] = defaultColumns.map(
+  (column, index) => {
+    if (index === 4) {
+      return {
+        ...column,
+        header: {
+          ...column.header,
+          content: <ReqoreInput icon='PriceTag2Fill' value='Custom input value' rounded={false} />,
+        },
+      };
+    }
+
+    return column;
+  }
+);
+
 const meta = {
   title: 'Collections/Table/Stories',
   component: ReqoreTable,
@@ -519,6 +535,12 @@ export const CustomPaging: Story = {
   },
 };
 
+export const CustomHeaderContent: Story = {
+  args: {
+    columns: defaultColumnsWithCustomContentHeaders,
+  },
+};
+
 const CustomHeaderCell = (props: IReqoreCustomHeaderCellProps) => {
   if (props.hasColumns) {
     return <ReqoreH3 intent='success'>{props.label}</ReqoreH3>;