@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/components/Table/index.tsx

@@ -0,0 +1,265 @@
+/* @flow */
+import { size as count } from 'lodash';
+import React, { useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import styled, { css } from 'styled-components';
+import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreTableBody from './body';
+import ReqoreTableHeader, { StyledColumnGroupHeader } from './header';
+import { IReqoreTableHeaderStyle, StyledTableHeader } from './headerCell';
+import { fixSort, flipSortDirection, sortTableData } from './helpers';
+
+export type TReqoreTableColumnContent =
+  | React.FC<{ [key: string]: any; _selectId?: string }>
+  | 'time-ago'
+  | 'tag'
+  | `tag:${IReqoreIntent}`
+  | `tag:#${string}`
+  | 'title'
+  | `title:${IReqoreIntent}`
+  | 'text'
+  | `text:${IReqoreIntent}`;
+
+export interface IReqoreTableColumn {
+  dataId: string;
+  header?: string | JSX.Element;
+  grow?: 1 | 2 | 3 | 4;
+  width?: number;
+  content?: TReqoreTableColumnContent;
+  props?: React.HTMLAttributes<HTMLDivElement>;
+  align?: 'center' | 'left' | 'right';
+  columns?: IReqoreTableColumn[];
+  sortable?: boolean;
+  icon?: IReqoreIconName;
+  iconSize?: string;
+  tooltip?: string;
+  intent?: IReqoreIntent;
+  cellTooltip?: (data: { [key: string]: any; _selectId?: string }) => string | JSX.Element;
+  onCellClick?: (data: { [key: string]: any; _selectId?: string }) => void;
+}
+
+export interface IReqoreTableRowData {
+  [key: string]: any;
+  _selectId?: string;
+  _intent?: IReqoreIntent;
+  _disabled?: boolean;
+}
+
+export type IReqoreTableRowClick = (data: IReqoreTableRowData) => void;
+export type IReqoreTableData = IReqoreTableRowData[];
+
+export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns: IReqoreTableColumn[];
+  data?: IReqoreTableData;
+  className?: string;
+  width?: number;
+  height?: number;
+  sort?: IReqoreTableSort;
+  striped?: boolean;
+  selectable?: boolean;
+  selected?: string[];
+  selectedRowIntent?: IReqoreIntent;
+  onSortChange?: (sort?: IReqoreTableSort) => void;
+  onSelectedChange?: (selected?: any[]) => void;
+  selectToggleTooltip?: string;
+  onRowClick?: IReqoreTableRowClick;
+  customTheme?: IReqoreTheme;
+  intent?: IReqoreIntent;
+  rounded?: boolean;
+  flat?: boolean;
+  size?: TSizes;
+}
+
+export interface IReqoreTableStyle {
+  theme: IReqoreTheme;
+  width?: number;
+  striped?: boolean;
+  selectable?: boolean;
+  rounded?: boolean;
+  flat?: boolean;
+}
+
+export interface IReqoreTableSort {
+  by?: string;
+  direction?: 'asc' | 'desc';
+}
+
+const StyledTableWrapper = styled.div<IReqoreTableStyle>`
+  ${({ theme, width, rounded, flat }: IReqoreTableStyle) => css`
+    width: ${width ? `${width}px` : '100%'};
+
+    position: relative;
+    clear: both;
+    overflow: hidden;
+    z-index: 1;
+
+    display: flex;
+    flex-flow: column;
+
+    border-radius: ${rounded ? '10px' : undefined};
+
+    background-color: ${theme.main};
+    color: ${getReadableColor(theme, undefined, undefined, true)};
+
+    ${!flat &&
+    css`
+      ${StyledTableHeader}, ${StyledColumnGroupHeader} {
+        ${({ theme }: IReqoreTableHeaderStyle) => css`
+          border-bottom: 1px solid ${changeLightness(theme.main, 0.07)};
+        `}
+      }
+    `}
+  `}
+`;
+
+const ReqoreTable = ({
+  className,
+  height = 300,
+  width,
+  columns,
+  data = [],
+  sort,
+  onSortChange,
+  selectable,
+  selected,
+  onSelectedChange,
+  selectToggleTooltip,
+  customTheme,
+  rounded,
+  onRowClick,
+  striped,
+  selectedRowIntent,
+  size,
+  intent,
+  ...rest
+}: IReqoreTableProps) => {
+  const [leftScroll, setLeftScroll] = useState<number>(0);
+  const [_data, setData] = useState<IReqoreTableData>(data || []);
+  const [_sort, setSort] = useState<IReqoreTableSort>(fixSort(sort));
+  const [_selected, setSelected] = useState<string[]>([]);
+  const [_selectedQuant, setSelectedQuant] = useState<'all' | 'none' | 'some'>('none');
+  const theme = useReqoreTheme('main', customTheme, intent);
+
+  useUpdateEffect(() => {
+    if (onSortChange) {
+      onSortChange(_sort);
+    }
+  }, [_sort]);
+
+  useUpdateEffect(() => {
+    setData(data);
+  }, [data]);
+
+  useUpdateEffect(() => {
+    if (selectable) {
+      setSelected(selected);
+    }
+  }, [selected]);
+
+  useUpdateEffect(() => {
+    if (onSelectedChange) {
+      onSelectedChange(_selected);
+    }
+
+    const selectableData: IReqoreTableData = _data.filter((datum) => datum._selectId ?? false);
+
+    if (count(_selected)) {
+      if (count(_selected) === count(selectableData)) {
+        setSelectedQuant('all');
+      } else {
+        setSelectedQuant('some');
+      }
+    } else {
+      setSelectedQuant('none');
+    }
+  }, [_selected]);
+
+  const handleSortChange = (by?: string) => {
+    setSort((currentSort: IReqoreTableSort) => {
+      const newSort: IReqoreTableSort = { ...currentSort };
+
+      newSort.by = by;
+      newSort.direction =
+        currentSort.by === by ? flipSortDirection(currentSort.direction) : currentSort.direction;
+
+      return newSort;
+    });
+  };
+
+  const handleSelectClick = (selectId: string) => {
+    setSelected((current) => {
+      let newSelected = [...current];
+      const isSelected = newSelected.find((selected) => selectId === selected);
+
+      if (isSelected) {
+        newSelected = newSelected.filter((selected) => selected !== selectId);
+      } else {
+        newSelected = [...newSelected, selectId];
+      }
+
+      return newSelected;
+    });
+  };
+
+  const handleToggleSelectClick = () => {
+    switch (_selectedQuant) {
+      case 'none':
+      case 'some': {
+        const selectableData: string[] = _data
+          .filter((datum) => datum._selectId ?? false)
+          .map((datum) => datum._selectId);
+
+        setSelected(selectableData);
+        break;
+      }
+      default: {
+        setSelected([]);
+        break;
+      }
+    }
+  };
+
+  return (
+    <ReqoreThemeProvider theme={theme}>
+      <StyledTableWrapper
+        {...rest}
+        className={`${className || ''} reqore-table`}
+        rounded={rounded}
+        width={width}
+      >
+        <ReqoreTableHeader
+          columns={columns}
+          leftScroll={leftScroll}
+          onSortChange={handleSortChange}
+          sortData={_sort}
+          selectable={selectable}
+          selectedQuant={_selectedQuant}
+          onToggleSelectClick={handleToggleSelectClick}
+          hasVerticalScroll={count(_data) * TABLE_SIZE_TO_PX[size] > height}
+          selectToggleTooltip={selectToggleTooltip}
+        />
+        <ReqoreTableBody
+          data={_sort ? sortTableData(_data, _sort) : _data}
+          columns={columns}
+          setLeftScroll={setLeftScroll}
+          height={height}
+          selectable={selectable}
+          onSelectClick={handleSelectClick}
+          onRowClick={onRowClick}
+          selected={_selected}
+          selectedRowIntent={selectedRowIntent}
+          size={size}
+          striped={striped}
+          flat={rest.flat}
+        />
+      </StyledTableWrapper>
+    </ReqoreThemeProvider>
+  );
+};
+
+export default ReqoreTable;

