@qoretechnologies/reqore 0.34.13 → 0.35.0

package/src/components/Dropdown/list.tsx

@@ -28,7 +28,12 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
   listStyle?: React.CSSProperties;
   width?: string;
   height?: string;
+
   filterable?: boolean;
+  onFilterChange?: (query: string) => void;
+  filter?: string | number;
+  filterPlaceholder?: string;
+
   onItemSelect?: TDropdownItemOnClick;
   inputProps?: IReqoreInputProps;
   scrollToSelected?: boolean;
@@ -48,9 +53,12 @@ const ReqoreDropdownList = memo(
     inputProps,
     scrollToSelected,
     paging,
+    onFilterChange,
+    filterPlaceholder,
+    filter,
   }: IReqoreDropdownListProps) => {
     const [_items, setItems] = useState<TReqoreDropdownItems>(items);
-    const [query, setQuery] = useState<string>('');
+    const [query, setQuery] = useState<string | number>(onFilterChange ? '' : filter || '');
     const [menuRef, setMenuRef] = useState<HTMLDivElement>(undefined);
 
     useEffect(() => {
@@ -73,12 +81,16 @@ const ReqoreDropdownList = memo(
           return false;
         }
 
-        return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+        return text.toString().toLowerCase().indexOf(query.toString().toLowerCase()) !== -1;
       });
     }, [items, query, _items]);
 
     const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setQuery(event.target.value);
