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

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

@@ -0,0 +1,152 @@
+@import '../../../style/variables.less';
+@import '../table.variables.less';
+
+.cellWrapper {
+  .cellWrapperPadding();
+
+  a {
+    color: var(--color-text-primary) !important;
+    &:hover {
+      color: var(--color-text-primary-hover) !important;
+    }
+    &:active {
+      color: var(--color-text-primary-active) !important;
+    }
+
+    &.disabledLink {
+      color: var(--color-text-faint) !important;
+      cursor: default !important;
+    }
+  }
+}
+
+.inputWrapper {
+  margin: -1px;
+  height: calc(100% + 2px);
+  border-radius: inherit;
+
+  // Fix for full height custom Select
+  > span,
+  > span > span,
+  > span > span > div {
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  // Fix for full height Input
+  > div,
+  > div > span {
+    height: 100%;
+    border-radius: inherit;
+  }
+}
+
+.breakWord {
+  word-break: break-word;
+}
+
+.inputCell {
+  padding: 0 !important;
+}
+
+.sliderCell {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.staticCell {
+  &.error {
+    .cellErrorWarningWrapper();
+    background-color: var(--color-background-error) !important;
+    border: 1px solid var(--color-border-error) !important;
+    color: var(--color-text-error) !important;
+  }
+  &.warning {
+    .cellErrorWarningWrapper();
+    background-color: var(--color-background-warning) !important;
+    border: 1px solid var(--color-border-warning) !important;
+    color: var(--color-text-warning) !important;
+  }
+  &.unit {
+    font-weight: normal;
+  }
+}
+
+.sortingCell {
+  position: relative;
+  padding-right: 45px !important;
+  cursor: pointer !important;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05) !important;
+  }
+
+  .sortingCellIcon {
+    font-size: 20px;
+    position: absolute;
+    right: @input_padding_x - 4px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.icon {
+  display: inline-block;
+  margin-left: 8px;
+  position: relative;
+  top: 1px;
+  font-size: 13px;
+  color: var(--color-text-faint);
+
+  &:hover {
+    color: var(--color-text-muted);
+  }
+
+  &.clickable {
+    &:hover {
+      cursor: pointer;
+      color: var(--color-text-primary-hover);
+    }
+  }
+}
+
+.checkBoxCell {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.iconCell {
+  width: 37px;
+  text-align: center;
+  padding: 0 !important;
+
+  .iconWrapper {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.actionsCell {
+  width: 24px;
+  padding: 0 6px !important;
+}
+
+.rightAligned {
+  text-align: right !important;
+}
+
+.centerAligned {
+  text-align: center !important;
+}
+
+.leftAligned {
+  text-align: left !important;
+}
+
+.popover {
+  padding: @input_padding_y @input_padding_x;
+}
+
+.disabledPointerEvents {
+  pointer-events: none;
+}

package/src/components/table/footer/footer.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './footer.module.less';
+import { Pagination, paginationShape } from '../../pagination/pagination';
+import { Actions } from '../../actions/actions';
+import { actionsShape } from '../../actions/actions.shape';
+
+export const Footer = (props) => {
+  const { colSpan, pagination, actions, content } = props;
+  const hasActions = actions && actions.length;
+  const hasContent = content != null;
+
+  const hasPagination = () => {
+    if (pagination) {
+      const { rowCount, rowsPerPage } = pagination;
+      const minRows = rowsPerPage.options[0].value;
+      return rowCount > minRows;
+    }
+    return false;
+  };
+
+  const showFooter = hasActions || hasContent || hasPagination();
+
+  return showFooter ? (
+    <tfoot>
+      {hasContent ? (
+        <tr>
+          <td colSpan={colSpan}>
+            <div className={styles.footer}>
+              <div>{content}</div>
+            </div>
+          </td>
+        </tr>
+      ) : null}
+      {hasActions || hasPagination() ? (
+        <tr>
+          <td colSpan={colSpan}>
+            <div className={styles.footer}>
+              {hasPagination() ? (
+                <Pagination pagination={pagination} />
+              ) : (
+                <div />
+              )}
+              <div>
+                <Actions actions={actions} isBlockElement />
+              </div>
+            </div>
+          </td>
+        </tr>
+      ) : null}
+    </tfoot>
+  ) : null;
+};
+
+Footer.defaultProps = {
+  actions: [],
+  pagination: null,
+  content: null,
+};
+
+Footer.propTypes = {
+  actions: actionsShape,
+  colSpan: PropTypes.number.isRequired,
+  pagination: paginationShape,
+  content: PropTypes.object,
+};

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

@@ -0,0 +1,14 @@
+@import '../table.variables.less';
+
+.cellWrapper {
+  .cellWrapperPadding();
+}
+
+.footer {
+  .flexBlock();
+}
+
+tfoot {
+  z-index: 4;
+  position: relative;
+}

package/src/components/table/helper.js

@@ -0,0 +1,64 @@
+import { isArray } from 'lodash';
+
+/**
+ * getCellAlignment - returns string or class name
+ * @param {{
+ *   bodyAlignment: {string|undefined},
+ *   headerAlignment: {string|undefined},
+ *   isHeader: {boolean},
+ * }} alignment - body cell alignment
+ * @param {boolean} isGetText - get text for example ('left', 'right' or 'center') or class name. Default value false.
+ * @returns {string|null}
+ */
+export const getCellAlignment = (alignment, styles, isGetText = false) => {
+  if (!alignment) {
+    return null;
+  }
+
+  const { bodyAlignment, headerAlignment, isHeader } = alignment;
+  const left = 'left';
+  const right = 'right';
+  const center = 'center';
+  const cellAlignment = isHeader ? headerAlignment : bodyAlignment;
+
+  switch (cellAlignment) {
+    case left: {
+      return isGetText ? left : styles.leftAligned;
+    }
+    case right: {
+      return isGetText ? right : styles.rightAligned;
+    }
+    case center: {
+      return isGetText ? center : styles.centerAligned;
+    }
+    default: {
+      return isGetText ? left : styles.leftAligned;
+    }
+  }
+};
+
+/**
+ * Returns alignments or empty array
+ * @param {array} alignments can be array of arrays or array of strings
+ * @param {isHeader} isHeader
+ * @param {number} rowIndex
+ * @returns {array}
+ */
+export const getHeaderAlignment = (alignments, isHeader, rowIndex) => {
+  if (!alignments) {
+    return [];
+  }
+
+  const isArrays = alignments.every((alignment) => isArray(alignment));
+  const isStrings = alignments.every(
+    (alignment) => typeof alignment === 'string',
+  );
+
+  if (isArrays) {
+    return isHeader ? alignments[rowIndex] || [] : [];
+  } else if (isStrings) {
+    return alignments;
+  } else {
+    return [];
+  }
+};

package/src/components/table/helper.test.js

@@ -0,0 +1,166 @@
+import { getCellAlignment, getHeaderAlignment } from './helper';
+
+const styles = {
+  leftAligned: 'cell-module-leftAligned-eBFS4',
+  rightAligned: 'cell-module-rightAligned-ahWpT',
+  centerAligned: 'cell-module-centerAligned-_ktBT',
+};
+
+describe('helper', () => {
+  describe('getCellAlignment', () => {
+    test('should return style alignment for header row', () => {
+      const alignment = {
+        bodyAlignment: undefined,
+        headerAlignment: 'right',
+        isHeader: true,
+      };
+
+      const result = getCellAlignment(alignment, styles);
+
+      expect(result).toBe('cell-module-rightAligned-ahWpT');
+    });
+
+    test('should return text alignment for header row', () => {
+      const alignment = {
+        bodyAlignment: undefined,
+        headerAlignment: 'right',
+        isHeader: true,
+      };
+
+      const result = getCellAlignment(alignment, styles, true);
+
+      expect(result).toBe('right');
+    });
+
+    test('should return default text alignment', () => {
+      const alignment = {
+        bodyAlignment: undefined,
+        headerAlignment: undefined,
+        isHeader: false,
+      };
+
+      const result = getCellAlignment(alignment, styles, true);
+
+      expect(result).toBe('left');
+    });
+
+    test('should return default style alignment', () => {
+      const alignment = {
+        bodyAlignment: undefined,
+        headerAlignment: undefined,
+        isHeader: false,
+      };
+
+      const result = getCellAlignment(alignment, styles);
+
+      expect(result).toBe('cell-module-leftAligned-eBFS4');
+    });
+
+    test('should return style alignment for body row', () => {
+      const alignment = {
+        bodyAlignment: 'center',
+        headerAlignment: undefined,
+        isHeader: false,
+      };
+
+      const result = getCellAlignment(alignment, styles);
+
+      expect(result).toBe('cell-module-centerAligned-_ktBT');
+    });
+
+    test('should return default style alignment for header row', () => {
+      const alignment = {
+        bodyAlignment: undefined,
+        headerAlignment: undefined,
+        isHeader: true,
+      };
+
+      const result = getCellAlignment(alignment, styles);
+
+      expect(result).toBe('cell-module-leftAligned-eBFS4');
+    });
+
+    test('should return null when set no arguments', () => {
+      const result = getCellAlignment();
+
+      expect(result).toBe(null);
+    });
+  });
+
+  describe('getHeaderAlignment', () => {
+    test('should return array of alignments when was set array of arrays', () => {
+      const aligments = [
+        ['right', 'center', 'right'],
+        ['right', 'center', 'left', 'left', 'left', 'left', 'left', 'left'],
+        ['right', 'center', 'left', 'left', 'right', 'left', 'left', 'left'],
+      ];
+
+      const result = getHeaderAlignment(aligments, true, 2);
+
+      expect(result).toEqual([
+        'right',
+        'center',
+        'left',
+        'left',
+        'right',
+        'left',
+        'left',
+        'left',
+      ]);
+    });
+
+    test('should return array of alignments when was set array of strings', () => {
+      const aligments = [
+        'center',
+        'center',
+        'center',
+        'left',
+        'left',
+        'left',
+        'right',
+        'left',
+      ];
+
+      const result = getHeaderAlignment(aligments);
+
+      expect(result).toEqual([
+        'center',
+        'center',
+        'center',
+        'left',
+        'left',
+        'left',
+        'right',
+        'left',
+      ]);
+    });
+
+    test('should return empty array when was set empty array', () => {
+      const result = getHeaderAlignment([]);
+
+      expect(result).toEqual([]);
+    });
+
+    test('should return empty array when set falsy values or set no arguments', () => {
+      const result1 = getHeaderAlignment(null);
+
+      expect(result1).toEqual([]);
+
+      const result2 = getHeaderAlignment(undefined);
+
+      expect(result2).toEqual([]);
+
+      const result3 = getHeaderAlignment(false);
+
+      expect(result3).toEqual([]);
+
+      const result4 = getHeaderAlignment('');
+
+      expect(result4).toEqual([]);
+
+      const result5 = getHeaderAlignment();
+
+      expect(result5).toEqual([]);
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+@import '../../../style/variables.less';
+
+.icon {
+  color: var(--color-text-faint);
+  margin: 0;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--color-text-primary-hover);
+  }
+  &:active {
+    color: var(--color-text-primary-active);
+  }
+}
+
+.disabled {
+  &:hover,
+  &:active {
+    color: var(--color-text-faint);
+  }
+}
+
+.noHighlight {
+  i {
+    &:hover {
+      cursor: default !important;
+      background-color: inherit !important;
+      color: var(--color-text-faint) !important;
+    }
+  }
+}

package/src/components/table/row/expanded-content-row.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+import styles from './row.module.less';
+
+export const ExpandedContentRow = ({ colSpan, children, flush }) => {
+  return (
+    <tr>
+      <td
+        colSpan={colSpan}
+        className={cx(styles.expandableRow, flush ? styles.flush : '')}
+      >
+        {children}
+      </td>
+    </tr>
+  );
+};