@spaced-out/ui-design-system 0.4.13 → 0.4.15-beta.0

package/lib/components/Table/DefaultRow.js.flow

@@ -1,152 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
-import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
-import {Checkbox} from '../Checkbox';
-import {CircularLoader} from '../CircularLoader';
-import {BodyLarge, TEXT_COLORS} from '../Text';
-
-import {PaddedContentCell, SingleCell} from './Cell';
-import type {GenericHeaderItems} from './DefaultTableHeader';
-import type {GenericObject} from './Table';
-
-import css from './Table.module.css';
-
-
-type ClassNames = $ReadOnly<{tableRow?: string, checkbox?: string}>;
-
-// When using a custom Row prop, you need to create a component that looks like
-//     MyRow = (props: TableRowProps<Entries, Extras>): React.Node => {...}
-// otherwise flow will complain.
-// Note that b/c extras is often optional, you will need to explicitly include
-// `invariant(extras, 'extras exists');` in order to pull values out of
-// extras (flow will remind you that it is of type `U | void`)
-export type TableRowProps<T, U> = {
-  data: T,
-  extras?: U,
-  sortedKeys?: string[],
-  headers?: GenericHeaderItems<T, U>,
-  selected?: boolean,
-  disabled?: boolean,
-};
-
-export type TableRow<T, U> = React.ComponentType<TableRowProps<T, U>>;
-
-export const BasicRow: ClassNameComponent<'tr'> = makeClassNameComponent(
-  css.defaultRow,
-  'tr',
-);
-
-type EmptyRowProps = {
-  emptyText?: React.Node,
-  isLoading?: boolean,
-  headersLength: number,
-  customLoader?: React.Node,
-};
-
-export const EmptyRow = ({
-  isLoading,
-  emptyText,
-  headersLength = 0,
-  customLoader,
-}: EmptyRowProps): React.Element<'tr'> => (
-  <tr>
-    <td colSpan={headersLength}>
-      <div className={css.emptyRow}>
-        {isLoading ? (
-          customLoader ? (
-            customLoader
-          ) : (
-            <div className={css.defaultLoader}>
-              {' '}
-              <CircularLoader colorToken="colorFillPrimary" size="large" />
-            </div>
-          )
-        ) : (
-          emptyText || (
-            <BodyLarge
-              color={TEXT_COLORS.secondary}
-              className={css.defaultEmptyText}
-            >
-              Nothing to display here.
-            </BodyLarge>
-          )
-        )}
-      </div>
-    </td>
-  </tr>
-);
-
-// This is a fallback row we use to render a table when
-// initially stubbing out a design, the idea is you just avoid
-// passing in a Row component and instead let this render out
-// all the fields in the header in the short term
-//
-// Using the default row has the benefit that mismatches between
-// header and entries _will_ error out even though there are the
-// suppressions below
-export function DefaultRow<T: GenericObject, U: GenericObject>({
-  data,
-  extras,
-  headers,
-  selected,
-  onSelect,
-  classNames,
-  disabled,
-}: {
-  data: T,
-  extras?: U,
-  headers: GenericHeaderItems<T, U>,
-  selected?: boolean,
-  // value dependent on checkbox checked value
-  onSelect?: ({value: string, checked: boolean}) => mixed,
-  classNames?: ClassNames,
-  disabled?: boolean,
-}): React.Node {
-  return (
-    <BasicRow
-      className={classify(
-        selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
-        classNames?.tableRow,
-      )}
-    >
-      {selected != null && (
-        <PaddedContentCell
-          className={classify(css.checkbox, classNames?.checkbox)}
-        >
-          <Checkbox
-            checked={selected ? true : false}
-            onChange={onSelect}
-            disabled={disabled}
-            ariaLabel="Select row"
-          />
-        </PaddedContentCell>
-      )}
-      {headers.map((item, index) => {
-        const {key, render: Renderer, className: cellClassName, sticky} = item;
-        const value = data[key];
-        return Renderer ? (
-          <Renderer
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            data={data}
-            extras={extras}
-            selected={selected}
-            disabled={disabled}
-            className={classify({[css.stickyCell]: sticky})}
-          />
-        ) : (
-          <SingleCell
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            title={String(value)}
-            className={classify(cellClassName, {[css.stickyCell]: sticky})}
-          />
-        );
-      })}
-    </BasicRow>
-  );
-}

package/lib/components/Table/DefaultTableHeader.js.flow

