Merge pull request #28 from 1Byte-Software/develop

Update DashboardTemplate

Author: KennethWise

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.6.4]
+
+### Fixed
+
+-   Improve DashboardTemplate component.
+
 ## [1.6.3]
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.6.3-2",
+    "version": "1.6.4",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

src/templates/DashboardTemplate/DashboardTemplate.tsx

@@ -11,7 +11,13 @@ import {
 import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types';
 
 const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((props, ref) => {
-    const { headerProps, siderProps, footerProps, fitScreen = false, ...restProps } = props;
+    const {
+        headerProps = null,
+        siderProps = null,
+        footerProps = null,
+        fitScreen = false,
+        ...restProps
+    } = props;
 
     return (
         <DashboardTemplateStyles ref={ref} fitScreen={fitScreen} {...restProps}>
@@ -24,7 +30,7 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop
                     <DashboardTemplateContent fitScreen={fitScreen}>
                         {props.children}
                     </DashboardTemplateContent>
-                    {footerProps !== false && (
+                    {footerProps && (
                         <DashboardTemplateFooter {...footerProps}></DashboardTemplateFooter>
                     )}
                 </DashboardTemplateSkeletonLayout>

src/templates/DashboardTemplate/styles.tsx

@@ -4,10 +4,12 @@ import { Layout } from '../../molecules';
 import { getAliasToken, getComponentToken } from '../../utils';
 
 export const DashboardTemplateStyles = styled(Layout, {
-    label: 'rd-dashboard-template',
+    target: 'rd-dashboard-template',
 })<{
     fitScreen: boolean;
 }>`
+    min-height: 100vh;
+
     ${() => css`
         background: ${getAliasToken('DashboardTemplate', 'colorBgLayout')};
     `}
@@ -20,14 +22,15 @@ export const DashboardTemplateStyles = styled(Layout, {
 `;
 
 export const DashboardTemplateSkeletonLayout = styled(Layout, {
-    label: 'rd-dashboard-template-skeleton',
+    target: 'rd-dashboard-template-skeleton',
 })``;
 
 export const DashboardTemplateContent = styled(Layout.Content, {
-    label: 'rd-dashboard-template-content',
+    target: 'rd-dashboard-template-content',
 })<{
     fitScreen: boolean;
 }>`
+    height: 0;
     ${() => css`
         padding: ${getComponentToken('DashboardTemplate', 'contentPadding') || '32px 32px'};
     `}

src/templates/DashboardTemplate/types.ts

@@ -13,9 +13,9 @@ type DashboardTemplateComponentTokenExtend = {
 
 //#region Define extended types
 type DashboardTemplatePropsExtend = {
-    headerProps?: RdDashboardTemplateHeaderProps | false;
-    siderProps?: RdDashboardTemplateSiderProps | false;
-    footerProps?: RdDashboardTemplateFooterProps | false;
+    headerProps?: RdDashboardTemplateHeaderProps | null;
+    siderProps?: RdDashboardTemplateSiderProps | null;
+    footerProps?: RdDashboardTemplateFooterProps | null;
     fitScreen?: boolean;
 };