@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/components/Sidebar/item.tsx

@@ -0,0 +1,269 @@
+import classnames from 'classnames';
+import map from 'lodash/map';
+import { useContext } from 'react';
+import { useMount } from 'react-use';
+import { IQorusSidebarItem } from '.';
+import { ReqorePopover } from '../..';
+import { IReqoreTheme } from '../../constants/theme';
+import ThemeContext from '../../context/ThemeContext';
+import { getMainColor, getReadableColor } from '../../helpers/colors';
+import { isActiveMulti } from '../../helpers/sidebar';
+import ReqoreIcon from '../Icon';
+
+export interface SidebarItemProps {
+  itemData: IQorusSidebarItem;
+  isCollapsed?: boolean;
+  subItem?: boolean;
+  onSectionToggle?: (sectionId: string) => any;
+  isExpanded?: boolean;
+  isActive?: boolean;
+  tooltip?: string;
+  children?: any;
+  expandedSection?: string;
+  onFavoriteClick?: Function;
+  onUnfavoriteClick?: Function;
+  favoriteItems?: any;
+  formatItemName?: (itemName: string) => string;
+  currentPath?: string;
+  sectionName?: string;
+  hasFavorites?: boolean;
+  useNativeTitle?: boolean;
+  bookmarks?: string[];
+  onClick(): void;
+}
+
+export interface ISidebarTooltipProps {
+  isCollapsed?: boolean;
+  children: any;
+  itemData: IQorusSidebarItem;
+  isActive: boolean;
+  isSubcategory: boolean;
+  isSubitem: boolean;
+  onClick: any;
+  useNativeTitle?: boolean;
+}
+
+const SidebarItemTooltip: Function = ({
+  isCollapsed,
+  children,
+  itemData,
+  isActive,
+  isSubitem,
+  isSubcategory,
+  onClick,
+  useNativeTitle,
+}: ISidebarTooltipProps) => {
+  const Element = itemData.as || 'div';
+
+  if (useNativeTitle) {
+    return (
+      //@ts-ignore
+      <Element
+        {...itemData.props}
+        onClick={(e) => {
+          itemData.props?.onClick?.(e);
+          onClick?.(e);
+        }}
+        className={classnames('sidebarItem', 'sidebarLink', {
+          sidebarSubItem: isSubitem,
+          active: isActive,
+          submenuCategory: isSubcategory,
+        })}
+        title={itemData.name}
+      >
+        {children}
+      </Element>
+    );
+  }
+
+  return (
+    //@ts-ignore
+    <ReqorePopover
+      component={Element}
+      componentProps={{
+        ...itemData.props,
+        onClick: (e) => {
+          itemData.props?.onClick?.(e);
+          onClick?.(e);
+        },
+        className: classnames('sidebarItem', 'sidebarLink', {
+          sidebarSubItem: isSubitem,
+          active: isActive,
+          submenuCategory: isSubcategory,
+        }),
+      }}
+      content={itemData.name}
+      placement='right'
+      isReqoreComponent
+      show={isCollapsed}
+    >
+      {children}
+    </ReqorePopover>
+  );
+};
+
+const SidebarItem = ({
+  itemData,
+  isCollapsed,
+  subItem,
+  onSectionToggle,
+  isExpanded,
+  onFavoriteClick,
+  onUnfavoriteClick,
+  formatItemName,
+  currentPath,
+  sectionName,
+  hasFavorites,
+  useNativeTitle,
+  onClick,
+}: SidebarItemProps) => {
+  const handleFavoriteClick = (event) => {
+    event.persist();
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (onFavoriteClick) {
+      onFavoriteClick(itemData.id);
+    }
+  };
+
+  const handleUnfavoriteClick = (event) => {
+    event.persist();
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (onUnfavoriteClick) {
+      onUnfavoriteClick(itemData.id);
+    }
+  };
+
+  const isActive = isActiveMulti(
+    itemData.activePaths || [itemData.props?.href],
+    currentPath,
+    itemData.exact
+  );
+
+  const getItemName: (itemName: string) => string = (itemName) =>
+    formatItemName ? formatItemName(itemName) : itemName;
+
+  return (
+    <>
+      <SidebarItemTooltip
+        isCollapsed={isCollapsed}
+        itemData={itemData}
+        isActive={isActive}
+        isSubitem={subItem}
+        useNativeTitle={useNativeTitle}
+        onClick={
+          onSectionToggle
+            ? () => {
+                onSectionToggle(itemData.name);
+              }
+            : () => void onClick?.()
+        }
+      >
+        <ReqoreIcon icon={itemData.icon} margin={isCollapsed ? undefined : 'right'} />{' '}
+        {!isCollapsed && getItemName(itemData.name)}
+        {itemData.submenu && (
+          <ReqoreIcon
+            icon={isExpanded ? 'ArrowUpSFill' : 'ArrowDownSFill'}
+            className='submenuExpand'
+          />
+        )}
+        {!itemData.submenu && !isCollapsed && hasFavorites ? (
+          <>
+            {sectionName === '_qorusBookmarks' ? (
+              <ReqoreIcon
+                icon='Bookmark3Fill'
+                className='favorite'
+                onClick={handleUnfavoriteClick}
+              />
+            ) : (
+              <ReqoreIcon icon='Bookmark3Line' className='favorite' onClick={handleFavoriteClick} />
+            )}
+          </>
+        ) : null}
+      </SidebarItemTooltip>
+    </>
+  );
+};
+
+const SidebarItemWrapper = ({
+  itemData,
+  isCollapsed,
+  onSectionToggle,
+  expandedSection,
+  favoriteItems,
+  currentPath,
+  onFavoriteClick,
+  onUnfavoriteClick,
+  hasFavorites,
+  sectionName,
+  useNativeTitle,
+  onClick,
+}: SidebarItemProps) => {
+  const theme: IReqoreTheme = useContext(ThemeContext);
+
+  useMount(() => {
+    if (
+      !itemData.element &&
+      isActiveMulti(itemData.activePaths || [itemData.props?.href], currentPath, itemData.exact)
+    ) {
+      onSectionToggle(itemData.name);
+    }
+  });
+
+  if (itemData.element) {
+    const { element: Element } = itemData;
+
+    return (
+      //@ts-ignore
+      <Element
+        isCollapsed={isCollapsed}
+        backgroundColor={theme.sidebar?.main || theme.main}
+        textColor={
+          theme.sidebar?.color ||
+          getReadableColor(theme, undefined, undefined, true, getMainColor(theme, 'sidebar'))
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      <SidebarItem
+        itemData={itemData}
+        isCollapsed={isCollapsed}
+        onSectionToggle={itemData.submenu && onSectionToggle}
+        isExpanded={expandedSection === itemData.name}
+        currentPath={currentPath}
+        favoriteItems={favoriteItems}
+        onFavoriteClick={onFavoriteClick}
+        onUnfavoriteClick={onUnfavoriteClick}
+        sectionName={sectionName}
+        hasFavorites={hasFavorites}
+        useNativeTitle={useNativeTitle}
+        onClick={onClick}
+      />
+      {expandedSection === itemData.name &&
+        map(itemData.submenu, (subItemData: any, key: number) => (
+          <SidebarItem
+            itemData={subItemData}
+            key={key}
+            isCollapsed={isCollapsed}
+            subItem
+            currentPath={currentPath}
+            favoriteItems={favoriteItems}
+            onFavoriteClick={onFavoriteClick}
+            onUnfavoriteClick={onUnfavoriteClick}
+            sectionName={sectionName}
+            hasFavorites={hasFavorites}
+            useNativeTitle={useNativeTitle}
+            onClick={onClick}
+          />
+        ))}
+    </>
+  );
+};
+
+export default SidebarItemWrapper;

package/src/components/Table/body.tsx

@@ -0,0 +1,46 @@
+import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import { useScroll } from 'react-use';
+import { FixedSizeList as List } from 'react-window';
+import { TABLE_SIZE_TO_PX } from '../../constants/sizes';
+import ReqoreTableRow, { IReqoreTableRowOptions } from './row';
+
+export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
+  setLeftScroll: Dispatch<SetStateAction<number>>;
+  rowHeight?: number;
+  height: number;
+}
+
+const ReqoreTableBody = ({
+  data,
+  setLeftScroll,
+  height,
+  rowHeight,
+  size = 'normal',
+  ...rest
+}: IReqoreTableSectionBodyProps) => {
+  const ref = useRef(null);
+  const { x }: { x: number } = useScroll(ref);
+
+  useEffect(() => {
+    setLeftScroll(x);
+  }, [x]);
+
+  return (
+    <List
+      outerRef={ref}
+      itemCount={data.length}
+      height={height}
+      className='reqore-table-body'
+      itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
+      itemData={{
+        data,
+        size,
+        ...rest,
+      }}
+    >
+      {ReqoreTableRow}
+    </List>
+  );
+};
+
+export default ReqoreTableBody;

package/src/components/Table/header.tsx

@@ -0,0 +1,173 @@
+import styled, { css } from 'styled-components';
+import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { IReqoreTheme } from '../../constants/theme';
+import { changeLightness } from '../../helpers/colors';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreTableHeaderCell, { StyledTableHeader } from './headerCell';
+import { alignToFlex } from './row';
+
+export interface IReqoreTableSectionProps {
+  columns: IReqoreTableColumn[];
+  leftScroll: number;
+  onSortChange?: (sort: string) => void;
+  sortData: IReqoreTableSort;
+  selectable?: boolean;
+  selectedQuant: 'none' | 'all' | 'some';
+  onToggleSelectClick: () => void;
+  hasVerticalScroll: boolean;
+  selectToggleTooltip?: string;
+}
+
+export interface IReqoreTableSectionStyle {
+  leftScroll: number;
+  hasVerticalScroll: boolean;
+  theme: IReqoreTheme;
+}
+
+const StyledTableHeaderWrapper = styled.div<IReqoreTableSectionStyle>`
+  ${({ leftScroll }) => css`
+    display: flex;
+    flex-flow: column;
+    transform: translate3d(${-leftScroll}px, 0, 0);
+
+    ${({ theme }) => css`
+      background-color: ${theme.main};
+    `}
+  `}
+`;
+
+export interface IReqoreTableHeaderStyle {
+  width?: number;
+  grow?: number;
+  theme: IReqoreTheme;
+  align?: 'center' | 'left' | 'right';
+}
+
+export const StyledColumnGroupHeader = styled.div<IReqoreTableHeaderStyle>`
+  ${({ align, theme }) => css`
+    background-color: ${changeLightness(theme.main, 0.035)};
+    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+  `}
+`;
+
+const StyledColumnGroup = styled.div<IReqoreTableHeaderStyle>`
+  display: flex;
+  flex-flow: column;
+  width: ${({ width }) => width}px;
+
+  ${({ grow }) =>
+    grow &&
+    css`
+      flex-grow: ${grow};
+    `}
+`;
+
+const StyledColumnGroupHeaders = styled.div`
+  display: flex;
+`;
+
+const StyledTableHeaderRow = styled.div<{ theme: IReqoreTheme }>`
+  display: flex;
+  flex: 1;
+
+  ${({ leftScroll }) => css`
+    transform: translate3d(${-leftScroll}px, 0, 0);
+  `}
+
+  ${StyledTableHeader}, ${StyledColumnGroupHeader} {
+    font-size: 13px;
+    font-weight: 600;
+    padding: 5px 10px;
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+`;
+
+const ReqoreTableHeader = ({
+  columns,
+  leftScroll,
+  onSortChange,
+  sortData,
+  selectable,
+  selectedQuant,
+  onToggleSelectClick,
+  selectToggleTooltip,
+  hasVerticalScroll,
+}: IReqoreTableSectionProps) => {
+  const renderColumns = (columns: IReqoreTableColumn[]) =>
+    columns.map(
+      ({ grow, header, props = {}, columns: cols, align, content, onCellClick, ...rest }, index) =>
+        cols ? (
+          <StyledColumnGroup
+            width={cols.reduce((wid, col) => wid + (col.width || 80), 0)}
+            grow={grow}
+            key={index}
+            className='reqore-table-column-group'
+          >
+            <StyledColumnGroupHeader
+              align={align}
+              {...props}
+              className='reqore-table-column-group-header'
+            >
+              {header}
+            </StyledColumnGroupHeader>
+            <StyledColumnGroupHeaders className='reqore-table-headers'>
+              {renderColumns(cols)}
+            </StyledColumnGroupHeaders>
+          </StyledColumnGroup>
+        ) : (
+          <ReqoreTableHeaderCell
+            {...props}
+            {...rest}
+            key={index}
+            sortData={sortData}
+            grow={grow}
+            align={align}
+            header={header}
+            onSortChange={onSortChange}
+          />
+        )
+    );
+
+  const getSelectedIcon = (): IReqoreIconName => {
+    switch (selectedQuant) {
+      case 'all':
+        return 'CheckboxCircleLine';
+      case 'some':
+        return 'IndeterminateCircleLine';
+      default:
+        return 'CheckboxBlankCircleLine';
+    }
+  };
+
+  return (
+    <StyledTableHeaderWrapper
+      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={() => {
+              onToggleSelectClick();
+            }}
+          />
+        )}
+        {renderColumns(columns)}
+      </StyledTableHeaderRow>
+    </StyledTableHeaderWrapper>
+  );
+};
+
+export default ReqoreTableHeader;

