@oliasoft-open-source/react-ui-library 2.4.7 → 3.0.0

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

@@ -1,164 +0,0 @@
-@import '../../../style/variables.less';
-@import '../../../style/mixins.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 {
-  padding: 0 !important;
-
-  .staticCellContent {
-    min-height: 100%;
-    .cellWrapperPadding();
-    line-height: 17px;
-    position: relative;
-    border-radius: inherit;
-
-    &.error,
-    &.warning {
-      border: 1px solid transparent;
-    }
-
-    &.error {
-      .inputError();
-    }
-    &.warning {
-      .inputWarning();
-    }
-    &.unit {
-      font-weight: normal;
-    }
-  }
-}
-
-.sortingCell {
-  .staticCellContent {
-    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

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

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

package/src/components/table/helper.js

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

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

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

@@ -1,16 +0,0 @@
-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>
-  );
-};