@map-colonies/react-components 3.12.0 → 3.12.2

package/src/lib/smart-table/smart-table-row.tsx

@@ -1,78 +1,78 @@
-/* eslint-disable */
-
-import { CellMetadata, ElementFunction } from './smart-table-types';
-import React, { useState } from 'react';
-import { TableRow, TableCell, IconButton, Collapse } from '@material-ui/core';
-import {
-  KeyboardArrowDown as KeyboardArrowDownIcon,
-  KeyboardArrowUp as KeyboardArrowUpIcon,
-} from '@material-ui/icons';
-
-interface SmartTableRowProps<T> {
-  item: T;
-  cellsMetadata: CellMetadata<T>[];
-  isRowSelected: boolean;
-  rowIndex: number;
-  onRowSelected?: (index: number) => void;
-  isCollapseable: boolean;
-  collapsedElement?: ElementFunction<T>;
-}
-
-export function SmartTableRow<T>(props: SmartTableRowProps<T>) {
-  const {
-    cellsMetadata,
-    isRowSelected,
-    item,
-    onRowSelected,
-    rowIndex,
-    isCollapseable,
-    collapsedElement,
-  } = props;
-  const [open, setOpen] = useState(false);
-  const cellCount = cellsMetadata.length;
-
-  const handleClick = (): void => {
-    onRowSelected?.(rowIndex);
-  };
-  return (
-    <>
-      <TableRow hover selected={isRowSelected} onClick={handleClick}>
-        {isCollapseable && (
-          <TableCell padding="checkbox">
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={(e): void => {
-                e.stopPropagation();
-                setOpen(!open);
-              }}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </TableCell>
-        )}
-        {cellsMetadata.map((cell) => (
-          <TableCell
-            key={(cell.id as string) + rowIndex.toString()}
-            align={cell.numeric ? 'right' : 'left'}
-            padding={cell.disablePadding ? 'none' : 'default'}
-          >
-            {cell.transform ? cell.transform(item[cell.id]) : item[cell.id]}
-          </TableCell>
-        ))}
-      </TableRow>
-      {isCollapseable && (
-        <TableRow>
-          <TableCell
-            style={{ paddingBottom: 0, paddingTop: 0 }}
-            colSpan={cellCount + 1}
-          >
-            <Collapse in={open} unmountOnExit timeout="auto">
-              {collapsedElement?.(item)}
-            </Collapse>
-          </TableCell>
-        </TableRow>
-      )}
-    </>
-  );
-}
+/* eslint-disable */
+
+import { CellMetadata, ElementFunction } from './smart-table-types';
+import React, { useState } from 'react';
+import { TableRow, TableCell, IconButton, Collapse } from '@material-ui/core';
+import {
+  KeyboardArrowDown as KeyboardArrowDownIcon,
+  KeyboardArrowUp as KeyboardArrowUpIcon,
+} from '@material-ui/icons';
+
+interface SmartTableRowProps<T> {
+  item: T;
+  cellsMetadata: CellMetadata<T>[];
+  isRowSelected: boolean;
+  rowIndex: number;
+  onRowSelected?: (index: number) => void;
+  isCollapseable: boolean;
+  collapsedElement?: ElementFunction<T>;
+}
+
+export function SmartTableRow<T>(props: SmartTableRowProps<T>) {
+  const {
+    cellsMetadata,
+    isRowSelected,
+    item,
+    onRowSelected,
+    rowIndex,
+    isCollapseable,
+    collapsedElement,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const cellCount = cellsMetadata.length;
+
+  const handleClick = (): void => {
+    onRowSelected?.(rowIndex);
+  };
+  return (
+    <>
+      <TableRow hover selected={isRowSelected} onClick={handleClick}>
+        {isCollapseable && (
+          <TableCell padding="checkbox">
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={(e): void => {
+                e.stopPropagation();
+                setOpen(!open);
+              }}
+            >
+              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            </IconButton>
+          </TableCell>
+        )}
+        {cellsMetadata.map((cell) => (
+          <TableCell
+            key={(cell.id as string) + rowIndex.toString()}
+            align={cell.numeric ? 'right' : 'left'}
+            padding={cell.disablePadding ? 'none' : 'default'}
+          >
+            {cell.transform ? cell.transform(item[cell.id]) : item[cell.id]}
+          </TableCell>
+        ))}
+      </TableRow>
+      {isCollapseable && (
+        <TableRow>
+          <TableCell
+            style={{ paddingBottom: 0, paddingTop: 0 }}
+            colSpan={cellCount + 1}
+          >
+            <Collapse in={open} unmountOnExit timeout="auto">
+              {collapsedElement?.(item)}
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}

package/src/lib/smart-table/smart-table-types.ts

@@ -1,10 +1,10 @@
-export type Order = 'asc' | 'desc';
-export type ElementFunction<T> = (item: T) => JSX.Element;
-
-export interface CellMetadata<T> {
-  disablePadding: boolean;
-  id: keyof T;
-  label: string;
-  numeric: boolean;
-  transform?: (value: T[keyof T]) => string;
-}
+export type Order = 'asc' | 'desc';
+export type ElementFunction<T> = (item: T) => JSX.Element;
+
+export interface CellMetadata<T> {
+  disablePadding: boolean;
+  id: keyof T;
+  label: string;
+  numeric: boolean;
+  transform?: (value: T[keyof T]) => string;
+}

package/src/lib/smart-table/smart-table.spec.tsx

@@ -1,116 +1,116 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { TableRow } from '@material-ui/core';
-import { SmartTable } from './smart-table';
-import { headCells, items } from './__mock-data__/smartTableMocks';
-import { SmartTableRow } from './smart-table-row';
-import { SmartEnhancedTableHead } from './smart-table-head';
-
-const requestSort = jest.fn();
-
-afterEach(() => {
-  requestSort.mockClear();
-});
-
-it(
-  'generates an empty table row if the ' +
-    'items array is empty or if the rows per page is bigger',
-  () => {
-    const wrapper = shallow(
-      <SmartTable
-        cellsMetadata={headCells}
-        count={10}
-        handleChangePage={() => {
-          // do nothing for eslint
-        }}
-        handleChangeRowsPerPage={() => {
-          // do nothing for eslint
-        }}
-        isCollapseable={false}
-        items={[]}
-        onRowSelected={() => {
-          // do nothing for eslint
-        }}
-        onRequestSort={requestSort}
-        page={0}
-        rowsPerPage={10}
-      />
-    );
-
-    expect(wrapper.exists(TableRow)).toBe(true);
-
-    wrapper.setProps({ items: new Array(10).map(() => items[0]) });
-
-    expect(wrapper.exists(TableRow)).toBe(false);
-
-    wrapper.setProps({ items: items });
-
-    expect(wrapper.exists(TableRow)).toBe(true);
-  }
-);
-
-it('Generates a row for each of the items', () => {
-  const wrapper = shallow(
-    <SmartTable
-      cellsMetadata={headCells}
-      count={10}
-      handleChangePage={() => {
-        // do nothing for eslint
-      }}
-      handleChangeRowsPerPage={() => {
-        // do nothing for eslint
-      }}
-      isCollapseable={false}
-      items={items}
-      onRowSelected={() => {
-        // do nothing for eslint
-      }}
-      onRequestSort={requestSort}
-      page={0}
-      rowsPerPage={10}
-    />
-  );
-  const rows = wrapper.find(SmartTableRow);
-
-  expect(rows).toHaveLength(items.length);
-
-  rows.forEach((row, index) => {
-    expect(row.props()).toHaveProperty('item', items[index]);
-  });
-});
-
-it('calls on request sort with the correct order and property when sort is requested', () => {
-  const wrapper = shallow(
-    <SmartTable
-      cellsMetadata={headCells}
-      count={10}
-      handleChangePage={() => {
-        // do nothing for eslint
-      }}
-      handleChangeRowsPerPage={() => {
-        // do nothing for eslint
-      }}
-      isCollapseable={false}
-      items={items}
-      onRowSelected={() => {
-        // do nothing for eslint
-      }}
-      onRequestSort={requestSort}
-      page={0}
-      rowsPerPage={10}
-    />
-  );
-
-  wrapper
-    .find(SmartEnhancedTableHead)
-    .simulate('requestSort', {}, headCells[0].id);
-
-  expect(requestSort).toHaveBeenCalledWith(headCells[0].id, 'asc');
-  wrapper.update();
-
-  wrapper
-    .find(SmartEnhancedTableHead)
-    .simulate('requestSort', {}, headCells[0].id);
-
-  expect(requestSort).toHaveBeenCalledWith(headCells[0].id, 'desc');
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { TableRow } from '@material-ui/core';
+import { SmartTable } from './smart-table';
+import { headCells, items } from './__mock-data__/smartTableMocks';
+import { SmartTableRow } from './smart-table-row';
+import { SmartEnhancedTableHead } from './smart-table-head';
+
+const requestSort = jest.fn();
+
+afterEach(() => {
+  requestSort.mockClear();
+});
+
+it(
+  'generates an empty table row if the ' +
+    'items array is empty or if the rows per page is bigger',
+  () => {
+    const wrapper = shallow(
+      <SmartTable
+        cellsMetadata={headCells}
+        count={10}
+        handleChangePage={() => {
+          // do nothing for eslint
+        }}
+        handleChangeRowsPerPage={() => {
+          // do nothing for eslint
+        }}
+        isCollapseable={false}
+        items={[]}
+        onRowSelected={() => {
+          // do nothing for eslint
+        }}
+        onRequestSort={requestSort}
+        page={0}
+        rowsPerPage={10}
+      />
+    );
+
+    expect(wrapper.exists(TableRow)).toBe(true);
+
+    wrapper.setProps({ items: new Array(10).map(() => items[0]) });
+
+    expect(wrapper.exists(TableRow)).toBe(false);
+
+    wrapper.setProps({ items: items });
+
+    expect(wrapper.exists(TableRow)).toBe(true);
+  }
+);
+
+it('Generates a row for each of the items', () => {
+  const wrapper = shallow(
+    <SmartTable
+      cellsMetadata={headCells}
+      count={10}
+      handleChangePage={() => {
+        // do nothing for eslint
+      }}
+      handleChangeRowsPerPage={() => {
+        // do nothing for eslint
+      }}
+      isCollapseable={false}
+      items={items}
+      onRowSelected={() => {
+        // do nothing for eslint
+      }}
+      onRequestSort={requestSort}
+      page={0}
+      rowsPerPage={10}
+    />
+  );
+  const rows = wrapper.find(SmartTableRow);
+
+  expect(rows).toHaveLength(items.length);
+
+  rows.forEach((row, index) => {
+    expect(row.props()).toHaveProperty('item', items[index]);
+  });
+});
+
+it('calls on request sort with the correct order and property when sort is requested', () => {
+  const wrapper = shallow(
+    <SmartTable
+      cellsMetadata={headCells}
+      count={10}
+      handleChangePage={() => {
+        // do nothing for eslint
+      }}
+      handleChangeRowsPerPage={() => {
+        // do nothing for eslint
+      }}
+      isCollapseable={false}
+      items={items}
+      onRowSelected={() => {
+        // do nothing for eslint
+      }}
+      onRequestSort={requestSort}
+      page={0}
+      rowsPerPage={10}
+    />
+  );
+
+  wrapper
+    .find(SmartEnhancedTableHead)
+    .simulate('requestSort', {}, headCells[0].id);
+
+  expect(requestSort).toHaveBeenCalledWith(headCells[0].id, 'asc');
+  wrapper.update();
+
+  wrapper
+    .find(SmartEnhancedTableHead)
+    .simulate('requestSort', {}, headCells[0].id);
+
+  expect(requestSort).toHaveBeenCalledWith(headCells[0].id, 'desc');
+});

package/src/lib/smart-table/smart-table.tsx

@@ -1,115 +1,115 @@
-/* eslint-disable */
-import React, { useState } from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Paper,
-  TablePagination,
-  Typography,
-} from '@material-ui/core';
-import { CellMetadata, ElementFunction, Order } from './smart-table-types';
-import { SmartEnhancedTableHead } from './smart-table-head';
-import { SmartTableRow } from './smart-table-row';
-
-export interface SmartTableProps<T> {
-  cellsMetadata: CellMetadata<T>[];
-  items: T[];
-  onRequestSort: (property: keyof T, order: Order) => void;
-  onRowSelected: (index: number) => void;
-  isCollapseable: boolean;
-  collapsedElement?: ElementFunction<T>;
-  isDense?: boolean;
-  page: number;
-  rowsPerPage: 5 | 10;
-  count: number;
-  handleChangePage: (event: unknown, newPage: number) => void;
-  handleChangeRowsPerPage: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export function SmartTable<T>(props: SmartTableProps<T>) {
-  const [orderBy, setOrderBy] = useState<keyof T | ''>('');
-  const [order, setOrder] = useState<Order>('asc');
-  const {
-    cellsMetadata,
-    items,
-    onRequestSort,
-    onRowSelected,
-    isCollapseable,
-    collapsedElement,
-    isDense,
-    page,
-    rowsPerPage,
-    count,
-    handleChangePage,
-    handleChangeRowsPerPage,
-  } = props;
-
-  const handleRequestSort = (
-    event: React.MouseEvent<unknown>,
-    property: keyof T
-  ): void => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-    onRequestSort(property, isAsc ? 'desc' : 'asc');
-  };
-
-  return (
-    <TableContainer component={Paper}>
-      <Table size={isDense ? 'small' : 'medium'}>
-        <SmartEnhancedTableHead
-          headCells={cellsMetadata}
-          onRequestSort={handleRequestSort}
-          order={order}
-          orderBy={orderBy}
-          isCollapseable={isCollapseable}
-        />
-        <TableBody>
-          {items.map((item, index) => (
-            <SmartTableRow
-              key={index}
-              item={item}
-              rowIndex={index}
-              isCollapseable={isCollapseable}
-              cellsMetadata={cellsMetadata}
-              collapsedElement={collapsedElement}
-              isRowSelected={false}
-              onRowSelected={onRowSelected}
-            />
-          ))}
-          {(items.length === 0 || rowsPerPage > items.length) && (
-            <TableRow
-              style={{
-                height: (isDense ? 33 : 53) * (rowsPerPage - items.length),
-              }}
-            >
-              <TableCell
-                colSpan={
-                  isCollapseable
-                    ? cellsMetadata.length + 1
-                    : cellsMetadata.length
-                }
-              >
-                {items.length === 0 && (
-                  <Typography align="center">No results :(</Typography>
-                )}
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <TablePagination
-        rowsPerPage={rowsPerPage}
-        rowsPerPageOptions={[5, 10]}
-        component="div"
-        count={count}
-        page={page}
-        onChangePage={handleChangePage}
-        onChangeRowsPerPage={handleChangeRowsPerPage}
-      />
-    </TableContainer>
-  );
-}
+/* eslint-disable */
+import React, { useState } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Paper,
+  TablePagination,
+  Typography,
+} from '@material-ui/core';
+import { CellMetadata, ElementFunction, Order } from './smart-table-types';
+import { SmartEnhancedTableHead } from './smart-table-head';
+import { SmartTableRow } from './smart-table-row';
+
+export interface SmartTableProps<T> {
+  cellsMetadata: CellMetadata<T>[];
+  items: T[];
+  onRequestSort: (property: keyof T, order: Order) => void;
+  onRowSelected: (index: number) => void;
+  isCollapseable: boolean;
+  collapsedElement?: ElementFunction<T>;
+  isDense?: boolean;
+  page: number;
+  rowsPerPage: 5 | 10;
+  count: number;
+  handleChangePage: (event: unknown, newPage: number) => void;
+  handleChangeRowsPerPage: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function SmartTable<T>(props: SmartTableProps<T>) {
+  const [orderBy, setOrderBy] = useState<keyof T | ''>('');
+  const [order, setOrder] = useState<Order>('asc');
+  const {
+    cellsMetadata,
+    items,
+    onRequestSort,
+    onRowSelected,
+    isCollapseable,
+    collapsedElement,
+    isDense,
+    page,
+    rowsPerPage,
+    count,
+    handleChangePage,
+    handleChangeRowsPerPage,
+  } = props;
+
+  const handleRequestSort = (
+    event: React.MouseEvent<unknown>,
+    property: keyof T
+  ): void => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    onRequestSort(property, isAsc ? 'desc' : 'asc');
+  };
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size={isDense ? 'small' : 'medium'}>
+        <SmartEnhancedTableHead
+          headCells={cellsMetadata}
+          onRequestSort={handleRequestSort}
+          order={order}
+          orderBy={orderBy}
+          isCollapseable={isCollapseable}
+        />
+        <TableBody>
+          {items.map((item, index) => (
+            <SmartTableRow
+              key={index}
+              item={item}
+              rowIndex={index}
+              isCollapseable={isCollapseable}
+              cellsMetadata={cellsMetadata}
+              collapsedElement={collapsedElement}
+              isRowSelected={false}
+              onRowSelected={onRowSelected}
+            />
+          ))}
+          {(items.length === 0 || rowsPerPage > items.length) && (
+            <TableRow
+              style={{
+                height: (isDense ? 33 : 53) * (rowsPerPage - items.length),
+              }}
+            >
+              <TableCell
+                colSpan={
+                  isCollapseable
+                    ? cellsMetadata.length + 1
+                    : cellsMetadata.length
+                }
+              >
+                {items.length === 0 && (
+                  <Typography align="center">No results :(</Typography>
+                )}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={[5, 10]}
+        component="div"
+        count={count}
+        page={page}
+        onChangePage={handleChangePage}
+        onChangeRowsPerPage={handleChangeRowsPerPage}
+      />
+    </TableContainer>
+  );
+}