package/src/components/Table/headerCell.tsx

@@ -0,0 +1,117 @@
+/* @flow */
+import React, { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import usePopover from '../../hooks/usePopover';
+import ReqoreIcon from '../Icon';
+import { alignToFlex } from './row';
+
+export interface IReqoreTableHeaderCellProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IReqoreTableColumn {
+  onSortChange?: (sort: string) => void;
+  sortData: IReqoreTableSort;
+}
+
+export interface IReqoreTableHeaderStyle {
+  width?: number;
+  grow?: number;
+  theme: IReqoreTheme;
+  align?: 'center' | 'left' | 'right';
+  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 ? alignToFlex[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;
+`;
+
+const ReqoreTableHeaderCell = ({
+  width,
+  grow,
+  align,
+  header,
+  onSortChange,
+  dataId,
+  sortable,
+  sortData,
+  onClick,
+  className,
+  icon,
+  iconSize,
+  tooltip,
+  ...props
+}: IReqoreTableHeaderCellProps) => {
+  const [ref, setRef] = useState(null);
+
+  usePopover({ targetElement: ref, content: tooltip || header });
+
+  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);
+        }
+      }}
+    >
+      {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'
+          }
+          size={iconSize || '13px'}
+          margin='left'
+          style={{
+            opacity: sortData.by === dataId ? 1 : 0.2,
+          }}
+        />
+      )}
+    </StyledTableHeader>
+  );
+};
+
+export default ReqoreTableHeaderCell;

package/src/components/Table/helpers.ts

@@ -0,0 +1,19 @@
+import { firstBy } from "thenby";
+import { IReqoreTableSort } from ".";
+
+export const flipSortDirection = (direction: "asc" | "desc"): "asc" | "desc" =>
+  direction === "asc" ? "desc" : "asc";
+
+export const fixSort = (sort?: IReqoreTableSort) => {
+  return { ...(sort || {}), direction: sort?.direction || "desc" };
+};
+
+export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
+  const { by, direction } = sort;
+
+  if (!by) {
+    return data;
+  }
+
+  return [...data].sort(firstBy(by, { ignoreCase: true, direction }));
+};