Merge pull request #66 from CinCoders/develop

Version 1.0.2
CinCoders · Jul 31, 2023 · 52e8e90 · 52e8e90
2 parents b97b75a + 5a41cb1
commit 52e8e90
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 31 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -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.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.2] - 2023-07-31
+
+### Fixed
+
+- [MainDiv] Fit content height
+
 ## [1.0.1] - 2023-07-24
 
 ### Fixed
@@ -100,7 +106,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Empty SideMenu
 - Issue template
 
-[unreleased]: https://github.com/CinCoders/cinnamon/compare/version/v1.0.1...develop
+[unreleased]: https://github.com/CinCoders/cinnamon/compare/version/v1.0.2...develop
+[1.0.2]: https://github.com/CinCoders/cinnamon/compare/version/v1.0.1...version/v1.0.2
 [1.0.1]: https://github.com/CinCoders/cinnamon/compare/version/v1.0.0...version/v1.0.1
 [1.0.0]: https://github.com/CinCoders/cinnamon/compare/version/v0.4.0...version/v1.0.0
 [0.4.0]: https://github.com/CinCoders/cinnamon/compare/version/v0.3.0...version/v0.4.0

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cincoders/cinnamon",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A collection components for standardized system appearance and functionality, easing development in web applications.",
   "license": "MIT",
   "author": "CInCoders <[email protected]> (https://cincoders.cin.ufpe.br)",
@@ -19,6 +19,7 @@
   "scripts": {
     "start": "rollup -c -w",
     "build-lib": "rollup -c",
+    "build-link": "npm i && npm run build-lib && rm -rf ./node_modules/react ./node_modules/react-dom ./node_modules/react-router-dom/ && yarn unlink && yarn link",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

diff --git a/src/lib-components/Page/index.tsx b/src/lib-components/Page/index.tsx
@@ -10,7 +10,7 @@ export interface PageProps {
   footer?: FooterProps;
   children: JSX.Element | JSX.Element[];
   centralized?: boolean;
-  column?: boolean;
+  flexDirection?: 'column' | 'column-reverse' | 'row';
   haveToast?: boolean;
   components?: {
     navbar?: JSX.Element;
@@ -34,13 +34,14 @@ export function Page({
   footer,
   children,
   centralized = false,
-  column = false,
+  flexDirection,
   haveToast = false,
   components,
   createNavbarContext = true
 }: PageProps) {
   const navbarRef = useRef<HTMLDivElement>(null);
   const footerRef = useRef<HTMLDivElement>(null);
+
   const [dimensions, setDimensions] = useState<Dimensions>({
     navHeight: 0,
     footHeight: 0
@@ -85,28 +86,30 @@ export function Page({
       <div ref={navbarRef} style={{ display: 'inline' }}>
         {components?.navbar ? components.navbar : <Navbar {...navbar} />}
       </div>
-      <MainDiv
-        style={{
-          minHeight: `calc(100vh - ${diff}px)`,
-          height: `calc(100vh - ${diff}px)`,
-          alignItems: centralized ? 'center' : 'normal',
-          justifyContent: centralized ? 'center' : 'normal',
-          flexDirection: column ? 'column' : 'row'
-        }}
-      >
-        {haveToast &&
-          (components?.toastContainer ? (
-            components.toastContainer
-          ) : (
-            <ToastContainer
-              toastProps={{
-                position: 'top-right'
-              }}
-              topInitialPosition={dimensions.navHeight}
-            />
-          ))}
-        {children}
-      </MainDiv>
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <MainDiv
+          style={{
+            minHeight: `calc(100vh - ${diff}px)`,
+            alignItems: centralized ? 'center' : 'normal',
+            justifyContent: centralized ? 'center' : 'normal',
+            flexDirection: flexDirection ?? 'column',
+            flexGrow: 1
+          }}
+        >
+          {haveToast &&
+            (components?.toastContainer ? (
+              components.toastContainer
+            ) : (
+              <ToastContainer
+                toastProps={{
+                  position: 'top-right'
+                }}
+                topInitialPosition={dimensions.navHeight}
+              />
+            ))}
+          {children}
+        </MainDiv>
+      </div>
       <div ref={footerRef} style={{ display: 'inline' }}>
         {components?.footer ? components.footer : <Footer {...footer} />}
       </div>

diff --git a/src/lib-components/Page/styles.ts b/src/lib-components/Page/styles.ts
@@ -1,16 +1,15 @@
 import styled from 'styled-components';
 
 export const MainDiv = styled.main`
-  position: relative;
   display: flex;
   padding-right: 40px;
   padding-left: 40px;
   padding-top: 20px;
   padding-bottom: 20px;
   z-index: 1000;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 `;
 
 export const Parent = styled.div`
   display: inline;
-`
+`;