@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/table/row/row.jsx

@@ -0,0 +1,253 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { GrDrag } from 'react-icons/gr';
+import { Cell, cellShape } from '../cell/cell';
+import { ExpandedContentRow } from './expanded-content-row';
+import { actionsShape } from '../../actions/actions.shape';
+import { getHeaderAlignment } from '../helper';
+import styles from './row.module.less';
+
+export const Row = (props) => {
+  const {
+    row,
+    rowIndex,
+    isHeader,
+    columnCount,
+    columnAlignment,
+    columnHeaderAlignments,
+    columnWidths,
+    colSpan,
+    hasRowActions,
+    rowsMetaData,
+    setRowsMetaData,
+    provided,
+    snapshot,
+    draggableTable,
+    width,
+  } = props;
+  const targetRef = useRef();
+  const columnHeaderAlignment = getHeaderAlignment(
+    columnHeaderAlignments,
+    isHeader,
+    rowIndex,
+  );
+
+  if (rowsMetaData && setRowsMetaData) {
+    useEffect(() => {
+      if (targetRef.current) {
+        setRowsMetaData((data) => {
+          const lastElement = data[data.length - 1];
+          return [
+            ...data,
+            {
+              width: targetRef.current.offsetWidth,
+              height: targetRef.current.offsetHeight,
+              isHeader: !!isHeader,
+              stickyOffset: lastElement
+                ? lastElement.height + lastElement.stickyOffset
+                : 0,
+            },
+          ];
+        });
+      }
+    }, []);
+  }
+
+  const {
+    onRowClick,
+    onRowFocus,
+    onRowMouseEnter,
+    onRowMouseLeave,
+    expandedContent,
+    active,
+  } = row;
+
+  const cells = row.cells.map((c, i) => {
+    const key = `${isHeader ? 0 : 1}_${rowIndex}_${i}`;
+
+    return (
+      <Cell
+        cell={c}
+        key={key}
+        isHeader={isHeader}
+        columnAlignment={columnAlignment[i]}
+        columnHeaderAlignment={columnHeaderAlignment[i]}
+        width={columnWidths ? columnWidths[i] : undefined}
+        snapshot={snapshot}
+        testId={c.testId}
+      />
+    );
+  });
+
+  const rowActions = hasRowActions && (
+    <Cell
+      cell={{
+        type: 'Actions',
+        actions: row.actions,
+      }}
+      key={columnCount}
+      isHeader={isHeader}
+    />
+  );
+
+  const getItemStyle = (isDragging, draggableStyle) => {
+    return {
+      minWidth: isDragging && `${width}px`,
+      width: isDragging && '100%',
+      display: isDragging && 'table',
+      background: isDragging && 'var(--color-background-listitem-active)',
+      border: isDragging && 'var(--color-border)',
+      borderTop: isDragging && 0,
+      opacity: isDragging && 0.1,
+      ...draggableStyle,
+    };
+  };
+
+  const getDragItem = () => {
+    if (row.noDrag) {
+      return <td />;
+    }
+    return (
+      <td className={styles.dragIconCell}>
+        <div
+          {...provided.dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+          className={styles.dragIcon}
+        >
+          <GrDrag />
+        </div>
+      </td>
+    );
+  };
+
+  const stickyStyle = () => {
+    let styles = {};
+    const rowMetaData = rowsMetaData ? rowsMetaData[rowIndex] : undefined;
+    if (rowMetaData) {
+      styles = {
+        position: 'sticky',
+        zIndex: 4,
+        top: rowMetaData.stickyOffset ? `${rowMetaData.stickyOffset}px` : 0,
+      };
+    }
+    return styles;
+  };
+
+  return isHeader ? (
+    <>
+      <tr
+        ref={targetRef}
+        key={rowIndex}
+        onClick={onRowClick}
+        onMouseEnter={onRowMouseEnter}
+        onMouseLeave={onRowMouseLeave}
+        onFocus={onRowFocus}
+        className={cx(
+          onRowClick ? styles.clickableRow : null,
+          onRowMouseEnter ? styles.hoverableRow : null,
+        )}
+        style={{ ...stickyStyle() }}
+      >
+        {draggableTable ? <Cell isHeader /> : null}
+        {cells}
+        {rowActions}
+      </tr>
+      {expandedContent && expandedContent.content ? (
+        <ExpandedContentRow
+          key={`${rowIndex}_expanded_content`}
+          colSpan={colSpan}
+          flush={expandedContent.flush === true}
+        >
+          {expandedContent.content}
+        </ExpandedContentRow>
+      ) : null}
+    </>
+  ) : (
+    <>
+      <tr
+        key={rowIndex}
+        onClick={onRowClick}
+        onMouseEnter={onRowMouseEnter}
+        onMouseLeave={onRowMouseLeave}
+        onFocus={onRowFocus}
+        className={cx(
+          onRowClick ? styles.clickableRow : null,
+          onRowMouseEnter ? styles.hoverableRow : null,
+          active ? styles.rowActive : null,
+        )}
+        ref={provided?.innerRef || null}
+        {...(provided?.draggableProps || null)} // eslint-disable-line react/jsx-props-no-spreading
+        style={
+          snapshot && provided
+            ? getItemStyle(
+                snapshot.isDragging,
+                provided.draggableProps.style,
+                provided,
+              )
+            : null
+        }
+      >
+        {draggableTable ? getDragItem() : null}
+        {cells}
+        {rowActions}
+      </tr>
+      {expandedContent && expandedContent.content ? (
+        <ExpandedContentRow
+          key={`${rowIndex}_expanded_content`}
+          colSpan={colSpan}
+          flush={expandedContent.flush === true}
+        >
+          {expandedContent.content}
+        </ExpandedContentRow>
+      ) : null}
+    </>
+  );
+};
+
+export const rowShape = PropTypes.shape({
+  active: PropTypes.bool,
+  cells: PropTypes.arrayOf(cellShape),
+  noDrag: PropTypes.bool,
+  onRowClick: PropTypes.func,
+  onRowFocus: PropTypes.func,
+  onRowHover: PropTypes.func,
+  actions: actionsShape,
+  expandedContent: PropTypes.shape({
+    content: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    flush: PropTypes.bool,
+  }),
+});
+
+Row.defaultProps = {
+  isHeader: false,
+  columnAlignment: [],
+  columnHeaderAlignments: [],
+  draggableTable: false,
+  snapshot: null,
+  provided: null,
+};
+
+Row.propTypes = {
+  row: rowShape.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  isHeader: PropTypes.bool,
+  columnCount: PropTypes.number.isRequired,
+  colSpan: PropTypes.number.isRequired,
+  columnHeaderAlignments: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.oneOf(['left', 'right', 'center', '']),
+      PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'center', ''])),
+    ]),
+  ),
+  columnAlignment: PropTypes.arrayOf(
+    PropTypes.oneOf(['left', 'right', 'center', '']),
+  ),
+  hasRowActions: PropTypes.bool.isRequired,
+  draggableTable: PropTypes.bool,
+  snapshot: PropTypes.object,
+  provided: PropTypes.object,
+};

