@propellerads/table 2.1.0 → 4.3.0

package/src/style.tsx

@@ -1,12 +1,14 @@
-import styled, {createGlobalStyle, keyframes} from 'styled-components';
+/* eslint max-len: off */
+import styled, {
+  keyframes, css, CSSObject,
+} from 'styled-components';
 import {
-    fontNormal,
-    white,
-    black,
-    spacing,
-    gray80,
-    gray95,
-    semiWhite,
+  fontNormal,
+  white,
+  black,
+  spacing,
+  gray80,
+  gray95,
 } from '@propellerads/stylevariables';
 
 const loadingAnimation = keyframes`
@@ -21,433 +23,182 @@ const loadingAnimation = keyframes`
     }
 `;
 
-export const EmptyStateCell = styled.div`
-  width: 100%;
-  height: ${spacing * 4}px;
-  background: linear-gradient(to left, ${gray95}, ${white}, ${gray95});
-  background-size: 200% 200%;
-  animation: ${loadingAnimation} 1.6s linear infinite;
+export const TableLoading = styled.div`
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.8);
+    transition: all 0.3s ease;
+    z-index: -1;
+    opacity: 0;
+    pointer-events: none;
+    
+  ${(props: { isLoading: boolean }) => props.isLoading && css`
+    opacity: 1;
+    z-index: 2;
+    pointer-events: all;
+  `}
 `;
 
-const CommonStyles = createGlobalStyle`
-
-.ReactTable {
-    font-size: ${fontNormal}px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    border: 0;
-
-    .pagination-bottom {
-        padding: 24px 0;
-    }
-
-    &__header-cell_right {
-        text-align: right !important;
-        flex-direction: row !important;
-        justify-content: flex-end !important;
-
-        &:before {
-          margin-left: 0 !important;
-          margin-right: 4px !important;
-        }
-    }
-
-    .rt-thead {
-        flex: 1 0 auto;
-        display: flex;
-        flex-direction: column;
-        user-select: none;
-    }
-
-    .rt-table {
-        flex: auto 1;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        width: 100%;
-        border-collapse: collapse;
-        overflow: auto;
-    }
-}
-
-.ReactTable .rt-thead.-filters input,
-.ReactTable .rt-thead.-filters select {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    background: ${white};
-    padding: 2px 7px;
-    margin: 4px 0;
-    font-size: inherit;
-    border-radius: 3px;
-    font-weight: normal;
-    outline: none;
-}
-
-.ReactTable .rt-thead .rt-th,
-.ReactTable .rt-thead .rt-td {
-    padding: 0 4px;
-    line-height: normal;
-    position: relative;
-    transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    color: ${black};
-    font-weight: 500;
-    outline: none;
-}
-
-.ReactTable .rt-thead .rt-th {
-    display: flex;
-}
-
-.ReactTable .rt-thead .rt-th.-cursor-pointer,
-.ReactTable .rt-thead .rt-td.-cursor-pointer {
-    cursor: pointer;
-    transition: 220ms ease;
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-
-
-    &:before {
-        transition: 220ms ease;
-        content: '';
-        min-width: 12px;
-        width: 12px;
-        height: 12px;
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAABGdBTUEAALGPC/xhBQAAAlZJREFUWAntVklSwzAQtJ1ck/AYtpA78COKLEWoLHe+wx3C8hggOSehW7iNrMgb5gIVVblmNOrpGWuksYMgHv1+f0s1kkEyGg6HY00SSaNcEmO2YkMTnUoycX3dhZ28XAcD8KXlMhlHHzDF6PMql0OKxpkUMjQZNwzD3mw2e7SdB4PB23a7PQhpjEFdGBbz+TzE/B3mDnUDEIgSbEsA21zkPDXIxCdlzJuUcSh8y7wAXKtN0CQLU/VtJdeyBrcZPneGIIqi281m8wCioNFonE0mk0WWIzCmBNjpALUbp7aapw1EN3QGu6kbdbt2mlNypAi+TEFgE8lG6a2tDXD1wvPvOrjzv3EOah+k/0AQ13rpljBvjntwyBITE8VHtwVDKZLRaHSEe/BKZwaPrONZSILIx+v1+sVExgWcTqdjUwWbBKAPAtxBZ0R+pp23l85QvxuKSNgQXRKkfeJzJsHObdTmqLsSpGFHlm2HgAsiEYjS50y7l4ALNkmWM3G5gyQsVR4oM4M8J67ZGXKuIlCvMmpfxirBfNh9AvsdSHYAp/oaLaPnOyi/aUObYiu+EmfIe6q/idi4Qhu6dH8Z5SBZ9RqyjSPOPXrigTjYYCLTkqHICNkCiP9JSzh1LfuPVAYG1zs/A25wxk41Is9uMOgKP2wX7g9b0Q7En497+HdIouG21VQCAvkS4dcB6xcozRNxWQmUDaxY3gS0mJUI3uIcW2oSERa7dBrXuC0bpfvG9hr13AQE9iWitSxZFFh+pRIQuEwiZQOLs1ICcvIlUjWwuGpJJsKnDskn5F1o5Z7NGz4AAAAASUVORK5CYII=');
-        background-size: contain;
-        opacity: 0;
-        margin-left: 4px;
-    }
-}
+export const TableLoadingInner = styled.div`
+  position: absolute;
+  display: block;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  left: 0;
+  color: rgba(0, 0, 0, 0.6);
+  transform: translateY(-52%);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+`;
 
-.ReactTable .rt-thead .rt-th.-sort-asc,
-.ReactTable .rt-thead .rt-td.-sort-asc {
-    padding-left: 4px;
+export const TableWrapper = styled.div`
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    bottom: 10px;
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    top: 0;
+    left: -10px;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    transition: 0.3s opacity;
+  }
 
