From 0f22b1fca603760b93cddb4155b86c36713cd929 Mon Sep 17 00:00:00 2001 From: Samvel Baghdasaryan Date: Mon, 15 May 2023 18:24:11 +0400 Subject: [PATCH] v 2.7.0 --- package.json | 2 +- rollup.config.js | 23 +- src/assets/style/global.scss | 288 +----------------- src/assets/style/index.scss | 10 +- src/table/ActionsHeader/CheckRows/index.tsx | 2 +- .../ActionsHeader/ColumnsCustomizer/index.tsx | 2 +- src/table/Footer/FreezedLeft/index.tsx | 2 +- src/table/Footer/Main/index.tsx | 2 +- src/table/components/Input/Input.tsx | 2 +- src/table/components/checkbox/index.tsx | 2 +- src/table/components/pagination/index.tsx | 2 +- src/table/components/select/select.tsx | 2 +- 12 files changed, 22 insertions(+), 317 deletions(-) diff --git a/package.json b/package.json index c4c23b7..b22e6b8 100644 --- 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 index ed201fa..52f7624 100644 --- 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()], }, ]; \ No newline at end of file diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss index 8692ed4..37e83cb 100644 --- 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; - } - } - } - } -} - - - +} \ No newline at end of file diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss index a3d9f2e..d264676 100644 --- 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 index 95ec956..807a22c 100644 --- 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 { diff --git a/src/table/ActionsHeader/ColumnsCustomizer/index.tsx b/src/table/ActionsHeader/ColumnsCustomizer/index.tsx index 6e38977..eb19978 100644 --- 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 index 2f7f8b7..6d7e77a 100644 --- 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 { columnsTotalStructure: IColumnTotalStructure diff --git a/src/table/Footer/Main/index.tsx b/src/table/Footer/Main/index.tsx index c89b9d5..4759e6e 100644 --- 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 { diff --git a/src/table/components/Input/Input.tsx b/src/table/components/Input/Input.tsx index d2475ab..1e7b99d 100644 --- a/src/table/components/Input/Input.tsx +++ b/src/table/components/Input/Input.tsx @@ -1,7 +1,7 @@ import React from 'react' import { InputHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react' import cx from 'classnames' -import './Input.scss' +// import './Input.scss' import { regExp } from '../../../constants/regExp' const Input = forwardRef, HTMLInputElement>>( diff --git a/src/table/components/checkbox/index.tsx b/src/table/components/checkbox/index.tsx index e18df02..351ed82 100644 --- a/src/table/components/checkbox/index.tsx +++ b/src/table/components/checkbox/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import './style.scss' +// import './style.scss' enum CheckBoxEnum { primary, secondary, diff --git a/src/table/components/pagination/index.tsx b/src/table/components/pagination/index.tsx index 484b85e..3935f03 100644 --- a/src/table/components/pagination/index.tsx +++ b/src/table/components/pagination/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react' import { usePagination, DOTS } from './usePagination' -import './style.scss' +// import './style.scss' import { containsOnlyNumbers } from '../../../utils' import Input from '../Input/Input' diff --git a/src/table/components/select/select.tsx b/src/table/components/select/select.tsx index 8cc8b16..069e999 100644 --- a/src/table/components/select/select.tsx +++ b/src/table/components/select/select.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' -import './style.scss' +// import './style.scss' import ClickOutside from '../click-outside' /** * Main props for select component