src/components/data-table/data-column.ts

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
   7 import { createTree } from 'models/tree';
   8
   9 /**
  10  *
  11  * @template I Type of dataexplorer item reference
  12  * @template R Type of resource to use to restrict values of column sort.field
  13  */
  14 export interface DataColumn<I, R> {
  15     key?: React.Key;
  16     name: string;
  17     selected: boolean;
  18     configurable: boolean;
  19
  20     /**
  21      * If set to true, filters on this column will be displayed in a
  22      * radio group and only one filter can be selected at a time.
  23      */
  24     mutuallyExclusiveFilters?: boolean;
  25     sort?: {direction: SortDirection, field: keyof R};
  26     filters: DataTableFilters;
  27     render: (item: I) => React.ReactElement<any>;
  28     renderHeader?: () => React.ReactElement<any>;
  29 }
  30
  31 export enum SortDirection {
  32     ASC = "asc",
  33     DESC = "desc",
  34     NONE = "none"
  35 }
  36
  37 export const toggleSortDirection = <I, R>(column: DataColumn<I, R>): DataColumn<I, R> => {
  38     return column.sort
  39         ? column.sort.direction === SortDirection.ASC
  40             ? { ...column, sort: {...column.sort, direction: SortDirection.DESC} }
  41             : { ...column, sort: {...column.sort, direction: SortDirection.ASC} }
  42         : column;
  43 };
  44
  45 export const resetSortDirection = <I, R>(column: DataColumn<I, R>): DataColumn<I, R> => {
  46     return column.sort ? { ...column, sort: {...column.sort, direction: SortDirection.NONE} } : column;
  47 };
  48
  49 export const createDataColumn = <I, R>(dataColumn: Partial<DataColumn<I, R>>): DataColumn<I, R> => ({
  50     key: '',
  51     name: '',
  52     selected: true,
  53     configurable: true,
  54     filters: createTree(),
  55     render: () => React.createElement('span'),
  56     ...dataColumn,
  57 });