Merge pull request #1546 from creative-commoners/pulls/3.0/react-table

ENH Replace react-griddle with react-table

client/src/containers/Gallery/Gallery.js

@@ -559,7 +559,7 @@ class Gallery extends Component {
     let node = e.target;
     // Loop the nodes until we find the root of the pagination or the root of the selectable area
     while (node) {
-      if (node.classList.contains('griddle-footer')) {
+      if (node.classList.contains('paginator-footer')) {
         return false;
       }
       if (node.classList.contains('gallery__main--selectable')) {

client/src/containers/Gallery/Gallery.scss

@@ -1,22 +1,5 @@
 // Replacement for deprecated form-control-focus
 
-@mixin gridle-select-focus () {
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: $input-box-shadow, $input-focus-box-shadow;
-    }
-
- @else {
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-}
-
 .gallery {
   position: relative;
 }
@@ -220,91 +203,6 @@
   margin-right: -(calc($panel-padding-x / 2));
 }
 
-// Griddle overrides
-// Pagination styles override griddle default styles
-
-.griddle-footer > div {
-  display: flex;
-}
-
-.griddle-page {
-  flex: 1;
-  text-align: center;
-  margin-top: -3px;
-
-  select { // Replicate .form-control;
-    height: calc(#{$line-height-base} + #{$spacer});
-    padding: $input-btn-padding-y $input-btn-padding-x;
-    line-height: $input-btn-line-height;
-    color: $input-color;
-    border: $input-btn-border-width solid $input-border-color;
-    background-color: $input-bg;
-    background-image: none;
-    text-align: center;
-    display: inline;
-
-    @include gridle-select-focus();
-  }
-}
-
-.griddle-footer {
-  width: 200px; // approx width to allow for 1000's of images
-  margin: 0 auto;
-}
-
-$griddle-button-width: 36px;
-$griddle-button-height: 30px;
-
-.griddle-previous button:before {
-  content: "'";
-}
-
-.griddle-next button:before {
-  content: "&";
-}
-
-.griddle-previous,
-.griddle-next {
-  width: $griddle-button-width; // hold space so pagination doesn't move around
-
-  button {
-    white-space: nowrap;
-    border: 0;
-    background: transparent;
-    width: $griddle-button-width;
-    height: $griddle-button-height;
-    position: relative;
-    border-radius: $btn-border-radius;
-    overflow: hidden;
-
-    &:before {
-      font-family: "silverstripe";
-      color: $text-muted;
-      width: $griddle-button-width;
-      height: $griddle-button-height;
-      background-color: $body-bg;
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: $input-btn-padding-y;
-      transition: all .2s ease-in-out;
-      font-size: $font-size-lg;
-      -webkit-font-smoothing: antialiased;
-      line-height: $line-height-base;
-    }
-
-    &:hover {
-      background-color: $gray-200;
-      border-color: transparent;
-
-      &:before {
-        background-color: $gray-200;
-      }
-    }
-  }
-}
-// Pagination end
-
 .gallery__search-message-clear {
   padding-left: $spacer * .5;
 }

client/src/containers/TableView/README.md

@@ -1,6 +1,5 @@
 # Table view Component
 
-Component for displaying a list of files and folders in a table UI using Griddle.
-This works as an integration layer to get Griddle displaying data nicely.
+Component for displaying a list of files and folders in a table UI.
 
 _NOTE:_ For properties, please to the [Gallery](../Gallery/README.md) documentation under the "Gallery view properties" and "Shared properties" sections.