@qoretechnologies/reqore 0.34.13 → 0.35.1

package/src/components/Table/row.tsx

@@ -1,6 +1,5 @@
 /* @flow */
 import { isFunction, isString } from 'lodash';
-import { lighten, rgba } from 'polished';
 import React, { ReactElement, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
@@ -10,16 +9,17 @@ import {
   TReqoreTableColumnContent,
 } from '.';
 import { ReqorePopover } from '../..';
-import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
-import { TReqoreColor, TReqoreHexColor } from '../Effect';
+import { IReqoreTooltip } from '../../types/global';
+import { TReqoreHexColor } from '../Effect';
 import { ReqoreH4 } from '../Header';
 import ReqoreIcon from '../Icon';
 import { ReqoreP } from '../Paragraph';
 import ReqoreTag from '../Tag';
 import { TimeAgo } from '../TimeAgo';
+import { IReqoreCustomTableBodyCell, ReqoreTableBodyCell } from './cell';
+import { calculateMinimumCellWidth, getOnlyShownColumns } from './helpers';
 
 export interface IReqoreTableRowOptions {
   columns: IReqoreTableColumn[];
@@ -32,11 +32,13 @@ export interface IReqoreTableRowOptions {
   selectedRowIntent?: TReqoreIntent;
   size?: TSizes;
   flat?: boolean;
+  cellComponent?: IReqoreCustomTableBodyCell;
+  rowComponent?: IReqoreCustomTableRow;
 }
-
-export interface IReqoreTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface IReqoreCustomTableRowProps extends IReqoreTableRowOptions {}
+export interface IReqoreCustomTableRow extends React.FC<IReqoreCustomTableRowProps> {}
+export interface IReqoreTableRowProps extends React.HTMLAttributes<HTMLDivElement> {
   data: IReqoreTableRowOptions;
-  style: React.StyleHTMLAttributes<HTMLDivElement>;
   index: number;
 }
 
@@ -60,8 +62,8 @@ export const StyledTableRow = styled.div<IReqoreTableRowStyle>`
 
 export interface IReqoreTableCellStyle {
   width?: number;
-  grow?: number;
   theme?: IReqoreTheme;
+  grow: 1 | 2 | 3 | 4;
   align?: 'center' | 'left' | 'right';
   intent?: TReqoreIntent;
   interactive?: boolean;
@@ -74,105 +76,9 @@ export interface IReqoreTableCellStyle {
   selectedIntent?: TReqoreIntent;
   even?: boolean;
   striped?: boolean;
+  padded?: IReqoreTableColumn['cell']['padded'];
 }
 
-export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
-  ${({ width, grow }) =>
-    css`
-      width: ${!width || width < 80 ? 80 : width}px;
-      flex-grow: ${grow || (width ? undefined : 1)};
-    `}
-
-  ${({
-    theme,
-    align,
-    interactive,
-    interactiveCell,
-    intent,
-    size,
-    flat,
-    striped,
-    even,
-    selected,
-    selectedIntent,
-    disabled,
-    hovered,
-  }: IReqoreTableCellStyle) => {
-    const getBackgroundColor = (): TReqoreColor => {
-      let color = theme.main;
-      let opacity = 0;
-      // Is there any intent
-      if (intent || (selected && selectedIntent)) {
-        color = theme.intents[intent || selectedIntent];
-        opacity += 0.02;
-      }
-      // Is the table striped and this row odd
-      if (striped && !even) {
-        opacity += 0.05;
-      }
-      // Is this row selected
-      if (selected) {
-        opacity += 0.02;
-      }
-      // Is this row hovered
-      if (hovered) {
-        opacity += 0.08;
-      }
-
-      // Set the color as transparent if opacity is 0
-      if (opacity === 0) {
-        return 'transparent';
-      }
-
-      return changeLightness(color, opacity);
-    };
-
-    const backgroundColor = getBackgroundColor();
-
-    return css`
-      display: flex;
-      align-items: center;
-      justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
-      flex-shrink: 0;
-      border-bottom: ${!flat ? '1px solid ' : undefined};
-
-      height: 100%;
-      padding: 0 10px;
-      font-size: ${TEXT_FROM_SIZE[size]}px;
-      background-color: ${backgroundColor === 'transparent'
-        ? 'transparent'
-        : rgba(getBackgroundColor(), 0.8)};
-      color: ${getReadableColorFrom(
-        backgroundColor === 'transparent' ? theme.main : backgroundColor,
-        !hovered
-      )};
-      border-color: ${changeLightness(
-        backgroundColor === 'transparent' ? theme.main : backgroundColor,
-        0.1
-      )};
-      transition: background-color 0.2s ease-out;
-      opacity: ${disabled ? 0.2 : 1};
-      pointer-events: ${disabled ? 'none' : undefined};
-      cursor: ${interactive || interactiveCell ? 'pointer' : 'default'};
-
-      ${interactiveCell &&
-      css`
-        &:hover {
-          background-color: ${lighten(0.2, getBackgroundColor())};
-        }
-      `}
-
-      p.reqore-table-text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        margin: 0;
-        padding: 0;
-      }
-    `;
-  }}
-`;
-
 const ReqoreTableRow = ({
   data: {
     data,
@@ -185,6 +91,8 @@ const ReqoreTableRow = ({
     size,
     selectedRowIntent = 'info',
     flat,
+    cellComponent,
+    rowComponent,
   },
   style,
   index,
@@ -192,6 +100,9 @@ const ReqoreTableRow = ({
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const isSelected = selected.find((selectId) => selectId === data[index]._selectId);
 
+  const CellComponent = cellComponent || ReqoreTableBodyCell;
+  const RowComponent = rowComponent || StyledTableRow;
+
   const renderContent = (
     content: TReqoreTableColumnContent,
     data: any,
@@ -200,7 +111,7 @@ const ReqoreTableRow = ({
     if (isFunction(content)) {
       const Content = content;
 
-      return <Content {...data} />;
+      return <Content {...data} _size={size} _dataId={dataId} />;
     }
 
     if (isString(content)) {
@@ -244,35 +155,47 @@ const ReqoreTableRow = ({
   };
 
   const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
-    columns.map(
-      ({ width, grow, dataId, content, columns, align, onCellClick, cellTooltip, intent }) =>
-        columns ? (
-          renderCells(columns, data)
-        ) : (
+    getOnlyShownColumns(columns).map(
+      ({ width, resizedWidth, grow, dataId, cell, header, align, intent }) => {
+        if (header.columns) {
+          return renderCells(header.columns, data);
+        }
+
+        // Build the tooltip
+        const tooltip: IReqoreTooltip = cell?.tooltip
+          ? typeof cell?.tooltip(data[index][dataId]) !== 'object'
+            ? {
+                content: cell.tooltip(data[index][dataId]) as string,
+              }
+            : (cell.tooltip(data[index][dataId]) as IReqoreTooltip)
+          : {};
+
+        return (
           <ReqorePopover
             key={dataId}
-            component={StyledTableCell}
+            component={CellComponent}
             isReqoreComponent
             componentProps={
               {
-                width,
+                width: resizedWidth || width,
                 grow,
                 align,
                 size,
                 striped,
+                padded: cell?.padded,
                 disabled: data[index]._disabled,
                 selected: !!isSelected,
                 selectedIntent: selectedRowIntent,
                 flat,
                 even: index % 2 === 0 ? true : false,
-                intent: intent || data[index]._intent,
+                intent: cell?.intent || data[index]._intent || intent,
                 hovered: isHovered,
-                interactive: !!onCellClick || !!onRowClick,
-                interactiveCell: !!onCellClick,
+                interactive: !!cell?.onClick || !!onRowClick,
+                interactiveCell: !!cell?.onClick,
                 onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-                  if (onCellClick) {
+                  if (cell?.onClick) {
                     e.stopPropagation();
-                    onCellClick(data[index]);
+                    cell.onClick(data[index]);
                   } else if (onRowClick) {
                     e.stopPropagation();
                     onRowClick(data[index]);
@@ -284,15 +207,16 @@ const ReqoreTableRow = ({
                 className: 'reqore-table-cell',
               } as IReqoreTableCellStyle
             }
-            content={cellTooltip ? cellTooltip(data[index]) : undefined}
+            {...tooltip}
           >
-            {renderContent(content, data[index], dataId)}
+            {renderContent(cell?.content, data[index], dataId)}
           </ReqorePopover>
-        )
+        );
+      }
     );
 
   return (
-    <StyledTableRow
+    <RowComponent
       style={style}
       className='reqore-table-row'
       interactive={!!onRowClick}
@@ -307,9 +231,9 @@ const ReqoreTableRow = ({
       }}
     >
       {selectable && (
-        <StyledTableCell
+        <CellComponent
           align='center'
-          width={60}
+          width={calculateMinimumCellWidth(50, size)}
           className='reqore-table-cell'
           {...{
             size,
@@ -343,10 +267,10 @@ const ReqoreTableRow = ({
             size={size}
             style={{ opacity: !data[index]._selectId || !isSelected ? 0.4 : 1 }}
           />
-        </StyledTableCell>
+        </CellComponent>
       )}
       {renderCells(columns, data)}
-    </StyledTableRow>
+    </RowComponent>
   );
 };
 

package/src/hooks/useQueryWithDelay.ts

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { useDebounce, useUpdateEffect } from 'react-use';
+
+export const useQueryWithDelay = (
+  defaultQuery: string = '',
+  delay: number = 300,
+  onQueryChange?: (query: string | number) => void
+) => {
+  const [query, setQuery] = useState<string>(defaultQuery);
+  const [preQuery, setPreQuery] = useState<string>(defaultQuery);
+
+  useUpdateEffect(() => {
+    onQueryChange?.(query);
+  }, [query]);
+
+  useDebounce(
+    () => {
+      setQuery(preQuery);
+    },
+    delay,
+    [preQuery]
+  );
+
+  return {
+    query,
+    setQuery,
+    setPreQuery,
+    preQuery,
+  };
+};

package/src/index.tsx

@@ -46,6 +46,9 @@ export { default as ReqoreSidebar } from './components/Sidebar';
 export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
 export { ReqoreSpinner } from './components/Spinner';
 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 { default as ReqoreTabs } from './components/Tabs';
 export { default as ReqoreTabsContent } from './components/Tabs/content';
 export { default as ReqoreTabsListItem } from './components/Tabs/item';

package/src/mock/tableData.ts

@@ -1,29 +1,49 @@
-import { IReqoreTableColumn } from '../components/Table';
+import { IReqoreTableProps } from '../components/Table';
 import data from './data.json';
 
 export const tableData = data;
-export default {
-  columns: [
-    {
-      dataId: 'id',
-      header: 'ID',
-      width: 50,
-      align: 'center',
+export const testColumns: IReqoreTableProps['columns'] = [
+  {
+    dataId: 'id',
+    header: { label: 'ID' },
+    width: 50,
+    align: 'center',
+  },
+  {
+    dataId: 'name',
+    header: {
+      label: 'Name',
+      columns: [
+        { dataId: 'firstName', header: { label: 'First Name' }, width: 150 },
+        { dataId: 'lastName', header: { label: 'Last Name' }, width: 150 },
+      ],
     },
-    { dataId: 'firstName', header: 'First Name', width: 150 },
-    { dataId: 'lastName', header: 'Last Name', width: 150 },
-    { dataId: 'address', header: 'Address', width: 300, grow: 2 },
-    {
-      dataId: 'age',
-      header: 'Really long age header',
-      width: 50,
-      align: 'center',
+  },
+  { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
+  {
+    dataId: 'age',
+    header: { label: 'Really long age header' },
+    width: 50,
+    align: 'center',
+    cell: {
       intent: 'success',
     },
-    { dataId: 'occupation', header: 'Ocuppation', width: 200 },
-    { dataId: 'group', header: 'Group', width: 150, intent: 'muted' },
-    { dataId: 'date', header: 'Date', width: 150, content: 'time-ago' },
-  ] as IReqoreTableColumn[],
+  },
+  {
+    dataId: 'data',
+    header: {
+      label: 'Data',
+      columns: [
+        { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
+        { dataId: 'group', header: { label: 'Group' }, width: 150, intent: 'muted' },
+      ],
+    },
+  },
+  { dataId: 'date', header: { label: 'Date' }, width: 150, cell: { content: 'time-ago' } },
+];
+
+export default {
+  columns: testColumns,
   data: data.map((datum) => ({
     ...datum,
     date: Date.now(),

package/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -6,7 +6,7 @@ import { buildTemplate } from '../utils';
 import { SizeArg } from '../utils/args';
 
 export default {
-  title: 'Components/Breadcrumbs',
+  title: 'Navigation/Breadcrumbs/Stories',
   argTypes: {
     withTabs: {
       name: 'With tabs',

package/src/stories/Button/Button.stories.tsx

@@ -6,7 +6,7 @@ import { ReqoreControlGroup } from '../../index';
 import { IconArg, SizeArg } from '../utils/args';
 
 export default {
-  title: 'Components/Button',
+  title: 'Form/Button/Stories',
   parameters: {
     jest: ['button.test.tsx'],
   },

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import Checkbox from '../../components/Checkbox';
 import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
 
 export default {
-  title: 'Components/Checkbox',
+  title: 'Form/Checkbox/Stories',
   parameters: ['checkbox.test.tsx'],
 } as ComponentMeta<typeof Checkbox>;
 

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

@@ -14,7 +14,7 @@ export interface IColumnsStoryArgs extends IReqoreColumnsProps {
 const { createArg, disableArgs } = argManager<IReqoreCollectionProps>();
 
 export default {
-  title: 'Components/Collection',
+  title: 'Collections/Collection/Stories',
   component: ReqoreCollection,
   argTypes: {
     ...createArg('stacked', {
@@ -225,3 +225,21 @@ CustomFilteringSearchingPaging.args = {
   fill: true,
   items: [...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection],
 } as IReqoreCollectionProps;
+
+export const DefaultFilter = Template.bind({});
+DefaultFilter.args = {
+  inputProps: {
+    fluid: true,
+  },
+  defaultQuery: 'Med',
+  paging: {
+    itemsPerPage: 55,
+    scrollToTopOnPageChange: true,
+  },
+  inputInTitle: false,
+  responsiveTitle: true,
+  size: 'small',
+  padded: false,
+  fill: true,
+  items: [...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection],
+} as IReqoreCollectionProps;

package/src/stories/Columns/Columns.stories.tsx

@@ -18,7 +18,7 @@ export interface IColumnsStoryArgs extends IReqoreColumnsProps {
 const { createArg, disableArgs } = argManager<IColumnsStoryArgs>();
 
 export default {
-  title: 'Components/Columns',
+  title: 'Layout/Columns/Stories',
   component: ReqoreColumns,
   argTypes: {
     ...createArg('multipleColumns', {

package/src/stories/Comment/Comment.stories.tsx

@@ -6,7 +6,7 @@ import { argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreCommentFeedProps>();
 
 export default {
-  title: 'Components/Comments',
+  title: 'Other/Comments/Stories',
   argTypes: {
     ...createArg('gapSize', {
       defaultValue: '0',

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

@@ -14,7 +14,7 @@ import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
 export default {
-  title: 'Components/Control Group',
+  title: 'Form/Control Group/Stories',
   argTypes: {
     ...SizeArg,
     ...GapSizeArg,

package/src/stories/Drawer/Drawer.stories.tsx

@@ -15,7 +15,7 @@ import { FlatArg, IntentArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreDrawerProps>();
 
 export default {
-  title: 'Components/Drawer',
+  title: 'Dialogs/Drawer/Stories',
   parameters: {
     chromatic: {
       viewports: [450, 600, 1440],
@@ -170,8 +170,8 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
           {
             label: 'More actions',
             actions: [
-              { value: 'Sub Test', icon: 'FileDownloadLine' },
-              { value: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
+              { label: 'Sub Test', icon: 'FileDownloadLine' },
+              { label: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
             ],
             intent: 'info',
           },
@@ -189,8 +189,8 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
             label: 'More actions',
             position: 'right',
             actions: [
-              { value: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
-              { value: 'Sub Test 2', icon: 'FileDownloadLine' },
+              { label: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
+              { label: 'Sub Test 2', icon: 'FileDownloadLine' },
             ],
           },
         ]}

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -7,7 +7,7 @@ import { argManager } from '../utils/args';
 const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
 
 export default {
-  title: 'Components/Dropdown',
+  title: 'Form/Dropdown/Stories',
   parameters: {
     chromatic: {
       delay: 1500,
@@ -225,6 +225,16 @@ ScrollToSelectedItem.args = {
   scrollToSelected: true,
   label: 'Dropdown that scrolls to selected item',
 };
+
+export const WithCustomFilter: Story<IReqoreDropdownProps> = Template.bind({});
+WithCustomFilter.args = {
+  label: 'Dropdown with custom filter',
+  filterPlaceholder: 'Custom filter placeholder',
+  filter: 'something',
+  onFilterChange: (value) => {
+    console.log(value);
+  },
+};
 export const WithPaging: Story<IReqoreDropdownProps> = Template.bind({});
 WithPaging.args = {
   paging: {

package/src/stories/Header/Header.stories.tsx

@@ -4,7 +4,7 @@ import { ReqoreControlGroup, ReqoreHeading } from '../../index';
 import { IntentArg } from '../utils/args';
 
 export default {
-  title: 'Components/Heading',
+  title: 'Other/Heading/Stories',
   argTypes: {
     ...IntentArg,
   },

package/src/stories/Icon/Icon.stories.tsx

@@ -3,7 +3,7 @@ import { IReqoreIconProps } from '../../components/Icon';
 import { ReqoreIcon, ReqorePanel } from '../../index';
 
 export default {
-  title: 'Components/Icon',
+  title: 'Other/Icon/Stories',
 } as Meta;
 
 export const Icon: Story<IReqoreIconProps> = () => {

package/src/stories/Input/Input.stories.tsx

@@ -5,7 +5,7 @@ import { ReqoreControlGroup } from '../../index';
 import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
 
 export default {
-  title: 'Components/Input',
+  title: 'Form/Input/Stories',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,

package/src/stories/Menu/Menu.stories.tsx

@@ -13,7 +13,7 @@ import { IntentArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreMenuProps>();
 
 export default {
-  title: 'Components/Menu',
+  title: 'Navigation/Menu/Stories',
   argTypes: {
     ...createArg('width', {
       type: 'string',

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

@@ -6,7 +6,7 @@ import { FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreMessageProps>();
 
 export default {
-  title: 'Components/Message',
+  title: 'Other/Message/Stories',
   argTypes: {
     ...SizeArg,
     ...FlatArg,

package/src/stories/Modal/Modal.stories.tsx

@@ -8,7 +8,7 @@ import { FlatArg, IntentArg, argManager } from '../utils/args';
 const { createArg } = argManager<IReqoreModalProps>();
 
 export default {
-  title: 'Components/Modal',
+  title: 'Dialogs/Modal/Stories',
   argTypes: {
     ...IntentArg,
     ...FlatArg,

package/src/stories/MultiSelect/MultiSelect.stories.tsx

@@ -8,7 +8,7 @@ import { FlatArg, IconArg, MinimalArg, SizeArg, argManager } from '../utils/args
 const { createArg } = argManager<IReqoreMultiSelectProps>();
 
 export default {
-  title: 'Components/Multi Select',
+  title: 'Form/Multi Select/Stories',
   parameters: {
     chromatic: {
       delay: 500,

package/src/stories/Navbar/Navbar.stories.tsx

@@ -17,7 +17,7 @@ import {
 import { FlatArg, NoContentArg } from '../utils/args';
 
 export default {
-  title: 'Components/Header - Footer Navbar',
+  title: 'Layout/Header & Footer/Stories',
   argTypes: {
     ...FlatArg,
     ...NoContentArg,

package/src/stories/Notifications/Interactive.stories.tsx

@@ -6,7 +6,7 @@ import { IReqoreUIProviderProps } from '../../containers/UIProvider';
 import { ReqoreUIProvider, useReqoreProperty } from '../../index';
 
 export default {
-  title: 'Components/Notifications/Interactive',
+  title: 'Other/Notifications/Interactive/Stories',
   component: ReqoreNotification,
 } as Meta;
 

package/src/stories/Notifications/Notification.stories.tsx

@@ -9,7 +9,7 @@ import { IReqoreUIProviderProps } from '../../containers/UIProvider';
 import { ReqoreTag, ReqoreUIProvider } from '../../index';
 
 export default {
-  title: 'Components/Notifications/Item',
+  title: 'Other/Notifications/Item/Stories',
   component: ReqoreNotification,
 } as Meta;
 

package/src/stories/Notifications/Notifications.stories.tsx

@@ -10,7 +10,7 @@ import { IReqoreUIProviderProps } from '../../containers/UIProvider';
 import { ReqoreUIProvider } from '../../index';
 
 export default {
-  title: 'Components/Notifications/Wrapper',
+  title: 'Other/Notifications/Wrapper/Stories',
   component: ReqoreNotification,
 } as Meta;