Add confirm event to time picker, add vertical time picker

Author: xnerhu

3-panel/src/imports/materialdesign/components/TimePicker/index.js

@@ -219,6 +219,26 @@ export default class TimePicker extends Component {
     if (tick != null) tick.getRoot().classList.remove('selected')
   }
 
+  /**
+   * On confirm button click.
+   * Triggers event.
+   * @param {Event}
+   */
+  onConfirmButtonClick = (e) => {
+    const onConfirm = this.props.onConfirm
+
+    if (typeof onConfirm === 'function') {
+      /**
+       * @param {Int} hour
+       * @param {Int | String} minutes
+       * @param {Boolean} is AM
+       */
+      onConfirm(this.elements.hoursClock.selectedTick.props.number, this.elements.minutesClock.selectedTick.props.number, this.isAM)
+    }
+
+    this.toggle(false)
+  }
+
   render () {
     return (
       <div>
@@ -275,7 +295,7 @@ export default class TimePicker extends Component {
 
     const buttons = (
       <div>
-        <MaterialButton text='OK' shadow={false} rippleStyle={this.props.actionButtonRippleStyle} />
+        <MaterialButton text='OK' shadow={false} rippleStyle={this.props.actionButtonRippleStyle} onClick={this.onConfirmButtonClick} />
         <MaterialButton text='ANULUJ' shadow={false} rippleStyle={this.props.actionButtonRippleStyle} onClick={() => { this.toggle(false) }} />
       </div>
     )

3-panel/src/imports/materialdesign/components/TimePicker/style.scss

@@ -10,13 +10,16 @@
   display: none;
   opacity: 0;
   top: 25%;
+  border-radius: 2px;
+  background-color: #fff;
 
   & .date-display {
     width: 196px;
     height: 100%;
     background-color: #26a69a;
-    position: relative;
-    float: left;
+    position: absolute;
+    left: 0;
+    top: 0;
 
     & .date-container {
       color: rgba(255, 255, 255, 0.54);
@@ -44,7 +47,7 @@
 
     & .am-pm-container {
       padding-top: 8px;
-      font-size: 18px;
+      font-size: 17px;
       margin: 0 auto;
       text-align: center;
 
@@ -66,8 +69,9 @@
   & .clock-buttons-container {
     width: calc(100% - 196px);
     height: 100%;
-    position: relative;
-    float: left;
+    position: absolute;
+    right: 0;
+    top: 0;
     background-color: #fff;
 
     & .clock {
@@ -153,6 +157,8 @@
       }
 
       &::after {
+        content: '';
+        display: block;
         clear: both;
       }
     }
@@ -172,6 +178,8 @@
   }
 
   &::after {
+    content: '';
+    display: block;
     clear: both;
   }
 }
@@ -187,3 +195,27 @@
   z-index: 8;
   transition: 0.3s opacity;
 }
+
+@media (max-width: 624px) {
+  .material-time-picker {
+    width: 356px;
+    height: 464px;
+
+    & .date-display {
+      width: 100%;
+      height: 90px;
+
+      & .am-pm-container {
+        position: absolute;
+        top: 0;
+        right: -38px;
+      }
+    }
+
+    & .clock-buttons-container {
+      width: 100%;
+      height: calc(100% - 88px);
+      top: 88px;
+    }
+  }
+}

3-panel/src/views/test/index.js

@@ -11,7 +11,7 @@ export default class App extends Component {
     return (
       <div>
         <div className='app-content' ref='appContent'>
-          <TimePicker />
+          <TimePicker onConfirm={(hour, minutes, isAM) => { console.log(hour + ':' + minutes + ' (' + ((isAM) ? 'AM' : 'PM') + ')') }} />
         </div>
       </div>
     )