package/src/components/Table/row.tsx

@@ -0,0 +1,355 @@
+/* @flow */
+import { isFunction, isString } from 'lodash';
+import { lighten, rgba } from 'polished';
+import React, { ReactElement, useState } from 'react';
+import styled, { css } from 'styled-components';
+import {
+  IReqoreTableColumn,
+  IReqoreTableData,
+  IReqoreTableRowClick,
+  TReqoreTableColumnContent,
+} from '.';
+import { ReqorePopover } from '../..';
+import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
+import { ReqoreH4 } from '../Header';
+import ReqoreIcon from '../Icon';
+import { ReqoreP } from '../Paragraph';
+import ReqoreTag from '../Tag';
+import { TimeAgo } from '../TimeAgo';
+
+export interface IReqoreTableRowOptions {
+  columns: IReqoreTableColumn[];
+  data?: IReqoreTableData;
+  selectable?: boolean;
+  onSelectClick?: (selectId: string) => void;
+  selected?: string[];
+  onRowClick?: IReqoreTableRowClick;
+  striped?: boolean;
+  selectedRowIntent?: IReqoreIntent;
+  size?: TSizes;
+  flat?: boolean;
+}
+
+export interface IReqoreTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  data: IReqoreTableRowOptions;
+  style: React.StyleHTMLAttributes<HTMLDivElement>;
+  index: number;
+}
+
+export interface IReqoreTableRowStyle {
+  theme: IReqoreTheme;
+  interactive?: boolean;
+  intent?: IReqoreIntent;
+  selected?: boolean;
+  selectedIntent?: IReqoreIntent;
+  flat?: boolean;
+  disabled?: boolean;
+  hovered?: boolean;
+}
+
+export const StyledTableRow = styled.div<IReqoreTableRowStyle>`
+  ${({ size }) => css`
+    display: flex;
+    height: ${SIZE_TO_PX[size]}px;
+  `}
+`;
+
+export interface IReqoreTableCellStyle {
+  width?: number;
+  grow?: number;
+  theme?: IReqoreTheme;
+  align?: 'center' | 'left' | 'right';
+  intent?: IReqoreIntent;
+  interactive?: boolean;
+  interactiveCell?: boolean;
+  size?: TSizes;
+  flat?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+  hovered?: boolean;
+  selectedIntent?: IReqoreIntent;
+  even?: boolean;
+  striped?: boolean;
+}
+
+export const alignToFlex = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end',
+};
+
+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 = () => {
+      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 ? alignToFlex[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 : getBackgroundColor(),
+        !hovered
+      )};
+      border-color: ${changeLightness(
+        backgroundColor === 'transparent' ? theme.main : getBackgroundColor(),
+        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,
+    columns,
+    selectable,
+    onSelectClick,
+    selected,
+    onRowClick,
+    striped,
+    size,
+    selectedRowIntent = 'info',
+    flat,
+  },
+  style,
+  index,
+}: IReqoreTableRowProps) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const isSelected = selected.find((selectId) => selectId === data[index]._selectId);
+
+  const renderContent = (
+    content: TReqoreTableColumnContent,
+    data: any,
+    dataId: string
+  ): ReactElement<any, any> => {
+    if (isFunction(content)) {
+      const Content = content;
+
+      return <Content {...data} />;
+    }
+
+    if (isString(content)) {
+      // Separate the content string by colon
+      let [type, intentOrColor] = content.split(':');
+      // Check if the intent starts with hash for tags
+      let intent: IReqoreIntent = intentOrColor?.startsWith('#')
+        ? undefined
+        : (intentOrColor as IReqoreIntent);
+      let color: string =
+        intentOrColor?.startsWith('#') && type === 'tag' ? intentOrColor : undefined;
+      // Render content based on the type
+      switch (type) {
+        case 'time-ago':
+          return <TimeAgo time={data[dataId]} />;
+        case 'tag':
+          return (
+            <ReqoreTag
+              label={data[dataId]}
+              size={size}
+              intent={intent as IReqoreIntent}
+              color={color}
+            />
+          );
+        case 'title':
+          return <ReqoreH4 intent={intent as IReqoreIntent}>{data[dataId]}</ReqoreH4>;
+        case 'text':
+          return (
+            <ReqoreP className='reqore-table-text' intent={intent as IReqoreIntent}>
+              {data[dataId]}
+            </ReqoreP>
+          );
+        default:
+          return <ReqoreP className='reqore-table-text'>{data[dataId]}</ReqoreP>;
+      }
+    }
+
+    return <ReqoreP className='reqore-table-text'>{data[dataId]}</ReqoreP>;
+  };
+
+  const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
+    columns.map(
+      ({ width, grow, dataId, content, columns, align, onCellClick, cellTooltip, intent }) =>
+        columns ? (
+          renderCells(columns, data)
+        ) : (
+          <ReqorePopover
+            key={dataId}
+            component={StyledTableCell}
+            isReqoreComponent
+            componentProps={
+              {
+                width,
+                grow,
+                align,
+                size,
+                striped,
+                disabled: data[index]._disabled,
+                selected: !!isSelected,
+                selectedIntent: selectedRowIntent,
+                flat,
+                even: index % 2 === 0 ? true : false,
+                intent: intent || data[index]._intent,
+                hovered: isHovered,
+                interactive: !!onCellClick || !!onRowClick,
+                interactiveCell: !!onCellClick,
+                onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+                  if (onCellClick) {
+                    e.stopPropagation();
+                    onCellClick?.(data[index]);
+                  } else if (onRowClick) {
+                    e.stopPropagation();
+                    onRowClick?.(data[index]);
+                  } else if (selectable && data[index]._selectId) {
+                    // Otherwise select the row if selectable
+                    onSelectClick(data[index]._selectId);
+                  }
+                },
+                className: 'reqore-table-cell',
+              } as IReqoreTableCellStyle
+            }
+            content={cellTooltip ? cellTooltip(data[index]) : undefined}
+          >
+            {renderContent(content, data[index], dataId)}
+          </ReqorePopover>
+        )
+    );
+
+  return (
+    <StyledTableRow
+      style={style}
+      className='reqore-table-row'
+      interactive={!!onRowClick}
+      onMouseEnter={() => {
+        // Set hovered is this row is interactive
+        if (onRowClick || (selectable && data[index]._selectId && !data[index]._disabled)) {
+          setIsHovered(true);
+        }
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      {selectable && (
+        <StyledTableCell
+          align='center'
+          width={60}
+          className='reqore-table-cell'
+          {...{
+            size,
+            striped,
+            disabled: data[index]._disabled,
+            selected: !!isSelected,
+            selectedIntent: selectedRowIntent,
+            flat,
+            even: index % 2 === 0 ? true : false,
+            intent: data[index]._intent,
+            hovered: isHovered,
+            interactiveCell: data[index]._selectId,
+          }}
+          onClick={
+            data[index]._selectId
+              ? (e: React.MouseEvent<HTMLDivElement>) => {
+                  e.stopPropagation();
+                  onSelectClick(data[index]._selectId);
+                }
+              : undefined
+          }
+        >
+          <ReqoreIcon
+            icon={
+              !data[index]._selectId
+                ? 'Forbid2Line'
+                : isSelected
+                ? 'CheckboxCircleLine'
+                : 'CheckboxBlankCircleLine'
+            }
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            style={{ opacity: !data[index]._selectId || !isSelected ? 0.4 : 1 }}
+          />
+        </StyledTableCell>
+      )}
+      {renderCells(columns, data)}
+    </StyledTableRow>
+  );
+};
+
+export default ReqoreTableRow;

package/src/components/Tabs/content.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  tabId: string | number;
+}
+
+const StyledTabsContent = styled.div`
+  display: flex;
+  flex-flow: column;
+  overflow: hidden;
+  flex: 1;
+  padding: 10px;
+`;
+
+const ReqoreTabsContent = ({ children, className, ...rest }: IReqoreTabsContent) => (
+  <StyledTabsContent {...rest} className={`${className || ''} reqore-tabs-content`}>
+    {children}
+  </StyledTabsContent>
+);
+
+export default ReqoreTabsContent;