package/src/components/table/row/row.module.less

@@ -0,0 +1,62 @@
+@import '../../../style/variables.less';
+
+.clickableRow {
+  cursor: pointer;
+}
+
+.hoverableRow,
+.clickableRow {
+  &:hover {
+    background-color: var(--color-background-listitem-active) !important;
+  }
+}
+
+.expandableRow {
+  &.flush {
+    padding: 0 !important;
+    height: auto !important;
+  }
+}
+
+.rowActive {
+  position: relative;
+  background-color: var(--color-background-listitem-active) !important;
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+    transition: background 0.3s;
+    background: var(--color-background-primary);
+  }
+}
+
+.dragIconCell {
+  width: @input_height - 2px;
+  position: relative;
+}
+
+.dragIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  inset: 0;
+
+  path {
+    stroke: var(--color-text-faint);
+  }
+
+  &:hover path {
+    stroke: var(--color-text-primary-hover);
+  }
+
+  &:active path {
+    stroke: var(--color-text-primary-active);
+  }
+}

package/src/components/table/table-scroll-wrapper.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import cx from 'classnames';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import styles from './table.module.less';
+
+export const TableScrollWrapper = ({ table, children }) => {
+  const { maxHeight, rows, infiniteScroll, bordered = true } = table;
+  const pageSize = Math.ceil(window.innerHeight / 38); // The highest number of rows that will fit on screen
+  const [visibleRows, setVisibleRows] = infiniteScroll
+    ? useState(pageSize)
+    : [rows.length, null];
+  const [hasMore, setHasMore] = infiniteScroll
+    ? useState(visibleRows < rows.length)
+    : [false, null];
+
+  const loadMoreItems = () => {
+    if (visibleRows >= rows.length) {
+      setHasMore(false);
+      return;
+    }
+    setVisibleRows(visibleRows + pageSize);
+  };
+
+  return (
+    <div
+      className={cx(
+        styles.scrollWrapper,
+        bordered ? styles.bordered : '',
+        maxHeight ? styles.maxHeight : '',
+      )}
+      style={{ maxHeight: !infiniteScroll ? maxHeight : 'none' }}
+    >
+      {infiniteScroll ? (
+        <InfiniteScroll
+          dataLength={Math.min(rows.length, visibleRows + pageSize)} // Doesn't work with rows.length for some reason
+          next={loadMoreItems}
+          hasMore={hasMore}
+          height={maxHeight}
+          style={{ overflowX: 'hidden' }}
+        >
+          {children({ visibleRows })}
+        </InfiniteScroll>
+      ) : (
+        children({ visibleRows })
+      )}
+    </div>
+  );
+};

