@punch-in/buffet-modern-core 3.3.11

package/src/components/Table/index.js

@@ -0,0 +1,172 @@
+/**
+ *
+ * Table
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  LoadingIndicator,
+  Table as StyledTable,
+  TableRowEmpty,
+} from '@punch-in/buffet-modern';
+import TableHeader from '../TableHeader';
+import TableRow from '../TableRow';
+import ActionCollapse from './ActionCollapse';
+
+function Table({
+  bulkActionProps,
+  className,
+  customRow,
+  headers,
+  isLoading,
+  onChangeSort,
+  onClickRow,
+  onSelect,
+  onSelectAll,
+  rows,
+  rowLinks,
+  showActionCollapse,
+  sortBy,
+  sortOrder,
+  tableEmptyText,
+  withBulkAction,
+}) {
+  let colSpan = withBulkAction ? headers.length + 1 : headers.length;
+
+  if (rowLinks.length > 0) {
+    colSpan += 1;
+  }
+
+  const areAllEntriesSelected =
+    rows.length > 0 && rows.some(row => row._isChecked === true);
+  const shouldDisplayEmptyRow = rows.length === 0 && !isLoading;
+
+  return (
+    <StyledTable className={className}>
+      <table className="">
+        <TableHeader
+          headers={headers}
+          onChangeSort={onChangeSort}
+          onSelectAll={onSelectAll}
+          rows={rows}
+          shouldAddCell={rowLinks.length > 0}
+          sortBy={sortBy}
+          sortOrder={sortOrder}
+          withBulkAction={withBulkAction}
+        />
+        <tbody>
+          {withBulkAction && areAllEntriesSelected && showActionCollapse && (
+            <ActionCollapse
+              colSpan={colSpan}
+              numberOfSelectedEntries={
+                rows.filter(row => row._isChecked === true).length
+              }
+              {...bulkActionProps}
+            />
+          )}
+          {isLoading && (
+            <TableRowEmpty isLoading>
+              <td colSpan={colSpan}>
+                <LoadingIndicator />
+              </td>
+            </TableRowEmpty>
+          )}
+          {shouldDisplayEmptyRow && (
+            <TableRowEmpty>
+              <td colSpan={colSpan}>{tableEmptyText}</td>
+            </TableRowEmpty>
+          )}
+          {!shouldDisplayEmptyRow &&
+            rows.map((row, index) => {
+              const key = row.id || `key${index}`;
+
+              if (customRow) {
+                const Row = customRow;
+
+                return (
+                  <React.Fragment key={JSON.stringify(row)}>
+                    <Row row={row} headers={headers} onSelect={onSelect} />
+                  </React.Fragment>
+                );
+              }
+
+              return (
+                <TableRow
+                  key={key}
+                  headers={headers}
+                  onClick={onClickRow}
+                  onSelect={() => {
+                    onSelect(row, index);
+                  }}
+                  row={row}
+                  rowLinks={rowLinks}
+                  withBulkAction={withBulkAction}
+                />
+              );
+            })}
+        </tbody>
+      </table>
+    </StyledTable>
+  );
+}
+
+Table.defaultProps = {
+  bulkActionProps: {
+    icon: 'trash',
+    onConfirm: () => {},
+    translatedNumberOfEntry: 'entry',
+    translatedNumberOfEntries: 'entries',
+    translatedAction: 'Delete all',
+  },
+  className: null,
+  customRow: null,
+  headers: [],
+  isLoading: false,
+  onChangeSort: () => {},
+  onClickRow: () => {},
+  onSelect: () => {},
+  onSelectAll: () => {},
+  rows: [],
+  rowLinks: [],
+  showActionCollapse: false,
+  sortBy: null,
+  sortOrder: 'asc',
+  tableEmptyText: 'There is no data',
+  withBulkAction: false,
+};
+
+Table.propTypes = {
+  bulkActionProps: PropTypes.shape({
+    icon: PropTypes.string,
+    onConfirm: PropTypes.func,
+    translatedAction: PropTypes.string,
+    translatedNumberOfEntries: PropTypes.string,
+    translatedNumberOfEntry: PropTypes.string,
+  }),
+  className: PropTypes.string,
+  customRow: PropTypes.func,
+  headers: PropTypes.arrayOf(
+    PropTypes.shape({
+      isSortEnabled: PropTypes.bool,
+      name: PropTypes.string,
+      value: PropTypes.string,
+    })
+  ),
+  isLoading: PropTypes.bool,
+  onChangeSort: PropTypes.func,
+  onClickRow: PropTypes.func,
+  onSelect: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  rowLinks: PropTypes.instanceOf(Array),
+  rows: PropTypes.instanceOf(Array),
+  showActionCollapse: PropTypes.bool,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  tableEmptyText: PropTypes.string,
+  withBulkAction: PropTypes.bool,
+};
+
+export default Table;

package/src/components/Table/tests/index.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { TableRowEmpty } from '@punch-in/buffet-modern';
+import TableRow from '../../TableRow';
+import Table from '../index';
+import ActionCollapse from '../ActionCollapse';
+
+describe('<Table />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(<Table />);
+  });
+
+  it('Should display the Empty row if there is no data', () => {
+    const wrapper = mount(<Table />);
+
+    expect(wrapper.find(TableRow)).toHaveLength(0);
+    expect(wrapper.find(TableRowEmpty)).toHaveLength(1);
+  });
+
+  it('Should display a custom component if given', () => {
+    const Custom = () => (
+      <tr>
+        <td>Test</td>
+      </tr>
+    );
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const rows = [
+      {
+        test: 'test1',
+        other: 'other',
+      },
+    ];
+    const wrapper = mount(
+      <Table customRow={Custom} rows={rows} headers={headers} />
+    );
+
+    expect(wrapper.find(TableRow)).toHaveLength(0);
+    expect(wrapper.find(TableRowEmpty)).toHaveLength(0);
+    expect(wrapper.find(Custom)).toHaveLength(1);
+  });
+
+  it('Should display the ActionCollapse correctly without the rowLinks', () => {
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const rows = [
+      {
+        test: 'test1',
+        other: 'other',
+        _isChecked: true,
+      },
+    ];
+    const wrapper = mount(
+      <Table rows={rows} headers={headers} withBulkAction />
+    );
+    const collapse = wrapper.find(ActionCollapse);
+
+    expect(collapse).toHaveLength(1);
+    expect(collapse.prop('colSpan')).toBe(2);
+  });
+
+  it('Should display the ActionCollapse correctly with the bulkAction', () => {
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const rows = [
+      {
+        test: 'test1',
+        other: 'other',
+        _isChecked: true,
+      },
+    ];
+    const rowLinks = [{ icon: 'trash', onClick: jest.fn() }];
+    const wrapper = mount(
+      <Table rows={rows} headers={headers} rowLinks={rowLinks} withBulkAction />
+    );
+    const collapse = wrapper.find(ActionCollapse);
+    expect(collapse).toHaveLength(1);
+    expect(collapse.prop('colSpan')).toBe(3);
+  });
+
+  it('Should display the ActionCollapse if one of the row is not checked', () => {
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const rows = [
+      {
+        test: 'test1',
+        other: 'other',
+        _isChecked: true,
+      },
+      {
+        test: 'test2',
+        other: 'other1',
+        _isChecked: false,
+      },
+    ];
+    const rowLinks = [{ icon: 'trash', onClick: jest.fn() }];
+    const wrapper = mount(
+      <Table rows={rows} headers={headers} rowLinks={rowLinks} withBulkAction />
+    );
+    const collapse = wrapper.find(ActionCollapse);
+
+    expect(collapse).toHaveLength(1);
+    expect(collapse.prop('numberOfSelectedEntries')).toBe(1);
+  });
+
+  it('Should not display the ActionCollapse if the withBulkAction is false', () => {
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const rows = [
+      {
+        test: 'test1',
+        other: 'other',
+        _isChecked: true,
+      },
+      {
+        test: 'test2',
+        other: 'other1',
+        _isChecked: true,
+      },
+    ];
+    const rowLinks = [{ icon: 'trash', onClick: jest.fn() }];
+    const wrapper = mount(
+      <Table rows={rows} headers={headers} rowLinks={rowLinks} />
+    );
+    const collapse = wrapper.find(ActionCollapse);
+
+    expect(collapse).toHaveLength(0);
+  });
+});

package/src/components/TableHeader/index.js

@@ -0,0 +1,103 @@
+/**
+ *
+ * TableHeader
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { Checkbox } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function TableHeader({
+  headers,
+  onChangeSort,
+  onSelectAll,
+  rows,
+  shouldAddCell,
+  sortBy,
+  sortOrder,
+  withBulkAction,
+}) {
+  const checked = rows.length > 0 && rows.every(row => row._isChecked === true);
+  const shouldDisplayNotChecked =
+    rows.some(row => row._isChecked === true) && !checked;
+
+  return (
+    <thead>
+      <tr>
+        {withBulkAction && (
+          <th className="checkCell">
+            <Checkbox
+              onChange={onSelectAll}
+              checked={checked}
+              someChecked={shouldDisplayNotChecked}
+            />
+          </th>
+        )}
+        {headers.map(header => {
+          const { isSortEnabled, name, value } = header;
+          const shouldDisplaySort = isSortEnabled && sortBy === value;
+          const firstElementThatCanBeSorted = get(
+            headers.filter(h => h.isSortEnabled),
+            [0, 'value'],
+            null
+          );
+
+          return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            <th
+              key={value}
+              onClick={() => {
+                onChangeSort({
+                  sortBy: value,
+                  firstElementThatCanBeSorted,
+                  isSortEnabled,
+                });
+              }}
+            >
+              <p className={isSortEnabled ? 'clickable' : ''}>
+                {name}
+                {shouldDisplaySort && <Icon icon={sortOrder || 'asc'} />}
+              </p>
+            </th>
+          );
+        })}
+        {shouldAddCell && <th />}
+      </tr>
+    </thead>
+  );
+}
+
+TableHeader.defaultProps = {
+  headers: [],
+  onChangeSort: () => {},
+  onSelectAll: () => {},
+  rows: [],
+  shouldAddCell: false,
+  sortBy: null,
+  sortOrder: 'asc',
+  withBulkAction: false,
+};
+
+TableHeader.propTypes = {
+  headers: PropTypes.arrayOf(
+    PropTypes.shape({
+      isSortEnabled: PropTypes.bool,
+      name: PropTypes.string,
+      value: PropTypes.string,
+    })
+  ),
+  onChangeSort: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  rows: PropTypes.instanceOf(Array),
+  shouldAddCell: PropTypes.bool,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  withBulkAction: PropTypes.bool,
+};
+
+export default TableHeader;

package/src/components/TableHeader/tests/index.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Checkbox } from '@punch-in/buffet-modern';
+
+import TableHeader from '../index';
+
+describe('<TableHeader />', () => {
+  describe('Checkbox behaviour', () => {
+    it('Should display the check sign if all rows are selected (someChecked to false and checked to true)', () => {
+      const props = {
+        rows: [{ _isChecked: true }, { _isChecked: true }],
+        withBulkAction: true,
+      };
+
+      const renderedComponent = mount(
+        <table>
+          <TableHeader {...props} />
+        </table>
+      );
+      const checkbox = renderedComponent.find(Checkbox);
+      const { checked, someChecked } = checkbox.props();
+
+      expect(checkbox).not.toHaveLength(0);
+      expect(checked).toBeTruthy();
+      expect(someChecked).toBeFalsy();
+    });
+
+    it('Should display the uncheck sign if not all the rows are selected (someChecked to true and checked to false)', () => {
+      const props = {
+        withBulkAction: true,
+        rows: [{ _isChecked: true }, { _isChecked: false }],
+      };
+
+      const renderedComponent = mount(
+        <table>
+          <TableHeader {...props} />
+        </table>
+      );
+      const checkbox = renderedComponent.find(Checkbox);
+      const { checked, someChecked } = checkbox.props();
+
+      expect(checkbox).not.toHaveLength(0);
+      expect(checked).toBeFalsy();
+      expect(someChecked).toBeTruthy();
+    });
+
+    it('Should display nothing if none of the rows are selected (all props to false)', () => {
+      const props = {
+        withBulkAction: true,
+        rows: [{ _isChecked: false }, { _isChecked: false }],
+      };
+
+      const renderedComponent = mount(
+        <table>
+          <TableHeader {...props} />
+        </table>
+      );
+      const checkbox = renderedComponent.find(Checkbox);
+      const { checked, someChecked } = checkbox.props();
+
+      expect(checkbox).not.toHaveLength(0);
+      expect(checked).toBeFalsy();
+      expect(someChecked).toBeFalsy();
+    });
+
+    it('Should display nothing if there is no rows', () => {
+      const props = {
+        withBulkAction: true,
+        rows: [],
+      };
+
+      const renderedComponent = mount(
+        <table>
+          <TableHeader {...props} />
+        </table>
+      );
+      const checkbox = renderedComponent.find(Checkbox);
+      const { checked, someChecked } = checkbox.props();
+
+      expect(checkbox).not.toHaveLength(0);
+      expect(checked).toBeFalsy();
+      expect(someChecked).toBeFalsy();
+    });
+  });
+});

package/src/components/TableRow/index.js

@@ -0,0 +1,116 @@
+/**
+ *
+ * TableRow
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isFunction, isObject } from 'lodash';
+import { Checkbox, Links as StyledLinks } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+
+function TableRow({
+  headers,
+  onClick,
+  onSelect,
+  row,
+  rowLinks,
+  withBulkAction,
+}) {
+  // const displayedCells = headers.map(header => ({ key: header.value, );
+
+  return (
+    <tr
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(e, row);
+      }}
+    >
+      {withBulkAction && (
+        <td>
+          <Checkbox
+            onClick={e => {
+              e.stopPropagation();
+            }}
+            onChange={onSelect}
+            checked={row._isChecked}
+          />
+        </td>
+      )}
+      {headers.map(({ value: cellName, cellFormatter, cellAdapter }) => {
+        let displayedValue = !isObject(row[cellName]) ? row[cellName] : '-';
+
+        if (isFunction(cellFormatter)) {
+          displayedValue = cellFormatter(row[cellName], row);
+        }
+
+        let displayedContent = <p>{displayedValue || '-'}</p>;
+
+        if (isFunction(cellAdapter)) {
+          displayedContent = cellAdapter(row);
+        }
+
+        return (
+          <td key={cellName} className={`${cellName}-cell`}>
+            {displayedContent}
+          </td>
+        );
+      })}
+      {rowLinks.length > 0 && (
+        <td>
+          <div style={{ width: 'fit-content', float: 'right' }}>
+            <StyledLinks>
+              {rowLinks.map((icon, index) => (
+                <button
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={index + icon}
+                  onClick={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    icon.onClick(row);
+                  }}
+                  type="button"
+                >
+                  <Icon className="link-icon" icon={icon.icon} />
+                </button>
+              ))}
+            </StyledLinks>
+          </div>
+        </td>
+      )}
+    </tr>
+  );
+}
+
+TableRow.defaultProps = {
+  headers: [],
+  onClick: () => {},
+  onSelect: () => {},
+  row: {},
+  rowLinks: [],
+  withBulkAction: false,
+};
+
+TableRow.propTypes = {
+  headers: PropTypes.arrayOf(
+    PropTypes.shape({
+      isSortEnabled: PropTypes.bool,
+      name: PropTypes.string,
+      value: PropTypes.string,
+    })
+  ),
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  row: PropTypes.object,
+  rowLinks: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.node,
+    })
+  ),
+  withBulkAction: PropTypes.bool,
+};
+
+export default TableRow;

package/src/components/TableRow/tests/index.test.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Checkbox, Links as StyledLinks } from '@punch-in/buffet-modern';
+
+import TableRow from '../index';
+
+describe('<TableRow />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(
+      <table>
+        <tbody>
+          <TableRow />
+        </tbody>
+      </table>
+    );
+  });
+
+  it('Should the display the checkbox if the withBulkAction prop is true', () => {
+    const wrapper = mount(
+      <table>
+        <tbody>
+          <TableRow withBulkAction />
+        </tbody>
+      </table>
+    );
+
+    expect(wrapper.find(Checkbox)).toHaveLength(1);
+  });
+
+  it('Should display the cells according to the given headers', () => {
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const row = {
+      test: 'test1',
+      other: 'other',
+    };
+
+    const wrapper = mount(
+      <table>
+        <tbody>
+          <TableRow headers={headers} row={row} />
+        </tbody>
+      </table>
+    );
+
+    expect(wrapper.find('td')).toHaveLength(1);
+  });
+
+  it('should display the links', () => {
+    const headers = [
+      {
+        value: 'test',
+      },
+    ];
+    const row = {
+      test: 'test1',
+      other: 'other',
+    };
+    const rowLinks = [
+      {
+        icon: 'trash',
+        onClick: jest.fn(),
+      },
+    ];
+
+    const wrapper = mount(
+      <table>
+        <tbody>
+          <TableRow headers={headers} row={row} rowLinks={rowLinks} />
+        </tbody>
+      </table>
+    );
+
+    expect(wrapper.find('td')).toHaveLength(2);
+    expect(wrapper.find(StyledLinks)).toHaveLength(1);
+
+    const button = wrapper.find('button').at(0);
+
+    expect(button).toHaveLength(1);
+
+    button.simulate('click');
+
+    expect(rowLinks[0].onClick).toHaveBeenCalledWith(row);
+  });
+});