v 2.7.0

PandaTechAM · May 15, 2023 · 0f22b1f · 0f22b1f
1 parent b1ddcca
commit 0f22b1f
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 317 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "beautiful-react-table",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "My first react typescript package",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

diff --git a/rollup.config.js b/rollup.config.js
@@ -4,8 +4,7 @@ import typescript from "@rollup/plugin-typescript";
 import { terser } from "rollup-plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import dts from "rollup-plugin-dts";
-import sass from "rollup-plugin-sass"
-import postcss from "rollup-plugin-postcss";
+import scss from "rollup-plugin-scss"
 const packageJson = require("./package.json");
 
 export default [
@@ -29,29 +28,13 @@ export default [
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
       terser(),
-      postcss({
-        preprocessor: (content, id) => new Promise((resolve, reject) => {
-          const result = sass.renderSync({ file: id })
-          resolve({ code: result.css.toString() })
-        }),
-        sourceMap: true,
-        extract: true,
-        extensions: ['.sass','.css']
-      })
+      scss()
     ],
     external: ["react", "react-dom", "styled-components", "@emotion/react","@emotion/styled", "@mui/material", "classnames", "react-beautiful-dnd"],
   },
   {
     input: "src/index.ts",
     output: [{ file: "dist/types.d.ts", format: "es" }],
-    plugins: [dts(), postcss({
-      preprocessor: (content, id) => new Promise((resolve, reject) => {
-        const result = sass.renderSync({ file: id })
-        resolve({ code: result.css.toString() })
-      }),
-      sourceMap: true,
-      extract: true,
-      extensions: ['.sass','.css']
-    })],
+    plugins: [dts(), scss()],
   },
 ];
diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss
@@ -163,290 +163,4 @@
     display: none !important;
 
   }
-}
-
-// @import "src/assets/style/mixin";
-
-@keyframes example {
-  from {height: 0px;}
-  to {height: 50px;}
-}
-
-.css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root{
-  width: '60px' !important;
-}
-
-.G-table-actions-header{
-  background-color: white;
-  align-items: center;
-  height:55px;
-  .G-checkbox{
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-    display: block;
-  }
-  .G-edit{
-    padding: 6px 8px;
-    border-radius: 4px;
-
-    &:hover{
-      background-color: $hover-color;
-      cursor: pointer;
-    }
-    .icon-material-symbols_edit{
-      font-size: 16px;
-      margin-right: 10px;
-    }
-  }
-  .G-delete{
-    padding: 6px 8px;
-    border-radius: 4px;
-    &:hover{
-      background-color: $hover-color;
-      cursor: pointer;
-    }
-    &:focus{
-      .icon-material-symbols_delete{
-        color: $active-color;
-        outline: none;
-      }
-    }
-    .icon-material-symbols_delete{
-      font-size: 16px;
-      margin-right: 10px;
-
-    }
-  }
-
-  .G-Select-container{
-   width: 56px;
-   height: 32px;
-    .G-select-header{
-      padding: 0;
-      box-shadow:none;
-      display: flex;
-      justify-content: center;
-      height: 32px;
-      p{
-        width: 50%;
-      }
-      span{
-        font-size: 12px;
-      }
-    }
-  }
-  .G-pagionation{
-    margin: 0 10px;
-    height: 24px;
-  }
-}
-
-.G-data-table {
-  color         : #161515;
-  overflow-y    : auto;
-  overflow-x    : auto;
-  max-height    : calc(100vh - 320px);
-  border-radius : 5px;
-  margin        : 0;
-  position      : relative;
-  z-index       : 1;
-
-  .G-table-actions {
-    width           : 40px;
-    min-width       : 40px;
-    position        : -webkit-sticky;
-    position        : sticky;
-    right           : 0;
-    display         : flex;
-    align-items     : center;
-    justify-content : center;
-    z-index         : 99;
-  }
-}
-
-.G-data-scroll {
-  display : grid;
-.G-header{
-  display: flex; 
-  position: sticky; 
-  top: 0; 
-  z-index: 998;
-  border-bottom:1px solid #CED8DD;
-
-  .G-data-table-header {
-    margin          : 0;
-    z-index         : 999;
-    display         : flex;
-    font-size       : 14px;
-    list-style-type : none;
-    position        : -webkit-sticky;
-    position        : sticky;
-    top             : 0;
-    background-color      : #CED8DD;
-    text-align: center;
-
-    li {
-      background-color: #CED8DD;
-      padding     : 14px 15px;
-      width       : 100%;
-      color       : var(--blue-base);
-      font-size   : var(--font-size-14);
-      font-weight : 600;
-      transition  : .3s;
-      left        : auto;
-      position    : relative;
-      &:first-child {
-        border-left : none;
-      }
-    }
-}
-}
-.G-data-table-body {
-  .G-dropdown-link{
-    border: 1px solid #CED8DD;
-  }
-  .G-data-table-body div:nth-child(1){
-    background-color: #000;
-  }
-  .G-checkbox{
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-    display: block;
-  }
-  .G-FreezedRow{
-    position: sticky;
-    top: 48px;
-    box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.08);
-    z-index: 35  ;
-  }
-
-
-  ul {
-    color           : #000;
-    margin          : 0;
-    display         : flex;
-    position        : relative;
-    list-style-type : none;
-    border-bottom : 1px solid #CED8DD;
-    background-color : white;
-
-    .G-rows-icons{
-      align-items      : center;
-      padding: 0 !important;
-      position: sticky !important;
-      top: 0;
-      z-index: 13;
-      width: 0 !important;
-      height: auto;
-      left: calc(100% - 120px) !important;
-      display: none;
-      .G-icons-group{
-        display: flex;
-        width: 150px;
-        align-items: center;
-        backdrop-filter: blur(1px) !important;
-        .icon-material-symbols_edit{
-          cursor: pointer;
-          font-size: 24px;
-          padding-right: 8px;
-        }
-        .icon-material-symbols_delete{
-          cursor: pointer;
-
-          font-size: 24px;
-          padding: 0 8px;
-
-        }
-        .icon-material-symbols_dashboard-rounded{
-          cursor: pointer;
-
-          font-size: 24px;
-          padding:0 18px 0 8px;
-        }
-      }
-    }
-    &:nth-child(odd) {
-      li {
-        text-align: center;
-      }
-    }
-
-    &:hover {
-      & li:nth-child(1){
-        display:flex
-
-      }
-      li {
-        background-color : #F2F2F2 !important
-      }
-    }
-
-    li {
-      width            : 100%;
-      display          : flex;
-      position         : relative;
-      font-size        : 14px;
-      color            : var(--grey-base);
-      align-items      : center;
-      padding          : 14px 15px;
-      transition       : var(--transition);
-      background-color : var(--white-01);
-      justify-content: center;
-      &:first-child {
-        border-left   : none;
-      }
-    }
-
-    &:last-child {
-      .P-actions-list {
-        bottom    : 0;
-        top       : auto;
-        transform : translateY(0);
-      }
-    }
-
-  }
-}
-
-.G-total-footer{
-  display: flex; 
-  position: sticky; 
-  bottom: 0; 
-  z-index:998;
-
-  .G-data-table-footer
-  {
-    margin          : 0;
-    z-index         : 999;
-    display         : flex;
-    font-size       : 14px;
-    list-style-type : none;
-    position        : -webkit-sticky;
-    position        : sticky;
-    top             : 0;
-    background      : var(--grey-55);
-    text-align: center;
-    background-color      : #CED8DD;
-
-    li {
-      background-color: #CED8DD;
-      padding     : 14px 15px;
-      width       : 100%;
-      color       : var(--blue-base);
-      font-size   : var(--font-size-14);
-      font-weight : 600;
-      transition  : .3s;
-      left        : auto;
-      position    : relative;
-      &:first-child {
-        border-left : none;
-      }
-    }
-  }
-  }
-}
-
-
-
+}
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
@@ -5,7 +5,15 @@
 @import "mixin";
 @import "../icons/style.css";
 @import "mask-icons";
