@scality/core-ui 0.115.0

package/src/lib/components/tablev2/MultiSelectableContent.tsx

@@ -0,0 +1,318 @@
+import { useEffect, memo, CSSProperties } from 'react';
+import { Row } from 'react-table';
+import { areEqual } from 'react-window';
+import { useTableContext } from './Tablev2.component';
+import {
+  HeadRow,
+  NoResult,
+  SortCaret,
+  TableBody,
+  TableHeader,
+  TableRowMultiSelectable,
+} from './Tablestyle';
+import {
+  TableHeightKeyType,
+  TableLocalType,
+  TableVariantType,
+} from './TableUtils';
+import { useTableScrollbar, VirtualizedRows } from './TableCommon';
+import useSyncedScroll from './useSyncedScroll';
+import { Box } from '../box/Box';
+import { Loader } from '../loader/Loader.component';
+import { spacing } from '../../spacing';
+
+const translations = {
+  en: {
+    noResult: 'No results found',
+  },
+  fr: {
+    noResult: `Aucun résultat`,
+  },
+};
+
+type RenderRowType = {
+  index: number;
+  style: CSSProperties;
+};
+
+type MultiSelectableContentProps<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  onMultiSelectionChanged?: (rows: Row<DATA_ROW>[]) => void;
+  onSingleRowSelected?: (row: Row<DATA_ROW>) => void;
+  onToggleAll?: (selected: boolean) => void;
+  rowHeight?: TableHeightKeyType;
+  separationLineVariant?: TableVariantType;
+  backgroundVariant?: TableVariantType;
+  locale?: TableLocalType;
+  customItemKey?: (index: number, data: DATA_ROW) => string;
+  hasScrollbar?: boolean;
+  isLoadingMoreItems?: boolean;
+  children?: (rows: JSX.Element) => JSX.Element;
+};
+
+/**
+ * FIXME Need to spend time to change the type to something like this
+ */
+
+// type MultiSelectableContentProps<ENTRY extends Record<string, any>> = {
+//   onMultiSelectionChanged: (rows: Row<ENTRY>[]) => void;
+//   rowHeight?: TableHeightKeyType;
+//   separationLineVariant?: TableVariantType;
+//   backgroundVariant?: TableVariantType;
+//   customItemKey?: (index: Number, data: ENTRY) => string;
+// } & ({
+//   locale: TableLocalType;
+// } | {
+//   children: (rows: JSX.Element) => JSX.Element;
+//   });
+
+export const MultiSelectableContent = <
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>({
+  onMultiSelectionChanged,
+  onSingleRowSelected,
+  onToggleAll,
+  rowHeight = 'h40',
+  separationLineVariant = 'backgroundLevel3',
+  backgroundVariant = 'backgroundLevel1',
+  locale = 'en',
+  customItemKey,
+  isLoadingMoreItems,
+  children,
+}: MultiSelectableContentProps<DATA_ROW>) => {
+  const {
+    headerGroups,
+    prepareRow,
+    rows,
+    setRowHeight,
+    setHiddenColumns,
+    selectedRowIds,
+    onBottom,
+    onBottomOffset,
+    isAllRowsSelected,
+    toggleAllRowsSelected,
+  } = useTableContext<DATA_ROW>();
+
+  useEffect(() => {
+    setRowHeight(rowHeight);
+  }, [rowHeight, setRowHeight]);
+
+  useEffect(() => {
+    setHiddenColumns((oldHiddenColumns) => {
+      return oldHiddenColumns.filter((column) => column !== 'selection');
+    });
+  }, [setHiddenColumns]);
+
+  const handleMultipleSelectedRows = (
+    selectedRowIds,
+    rows,
+    currentRow,
+    currentRowIndex,
+  ) => {
+    const keys = Object.keys(selectedRowIds);
+
+    if (onMultiSelectionChanged) {
+      if (currentRow.isSelected) {
+        // we remove the item from the list
+        onMultiSelectionChanged(
+          rows.filter(
+            (row) =>
+              keys.includes(row.id) && rows[currentRowIndex].id !== row.id,
+          ),
+        );
+      } else {
+        // we add the new item from the list
+        onMultiSelectionChanged([
+          ...rows.filter((row) => keys.includes(row.id)),
+          rows[currentRowIndex],
+        ]);
+      }
+    }
+    currentRow.toggleRowSelected(!currentRow.isSelected);
+  };
+
+  const {
+    hasScrollbar,
+    setHasScrollbar,
+    scrollBarWidth,
+    handleScrollbarWidth,
+  } = useTableScrollbar();
+
+  const itemKey = (index, data) => {
+    if (typeof customItemKey === 'function') {
+      return customItemKey(index, data);
+    }
+    return index;
+  };
+
+  const { bodyRef, headerRef } = useSyncedScroll<DATA_ROW>();
+
+  const RenderRow = memo(({ index, style }: RenderRowType) => {
+    const row = rows[index];
+    prepareRow(row);
+
+    const rowProps = {
+      ...row.getRowProps({
+        /**
+         * Note:We need to pass the style property to the row component.
+         * Otherwise when we scroll down, the next rows are flashing
+         * because they are re-rendered in loop.
+         */
+        style: { ...style },
+      }),
+      onClick: onSingleRowSelected
+        ? () => {
+            onSingleRowSelected(row);
+            toggleAllRowsSelected(false);
+            row.toggleRowSelected(true);
+          }
+        : () => handleMultipleSelectedRows(selectedRowIds, rows, row, index),
+    };
+
+    return (
+      <TableRowMultiSelectable
+        {...rowProps}
+        isSelected={row.isSelected}
+        separationLineVariant={separationLineVariant}
+        backgroundVariant={backgroundVariant}
+        className="tr"
+      >
+        {row.cells.map((cell) => {
+          const cellProps = cell.getCellProps({
+            style: {
+              ...cell.column.cellStyle,
+              // Vertically center the text in cells.
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+            },
+            role: 'gridcell',
+          });
+
+          if (cell.column.id === 'selection') {
+            return (
+              <div
+                {...cellProps}
+                onClick={
+                  onSingleRowSelected
+                    ? (event) => {
+                        event.stopPropagation();
+                        handleMultipleSelectedRows(
+                          selectedRowIds,
+                          rows,
+                          row,
+                          index,
+                        );
+                      }
+                    : undefined
+                }
+              >
+                {cell.render('Cell')}
+              </div>
+            );
+          }
+
+          return (
+            <div {...cellProps} className="td">
+              {cell.render('Cell')}
+            </div>
+          );
+        })}
+      </TableRowMultiSelectable>
+    );
+  }, areEqual);
+
+  return (
+    <>
+      <div>
+        {headerGroups.map((headerGroup) => (
+          <HeadRow
+            {...headerGroup.getHeaderGroupProps()}
+            hasScrollBar={hasScrollbar}
+            scrollBarWidth={scrollBarWidth}
+            rowHeight={rowHeight}
+            ref={headerRef}
+          >
+            {headerGroup.headers.map((column) => {
+              const headerStyleProps = column.getHeaderProps(
+                Object.assign(column.getSortByToggleProps(), {
+                  style: { ...column?.cellStyle, position: 'relative' },
+                }),
+              );
+
+              return (
+                <TableHeader {...headerStyleProps} role="columnheader">
+                  <div>
+                    {column.id === 'selection' ? (
+                      <div
+                        onClick={(event) => {
+                          const eventTarget = event.target as HTMLInputElement;
+                          if (onToggleAll) {
+                            onToggleAll(eventTarget.checked);
+                          }
+                          if (onMultiSelectionChanged) {
+                            if (isAllRowsSelected) {
+                              onMultiSelectionChanged([]);
+                            } else {
+                              onMultiSelectionChanged(rows);
+                            }
+                          }
+                        }}
+                      >
+                        {column.render('Header')}
+                      </div>
+                    ) : (
+                      column.render('Header')
+                    )}
+                    <SortCaret column={column} />
+                  </div>
+                </TableHeader>
+              );
+            })}
+          </HeadRow>
+        ))}
+      </div>
+
+      <TableBody role="rowgroup" className="tbody" ref={handleScrollbarWidth}>
+        {typeof children === 'function' ? (
+          children(
+            <VirtualizedRows
+              rows={rows}
+              listRef={bodyRef}
+              itemKey={itemKey}
+              rowHeight={rowHeight}
+              setHasScrollbar={setHasScrollbar}
+              onBottom={onBottom}
+              onBottomOffset={onBottomOffset}
+              RenderRow={RenderRow}
+            />,
+          )
+        ) : rows.length ? (
+          <VirtualizedRows
+            rows={rows}
+            listRef={bodyRef}
+            itemKey={itemKey}
+            rowHeight={rowHeight}
+            setHasScrollbar={setHasScrollbar}
+            onBottom={onBottom}
+            onBottomOffset={onBottomOffset}
+            RenderRow={RenderRow}
+          />
+        ) : (
+          <NoResult>{translations[locale].noResult}</NoResult>
+        )}
+      </TableBody>
+      {isLoadingMoreItems && (
+        <Box
+          display="flex"
+          justifyContent="center"
+          marginTop={spacing.r16}
+          marginBottom={spacing.r16}
+        >
+          <Loader size="large" />
+        </Box>
+      )}
+    </>
+  );
+};