-    &:before {
-        transform: rotate(180deg);
-        opacity: 1;
+  &::after {
+    bottom: 10px;
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    width: 10px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: -10px;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    transition: 0.3s opacity;
+  }
+  
+  &.shadow_left {
+    &::before {
+      opacity: 1 !important;
     }
-}
-
-.ReactTable .rt-thead .rt-th.-sort-desc,
-.ReactTable .rt-thead .rt-td.-sort-desc {
-    padding-left: 4px;
-
-    &:before {
-        opacity: 1;
+  }
+  
+  &.shadow_right {
+    &::after {
+      opacity: 1 !important;
     }
-}
-
-.ReactTable .rt-thead .rt-th:last-child,
-.ReactTable .rt-thead .rt-td:last-child {
-    border-right: 0;
-}
-
-.ReactTable .rt-thead .rt-resizable-header {
-    overflow: visible;
-    display: flex;
-    align-items: center;
-}
-
-.ReactTable .rt-thead .rt-resizable-header:last-child {
-    overflow: hidden;
-}
-
-.ReactTable .rt-thead .rt-resizable-header-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.ReactTable .rt-thead .rt-header-pivot {
-    border-right-color: #f7f7f7;
-}
-
-.ReactTable .rt-thead .rt-header-pivot:after,
-.ReactTable .rt-thead .rt-header-pivot:before {
-    left: 100%;
-    top: 50%;
-    border: solid transparent;
-    content: ' ';
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-.ReactTable .rt-thead .rt-header-pivot:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-left-color: ${white};
-    border-width: 8px;
-    margin-top: -8px;
-}
-
-.ReactTable .rt-thead .rt-header-pivot:before {
-    border-color: rgba(102, 102, 102, 0);
-    border-left-color: #f7f7f7;
-    border-width: 10px;
-    margin-top: -10px;
-}
-
-.ReactTable .rt-tbody {
-    flex: 99999 1 auto;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    border-top: 1px solid ${gray80};
-    margin-top: ${spacing * 2}px;
-}
-
-.ReactTable .rt-tbody .rt-tr-group {
-    box-shadow: inset 0 -1px 0 0 ${gray95};
-}
-
-.ReactTable .rt-tbody .rt-tr-group:hover {
-    background-color: ${semiWhite};
-    transition: 0.2s ease-in-out;
-}
+  }
+`;
 
-.ReactTable .rt-tbody .rt-td:last-child {
-    border-right: 0;
-}
+export const TableRoot = styled.div`
+  font-size: ${fontNormal}px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 0;
+`;
 
-.ReactTable .rt-tbody .rt-expandable {
-    cursor: pointer;
-    text-overflow: clip;
-}
+export const TableContent = styled.div`
+  display: block;
+  max-width: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
+`;
 
-.ReactTable .rt-tr-group {
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
+export const TableCore = styled.div`
+  flex: auto 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch; 
+  border-collapse: collapse;
+`;
 
-.ReactTable .rt-tr {
-    flex: 1 0 auto;
-    display: inline-flex;
-    padding: 0;
-    align-items: center;
-}
+export const HeadCell = styled.div`
+  display: inline-flex;
+`;
 
-.ReactTable .rt-th,
-.ReactTable .rt-td {
-    flex: 1 0 0;
+export const TD = styled.div`
     white-space: nowrap;
     text-overflow: ellipsis;
+    line-height: 1.3rem;
     padding: 7px 4px;
     overflow: hidden;
-    transition: 0.3s ease;
-    transition-property: width, min-width, padding, opacity;
-    line-height: 1.3rem;
-}
-
-.ReactTable .rt-th.-hidden,
-.ReactTable .rt-td.-hidden {
-    width: 0 !important;
-    min-width: 0 !important;
-    padding: 0 !important;
-    border: 0 !important;
-    opacity: 0 !important;
-}
-
-.ReactTable .rt-expander {
-    display: inline-block;
-    position: relative;
-    color: transparent;
-    margin: 0 10px;
-}
-
-.ReactTable .rt-expander:after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(-90deg);
-    border-left: 5.04px solid transparent;
-    border-right: 5.04px solid transparent;
-    border-top: 7px solid rgba(0, 0, 0, 0.8);
-    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    cursor: pointer;
-}
-
-.ReactTable .rt-expander.-open:after {
-    transform: translate(-50%, -50%) rotate(0);
-}
-
-.ReactTable .rt-resizer {
-    display: inline-block;
-    position: absolute;
-    width: 36px;
-    top: 0;
-    bottom: 0;
-    right: -18px;
-    cursor: col-resize;
-    z-index: 10;
-}
-
-.ReactTable .rt-tfoot {
-    background: ${gray95};
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-}
-
-.ReactTable .rt-tfoot .rt-td {
-}
-
-.ReactTable .rt-tfoot .rt-td:last-child {
-    border-right: 0;
-}
-
-.ReactTable.-striped .rt-tr.-odd {
-    background: rgba(0, 0, 0, 0.03);
-}
-
-.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
-    background: rgba(0, 0, 0, 0.05);
+    transition: width 0.3s ease 0s, min-width, padding, opacity;
+    
+  ${({align}: { align?: CSSObject, colSpan?: number }) => align && css`
+    text-align: ${align}`
 }
