@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/Spinner/index.tsx

@@ -1,74 +0,0 @@
-import { useCallback } from 'react';
-import { ReqoreIcon, ReqoreP } from '../..';
-import { TSizes } from '../../constants/sizes';
-import { TReqoreIntent } from '../../constants/theme';
-import { IWithReqoreEffect } from '../../types/global';
-import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
-import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
-import { IReqoreIconProps } from '../Icon';
-
-export interface IReqoreSpinnerProps
-  extends Omit<IReqoreControlGroupProps, 'children' | 'size'>,
-    IWithReqoreEffect {
-  size?: TSizes | string;
-  intent?: TReqoreIntent;
-  children?: any;
-  type?: 2 | 3 | 4 | 5;
-  iconColor?: TReqoreEffectColor;
-  labelEffect?: IReqoreEffect;
-  iconMargin?: 'right' | 'left' | 'both';
-  centered?: boolean;
-  iconProps?: IReqoreIconProps;
-}
-
-export const ReqoreSpinner = ({
-  size,
-  intent,
-  children,
-  type,
-  iconColor,
-  labelEffect,
-  effect,
-  iconMargin,
-  centered,
-  iconProps,
-  ...rest
-}: IReqoreSpinnerProps) => {
-  const renderContent = useCallback(() => {
-    return (
-      <ReqoreIcon
-        icon={!type ? 'LoaderLine' : `Loader${type}Line`}
-        color={iconColor || intent}
-        size={size}
-        effect={effect}
-        animation='spin'
-        className='reqore-spinner'
-        margin={iconMargin || (children ? 'right' : undefined)}
-        {...iconProps}
-      />
-    );
-  }, [size, intent, type, children, iconColor]);
-
-  if (children) {
-    return (
-      <ReqoreControlGroup
-        {...rest}
-        vertical={centered}
-        horizontalAlign={centered ? 'center' : undefined}
-        verticalAlign='center'
-      >
-        {renderContent()}
-        <ReqoreP
-          size={size}
-          intent={intent}
-          effect={labelEffect}
-          className='reqore-spinner-wrapper'
-        >
-          {children}
-        </ReqoreP>
-      </ReqoreControlGroup>
-    );
-  }
-
-  return <>{renderContent()}</>;
-};

package/src/components/Table/body.tsx

@@ -1,109 +0,0 @@
-import count from 'lodash/size';
-import { forwardRef, memo, useMemo } from 'react';
-import { useMount } from 'react-use';
-import { FixedSizeList as List } from 'react-window';
-import styled from 'styled-components';
-import { TABLE_SIZE_TO_PX } from '../../constants/sizes';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import ReqoreTableRow, { IReqoreTableRowOptions } from './row';
-
-export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
-  height: number;
-  refs: {
-    left: React.RefObject<HTMLDivElement>;
-    right: React.RefObject<HTMLDivElement>;
-    main: React.RefObject<HTMLDivElement>;
-    header: React.RefObject<HTMLDivElement>;
-  };
-  type: 'left' | 'right' | 'main';
-  onScrollChange?: (isScrolled: boolean) => void;
-  setHoveredRow?: (index: number) => void;
-  hoveredRow?: number;
-}
-
-const StyledList = styled(List)`
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`;
-
-const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>(
-  (
-    {
-      data,
-      height,
-      size = 'normal',
-      refs,
-      type,
-      onScrollChange,
-      ...rest
-    }: IReqoreTableSectionBodyProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-
-    useMount(() => {
-      targetRef.current?.addEventListener('wheel', (e) => {
-        // 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;
-
-            onScrollChange?.(currentScroll > 0);
-
-            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 (e.deltaX && type === 'main') {
-            refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
-          }
-        }
-      });
-    });
-
-    const rowHeight = useMemo(
-      () => (rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1),
-      [size, rest.flat]
-    );
-
-    const itemCount = useMemo(() => count(data), [data]);
-
-    return (
-      <StyledList
-        outerRef={targetRef}
-        itemCount={itemCount}
-        // If the defined height is less than the count of items' height
-        // use that height instead
-        height={
-          (!height && height !== 0) || height > itemCount * rowHeight
-            ? itemCount * rowHeight
-            : height
-        }
-        className='reqore-table-body'
-        itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
-        itemData={{
-          data,
-          size,
-          ...rest,
-        }}
-      >
-        {ReqoreTableRow}
-      </StyledList>
-    );
-  }
-);
-
-export default memo(ReqoreTableBody);

