ui-changes

PandaTechAM · Nov 3, 2023 · 502449c · 502449c
1 parent 8261f2e
commit 502449c
Show file tree

Hide file tree

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

diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss
@@ -11,12 +11,16 @@
   width            : 6px;
   height           : 6px;
   background-color : rgba(0, 0, 0, 0);
+
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background    : rgba(206, 216, 221, 0.5);;
+  background-color    : rgba(206, 216, 221, 0.5);;
   border-radius : 20px;
+  // &:hover{
+  //   background-color:red
+  // }
 }
 
 .G-hidden {

diff --git a/src/components/muiSelect/MuiSelect.tsx b/src/components/muiSelect/MuiSelect.tsx
@@ -12,23 +12,16 @@ interface IMuiSelect {
   onArgChange?(columnName: string, type: string): void
   handlesetData: (option: any) => void
 }
-export default function MuiSelect({
-  aggregates,
-  columnName,
-  selectedAggregates,
-  onArgChange,
-  handlesetData,
-}: IMuiSelect) {
+export default function MuiSelect({ aggregates, columnName, onArgChange, handlesetData }: IMuiSelect) {
   const [type, setType] = React.useState('')
 
   const handleChange = (event: SelectChangeEvent) => {
     setType(event.target.value as string)
     onArgChange?.(columnName, event.target.value)
     handlesetData(event.target.value)
   }
-  // {type ? selectedAggregates[`${columnName}_${type}`] : ""}
+
   return (
-    // <Box sx={{ minWidth: 120 }}>
     <FormControl variant='standard' fullWidth>
       <InputLabel id='demo-simple-select-standard-label'>{type ? '' : 'Aggregates'}</InputLabel>
       <Select
@@ -45,6 +38,5 @@ export default function MuiSelect({
         ))}
       </Select>
     </FormControl>
-    // </Box>
   )
 }
diff --git a/src/components/pagination/index.tsx b/src/components/pagination/index.tsx
@@ -104,7 +104,7 @@ const Pagination = ({
           onKeyDown={handleKeyPress}
           value={val}
           style={{
-            width: '24px',
+            width: `${24 + (val.length > 3 ? val.length * 3 : 0)}px`,
             height: '24px',
             border: '1px solid #ACBCC3',
             outline: 'none',

diff --git a/src/components/popUp/index.tsx b/src/components/popUp/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, ReactElement } from 'react'
 import { Button, Menu } from '@mui/material'
+import './style.scss'
 interface IPopUp {
   children: ReactElement
   ActiveIcon?: any
@@ -54,7 +55,7 @@ const PopUp = ({
             getRowForDropdown?.(item?.id)
           }}
         >
-          <div className='G-center'>
+          <div className='G-center G-popUp-icon'>
             {ActiveIcon ? (
               DisabledIcon ? (
                 open ? (
@@ -72,6 +73,8 @@ const PopUp = ({
               style={{
                 marginLeft: 8,
                 color: open ? '#4844c5' : 'black',
+                fontSize: 14,
+                fontWeight: 400,
               }}
             >
               {modalName}

diff --git a/src/components/popUp/style.scss b/src/components/popUp/style.scss
@@ -0,0 +1,3 @@
+.G-popUp-icon{
+    font-size: 20px;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -1,45 +1,45 @@
 import Table from './table'
 import {
-    IProps,
-    IColumnTotal,
-    IColumns,
-    IHeaders,
-    ITotals,
-    IColumnConfigStructure,
-    IColumnHeaderStructure,
-    ITotalList,
-    IFreezeProps,
-    IColumnConfig,
-    IPageSizes,
-    ISelected,
-    IColumnHeader,
-    IColumn,
-    IrowActions,
-    ILinksList,
-    ItemFields,
-    IFilterDataForRequest,
-  } from './Models/table.models'
-  import { StructureConfig } from './Models/table.enum'
-  
-  export {
-    Table,
-    IProps as ITableProps,
-    IColumnTotal,
-    IColumns,
-    IHeaders,
-    ITotals,
-    IColumnConfigStructure,
-    IColumnHeaderStructure,
-    ITotalList,
-    IFreezeProps,
-    IColumnConfig,
-    IPageSizes,
-    ISelected,
-    IColumnHeader,
-    IColumn,
-    IrowActions,
-    ILinksList,
-    StructureConfig,
-    ItemFields,
-    IFilterDataForRequest,
-  }
+  IProps,
+  IColumnTotal,
+  IColumns,
+  IHeaders,
+  ITotals,
+  IColumnConfigStructure,
+  IColumnHeaderStructure,
+  ITotalList,
+  IFreezeProps,
+  IColumnConfig,
+  IPageSizes,
+  ISelected,
+  IColumnHeader,
+  IColumn,
+  IrowActions,
+  ILinksList,
+  ItemFields,
+  IFilterDataForRequest,
+} from './Models/table.models'
+import { StructureConfig } from './Models/table.enum'
+
+export {
+  Table,
+  IProps as ITableProps,
+  IColumnTotal,
+  IColumns,
+  IHeaders,
+  ITotals,
+  IColumnConfigStructure,
+  IColumnHeaderStructure,
+  ITotalList,
+  IFreezeProps,
+  IColumnConfig,
+  IPageSizes,
+  ISelected,
+  IColumnHeader,
+  IColumn,
+  IrowActions,
+  ILinksList,
+  StructureConfig,
+  ItemFields,
+  IFilterDataForRequest,
+}
diff --git a/src/svgIcons/ArrowtopSvgIcon.tsx b/src/svgIcons/ArrowtopSvgIcon.tsx
@@ -3,7 +3,7 @@ import { SVGProps, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => {
   const { fill = '#4844C5' } = props
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill={fill} {...props}>
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill={fill} {...props}>
       <path
         fill={fill}
         d='M14.066 11.233a.81.81 0 0 1-.592.25.807.807 0 0 1-.591-.25L7.999 6.35l-4.9 4.9a.791.791 0 0 1-.583.233.818.818 0 0 1-.6-.25.809.809 0 0 1-.25-.592c0-.228.083-.425.25-.591l5.617-5.6a.589.589 0 0 1 .216-.142.722.722 0 0 1 .25-.041c.09 0 .173.014.25.042.078.028.15.075.217.141l5.617 5.617a.782.782 0 0 1 .233.575.807.807 0 0 1-.25.591Z'

diff --git a/src/svgIcons/ColumnsSvgIcon.tsx b/src/svgIcons/ColumnsSvgIcon.tsx
@@ -4,7 +4,7 @@ const SvgComponent = (props: SVGProps<SVGSVGElement>) => {
   const { fill = '#4A4C56' } = props
 
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' width={24} height={24} fill={fill} {...props}>
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill={fill} {...props}>
       <path
         fill={fill}
         d='M19.893 3.001H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h15.893c1.103 0 2-.897 2-2V5a2.003 2.003 0 0 0-2-1.999ZM8 19.001H4V8h4v11.001Zm6 0h-4V8h4v11.001Zm2 0V8h3.893l.001 11.001H16Z'

diff --git a/src/svgIcons/FilterSvgIcon.tsx b/src/svgIcons/FilterSvgIcon.tsx
@@ -3,7 +3,7 @@ import { SVGProps, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => {
   const { fill } = props
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' width={24} height={24} fill={fill} {...props}>
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill={fill} {...props}>
       <path
         fill={fill}
         d='M11 20a.968.968 0 0 1-.714-.288A.964.964 0 0 1 10 19v-6L4.2 5.6c-.25-.333-.287-.683-.113-1.05.175-.367.48-.55.913-.55h14c.434 0 .738.183.913.55.176.367.138.717-.113 1.05L14 13v6a.968.968 0 0 1-.288.713A.964.964 0 0 1 13 20h-2Z'

diff --git a/src/svgIcons/LinkSvgIcon.tsx b/src/svgIcons/LinkSvgIcon.tsx
@@ -3,7 +3,7 @@ import { SVGProps, memo } from 'react'
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => {
   const { fill } = props
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' width={24} height={24} fill={fill} {...props}>
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill={fill} {...props}>
       <path
         fill={fill}
         d='M5 21c-.55 0-1.021-.196-1.413-.588A1.922 1.922 0 0 1 3 19V5c0-.55.196-1.021.588-1.413A1.922 1.922 0 0 1 5 3h6c.283 0 .521.096.713.288.192.192.288.43.287.712a.968.968 0 0 1-.288.713A.964.964 0 0 1 11 5H5v14h14v-6c0-.283.096-.521.288-.713A.964.964 0 0 1 20 12c.283 0 .521.096.713.288.192.192.288.43.287.712v6c0 .55-.196 1.021-.588 1.413A1.922 1.922 0 0 1 19 21H5Zm4-6a.948.948 0 0 1-.275-.7c0-.283.092-.517.275-.7L17.6 5H15a.968.968 0 0 1-.713-.288A.964.964 0 0 1 14 4c0-.283.096-.521.288-.713A.964.964 0 0 1 15 3h5c.283 0 .521.096.713.288.192.192.288.43.287.712v5a.968.968 0 0 1-.288.713A.964.964 0 0 1 20 10a.968.968 0 0 1-.713-.288A.964.964 0 0 1 19 9V6.4l-8.625 8.625a.918.918 0 0 1-.675.275.96.96 0 0 1-.7-.3Z'

diff --git a/src/table/Layout/Footer/Main/index.tsx b/src/table/Layout/Footer/Main/index.tsx
@@ -11,7 +11,7 @@ import { Button, Menu } from '@mui/material'
 import { useState } from 'react'
 import './style.scss'
 import { StructureConfig } from '../../../../Models/table.enum'
-import { getColumnName } from '../../../../utils'
+
 interface IFooterMain<T extends Object> {
   columnsHeaderStructure: IColumnHeaderStructure
   columnsConfigStructure: IColumnConfigStructure<T>

diff --git a/src/table/Layout/Rows/FreezedRigthColumns/DropDown/index.tsx b/src/table/Layout/Rows/FreezedRigthColumns/DropDown/index.tsx
@@ -36,7 +36,7 @@ const DropDown = <T extends Object>({ checkedLink, links, item, RightSideIcon, g
         handleClick={handleClick}
         handleClose={handleClose}
       >
-        <div>
+        <div style={{ padding: '12px 24px', maxWidth: 240 }}>
           {links &&
             links.length &&
             links.map((el, ind) => {
@@ -50,18 +50,20 @@ const DropDown = <T extends Object>({ checkedLink, links, item, RightSideIcon, g
                   className='G-align-center'
                   style={{
                     cursor: 'pointer',
-                    padding: '12px',
-                    borderBottom: ind !== links.length - 1 ? '1px solid #757575' : '',
+                    padding: '12px 0px',
+                    borderBottom: ind !== links.length - 1 ? '1px solid #ECECEC' : '',
                   }}
                 >
                   {!el.path ? (
                     <p className='G-dropdown-list-style'>
-                      <span>{el.icon?.() || <LinkSvgIcon fill='#4844c5' />}</span>
+                      {/* <span>
+                        {el.icon?.() || <LinkSvgIcon fill="#4844c5" />}
+                      </span> */}
                       <span>{el.name}</span>
                     </p>
                   ) : (
                     <a href={el.path} target='_blank' rel='noreferrer' className='G-dropdown-list-style'>
-                      <span>{el.icon?.() || <LinkSvgIcon fill='#4844c5' />}</span>
+                      <span>{el.icon?.()}</span>
                       <span>{el.name}</span>
                     </a>
                   )}

diff --git a/src/table/MainFooter/index.scss b/src/table/MainFooter/index.scss
@@ -1,7 +1,14 @@
+.G-count-info{
+  margin-right: 48px;
+  color: var(--color-text-2-aaa-91, #494949);
+}
+.G-select-text{
+  color: var(--color-text-4-aa-461, #757575);
+}
 .G-Select-container{
   min-width: 56px;
   height: 32px;
-  border:1px solid black ;
+  border:1px solid #EFEFEF ;
   margin: 0 5px;
    .G-select-header{
      padding: 0;

diff --git a/src/table/MainFooter/index.tsx b/src/table/MainFooter/index.tsx
@@ -15,7 +15,7 @@ const FooterPagination = ({
   pageSizeStructure,
   pagesTotalCount = 0,
   currPage = 1,
-  selectedPageSizeId,
+  selectedPageSizeId = { id: 1 },
   getPageRowsCountAndCurrentPage,
 }: IFooterPagination) => {
   const [isOpenList, setOpen] = useState<boolean>(false)
@@ -42,17 +42,18 @@ const FooterPagination = ({
 
   return (
     <>
+      <div className='G-count-info'>
+        {pageSizeStructure &&
+          (currentPage - 1) * pageSizeStructure?.[selectedPage.id - 1].count +
+            1 +
+            '-' +
+            currentPage * pageSizeStructure?.[selectedPage.id - 1].count +
+            ' from ' +
+            pagesTotalCount}
+      </div>
       {pageSizeStructure && selectedPage ? (
-        <div
-          className='G-justify-between G-align-center'
-          // style={{ width: "138px" }}
-        >
-          <div>Show</div>
-          <div
-            style={{
-              fontSize: '16px',
-            }}
-          ></div>
+        <div className='G-justify-between G-align-center'>
+          <div className='G-select-text'>Show</div>
           <Select
             optionsList={pageSizeStructure}
             value={selectedPage.id}
@@ -64,7 +65,7 @@ const FooterPagination = ({
             customClass='G-Select-container'
             ButtonSvg={DropdownSvgIcon}
           />
-          <div>Rows</div>
+          <div className='G-select-text'>Rows</div>
           <Pagination
             onPageChange={handleChangePage}
             totalCount={pagesTotalCount}

diff --git a/src/table/MainHeader/ColumnsCustomizer/index.tsx b/src/table/MainHeader/ColumnsCustomizer/index.tsx
@@ -1,7 +1,5 @@
 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 { IColumnConfigStructure, IColumnHeaderStructure, IColumns } from '../../../Models/table.models'
 import Checkbox from '../../../components/checkbox'

diff --git a/src/table/MainHeader/Download/style.scss b/src/table/MainHeader/Download/style.scss
@@ -1,7 +1,7 @@
 .P-download{
     background-color: #F7EBE5 !important;
     border:1px solid  #FB9C59;
-    border-radius: 2px;
+    border-radius: 4px;
     width: 200px;
     font-size: 14px;
     padding: 6px 0 ;

diff --git a/src/table/index.scss b/src/table/index.scss
@@ -13,7 +13,8 @@
 .G-table-actions-header{
   background-color: white;
   align-items: center;
-  height:55px;
+  padding: 32px 0px 24px 0px;
+  // height:55px;
   .G-checkbox{
     cursor: pointer;
     width: 24px;
@@ -59,7 +60,6 @@
     }
   }
   .G-download{
-    margin-right: 15px;
   }
 }
 
@@ -361,10 +361,10 @@
 
 
 .G-dropdown-list-style{
-  font-size: 12px;
-  width: 80%;
+  font-size: 14px;
   color: black;
   display: flex;
-  gap: 10px;
-  align-Items: center;
+  // gap: 10px;
+  // align-Items: center;
+  font-weight: 600;
 }