+`;
 
-.ReactTable .-pagination {
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    flex-wrap: wrap;
-    padding: 3px;
-}
+export const EmptyStateCell = styled.div`
+  width: 100%;
+  height: ${spacing * 4}px;
+  background: linear-gradient(to left, ${gray95}, ${white}, ${gray95});
+  background-size: 200% 200%;
+  animation: ${loadingAnimation} 1.6s linear infinite;
+`;
 
-.ReactTable .-pagination input,
-.ReactTable .-pagination select {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    background: ${white};
-    padding: 5px 7px;
-    font-size: inherit;
-    border-radius: 3px;
-    font-weight: normal;
-    outline: none;
-}
+export const TH = styled.div`
+  padding: 0 4px;
+  line-height: normal;
+  position: relative;
+  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  color: rgb(0, 0, 0);
+  font-weight: 500;
+  outline: none;
+`;
 
-.ReactTable .-pagination .-btn {
-    appearance: none;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    border-radius: 3px;
-    padding: 6px;
-    font-size: 1em;
-    color: rgba(0, 0, 0, 0.6);
-    transition: all 0.1s ease;
-    cursor: pointer;
+export const THead = styled.div`
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  
+  ${TH}, ${TD} {
+    padding: 0 4px;
+    line-height: normal;
+    position: relative;
+    transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    color: ${black};
+    font-weight: 500;
     outline: none;
-    background-color: white;
-    color: #0080ff;
-    box-shadow: inset 0 0 0 1px #0080ff;
-}
-
-.ReactTable .-pagination .-btn[disabled] {
-    opacity: 0;
-    cursor: default;
-}
-
-.ReactTable .-pagination .-btn:not([disabled]):hover {
-}
-
-.ReactTable .-pagination .-previous,
-.ReactTable .-pagination .-next {
-    flex: 1;
-    text-align: center;
-}
-
-.ReactTable .-pagination .-center {
-    flex: 1.5;
-    text-align: center;
-    margin-bottom: 0;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-around;
-}
-
-.ReactTable .-pagination .-pageInfo {
-    display: inline-block;
-    margin: 3px 10px;
-    white-space: nowrap;
-}
-
-.ReactTable .-pagination .-pageJump {
-    display: inline-block;
-}
-
-.ReactTable .-pagination .-pageJump input {
-    width: 70px;
-    text-align: center;
-}
-
-.ReactTable .-pagination .-pageSizeOptions {
-    margin: 3px 10px;
-}
-
-.ReactTable .rt-noData {
-    display: flex;
-    justify-content: center;
-    background: transparent;
-    transition: all 0.3s ease;
-    z-index: 1;
-    pointer-events: none;
-    color: rgba(0, 0, 0, 0.5);
-}
-
-.ReactTable .-loading {
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(255, 255, 255, 0.8);
-    transition: all 0.3s ease;
-    z-index: -1;
-    opacity: 0;
-    pointer-events: none;
-}
-
-.ReactTable .-loading > div {
-    position: absolute;
-    display: block;
-    text-align: center;
-    width: 100%;
-    top: 50%;
-    left: 0;
-    font-size: 15px;
-    color: rgba(0, 0, 0, 0.6);
-    transform: translateY(-52%);
-    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
+  }
+`;
 
-.ReactTable .-loading.-active {
-    opacity: 1;
-    z-index: 2;
-    pointer-events: all;
-}
+export const TRGroup = styled.div`
+  display: flex;
+  flex: 1 0 auto;
+  box-shadow: inset 0 -1px 0 0 ${gray95};
+  min-width: 100%;
+  width: max-content;
+`;
 
-.ReactTable .-loading.-active > div {
-    transform: translateY(50%);
-}
+export const TR = styled.div`
+  padding: 0;
+  -webkit-box-align: center;
+  align-items: center;
+`;
 
-.ReactTable .rt-resizing .rt-th,
-.ReactTable .rt-resizing .rt-td {
-    transition: none !important;
-    cursor: col-resize;
-    user-select: none;
-}
+export const TBody = styled.div`
+  border-top: 1px solid ${gray80};
+  margin-top: ${spacing * 2}px;
+  min-width: 100%;
+  width: max-content;
 `;
 
-export {CommonStyles};
+export const TFoot = styled.div`
+  background: ${gray95};
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+`;