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

Update version 1.6.2

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.2]
+
+### Added
+
+-   Add `fitScreen` prop for `DashboardTemplate` component.
+
 ## [1.6.1]
 
 ### Added
@@ -14,12 +20,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
--   
+-
 
 ### Fixed
 
-- Fix unnecessary rerender for Table.
-- Fix UploadDragger to Upload.Dragger
+-   Fix unnecessary rerender for Table.
+-   Fix UploadDragger to Upload.Dragger
 
 ### Deprecated
 

package.json

@@ -1,9 +1,12 @@
 {
     "name": "1byte-react-design",
-    "version": "1.6.1",
+    "version": "1.6.2-3",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
     "license": "MIT",
     "scripts": {
         "build": "webpack --config webpack.config.js",

src/templates/DashboardTemplate/DashboardTemplate.tsx

@@ -3,25 +3,31 @@ import { Layout } from '../../molecules';
 import DashboardTemplateFooter from './Footer';
 import DashboardTemplateHeader from './Header';
 import DashboardTemplateSider from './Sider';
-import { DashboardTemplateContent, DashboardTemplateStyles } from './styles';
+import {
+    DashboardTemplateContent,
+    DashboardTemplateSkeletonLayout,
+    DashboardTemplateStyles,
+} from './styles';
 import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types';
 
 const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((props, ref) => {
-    const { headerProps, siderProps, footerProps, ...restProps } = props;
+    const { headerProps, siderProps, footerProps, fitScreen = false, ...restProps } = props;
 
     return (
-        <DashboardTemplateStyles ref={ref} {...restProps}>
+        <DashboardTemplateStyles ref={ref} fitScreen={fitScreen} {...restProps}>
             {headerProps && <DashboardTemplateHeader {...headerProps} />}
 
             <Layout hasSider={Boolean(siderProps)}>
                 {siderProps && <DashboardTemplateSider {...siderProps} />}
 
-                <Layout>
-                    <DashboardTemplateContent>{props.children}</DashboardTemplateContent>
+                <DashboardTemplateSkeletonLayout>
+                    <DashboardTemplateContent fitScreen={fitScreen}>
+                        {props.children}
+                    </DashboardTemplateContent>
                     {footerProps !== false && (
                         <DashboardTemplateFooter {...footerProps}></DashboardTemplateFooter>
                     )}
-                </Layout>
+                </DashboardTemplateSkeletonLayout>
             </Layout>
         </DashboardTemplateStyles>
     );

src/templates/DashboardTemplate/styles.tsx

@@ -5,16 +5,36 @@ import { getAliasToken, getComponentToken } from '../../utils';
 
 export const DashboardTemplateStyles = styled(Layout, {
     label: 'rd-dashboard-template',
-})`
+})<{
+    fitScreen: boolean;
+}>`
     ${() => css`
         background: ${getAliasToken('DashboardTemplate', 'colorBgLayout')};
     `}
+
+    ${({ fitScreen }) =>
+        fitScreen &&
+        css`
+            height: 100vh;
+        `}
 `;
 
+export const DashboardTemplateSkeletonLayout = styled(Layout, {
+    label: 'rd-dashboard-template-skeleton',
+})``;
+
 export const DashboardTemplateContent = styled(Layout.Content, {
     label: 'rd-dashboard-template-content',
-})`
+})<{
+    fitScreen: boolean;
+}>`
     ${() => css`
-        padding: ${getComponentToken('CenteredTemplate', 'contentPadding') || '32px 32px'};
+        padding: ${getComponentToken('DashboardTemplate', 'contentPadding') || '32px 32px'};
     `}
+
+    ${({ fitScreen }) =>
+        fitScreen &&
+        css`
+            overflow: auto;
+        `}
 `;

src/templates/DashboardTemplate/types.ts

@@ -16,7 +16,7 @@ type DashboardTemplatePropsExtend = {
     headerProps?: RdDashboardTemplateHeaderProps | false;
     siderProps?: RdDashboardTemplateSiderProps | false;
     footerProps?: RdDashboardTemplateFooterProps | false;
-    test?: boolean;
+    fitScreen?: boolean;
 };
 
 type DashboardTemplateRefExtend = {};