package/src/components/Table/cell.tsx

@@ -1,136 +0,0 @@
-import { lighten, rgba } from 'polished';
-import { forwardRef, memo } 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>,
-    IWithReqoreTooltip {
-  children?: React.ReactNode;
-  padded?: IReqoreTableColumn['cell']['padded'];
-}
-
-export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
-  ${({ width, minWidth, maxWidth, grow }) =>
-    css`
-      width: ${width}px;
-      min-width: ${minWidth}px;
-      max-width: ${maxWidth}px;
-
-      flex-grow: ${grow || (width ? undefined : 1)};
-    `}
-
-  ${({
-    theme,
-    align,
-    interactive,
-    interactiveCell,
-    intent,
-    size,
-    flat,
-    striped,
-    even,
-    selected,
-    selectedIntent,
-    disabled,
-    hovered,
-    padded,
-  }: 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: ${!padded || padded === 'both' || padded === 'vertical' ? 0 : undefined}
-        ${!padded || padded === 'both' || padded === 'horizontal' ? '10px' : undefined};
-      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 = memo(
-  forwardRef<HTMLButtonElement, IReqoreTableBodyCellProps>(
-    (props: IReqoreTableBodyCellProps, ref) => {
-      const { targetRef } = useCombinedRefs(ref);
-
-      useTooltip(targetRef.current, props.tooltip);
-
-      return <StyledTableCell {...props} ref={targetRef} />;
-    }
-  )
-);

package/src/components/Table/header.tsx

@@ -1,236 +0,0 @@
-import { omit } from 'lodash';
-import { forwardRef, memo, useCallback } from 'react';
-import { useMount } from 'react-use';
-import styled, { css } from 'styled-components';
-import { IReqoreTableColumn, IReqoreTableSort } from '.';
-import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
-import { IReqoreTheme } from '../../constants/theme';
-import { changeLightness } from '../../helpers/colors';
-import { alignToFlexAlign } from '../../helpers/utils';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { IWithReqoreSize } from '../../types/global';
-import { IReqoreButtonProps } from '../Button';
-import { IReqoreTableHeaderCellProps, ReqoreTableHeaderCell } from './headerCell';
-import { 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'>,
-    Omit<IReqoreButtonProps, 'maxWidth' | 'content'> {
-  hasColumns?: boolean;
-}
-export interface IReqoreCustomHeaderCellComponent extends React.FC<IReqoreCustomHeaderCellProps> {}
-
-export interface IReqoreTableSectionProps extends IWithReqoreSize {
-  columns: IReqoreTableColumn[];
-  onSortChange?: (sort: string) => void;
-  sortData: IReqoreTableSort;
-  hasVerticalScroll: boolean;
-  onColumnsUpdate: TColumnsUpdater;
-  onFilterChange?: (dataId: string, value: any) => void;
-  component?: IReqoreCustomHeaderCellComponent;
-  heightAsGroup?: boolean;
-  scrollable?: boolean;
-  bodyRef: React.RefObject<HTMLDivElement>;
-}
-
-export interface IReqoreTableSectionStyle {
-  leftScroll: number;
-  hasVerticalScroll: boolean;
-  theme: IReqoreTheme;
-  heightAsGroup?: boolean;
-  size?: TSizes;
-}
-
-const StyledTableHeaderWrapper = styled.div<IReqoreTableSectionStyle>`
-  ${({ heightAsGroup, size }) => css`
-    display: flex;
-
-    overflow-x: auto;
-    overflow-y: hidden;
-    ::-webkit-scrollbar {
-      display: none;
-    }
-
-    flex-shrink: 0;
-    flex-flow: column;
-    height: ${heightAsGroup ? `${SIZE_TO_PX[size] * 2}px` : undefined};
-
-    ${({ 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 ? alignToFlexAlign(align) : 'flex-start'};
-  `}
-`;
-
-const StyledColumnGroup = styled.div<IReqoreTableHeaderStyle>`
-  display: flex;
-  flex-flow: column;
-  flex-shrink: 0;
-  width: ${({ width }) => width}px;
-  max-width: ${({ maxWidth = 9999 }) => maxWidth}px;
-  min-width: ${({ minWidth, width }) => minWidth || width}px;
-
-  ${({ grow }) =>
-    grow &&
-    css`
-      flex-grow: ${grow};
-    `}
-`;
-
-const StyledColumnGroupHeaders = styled.div`
-  display: flex;
-`;
-
-const StyledTableHeaderRow = styled.div<{ theme: IReqoreTheme }>`
-  display: flex;
-  flex: 1;
-
-  ${StyledColumnGroupHeader} {
-    font-size: 13px;
-    font-weight: 600;
-    padding: 5px 10px;
-
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-  }
-`;
-
-const ReqoreTableHeader = forwardRef<HTMLDivElement, IReqoreTableSectionProps>(
-  (
-    {
-      columns,
-      onSortChange,
-      sortData,
-      hasVerticalScroll,
-      onColumnsUpdate,
-      onFilterChange,
-      size,
-      component,
-      heightAsGroup,
-      scrollable,
-      bodyRef,
-    }: IReqoreTableSectionProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-
-    useMount(() => {
-      if (scrollable) {
-        targetRef.current?.addEventListener('wheel', (e) => {
-          if (e.deltaX) {
-            e.preventDefault();
-
-            targetRef.current?.scrollTo({ left: targetRef.current?.scrollLeft + e.deltaX });
-            bodyRef.current?.scrollTo({ left: bodyRef.current?.scrollLeft + e.deltaX });
-          }
-        });
-      }
-    });
-
-    const renderHeaderCell = useCallback(
-      (
-        headerCellComponent: IReqoreCustomHeaderCellComponent,
-        props: IReqoreCustomHeaderCellProps
-      ) => {
-        const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
-
-        return <HeaderCell key={props.dataId} {...props} />;
-      },
-      [component]
-    );
-
-    const renderColumns = (columns: IReqoreTableColumn[]) =>
-      getOnlyShownColumns(columns).map(
-        ({
-          grow,
-          align,
-          dataId,
-          header: { columns, onClick, component: headerComponent, ...rest },
-          ...colRest
-        }) =>
-          columns ? (
-            <StyledColumnGroup
-              grow={getOnlyShownColumns(columns).reduce((gr, col) => gr + col.grow, 0)}
-              key={dataId}
-              className='reqore-table-column-group'
-              width={getOnlyShownColumns(columns).reduce(
-                (wid, col) => wid + (col.resizedWidth || col.width || 80),
-                0
-              )}
-              maxWidth={getOnlyShownColumns(columns).reduce((wid, col) => wid + col.maxWidth, 0)}
-              minWidth={getOnlyShownColumns(columns).reduce((wid, col) => wid + col.minWidth, 0)}
-            >
-              {renderHeaderCell(headerComponent, {
-                ...rest,
-                ...omit(colRest, ['cell']),
-                dataId,
-                size,
-                readOnly: !onClick,
-                onClick,
-                rounded: false,
-                textAlign: align,
-                className: 'reqore-table-column-group-header',
-                resizable: false,
-                hideable: false,
-                hasColumns: true,
-              })}
-              <StyledColumnGroupHeaders className='reqore-table-headers'>
-                {renderColumns(columns)}
-              </StyledColumnGroupHeaders>
-            </StyledColumnGroup>
-          ) : (
-            renderHeaderCell(headerComponent, {
-              ...rest,
-              ...omit(colRest, ['cell']),
-              onClick,
-              dataId,
-              size,
-              sortData,
-              grow,
-              align,
-              onSortChange,
-              onColumnsUpdate,
-              onFilterChange,
-            })
-          )
-      );
-
-    return (
-      <StyledTableHeaderWrapper
-        className='reqore-table-header-wrapper'
-        hasVerticalScroll={hasVerticalScroll}
-        heightAsGroup={heightAsGroup}
-        size={size}
-        ref={targetRef}
-      >
-        <StyledTableHeaderRow>{renderColumns(columns)}</StyledTableHeaderRow>
-      </StyledTableHeaderWrapper>
-    );
-  }
-);
-
-export default memo(ReqoreTableHeader);