Adjustments

unosquare · Apr 14, 2023 · 3aa8c4a · 3aa8c4a
1 parent 3c3edeb
commit 3aa8c4a
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 101 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
         "tailwind.config.js"
     ],
     "dependencies": {
-        "@fluentui/react-icons": "^2.0.199",
+        "@fluentui/react-icons": "^2.0.200",
         "css-loader": "^6.7.3",
         "dayjs": "^1.11.7",
         "react": "^18.2.0",
@@ -17,7 +17,7 @@
         "style-loader": "^3.3.2",
         "styled-components": "^5.3.9",
         "tailwind-styled-components": "^2.2.0",
-        "uno-js": "^2.2.5"
+        "uno-js": "^2.2.8"
     },
     "devDependencies": {
         "@types/object-hash": "^3.0.2",
@@ -41,7 +41,7 @@
         "tailwindcss": "^3.3.1",
         "ts-loader": "^9.4.2",
         "typescript": "^5.0.4",
-        "webpack": "^5.78.0",
+        "webpack": "^5.79.0",
         "webpack-cli": "^5.0.1",
         "webpack-dev-server": "^4.13.2"
     },

diff --git a/sample/index.tsx b/sample/index.tsx
@@ -22,7 +22,7 @@ import {
     FlexValues,
     Footer,
     LegendFormatTypes,
-    Loading,
+    CardLoading,
     MenuContainer,
     NavBar,
     NavBarTitle,
@@ -180,7 +180,7 @@ const Application = () => {
                     />
                 </Card>
                 <Card column={1} row={3} direction={Directions.ROW} fit>
-                    <Loading />
+                    <CardLoading />
                     <Divider />
                     <Circle size={SizeValues.SMALL} value={100} color={Colors.GRAY} />
                 </Card>

diff --git a/src/AppContainer/index.tsx b/src/AppContainer/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import tw from 'tailwind-styled-components';
+import { HasChildrenComponent } from '../constants';
 
-export interface AppContainerSettings {
+export interface AppContainerSettings extends HasChildrenComponent {
     rows: number;
     columns?: number;
-    children: React.ReactNode;
     hasToolbar?: boolean;
 }
 

diff --git a/src/Card/index.tsx b/src/Card/index.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import tw from 'tailwind-styled-components';
-import { Directions, FlexValues, SizeValues } from '../constants';
+import { Directions, FlexValues, HasChildrenComponent, SizeValues } from '../constants';
 
-export interface CardSettings {
+export interface CardSettings extends HasChildrenComponent {
     column: number;
     row: number;
     direction: Directions;
-    children: React.ReactNode;
     justify?: FlexValues;
     align?: FlexValues;
     extraBottom?: boolean;
@@ -20,10 +19,9 @@ export interface CardSettings {
     extraStyles?: string;
 }
 
-export interface CardContentSettings {
+export interface CardContentSettings extends HasChildrenComponent {
     direction: Directions;
     size: SizeValues;
-    children: React.ReactNode;
     justify?: FlexValues;
     align?: FlexValues;
     show?: boolean;

diff --git a/src/Loading/index.tsx → src/CardLoading/index.tsx b/src/Loading/index.tsx → src/CardLoading/index.tsx
@@ -8,4 +8,4 @@ const StyledLoading = styled.img`
     display: block;
 `;
 
-export const Loading = ({ img }: any) => <StyledLoading src={img || loadingGif} alt='Loading' />;
+export const CardLoading = ({ img }: any) => <StyledLoading src={img || loadingGif} alt='Loading' />;
diff --git a/src/DataChart/index.tsx b/src/DataChart/index.tsx
@@ -15,7 +15,7 @@ import tw from 'tailwind-styled-components';
 import { Dictionary, formatter, FormatTypes } from 'uno-js';
 import { ChartLegend } from '../ChartLegend';
 import { ChartComponent, ChartTypes, LegendFormatTypes } from '../constants';
-import { Loading } from '../Loading';
+import { CardLoading } from '../CardLoading';
 import { NoData } from '../NoData';
 import { defaultChartPalette } from '../theme';
 
@@ -121,12 +121,11 @@ export const DataChart = ({
     const dataStore: Dictionary[] = (dataCallback && rawData && dataCallback(rawData)) || [];
     const tickFormatter = (t: any) => (legendFormatType ? formatTicks(t, legendFormatType) : t);
 
-    if (loading) return <Loading />;
-
     return (
         <StyledChart>
             {title && <StyledChartTitle>{title}</StyledChartTitle>}
-            {dataStore.length > 0 ? (
+            {loading && <CardLoading />}
+            {!loading && dataStore.length > 0 ? (
                 <ResponsiveContainer>
                     <LineChart data={dataStore} margin={margin} onClick={onClick}>
                         <CartesianGrid strokeDasharray='2 2' />

diff --git a/src/DropdownMenu/index.tsx b/src/DropdownMenu/index.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import tw from 'tailwind-styled-components';
 import { ChevronDown24Regular, ChevronUp24Regular } from '@fluentui/react-icons';
-import { Loading } from '../Loading';
+import { CardLoading } from '../CardLoading';
 
 export interface DropdownSettings {
     options: any;
@@ -135,7 +135,7 @@ export const DropdownMenu = ({ options, value, label, onOptionClicked, extraBott
         setIsOpen(false);
     };
 
-    if (!options) return <Loading />;
+    if (!options) return <CardLoading />;
 
     return (
         <StyledMenuSelector $extraBottom={extraBottom} className={className}>

diff --git a/src/PageToolbar/index.tsx b/src/PageToolbar/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import tw from 'tailwind-styled-components';
+import { HasChildrenComponent } from '../constants';
 
 export const StyledToolbar = tw.div`
     flex
@@ -45,11 +46,7 @@ export const StyledSelectContainer = tw.div`
     [&>span]:w-[100px]
 `;
 
-export interface BasicToolbarProps {
-    children: React.ReactNode;
-}
-
-export const BasicToolbar = ({ children }: BasicToolbarProps) => (
+export const BasicToolbar = ({ children }: HasChildrenComponent) => (
     <StyledToolbarContainer>
         <StyledToolbar>
             <StyledToolbarSelectorContainer>

diff --git a/src/Table/index.tsx b/src/Table/index.tsx
@@ -14,7 +14,7 @@ import objectHash from 'object-hash';
 import { CardContent } from '../Card';
 import { Colors, CurrencyRate, DataTypes, Directions, FlexValues, SizeValues, SortDirection } from '../constants';
 import { Ellipse } from '../Ellipse';
-import { Loading } from '../Loading';
+import { CardLoading } from '../CardLoading';
 import { NoData } from '../NoData';
 import { CenteredSpan } from '../Text';
 import { ToolBar } from '../Toolbar';
@@ -482,7 +482,7 @@ export const Table = <TDataIn, TDataOut>({
                 </ToolBar>
             )}
             <StyledTableContainer dataTitle={dataTitle} height={height} justify={justify}>
-                {loading && <Loading />}
+                {loading && <CardLoading />}
                 {searched.length > 0 && !loading && (
                     <StyledTable>
                         <TableHeaders