@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.1

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

@@ -1,253 +0,0 @@
-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

@@ -1,62 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-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
-      id="scrollWrapper"
-      className={cx(
-        styles.scrollWrapper,
-        bordered ? styles.bordered : '',
-        maxHeight ? styles.maxHeight : '',
-      )}
-      style={{ maxHeight }}
-    >
-      {infiniteScroll ? (
-        <InfiniteScroll
-          dataLength={Math.min(rows.length, visibleRows + pageSize)} // Doesn't work with rows.length for some reason
-          next={loadMoreItems}
-          hasMore={hasMore}
-          scrollableTarget="scrollWrapper"
-          style={{ overflow: 'initial' }}
-        >
-          {children({ visibleRows })}
-        </InfiniteScroll>
-      ) : (
-        children({ visibleRows })
-      )}
-    </div>
-  );
-};

package/src/components/table/table.jsx

@@ -1,234 +0,0 @@
-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}
-                              columnWidths={columnWidths}
-                              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}
-                columnWidths={columnWidths}
-                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,
-};