Singleday expand-contract implemented

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.5",
     "moment-timezone": "^0.5.14",
     "open-weather-icons": "^0.0.7",
     "react": "^16.2.0",
@@ -16,6 +17,7 @@
     "eject": "react-scripts-ts eject"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.3",
     "@types/jest": "^22.2.2",
     "@types/moment-timezone": "^0.5.4",
     "@types/node": "^9.6.0",

src/Components/SingleDayForecast/Component.css

@@ -2,13 +2,15 @@
   float: left;
   width: 20%;
   height: 100%;
-
+  
   padding: 0 .5em;
-
+  
   font-size: 1.25em;
 }
 
 .SingleDayForecast .SingleDayForecast-inner {
+  position: relative;
+
   width: 100%;
   height: 100%;
   
@@ -16,14 +18,25 @@
 }
 
 .SingleDayForecast .summary {
-  position: relative;
+  position: absolute;
 
   padding: 0 0.5em;
   padding-bottom: .5em;
 
+  top: 0;
+  left: 0;
+  width: 100%;
   height: 40%;
+
+  transition: 1s all;
 }
 
+.SingleDayForecast.maximize .summary {
+  top: 45%;
+  transform: translate(0, -50%);
+}
+
+
 .SingleDayForecast .summary>* {
   padding: 0.125em 0;
 }
@@ -80,9 +93,29 @@
   
   background-color: #000;
   transform: translateX(-50%);
+
+  transition: opacity 1s;
+}
+
+.SingleDayForecast.maximize  .summary .bottom-dividor{
+  opacity: 0;
 }
 
 .SingleDayForecast .details {
+  position: absolute;
+
+  top: 40%;
+  left: 0;
+  width: 100%;
   height: 60%;
+
   overflow: auto;
+
+  transition: visibility 0s 1s;
+}
+
+.SingleDayForecast.maximize .details {
+  visibility: hidden;
+
+  transition: visibility 0s 0s;
 }

src/Components/SingleDayForecast/Component.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as classnames from 'classnames';
 import './Component.css';
 import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
 import { Forecast5DaysSeperated, ForecaseAtInstance, Utils } from '../../Utils';
@@ -11,12 +12,16 @@ export interface SingleDayForecastProps {
 
 type numberOrString = number | string;
 
-export class SingleDayForecast extends React.Component<SingleDayForecastProps, {}> {
+export class SingleDayForecast extends React.Component<SingleDayForecastProps, { maximized: boolean }> {
 
   constructor(props: SingleDayForecastProps) {
     super(props);
 
     this.props = props;
+    this.state = { maximized: true };
+
+    this.minimizeIfAlreadyMaximized = this.minimizeIfAlreadyMaximized.bind(this);
+    this.maximizeIfAlreadyMinimized = this.maximizeIfAlreadyMinimized.bind(this);
 
     // this.state = { data: undefined };
   }
@@ -88,14 +93,38 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
     return maxEl;
   }
 
+  changeMaximize() {
+    this.setState((prevState) => { return { maximized: !prevState.maximized }; });
+  }
+
+  maximizeIfAlreadyMinimized() {
+    if (!this.state.maximized) {
+      this.changeMaximize();
+    }
+  }
+
+  minimizeIfAlreadyMaximized() {
+    if (this.state.maximized) {
+      this.changeMaximize();
+    }
+  }
+
   render() {
     const day = Utils.createDateFromEpochInIndiaTZ(this.props.forecastCurrentDay[0].dt);
     const summary = this.calcSummary();
 
+    const TagNameSingleDay = 'SingleDayForecast';
+
     return (
-      <div className="SingleDayForecast">
-        <div className="SingleDayForecast-inner">
-          <div className="summary">
+      <div
+        className={
+          this.state.maximized ?
+            classnames([TagNameSingleDay, 'maximize']) :
+            classnames([TagNameSingleDay])
+        }
+      >
+        <div className="SingleDayForecast-inner" onClick={this.minimizeIfAlreadyMaximized}>
+          <div className="summary" onClick={this.maximizeIfAlreadyMinimized}>
 
             <div className="weather-icon-container">
               <div className={`weather-icon owi owi-3x owi-${summary.modeWeatherIcon}`} />
@@ -116,7 +145,7 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
               <div className="value">
                 {summary.avgTemp.toFixed(0)}&deg;C
               </div>
-              <div className="clearfix"/>
+              <div className="clearfix" />
             </div>
 
             <div className="humidity" title={`Humidity : ${summary.avgHumidity.toFixed(0)} %`}>
@@ -126,7 +155,7 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
               <div className="value">
                 {summary.avgHumidity.toFixed(0)} %
               </div>
-              <div className="clearfix"/>
+              <div className="clearfix" />
             </div>
 
             <div className="bottom-dividor" />
@@ -135,7 +164,7 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
             {this.props.forecastCurrentDay.map((forecastAtInstance) => {
               return <SingleInstanceForecast forecastAtInstance={forecastAtInstance} key={forecastAtInstance.dt} />;
             })}
-        </div>
+          </div>
         </div>
       </div>
     );

yarn.lock

@@ -16,6 +16,10 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@types/classnames@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5"
+
 "@types/jest@^22.2.2":
   version "22.2.2"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.2.tgz#afe5dacbd00d65325f52da0ed3e76e259629ac9d"
@@ -1450,6 +1454,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"