Merge pull request #314 from qoretechnologies/foxhoundn/bug-table-fix…

…es-313 Table & Message fixes & improvements
qoretechnologies · Aug 8, 2023 · 4b6f980 · 4b6f980
2 parents 23ce39e + 25a2a96
commit 4b6f980
Show file tree

Hide file tree

Showing 13 changed files with 257 additions and 113 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/InternalPopover/index.tsx b/src/components/InternalPopover/index.tsx
@@ -59,8 +59,8 @@ const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
 
 const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   animation: 0.2s ${fadeIn} ease-out;
-  max-width: ${({ maxWidth = '80vw' }) => maxWidth};
-  max-height: ${({ maxHeight = '80vh' }) => maxHeight};
+  max-width: ${({ maxWidth }) => maxWidth};
+  max-height: ${({ maxHeight }) => maxHeight};
   z-index: 999999;
   border-radius: ${RADIUS_FROM_SIZE.normal}px;
   border: ${({ flat, noWrapper, ...rest }: any) =>

diff --git a/src/components/KeyValueTable/index.tsx b/src/components/KeyValueTable/index.tsx
@@ -1,7 +1,9 @@
 import { keys } from 'lodash';
 import { useMemo } from 'react';
+import { SIZE_TO_PX } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
+import { IReqoreButtonProps } from '../Button';
 import { IReqorePanelProps } from '../Panel';
 import ReqoreTable, { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../Table';
 import { IReqoreTableValueProps, ReqoreTableValue } from '../Table/value';
@@ -21,6 +23,7 @@ export interface IReqoreKeyValueTableProps
       | 'height'
       | 'fill'
       | 'filterable'
+      | 'exportable'
       | 'filter'
       | 'onFilterChange'
       | 'filterProps'
@@ -36,6 +39,10 @@ export interface IReqoreKeyValueTableProps
   keyAlign?: IReqoreTableColumn['align'];
   maxKeyWidth?: number;
 
+  sortable?: boolean;
+
+  rowActions?: (key: string, value: TReqoreKeyValueTableValue) => IReqoreButtonProps[];
+
   valueLabel?: string;
   valueIcon?: IReqoreIconName;
   valueAlign?: IReqoreTableColumn['align'];
@@ -61,13 +68,16 @@ export const ReqoreKeyValueTable = ({
   keyAlign = 'left',
   valueAlign = 'left',
   defaultValueFilter,
+  sortable,
+  rowActions,
   ...rest
 }: IReqoreKeyValueTableProps) => {
   const { columns, items } = useMemo(() => {
     let columns: IReqoreTableColumn[] = [
       {
         dataId: 'tableKey',
         grow: 1,
+        sortable,
         width: maxKeyWidth < 150 ? maxKeyWidth : 150,
         pin: 'left',
         hideable: false,
@@ -87,6 +97,7 @@ export const ReqoreKeyValueTable = ({
       {
         dataId: 'value',
         grow: 3,
+        sortable,
         hideable: false,
         filterable: true,
         pinnable: false,
@@ -100,12 +111,34 @@ export const ReqoreKeyValueTable = ({
         },
 
         cell: {
+          tooltip: (value) => ({
+            content: JSON.stringify(value),
+            noArrow: true,
+            useTargetWidth: true,
+          }),
           content: (data) =>
             valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
         },
       },
     ];
 
+    if (rowActions) {
+      columns.push({
+        dataId: 'actions',
+        hideable: false,
+        pin: 'right',
+        header: {
+          icon: 'SettingsLine',
+        },
+        width: SIZE_TO_PX[rest.size || 'normal'] * 2,
+        align: 'center',
+        cell: {
+          padded: 'none',
+          actions: (data) => rowActions(data.tableKey, data.value),
+        },
+      });
+    }
+
     let items: IReqoreTableRowData[] = [];
 
     keys(data).map((key) => {
@@ -123,6 +156,15 @@ export const ReqoreKeyValueTable = ({
       columns={columns}
       data={items}
       {...rest}
+      sort={
+        sortable
+          ? {
+              by: 'tableKey',
+              thenBy: 'value',
+              direction: 'asc',
+            }
+          : undefined
+      }
       className={`${rest.className || ''} reqore-key-value-table`}
     />
   );

diff --git a/src/components/Message/index.tsx b/src/components/Message/index.tsx
@@ -52,6 +52,7 @@ export interface IReqoreMessageProps
   onFinish?: () => any;
   flat?: boolean;
   hasShadow?: boolean;
+  margin?: 'top' | 'bottom' | 'both' | 'none';
 }
 
 export interface IReqoreNotificationStyle extends IReqoreMessageProps {

diff --git a/src/components/Notifications/notification.tsx b/src/components/Notifications/notification.tsx
@@ -61,6 +61,7 @@ export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
   minimal?: boolean;
   size?: TSizes;
   asMessage?: boolean;
+  margin?: 'top' | 'bottom' | 'both' | 'none';
 }
 
 const timeoutAnimation = keyframes`
@@ -84,6 +85,15 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   position: relative;
   transition: all 0.2s ease-out;
 
+  ${({ margin, size = 'normal' }) => css`
+    margin-top: ${margin === 'top' || margin === 'both'
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
+    margin-bottom: ${margin === 'bottom' || margin === 'both'
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
+  `};
+
   // Do not fade in the component if it's a message
   ${({ asMessage }) => {
     if (asMessage) {
@@ -95,7 +105,8 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   }}
 
   &:not(:first-child) {
-    margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
+    margin-top: ${({ asMessage, size }) =>
+      asMessage ? undefined : `${PADDING_FROM_SIZE[size]}px`};
   }
 
   ${({

diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -31,13 +31,16 @@ const Popover = memo(
   }: IReqorePopoverProps) => {
     const [ref, setRef] = useState(undefined);
 
+    console.log(rest);
+
     const popoverData: IPopoverControls = usePopover({ targetElement: ref, ...rest });
 
     useEffect(() => {
       passPopoverData?.(popoverData);
     }, [popoverData]);
 
     if (isReqoreComponent) {
+      console.log(Component);
       return (
         <Component
           {...componentProps}

diff --git a/src/components/Table/body.tsx b/src/components/Table/body.tsx
@@ -42,29 +42,32 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
 
     useMount(() => {
       targetRef.current?.addEventListener('wheel', (e) => {
-        if (e.deltaY) {
-          e.preventDefault();
+        // Only scroll if the element is scrollable
+        if (refs[type].current?.scrollHeight > refs[type].current?.clientHeight) {
+          if (e.deltaY) {
+            e.preventDefault();
 
-          const currentScroll = refs[type].current?.scrollTop + e.deltaY;
+            const currentScroll = refs[type].current?.scrollTop + e.deltaY;
 
-          onScrollChange?.(currentScroll > 0);
+            onScrollChange?.(currentScroll > 0);
 
-          refs[type].current?.scrollTo({ top: currentScroll });
+            refs[type].current?.scrollTo({ top: currentScroll });
 
-          if (type === 'left') {
-            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
-            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
-          } else if (type === 'main') {
-            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
-            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
-          } else if (type === 'right') {
-            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
-            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            if (type === 'left') {
+              refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+              refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+            } else if (type === 'main') {
+              refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+              refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+            } else if (type === 'right') {
+              refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+              refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            }
           }
-        }
 
-        if (e.deltaX && type === 'main') {
-          refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+          if (e.deltaX && type === 'main') {
+            refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+          }
         }
       });
     });

diff --git a/src/components/Table/cell.tsx b/src/components/Table/cell.tsx
@@ -1,17 +1,22 @@
 import { lighten, rgba } from 'polished';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn } from '.';
 import { TEXT_FROM_SIZE } from '../../constants/sizes';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IWithReqoreTooltip } from '../../types/global';
 import { TReqoreColor } from '../Effect';
 import { IReqoreTableCellStyle } from './row';
 
 export interface IReqoreCustomTableBodyCellProps extends IReqoreTableBodyCellProps {}
 export interface IReqoreCustomTableBodyCell extends React.FC<IReqoreCustomTableBodyCellProps> {}
 export interface IReqoreTableBodyCellProps
   extends Partial<IReqoreTableColumn>,
-    React.HTMLAttributes<HTMLDivElement> {
+    React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreTooltip {
   children?: React.ReactNode;
   padded?: IReqoreTableColumn['cell']['padded'];
 }
@@ -118,6 +123,12 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   }}
 `;
 
-export const ReqoreTableBodyCell = (props: IReqoreTableBodyCellProps) => {
-  return <StyledTableCell {...props} />;
-};
+export const ReqoreTableBodyCell = forwardRef<HTMLButtonElement, IReqoreTableBodyCellProps>(
+  (props: IReqoreTableBodyCellProps, ref) => {
+    const { targetRef } = useCombinedRefs(ref);
+
+    useTooltip(targetRef.current, props.tooltip);
+
+    return <StyledTableCell {...props} ref={targetRef} />;
+  }
+);