package/src/lib/components/tablev2/Search.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useTableContext } from './Tablev2.component';
+import { SearchInput } from '../searchinput/SearchInput.component';
+import { Props } from '../searchinput/SearchInput.component';
+import { BasicText } from '../text/Text.component';
+import { TableLocalType } from './TableUtils';
+import { spacing } from '../../spacing';
+
+export type DisplayedName = {
+  plural: string;
+  singular: string;
+};
+
+export type SearchProps = {
+  onChange: (arg0: string) => void;
+  value?: string;
+  /**
+   * @deprecated
+   * All the Table should display the Total Number of Entity.
+   */
+  displayTotalOf?: boolean;
+  displayedName: DisplayedName;
+  locale?: TableLocalType;
+  totalCount?: number;
+} & Omit<Props, 'disableToggle'>;
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ResultContainer = styled(BasicText)`
+  font-weight: bold;
+`;
+const translations = {
+  en: {
+    search: 'Search',
+    total: 'Total: ',
+  },
+  fr: {
+    search: `Rechercher`,
+    total: `Total : `,
+  },
+};
+const TableItemCountContainer = styled(BasicText)`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${spacing.r8};
+  min-width: 4.3rem;
+`;
+export const TableItemCount = ({
+  entity,
+  count,
+  locale,
+}: {
+  entity: { singular: string; plural: string };
+  count: number;
+  locale: 'en' | 'fr';
+}) => {
+  return (
+    <TableItemCountContainer>
+      <span>{translations[locale].total}</span>
+      <ResultContainer>
+        {count}{' '}
+        {count > 1
+          ? entity.plural
+          : (count === 1 || count === 0) && entity.singular}
+      </ResultContainer>
+    </TableItemCountContainer>
+  );
+};
+
+export function TableSearch(props: SearchProps) {
+  const {
+    onChange,
+    value = '',
+    displayTotalOf = true,
+    displayedName,
+    locale = 'en',
+    totalCount,
+    ...rest
+  } = props;
+  const { setGlobalFilter, rows, preGlobalFilteredRows } = useTableContext();
+  const totalDispayedRows = totalCount ? totalCount : rows.length;
+  React.useEffect(() => {
+    setGlobalFilter(value);
+  }, [value, setGlobalFilter, preGlobalFilteredRows]);
+  return (
+    <SearchContainer>
+      {displayTotalOf && (
+        <TableItemCount
+          entity={displayedName}
+          count={totalDispayedRows}
+          locale={locale}
+        ></TableItemCount>
+      )}
+      <SearchInput
+        value={value}
+        placeholder={translations[locale].search}
+        disableToggle
+        onChange={(evt) => {
+          if (typeof onChange === 'function') {
+            // @ts-ignore
+            onChange(evt.target.value);
+          }
+        }}
+        {...rest}
+      />
+    </SearchContainer>
+  );
+}