-@import "../../table/index.scss"
+@import "../../table/index.scss";
+@import "../../table/ActionsHeader/CheckRows/style.scss";
+@import "../../table/ActionsHeader/ColumnsCustomizer/style.scss";
+@import "../../table/components/checkbox/style.scss";
+@import "../../table/components/Input/Input.scss";
+@import "../../table/components/pagination/style.scss";
+@import "../../table/components/select/style.scss";
+@import "../../table/Footer/FreezedLeft/style.scss";
+@import "../../table/Footer/Main/style.scss";
 
 
 
diff --git a/src/table/ActionsHeader/CheckRows/index.tsx b/src/table/ActionsHeader/CheckRows/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Checkbox from '../../components/checkbox'
 import { Button, Menu } from '@mui/material'
 import { useState } from 'react'
-import './style.scss'
+// import './style.scss'
 import { CheckedItems } from '../../../Models/table.enum'
 
 interface ICheckRows<T extends Object> {

diff --git a/src/table/ActionsHeader/ColumnsCustomizer/index.tsx b/src/table/ActionsHeader/ColumnsCustomizer/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'
 import Button from '@mui/material/Button'
 import Menu from '@mui/material/Menu'
-import './style.scss'
+// import './style.scss'
 import {
   IColumnConfigStructure,
   IColumnHeaderStructure,

diff --git a/src/table/Footer/FreezedLeft/index.tsx b/src/table/Footer/FreezedLeft/index.tsx
@@ -3,7 +3,7 @@ import { IColumnConfigStructure, IColumnTotalStructure, ITotalList } from '../..
 import { Button, Menu } from '@mui/material'
 import FreezedItems from './FreezedItems'
 import { useState } from 'react'
-import './style.scss'
+// import './style.scss'
 import { StructureConfig } from '../../../Models/table.enum'
 interface IFooterFreezedLeft<T extends Object> {
   columnsTotalStructure: IColumnTotalStructure

diff --git a/src/table/Footer/Main/index.tsx b/src/table/Footer/Main/index.tsx
@@ -8,7 +8,7 @@ import {
 } from '../../../Models/table.models'
 import { Button, Menu } from '@mui/material'
 import { useState } from 'react'
-import './style.scss'
+// import './style.scss'
 import { formatPrice } from '../../../utils'
 import { StructureConfig } from '../../../Models/table.enum'
 interface IFooterMain<T extends Object> {