[ADD] New BaseTable

agentlab · Dec 7, 2021 · 9959eb5 · 9959eb5
1 parent 3dba51b
commit 9959eb5
Show file tree

Hide file tree

Showing 38 changed files with 1,547 additions and 2 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -45,7 +45,7 @@ module.exports = {
       'error',
       {
         selector: 'variableLike',
-        format: ['camelCase', 'PascalCase'],
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
       },
     ],
   },

diff --git a/src/BaseTable/BaseTable.scss b/src/BaseTable/BaseTable.scss
@@ -0,0 +1,326 @@
+/********************************************************************************
+ * Copyright (c) 2021 Agentlab and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the GNU General Public License v. 3.0 which is available at
+ * https://www.gnu.org/licenses/gpl-3.0.html.
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ ********************************************************************************/
+$table-prefix: BaseTable !default;
+@mixin table-edge-padding($padding-left: null, $padding-right: null) {
+  .#{$table-prefix} {
+    &__header-cell,
+    &__row-cell {
+      @if $padding-left != null {
+        &:first-child {
+          padding-left: $padding-left;
+        }
+      }
+
+      @if $padding-right != null {
+        &:last-child {
+          padding-right: $padding-right;
+        }
+      }
+    }
+  }
+}
+
+@mixin fill-layout($top: 0, $bottom: 0) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: $top;
+  bottom: $bottom;
+  overflow: hidden;
+}
+
+.#{$table-prefix} {
+  $table-font-size: 12px !default;
+  $table-padding-left: 5px !default;
+  $table-padding-right: 10px !default;
+  $column-padding: 5px !default;
+
+  $background-color: #ffffff !default;
+  $box-shadow-color: #eeeeee !default;
+  $box-shadow-offset: 2px !default;
+  $box-shadow-blur: 4px !default;
+  $border: 1px solid #eeeeee !default;
+  $header-background-color: #f8f8f8 !default;
+  $header-font-weight: 700 !default;
+  $row-hovered-background-color: #f3f3f3 !default;
+  $header-cell-hovered-background-color: #f3f3f3 !default;
+  $sort-indicator-hovered-color: #888888 !default;
+  $column-resizer-color: #cccccc !default;
+
+  $show-frozen-rows-shadow: false !default;
+  $show-frozen-columns-shadow: true !default;
+
+  box-shadow: 0 $box-shadow-offset $box-shadow-blur 0 $box-shadow-color;
+  background-color: $background-color;
+  position: relative;
+  box-sizing: border-box;
+  font-size: $table-font-size;
+
+  &--disabled {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  &:not(.#{$table-prefix}--dynamic),
+  .#{$table-prefix}__row--frozen {
+    .#{$table-prefix}__row-cell-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  @if ($show-frozen-rows-shadow) {
+    &--has-frozen-rows {
+      .#{$table-prefix}__header {
+        box-shadow: 0 $box-shadow-offset $box-shadow-blur 0 $box-shadow-color;
+      }
+    }
+  }
+
+  &__table {
+    background-color: $background-color;
+    position: absolute;
+    top: 0;
+    // put header after body and reverse the display order
+    // to prevent header's shadow being covered by body
+    display: flex;
+    flex-direction: column-reverse;
+
+    &-main {
+      @include table-edge-padding($table-padding-left, $table-padding-right);
+      outline: $border;
+      left: 0;
+
+      .#{$table-prefix}__header {
+        background-color: $header-background-color;
+      }
+    }
+
+    &-frozen-left,
+    &-frozen-right {
+      .#{$table-prefix}__header,
+      .#{$table-prefix}__body {
+        overflow: hidden !important;
+      }
+    }
+
+    &-frozen-left {
+      @include table-edge-padding($table-padding-left, null);
+      @if ($show-frozen-columns-shadow) {
+        box-shadow: $box-shadow-offset 0 $box-shadow-blur 0 $box-shadow-color;
+      }
+      top: 0;
+      left: 0;
+
+      .#{$table-prefix}__header-row,
+      .#{$table-prefix}__row {
+        padding-right: 0 !important;
+      }
+
+      .#{$table-prefix}__body {
+        overflow-y: auto !important;
+      }
+    }
+
+    &-frozen-right {
+      @include table-edge-padding(null, $table-padding-right);
+      @if ($show-frozen-columns-shadow) {
+        box-shadow: -$box-shadow-offset 0 $box-shadow-blur 0 $box-shadow-color;
+      }
+      top: 0;
+      right: 0;
+
+      .#{$table-prefix}__header-row,
+      .#{$table-prefix}__row {
+        padding-left: 0 !important;
+      }
+
+      .#{$table-prefix}__body {
+        overflow-y: auto !important;
+      }
+    }
+  }
+
+  &__header {
+    overflow: hidden !important;
+  }
+
+  .#{$table-prefix}__header,
+  .#{$table-prefix}__body {
+    outline: none;
+  }
+
+  &__header-row,
+  &__row {
+    display: flex;
+    align-items: center;
+    border-bottom: $border;
+    box-sizing: border-box;
+  }
+
+  &__header-row {
+    background-color: $header-background-color;
+    font-weight: $header-font-weight;
+  }
+
+  &__row {
+    background-color: $background-color;
+
+    &:hover,
+    &--hovered {
+      background-color: $row-hovered-background-color;
+    }
+  }
+
+  &__row-expanded {
+    border-bottom: $border;
+  }
+
+  &__header-cell,
+  &__row-cell {
+    min-width: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 $column-padding;
+    box-sizing: border-box;
+
+    &--align-center {
+      justify-content: center;
+      text-align: center;
+    }
+
+    &--align-right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+
+  &__header-cell {
+    position: relative;
+    cursor: default;
+
+    &:hover {
+      .#{$table-prefix}__column-resizer {
+        visibility: visible;
+        opacity: 0.5;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    .#{$table-prefix}__sort-indicator {
+      display: none;
+    }
+
+    &--sortable {
+      &:hover {
+        background-color: $header-cell-hovered-background-color;
+        cursor: pointer;
+      }
+
+      &:not(.#{$table-prefix}__header-cell--sorting):hover {
+        .#{$table-prefix}__sort-indicator {
+          display: block;
+          color: $sort-indicator-hovered-color;
+        }
+      }
+    }
+
+    &--sorting {
+      &,
+      &:hover {
+        .#{$table-prefix}__sort-indicator {
+          display: block;
+        }
+      }
+    }
+
+    &--resizing {
+      .#{$table-prefix}__column-resizer {
+        visibility: visible;
+        opacity: 1;
+        // workaround to prevent header being clicked when resizing stopped on header
+        &::after {
+          @include fill-layout();
+          content: '';
+          left: -9999px;
+        }
+      }
+    }
+
+    &-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+    }
+  }
+
+  &__header-row--resizing {
+    .#{$table-prefix}__header-cell {
+      background-color: transparent;
+      cursor: col-resize;
+
+      &:not(.#{$table-prefix}__header-cell--sorting) {
+        .#{$table-prefix}__sort-indicator {
+          display: none;
+        }
+      }
+
+      &:not(.#{$table-prefix}__header-cell--resizing) {
+        .#{$table-prefix}__column-resizer {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  &__column-resizer {
+    width: 3px;
+    visibility: hidden;
+    background-color: $column-resizer-color;
+
+    &:hover {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &__footer {
+    @include fill-layout(null);
+    background-color: $background-color;
+  }
+
+  &__resizing-line {
+    cursor: col-resize;
+    position: absolute;
+    top: 0;
+    background-color: $column-resizer-color;
+    width: 3px;
+    transform: translateX(-100%);
+  }
+
+  &__empty-layer {
+    @include fill-layout();
+    background-color: $background-color;
+  }
+
+  &__overlay {
+    @include fill-layout();
+    pointer-events: none;
+
+    & > * {
+      pointer-events: auto;
+    }
+  }
+}