package/src/lib/components/tablev2/SearchWithQueryParams.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { TableSearch as Search, SearchProps } from './Search';
+
+export type SearchWithQueryParamsProps = {
+  queryParams?: string;
+} & SearchProps;
+
+export function SearchWithQueryParams(props) {
+  const { queryParams = 'search', onChange, ...rest } = props;
+  const { search, pathname } = useLocation();
+  const history = useHistory();
+  const params = new URLSearchParams(search);
+  const initialValue = params.get(queryParams);
+  const [value, setValue] = useState(initialValue);
+
+  function handleOnChange(value: string) {
+    const { onChange } = props;
+    params.set(queryParams, value);
+    history.replace(`${pathname}?${params.toString()}`);
+    setValue(value);
+
+    if (typeof onChange === 'function') {
+      onChange(value);
+    }
+  }
+
+  return (
+    <Search
+      onChange={handleOnChange}
+      value={value}
+      onReset={() => {
+        handleOnChange('');
+      }}
+      {...rest}
+    />
+  );
+}

package/src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -0,0 +1,222 @@
+import { memo, CSSProperties, useEffect } from 'react';
+import { areEqual } from 'react-window';
+import { Row } from 'react-table';
+import { useTableContext } from './Tablev2.component';
+import {
+  HeadRow,
+  TableRow,
+  TableBody,
+  TableHeader,
+  NoResult,
+  SortCaret,
+} from './Tablestyle';
+import {
+  TableHeightKeyType,
+  TableLocalType,
+  TableVariantType,
+} from './TableUtils';
+import { useTableScrollbar, VirtualizedRows } from './TableCommon';
+import useSyncedScroll from './useSyncedScroll';
+import { Loader } from '../loader/Loader.component';
+import { Box } from '../box/Box';
+import { spacing } from '../../spacing';
+
+export type SingleSelectableContentProps<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  rowHeight: TableHeightKeyType;
+  separationLineVariant: TableVariantType;
+  backgroundVariant: TableVariantType;
+  onRowSelected?: (row: Row<DATA_ROW>) => void;
+  selectedId?: string;
+  locale?: TableLocalType;
+  customItemKey?: (index: Number, data: DATA_ROW) => string;
+  hasScrollbar?: boolean;
+  isLoadingMoreItems?: boolean;
+  children?: (rows: JSX.Element) => JSX.Element;
+};
+
+const translations = {
+  en: {
+    noResult: 'No results found',
+  },
+  fr: {
+    noResult: `Aucun résultat`,
+  },
+};
+
+type RenderRowType = {
+  index: number;
+  style: CSSProperties;
+};
+
+export function SingleSelectableContent<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>({
+  rowHeight = 'h40',
+  separationLineVariant = 'backgroundLevel3',
+  backgroundVariant = 'backgroundLevel1',
+  locale = 'en',
+  selectedId,
+  isLoadingMoreItems,
+  onRowSelected,
+  customItemKey,
+  children,
+}: SingleSelectableContentProps<DATA_ROW>) {
+  if (selectedId && !onRowSelected) {
+    console.error('Please specify the onRowSelected function.');
+  }
+
+  const { bodyRef, headerRef } = useSyncedScroll<DATA_ROW>();
+  const {
+    headerGroups,
+    prepareRow,
+    rows,
+    onBottom,
+    onBottomOffset,
+    setRowHeight,
+  } = useTableContext<DATA_ROW>();
+
+  useEffect(() => {
+    setRowHeight(rowHeight);
+  }, [rowHeight, setRowHeight]);
+
+  const RenderRow = memo(({ index, style }: RenderRowType) => {
+    const row = rows[index];
+    prepareRow(row);
+    let rowProps = row.getRowProps({
+      /**
+       * Note: We need to pass the style property to the row component.
+       * Otherwise when we scroll down, the next rows are flashing
+       * because they are re-rendered in loop.
+       */
+      style: { ...style },
+    });
+
+    rowProps = {
+      ...rowProps,
+      ...{
+        onClick: () => {
+          if (onRowSelected) return onRowSelected(row);
+        },
+      },
+    };
+
+    return (
+      <TableRow
+        {...rowProps}
+        isSelected={selectedId === row.id}
+        aria-selected={selectedId === row.id ? 'true' : 'false'}
+        separationLineVariant={separationLineVariant}
+        backgroundVariant={backgroundVariant}
+        selectedId={selectedId}
+        className="tr"
+      >
+        {row.cells.map((cell) => {
+          let cellProps = cell.getCellProps({
+            style: {
+              ...cell.column.cellStyle,
+              // Vertically center the text in cells.
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+            },
+            role: 'gridcell',
+          });
+
+          return (
+            <div {...cellProps} className="td">
+              {cell.render('Cell')}
+            </div>
+          );
+        })}
+      </TableRow>
+    );
+  }, areEqual);
+
+  const {
+    hasScrollbar,
+    setHasScrollbar,
+    scrollBarWidth,
+    handleScrollbarWidth,
+  } = useTableScrollbar();
+
+  function itemKey(index, data) {
+    if (typeof customItemKey === 'function') {
+      return customItemKey(index, data);
+    }
+
+    return index;
+  }
+  return (
+    <>
+      <div className="thead" role="rowgroup">
+        {headerGroups.map((headerGroup) => (
+          <HeadRow
+            {...headerGroup.getHeaderGroupProps()}
+            ref={headerRef}
+            hasScrollBar={hasScrollbar}
+            scrollBarWidth={scrollBarWidth}
+            rowHeight={rowHeight}
+            style={{ overflow: 'hidden' }}
+          >
+            {headerGroup.headers.map((column) => {
+              const headerStyleProps = column.getHeaderProps(
+                Object.assign(column.getSortByToggleProps(), {
+                  style: { ...column.cellStyle, position: 'relative' },
+                }),
+              );
+              return (
+                <TableHeader {...headerStyleProps} role="columnheader">
+                  <div>
+                    {column.render('Header')}
+                    <SortCaret column={column} />
+                  </div>
+                </TableHeader>
+              );
+            })}
+          </HeadRow>
+        ))}
+      </div>
+      <TableBody role="rowgroup" className="tbody" ref={handleScrollbarWidth}>
+        {typeof children === 'function' ? (
+          children(
+            <VirtualizedRows
+              rows={rows}
+              listRef={bodyRef}
+              itemKey={itemKey}
+              rowHeight={rowHeight}
+              setHasScrollbar={setHasScrollbar}
+              onBottom={onBottom}
+              onBottomOffset={onBottomOffset}
+              RenderRow={RenderRow}
+            />,
+          )
+        ) : rows.length ? (
+          <VirtualizedRows
+            rows={rows}
+            listRef={bodyRef}
+            itemKey={itemKey}
+            rowHeight={rowHeight}
+            setHasScrollbar={setHasScrollbar}
+            onBottom={onBottom}
+            onBottomOffset={onBottomOffset}
+            RenderRow={RenderRow}
+          />
+        ) : (
+          <NoResult>{translations[locale].noResult}</NoResult>
+        )}
+      </TableBody>
+      {isLoadingMoreItems && (
+        <Box
+          display="flex"
+          justifyContent="center"
+          marginTop={spacing.r16}
+          marginBottom={spacing.r16}
+        >
+          <Loader size="large" />
+        </Box>
+      )}
+    </>
+  );
+}