+      if (onFilterChange) {
+        onFilterChange(event.target.value);
+      } else {
+        setQuery(event.target.value);
+      }
     };
 
     const handleItemClick = (item: IReqoreDropdownItem): void => {
@@ -96,11 +108,11 @@ const ReqoreDropdownList = memo(
         {filterable && (
           <>
             <ReqoreInput
-              value={query}
+              value={onFilterChange ? filter : query}
               icon='SearchLine'
               onChange={handleQueryChange}
-              placeholder={`Search ${size(_items)} items...`}
-              onClearClick={() => setQuery('')}
+              placeholder={filterPlaceholder || `Search ${size(_items)} items...`}
+              onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
               {...inputProps}
             />
             <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />

package/src/components/Input/index.tsx

@@ -73,7 +73,7 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   position: relative;
   overflow: hidden;
   border-radius: ${({ minimal, rounded, _size }) =>
-    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+    minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;
 `;
 
 const StyledIconWrapper = styled.div<IReqoreInputStyle>`
@@ -109,7 +109,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   transition: all 0.2s ease-out;
   border-radius: ${({ minimal, rounded, _size }) =>
-    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+    minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;
   border: ${({ minimal, theme, flat }) =>
     !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
@@ -175,7 +175,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       iconColor,
       rightIconColor,
       flat,
-      rounded = true,
+      rounded,
       minimal,
       children,
       readOnly,

package/src/components/Panel/index.tsx

@@ -47,11 +47,13 @@ import { ReqoreHeading, StyledHeader } from '../Header';
 import ReqoreIcon, { IReqoreIconProps, StyledIconWrapper } from '../Icon';
 import { ReqorePanelNonResponsiveActions } from './NonResponsiveActions';
 
+export interface IReqorePanelSubAction extends Omit<IReqoreDropdownItem, 'value'> {}
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
   group?: IReqorePanelAction[];
-  actions?: Omit<IReqoreDropdownItem[], 'value'>;
+  actions?: IReqorePanelSubAction[];
+  multiSelect?: boolean;
   // Custom react element
   as?: React.ElementType;
   props?: { [key: string | number]: any } | undefined;

package/src/components/Table/cell.tsx

@@ -0,0 +1,117 @@
+import { lighten, rgba } from 'polished';
+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 { 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> {
+  children?: React.ReactNode;
+}
+
+export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
+  ${({ width, grow }) =>
+    css`
+      width: ${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;
+      }
+    `;
+  }}
+`;
+
+export const ReqoreTableBodyCell = (props: IReqoreTableBodyCellProps) => {
+  return <StyledTableCell {...props} />;
+};

package/src/components/Table/header.tsx

@@ -1,12 +1,33 @@
+import { omit } from 'lodash';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { IWithReqoreSize } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import ReqoreTableHeaderCell, { StyledTableHeader } from './headerCell';
+import { IReqoreButtonProps } from '../Button';
+import { IReqoreTableHeaderCellProps, ReqoreTableHeaderCell } from './headerCell';
+import { calculateMinimumCellWidth, getOnlyShownColumns } from './helpers';
+
+export type TColumnsUpdater = <T extends keyof IReqoreTableColumn>(
+  id: string,
+  key: T,
+  value: IReqoreTableColumn[T]
+) => void;
+
+export interface IReqoreCustomHeaderCellProps
+  extends Pick<
+      IReqoreTableHeaderCellProps,
+      'sortData' | 'onSortChange' | 'onColumnsUpdate' | 'onFilterChange'
+    >,
+    Omit<IReqoreTableColumn, 'cell' | 'header'>,
+    IReqoreButtonProps {
+  hasColumns?: boolean;
+}
+export interface IReqoreCustomHeaderCellComponent extends React.FC<IReqoreCustomHeaderCellProps> {}
 
-export interface IReqoreTableSectionProps {
+export interface IReqoreTableSectionProps extends IWithReqoreSize {
   columns: IReqoreTableColumn[];
   leftScroll: number;
   onSortChange?: (sort: string) => void;
@@ -16,6 +37,9 @@ export interface IReqoreTableSectionProps {
   onToggleSelectClick: () => void;
   hasVerticalScroll: boolean;
   selectToggleTooltip?: string;
+  onColumnsUpdate: TColumnsUpdater;
+  onFilterChange?: (dataId: string, value: any) => void;
+  component?: IReqoreCustomHeaderCellComponent;
 }
 
 export interface IReqoreTableSectionStyle {
@@ -70,11 +94,7 @@ const StyledTableHeaderRow = styled.div<{ theme: IReqoreTheme }>`
   display: flex;
   flex: 1;
 
-  ${({ leftScroll }) => css`
-    transform: translate3d(${-leftScroll}px, 0, 0);
-  `}
-
-  ${StyledTableHeader}, ${StyledColumnGroupHeader} {
+  ${StyledColumnGroupHeader} {
     font-size: 13px;
     font-weight: 600;
     padding: 5px 10px;
@@ -95,39 +115,72 @@ const ReqoreTableHeader = ({
   onToggleSelectClick,
   selectToggleTooltip,
   hasVerticalScroll,
+  onColumnsUpdate,
+  onFilterChange,
+  size,
+  component,
 }: IReqoreTableSectionProps) => {
+  const renderHeaderCell = (
+    headerCellComponent: IReqoreCustomHeaderCellComponent,
+    props: IReqoreCustomHeaderCellProps
+  ) => {
+    const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
+
+    return <HeaderCell key={props.dataId} {...props} />;
+  };
+
   const renderColumns = (columns: IReqoreTableColumn[]) =>
-    columns.map(
-      ({ grow, header, props = {}, columns: cols, align, content, onCellClick, ...rest }, index) =>
-        cols ? (
+    getOnlyShownColumns(columns).map(
+      (
+        {
+          grow,
+          align,
+          dataId,
+          header: { columns, onClick, component: headerComponent, ...rest },
+          ...colRest
+        },
+        index
+      ) =>
+        columns ? (
           <StyledColumnGroup
-            width={cols.reduce((wid, col) => wid + (col.width || 80), 0)}
             grow={grow}
             key={index}
             className='reqore-table-column-group'
+            width={getOnlyShownColumns(columns).reduce(
+              (wid, col) => wid + (col.resizedWidth || col.width || 80),
+              0
+            )}
           >
-            <StyledColumnGroupHeader
-              align={align}
-              {...props}
-              className='reqore-table-column-group-header'
-            >
-              {header}
-            </StyledColumnGroupHeader>
+            {renderHeaderCell(headerComponent, {
+              ...rest,
+              ...omit(colRest, ['cell']),
+              dataId,
+              size,
+              readOnly: !onClick,
+              rounded: false,
+              textAlign: align,
+              className: 'reqore-table-column-group-header',
+              resizable: false,
+              hideable: false,
+              hasColumns: true,
+            })}
             <StyledColumnGroupHeaders className='reqore-table-headers'>
-              {renderColumns(cols)}
+              {renderColumns(columns)}
             </StyledColumnGroupHeaders>
           </StyledColumnGroup>
         ) : (
-          <ReqoreTableHeaderCell
-            {...props}
-            {...rest}
-            key={index}
-            sortData={sortData}
-            grow={grow}
-            align={align}
-            header={header}
-            onSortChange={onSortChange}
-          />
+          renderHeaderCell(headerComponent, {
+            ...rest,
+            ...omit(colRest, ['cell']),
+            dataId,
+            size,
+            sortData,
+            grow,
+            align,
+            onSortChange,
+            onColumnsUpdate,
+            onFilterChange,
+          })
         )
     );
 
@@ -147,23 +200,27 @@ const ReqoreTableHeader = ({
       className='reqore-table-header-wrapper'
       hasVerticalScroll={hasVerticalScroll}
     >
-      <StyledTableHeaderRow leftScroll={leftScroll}>
-        {selectable && (
-          <ReqoreTableHeaderCell
-            dataId='selectbox'
-            key='selectbox'
-            sortData={sortData}
-            align='center'
-            onSortChange={onSortChange}
-            icon={getSelectedIcon()}
-            iconSize='15px'
-            width={60}
-            tooltip={selectToggleTooltip || 'Toggle selection on all data'}
-            onClick={() => {
+      <StyledTableHeaderRow
+        style={{
+          transform: `translate3d(${leftScroll ? -leftScroll : 0}px, 0, 0)`,
+        }}
+      >
+        {selectable &&
+          renderHeaderCell(component, {
+            dataId: 'selectbox',
+            sortData,
+            align: 'center',
+            size,
+            onSortChange,
+            icon: getSelectedIcon(),
+            width: calculateMinimumCellWidth(50, size),
+            resizable: false,
+            hideable: false,
+            tooltip: selectToggleTooltip || 'Toggle selection on all data',
+            onClick: () => {
               onToggleSelectClick();
-            }}
-          />
-        )}
+            },
+          })}
         {renderColumns(columns)}
       </StyledTableHeaderRow>
     </StyledTableHeaderWrapper>

package/src/components/Table/headerCell.tsx

@@ -1,18 +1,23 @@
 /* @flow */
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
+import { rgba } from 'polished';
+import { Resizable } from 're-resizable';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { ReqoreButton, ReqoreControlGroup, ReqoreDropdown } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import { changeLightness, getReadableColor } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
-import { useTooltip } from '../../hooks/useTooltip';
-import ReqoreIcon from '../Icon';
+import { getReadableColor } from '../../helpers/colors';
+import { IReqoreButtonProps } from '../Button';
+import { IReqoreDropdownItem } from '../Dropdown/list';
+import { TColumnsUpdater } from './header';
 
 export interface IReqoreTableHeaderCellProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    IReqoreTableColumn {
+  extends Omit<IReqoreTableColumn, 'cell'>,
+    IReqoreButtonProps {
   onSortChange?: (sort: string) => void;
-  sortData: IReqoreTableSort;
+  sortData?: IReqoreTableSort;
+  onColumnsUpdate?: TColumnsUpdater;
+  onFilterChange?: (dataId: string, filter: string) => void;
 }
 
 export interface IReqoreTableHeaderStyle {
@@ -23,95 +28,133 @@ export interface IReqoreTableHeaderStyle {
   interactive?: boolean;
 }
 
-export const StyledTableHeader = styled.div<IReqoreTableHeaderStyle>`
-  ${({ width, grow }) =>
-    css`
-      width: ${!width || width < 80 ? 80 : width}px;
-      flex-grow: ${grow || (width ? undefined : 1)};
-    `};
-
-  ${({ align, theme }) => css`
-    background-color: ${changeLightness(theme.main, 0.03)};
-    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
-  `}
-
-  ${({ interactive, theme }) =>
-    interactive &&
-    css`
-      cursor: pointer;
-      transition: background-color 0.2s ease-out;
-
-      &:hover {
-        color: ${getReadableColor(theme, undefined, undefined)};
-        background-color: ${changeLightness(theme.main, 0.06)};
-      }
-    `};
-`;
-
-const StyledTableHeaderLabel = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+export const StyledTableHeaderResize = styled.div`
+  &:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 1px;
+    height: 70%;
+    border-left: 1px dashed ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  }
 `;
 
-const ReqoreTableHeaderCell = ({
+export const ReqoreTableHeaderCell = ({
   width,
+  resizedWidth,
   grow,
   align,
-  header,
   onSortChange,
   dataId,
   sortable,
   sortData,
-  onClick,
   className,
-  icon,
-  iconSize,
-  tooltip,
-  ...props
+  onClick,
+  onColumnsUpdate,
+  resizable = true,
+  filterPlaceholder,
+  filterable,
+  hideable = true,
+  filter,
+  onFilterChange,
+  ...rest
 }: IReqoreTableHeaderCellProps) => {
-  const [ref, setRef] = useState(null);
+  const items = useMemo(() => {
+    const _items: IReqoreDropdownItem[] = [];
 
-  useTooltip(ref, { content: tooltip || header, delay: 300 });
+    if (resizable || hideable) {
+      _items.push({
+        divider: true,
+        label: 'Options',
+      });
+
+      if (resizable) {
+        _items.push({
+          label: 'Reset size',
+          icon: 'HistoryLine',
+          disabled: !resizedWidth || width === resizedWidth,
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'resizedWidth', width);
+          },
+        });
+      }
+
+      if (hideable) {
+        _items.push({
+          label: 'Hide column',
+          icon: 'EyeCloseLine',
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'show', false);
+          },
+        });
+      }
+    }
+
+    return _items;
+  }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
 
   return (
-    <StyledTableHeader
-      {...props}
-      className={`${className || ''} reqore-table-header-cell`}
-      ref={setRef}
-      width={width}
-      grow={grow}
-      align={align}
-      interactive={sortable || !!onClick}
-      onClick={(event: React.MouseEvent<HTMLDivElement>) => {
-        if (sortable) {
-          onSortChange(dataId);
-        }
-        if (onClick) {
-          onClick(event);
-        }
+    <Resizable
+      minWidth={width}
+      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,
       }}
     >
-      {icon && (
-        <ReqoreIcon icon={icon} size={iconSize || '13px'} margin={header ? 'right' : undefined} />
-      )}
-      <StyledTableHeaderLabel>{header}</StyledTableHeaderLabel>
-      {sortable && (
-        <ReqoreIcon
-          icon={
-            `Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
-              | 'ArrowDownFill'
-              | 'ArrowUpFill'
+      <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
+        <ReqoreButton
+          {...rest}
+          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
           }
-          size={iconSize || '13px'}
-          margin='left'
-          style={{
-            opacity: sortData.by === dataId ? 1 : 0.2,
+          onClick={(e) => {
+            if (sortable) {
+              onSortChange?.(dataId);
+            }
+
+            onClick?.(e);
           }}
         />
-      )}
-    </StyledTableHeader>
+        {filterable || hideable || resizable ? (
+          <ReqoreDropdown<IReqoreButtonProps>
+            icon='MoreLine'
+            className='reqore-table-header-cell-options'
+            fixed
+            rounded={false}
+            intent={filter ? 'info' : undefined}
+            filterable={filterable}
+            filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
+            filter={filter}
+            onFilterChange={(value) => {
+              onFilterChange?.(dataId, value);
+            }}
+            items={items}
+          />
+        ) : null}
+      </ReqoreControlGroup>
+    </Resizable>
   );
 };
-
-export default ReqoreTableHeaderCell;