@@ -1,240 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {ColorTypes} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
-import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
-import {Checkbox} from '../Checkbox';
-import {Icon} from '../Icon';
-import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
-
-import {BasicRow} from './DefaultRow';
-import type {SortDirection} from './hooks';
-import type {GenericObject} from './Table';
-
-import css from './Table.module.css';
-
-
-export type GenericHeaderItem<T: GenericObject, U: GenericObject> = {
-  label: React.Node,
-  key: $Keys<T>,
-  className?: string,
-  filterIcon?: React.Node,
-  filtered?: boolean,
-  subtext?: string,
-  sortable?: boolean,
-  headerIconClassName?: string,
-  sticky?: boolean,
-  render?: React.ComponentType<{
-    data: T,
-    extras?: U,
-    className?: string,
-    selected?: boolean,
-    disabled?: boolean,
-  }>,
-};
-
-export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];
-
-export const BasicHeadCell: ClassNameComponent<'th'> = makeClassNameComponent(
-  css.defaultHeaderCell,
-  'th',
-);
-
-export const BasicTableHead: ClassNameComponent<'thead'> =
-  makeClassNameComponent(css.defaultTableHead, 'thead');
-
-export type TableHeaderProps<T, U> = {
-  className?: string,
-  tableHeaderClassName?: string,
-  sortable?: boolean,
-  columns: GenericHeaderItems<T, U>,
-  handleSortClick?: (sortKey: $Keys<T>) => mixed,
-  sortKey?: $Keys<T>,
-  sortDirection?: SortDirection,
-  checked?: 'true' | 'false' | 'mixed',
-  handleCheckboxClick?: ({value: string, checked: boolean}) => mixed,
-  disabled?: boolean,
-  stickyHeader?: boolean,
-};
-
-const SortIcon = ({
-  sortDirection,
-  color,
-  className,
-}: {
-  sortDirection: SortDirection,
-  className: string,
-  color: ColorTypes,
-}) => {
-  if (sortDirection === 'original') {
-    return (
-      <Icon
-        color={color}
-        name="caret-down"
-        size="small"
-        type="solid"
-        className={className}
-      />
-    );
-  } else if (sortDirection === 'asc') {
-    return (
-      <Icon
-        color={color}
-        name="arrow-up"
-        size="small"
-        type="regular"
-        className={className}
-      />
-    );
-  } else if (sortDirection === 'desc') {
-    return (
-      <Icon
-        color={color}
-        name="arrow-down"
-        size="small"
-        type="regular"
-        className={className}
-      />
-    );
-  }
-};
-
-export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
-  props: TableHeaderProps<T, U>,
-): React.Node {
-  const {
-    className,
-    sortable = false,
-    columns,
-    handleSortClick,
-    sortKey,
-    sortDirection = 'original',
-    handleCheckboxClick,
-    checked,
-    disabled,
-    stickyHeader,
-  } = props;
-
-  const tableHeaderCells = () => (
-    <>
-      {columns.map((columnData, index) => {
-        const {
-          key,
-          label,
-          subtext,
-          filterIcon,
-          filtered,
-          className,
-          sticky,
-          sortable: columnSortable = false,
-        } = columnData;
-        let headerClassName;
-        const filterable = Boolean(filterIcon);
-        if ((sortable && columnSortable) || filterable) {
-          headerClassName = classify(
-            css.defaultHeaderCellSortable,
-            {
-              [css.filtered]: filtered,
-              [css.stickyHeaderCell]: sticky,
-            },
-            css[sortDirection],
-            className,
-          );
-        } else {
-          headerClassName = classify(className, {
-            [css.stickyHeaderCell]: sticky,
-          });
-        }
-
-        const headCellClickHandler = () => {
-          if (sortable && columnSortable && handleSortClick) {
-            handleSortClick(key);
-          }
-        };
-        let columnSortDirection = 'original';
-
-        if (sortKey === key) {
-          columnSortDirection = sortDirection;
-        }
-
-        return (
-          <BasicHeadCell
-            className={classify(
-              {
-                [css.selectedHeader]:
-                  sortKey === key && columnSortDirection !== 'original',
-              },
-              headerClassName,
-            )}
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            scope="col"
-            onClick={headCellClickHandler}
-          >
-            <div className={classify(css.labelContents)}>
-              <div className={css.labelContainer}>
-                <SubTitleExtraSmall
-                  color={TEXT_COLORS.secondary}
-                  className={classify({
-                    [css.selectedHeader]:
-                      sortKey === key && columnSortDirection !== 'original',
-                  })}
-                >
-                  {label}
-                </SubTitleExtraSmall>
-                <span className={css.headerSubtext}>{subtext && subtext}</span>
-              </div>
-              {(sortable || filterIcon != null) && (
-                <div className={css.headerIconContainer}>
-                  {columnSortable && (
-                    <SortIcon
-                      color={TEXT_COLORS.secondary}
-                      className={classify(css.sortArrow, {
-                        [css.selectedSortArrow]: sortKey === key,
-                      })}
-                      sortDirection={columnSortDirection}
-                    />
-                  )}
-                  {filterIcon != null && (
-                    <div className={css.filterIcon}>{filterIcon}</div>
-                  )}
-                </div>
-              )}
-            </div>
-          </BasicHeadCell>
-        );
-      })}
-    </>
-  );
-
-  return (
-    <BasicTableHead
-      className={classify(
-        css.tableHeaderSortable,
-        {[css.stickyHeader]: stickyHeader},
-        className,
-      )}
-    >
-      <BasicRow className={css.defaultHeaderRow}>
-        {handleCheckboxClick && (
-          <BasicHeadCell scope="col">
-            <div className={css.checkbox}>
-              <Checkbox
-                value="all"
-                checked={checked === 'true' ? true : false}
-                indeterminate={checked === 'mixed'}
-                onChange={handleCheckboxClick}
-                disabled={disabled}
-                ariaLabel="Select all rows"
-              />
-            </div>
-          </BasicHeadCell>
-        )}
-        {tableHeaderCells()}
-      </BasicRow>
-    </BasicTableHead>
-  );
-}