package/src/components/table/table.jsx

@@ -0,0 +1,232 @@
+import { get } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import styles from './table.module.less';
+import { Title } from './title/title';
+import { Footer } from './footer/footer';
+import { Row, rowShape } from './row/row';
+import { getColumnCount, hasRowActions } from './table.viewdata';
+import { paginationShape } from '../pagination/pagination';
+import { actionsShape } from '../actions/actions.shape';
+import { TableScrollWrapper } from './table-scroll-wrapper';
+
+export const Table = (props) => {
+  const { onListReorder, table } = props;
+  const {
+    fixedWidth,
+    columnWidths,
+    footer,
+    name,
+    rows,
+    actions,
+    columnHeaderAlignments,
+    columnAlignment,
+    stickyHeaders,
+    striped = true,
+    testId,
+    draggable,
+  } = table;
+  const targetRef = useRef();
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (targetRef.current) {
+      setDimensions({
+        width: targetRef.current.offsetWidth,
+        height: targetRef.current.offsetHeight,
+      });
+    }
+  }, []);
+
+  const headers = get(props, 'table.headers', []);
+  const columnCount = getColumnCount(rows, headers);
+  const rowActions = hasRowActions(rows, headers);
+  const colSpan = columnCount + (rowActions ? 1 : 0);
+  const [rowsMetaData, setRowsMetaData] = useState([]);
+
+  return draggable ? (
+    <div ref={targetRef}>
+      <DragDropContext
+        onDragEnd={(result) => {
+          const from = result?.source?.index;
+          const to = result?.destination?.index;
+          onListReorder({ from, to });
+        }}
+      >
+        <Droppable droppableId="droppable">
+          {(provided) => {
+            return (
+              <TableScrollWrapper table={table}>
+                {({ visibleRows }) => (
+                  <table
+                    className={cx(styles.table, striped ? styles.striped : '')}
+                    style={{
+                      minWidth: fixedWidth || '',
+                    }}
+                    data-testid={testId}
+                    ref={provided.innerRef}
+                  >
+                    <thead>
+                      <Title actions={actions} name={name} colSpan={colSpan} />
+                      {headers.map((row, rowIndex) => {
+                        return (
+                          <Row
+                            rowIndex={rowIndex}
+                            isHeader
+                            row={row}
+                            columnCount={columnCount}
+                            columnWidths={columnWidths}
+                            colSpan={colSpan}
+                            hasRowActions={rowActions}
+                            key={`0_${rowIndex}`}
+                            columnAlignment={columnAlignment}
+                            columnHeaderAlignments={columnHeaderAlignments}
+                            rowsMetaData={
+                              stickyHeaders ? rowsMetaData : undefined
+                            }
+                            setRowsMetaData={
+                              stickyHeaders ? setRowsMetaData : undefined
+                            }
+                            draggableTable={draggable}
+                          />
+                        );
+                      })}
+                    </thead>
+                    <tbody>
+                      {rows.slice(0, visibleRows).map((row, rowIndex) => (
+                        <Draggable
+                          key={`index_${rowIndex}`}
+                          draggableId={rowIndex + ''}
+                          index={rowIndex}
+                          isDragDisabled={row.noDrag}
+                        >
+                          {(provided, snapshot) => (
+                            <Row
+                              rowIndex={rowIndex}
+                              row={row}
+                              columnCount={columnCount}
+                              colSpan={colSpan}
+                              hasRowActions={rowActions}
+                              key={`1_${rowIndex}`}
+                              columnAlignment={columnAlignment}
+                              provided={provided}
+                              snapshot={snapshot}
+                              draggableTable={draggable}
+                              width={dimensions.width}
+                            />
+                          )}
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
+                    </tbody>
+                    {footer && (
+                      <Footer
+                        colSpan={colSpan + 1}
+                        pagination={footer.pagination}
+                        actions={footer.actions}
+                        content={footer.content}
+                      />
+                    )}
+                  </table>
+                )}
+              </TableScrollWrapper>
+            );
+          }}
+        </Droppable>
+      </DragDropContext>
+    </div>
+  ) : (
+    <TableScrollWrapper table={table}>
+      {({ visibleRows }) => (
+        <table
+          className={cx(styles.table, striped ? styles.striped : '')}
+          style={{ minWidth: fixedWidth || '' }}
+          data-testid={testId}
+        >
+          <thead>
+            <Title actions={actions} name={name} colSpan={colSpan} />
+            {headers.map((row, rowIndex) => {
+              return (
+                <Row
+                  rowIndex={rowIndex}
+                  isHeader
+                  row={row}
+                  columnCount={columnCount}
+                  columnWidths={columnWidths}
+                  colSpan={colSpan}
+                  hasRowActions={rowActions}
+                  key={`0_${rowIndex}`}
+                  columnAlignment={columnAlignment}
+                  columnHeaderAlignments={columnHeaderAlignments}
+                  rowsMetaData={stickyHeaders ? rowsMetaData : undefined}
+                  setRowsMetaData={stickyHeaders ? setRowsMetaData : undefined}
+                />
+              );
+            })}
+          </thead>
+          <tbody>
+            {rows.slice(0, visibleRows).map((row, rowIndex) => (
+              <Row
+                rowIndex={rowIndex}
+                row={row}
+                columnCount={columnCount}
+                colSpan={colSpan}
+                hasRowActions={rowActions}
+                key={`1_${rowIndex}`}
+                columnAlignment={columnAlignment}
+              />
+            ))}
+          </tbody>
+          {footer && (
+            <Footer
+              colSpan={colSpan}
+              pagination={footer.pagination}
+              actions={footer.actions}
+              content={footer.content}
+            />
+          )}
+        </table>
+      )}
+    </TableScrollWrapper>
+  );
+};
+
+Table.defaultProps = {
+  onListReorder: () => {},
+};
+
+Table.propTypes = {
+  table: PropTypes.shape({
+    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    actions: actionsShape,
+    fixedWidth: PropTypes.string,
+    maxHeight: PropTypes.string,
+    columnWidths: PropTypes.arrayOf(PropTypes.string),
+    className: PropTypes.string,
+    columnHeaderAlignments: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['left', 'right', 'center']),
+        PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'center', ''])),
+      ]),
+    ),
+    columnAlignment: PropTypes.arrayOf(
+      PropTypes.oneOf(['left', 'right', 'center', '']),
+    ),
+    infiniteScroll: PropTypes.bool,
+    stickyHeaders: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    headers: PropTypes.arrayOf(rowShape),
+    rows: PropTypes.arrayOf(rowShape),
+    draggable: PropTypes.bool,
+    footer: PropTypes.shape({
+      pagination: paginationShape,
+      actions: actionsShape,
+      content: PropTypes.object,
+    }),
+    bordered: PropTypes.bool,
+    striped: PropTypes.bool,
+    testId: PropTypes.string,
+  }).isRequired,
+  onListReorder: PropTypes.func,
+};