From de5ebcf8d28b4fdf2896e3b015139ea559b24b32 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 18 Dec 2017 14:53:07 -0800
Subject: [PATCH] date time, with month selector

---
 src-docs/src/views/date_time/date_time.js     |  35 ++++-
 src/components/flex/_flex_grid.scss           |   3 +-
 src/components/flex/flex_grid.js              |   3 +-
 src/components/form/date_time/_date_time.scss |  27 +++-
 .../form/date_time/calendar/_calendar.scss    |   1 +
 .../_calendar_month_year_selector.scss        |  20 +++
 .../calendar/calendar_month_year_selector.js  | 148 +++++++++++++++---
 src/components/form/date_time/date_time.js    |  73 ++++++---
 8 files changed, 247 insertions(+), 63 deletions(-)

diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js
index 5ce8c6b25158..85e6a1560cd1 100644
--- a/src-docs/src/views/date_time/date_time.js
+++ b/src-docs/src/views/date_time/date_time.js
@@ -1,13 +1,32 @@
-import React from 'react';
+import React, {
+  Component,
+} from 'react';
 
 import {
   EuiDateTime,
-  EuiDateTimeInput,
-  EuiCalendar,
 } from '../../../../src/components';
 
-export default () => (
-  <EuiDateTime>
-    <EuiCalendar />
-  </EuiDateTime>
-);
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  closePopover() {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <EuiDateTime
+        isPopoverOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover.bind(this)}
+      />
+    );
+  }
+}
diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss
index f4c6f36bba53..700698d6e91c 100644
--- a/src/components/flex/_flex_grid.scss
+++ b/src/components/flex/_flex_grid.scss
@@ -5,6 +5,7 @@
 
   > .euiFlexItem {
     flex-grow: 0;
+    align-items: stretch;
 
     &.euiFlexItem--flexGrowZero {
       flex-grow: 0 !important;
@@ -14,6 +15,7 @@
 }
 
 $gutterTypes: (
+  gutterNone: 0px,
   gutterSmall: $euiSizeS,
   gutterMedium: $euiSize,
   gutterLarge: $euiSizeL,
@@ -42,7 +44,6 @@ $fractions: (
   @each $fraction, $percentage in $fractions {
     .euiFlexGrid--#{$gutterName} {
       margin: -$halfGutterSize;
-      align-items: stretch;
 
       &.euiFlexGrid--#{$fraction} {
         > .euiFlexItem {
diff --git a/src/components/flex/flex_grid.js b/src/components/flex/flex_grid.js
index daaadd7ce0fc..160f258ccd56 100644
--- a/src/components/flex/flex_grid.js
+++ b/src/components/flex/flex_grid.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const gutterSizeToClassNameMap = {
-  none: null,
+  none: 'euiFlexGrid--gutterNone',
   s: 'euiFlexGrid--gutterSmall',
   m: 'euiFlexGrid--gutterMedium',
   l: 'euiFlexGrid--gutterLarge',
@@ -50,4 +50,3 @@ EuiFlexGrid.defaultProps = {
   gutterSize: 'l',
   columns: 0,
 };
-
diff --git a/src/components/form/date_time/_date_time.scss b/src/components/form/date_time/_date_time.scss
index e58f5b7fdfbb..9656b2a5ae55 100644
--- a/src/components/form/date_time/_date_time.scss
+++ b/src/components/form/date_time/_date_time.scss
@@ -1,10 +1,6 @@
 .euiDateTime {
   max-width: $euiFormMaxWidth;
-
-  .euiDateTime__input {
-    padding-right: $euiSizeXXL;
-    padding-left:$euiSizeM;
-  }
+  position: relative;
 
   .euiDateTime__dateColumn {
     padding: $euiSize;
@@ -16,4 +12,25 @@
     border-left: $euiBorderThin;
     padding: $euiSize 0 $euiSize $euiSizeS;
   }
+
+  .euiDateTime__panel {
+    visibility: hidden;
+    opacity: 0;
+    border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    right: -1px;
+    transition:
+      transition $euiAnimSpeedNormal $euiAnimSlightResistance,
+      opacity $euiAnimSpeedNormal $euiAnimSlightResistance
+    ;
+  }
+
+  &.euiDateTime-isOpen {
+    .euiDateTime__panel {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 }
diff --git a/src/components/form/date_time/calendar/_calendar.scss b/src/components/form/date_time/calendar/_calendar.scss
index 8df0b70a5446..08a65f9ba43b 100644
--- a/src/components/form/date_time/calendar/_calendar.scss
+++ b/src/components/form/date_time/calendar/_calendar.scss
@@ -1,5 +1,6 @@
 .euiCalendar {
   width: ($euiSizeXL * 7) + ($euiSizeXS * 13);
+  position: relative;
 
   .euiCalendarMonth {
     display: inline;
diff --git a/src/components/form/date_time/calendar/_calendar_month_year_selector.scss b/src/components/form/date_time/calendar/_calendar_month_year_selector.scss
index fe42c0f464a2..9217d97e1454 100644
--- a/src/components/form/date_time/calendar/_calendar_month_year_selector.scss
+++ b/src/components/form/date_time/calendar/_calendar_month_year_selector.scss
@@ -1,3 +1,23 @@
 .euiCalendarMonthYearSelector {
 
+  .euiCalendarMonthYearSelector__menu {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: $euiColorEmptyShade;
+    z-index: 2;
+    transition:
+      transition $euiAnimSpeedNormal $euiAnimSlightResistance,
+      opacity $euiAnimSpeedNormal $euiAnimSlightResistance
+    ;
+  }
+
+  &.euiCalendarMonthYearSelector-isOpen {
+    visibility: visible;
+    opacity: 1;
+  }
 }
diff --git a/src/components/form/date_time/calendar/calendar_month_year_selector.js b/src/components/form/date_time/calendar/calendar_month_year_selector.js
index 9c4824c4621d..23a8a7145e7e 100644
--- a/src/components/form/date_time/calendar/calendar_month_year_selector.js
+++ b/src/components/form/date_time/calendar/calendar_month_year_selector.js
@@ -6,6 +6,13 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonIcon,
+  EuiTitle,
+  EuiFlexGrid,
+  EuiHorizontalRule,
+  EuiButtonEmpty,
+  EuiSpacer,
+  EuiText,
+  EuiTextColor,
 } from '../../../../components';
 
 export const EuiCalendarMonthYearSelector = ({
@@ -13,38 +20,127 @@ export const EuiCalendarMonthYearSelector = ({
   className,
   ...rest,
 }) => {
+
+  const months = [
+    'JAN',
+    'FEB',
+    'MAR',
+    'APR',
+    'MAY',
+    'JUN',
+    'JUL',
+    'AUG',
+    'SEP',
+    'OCT',
+    'NOV',
+    'DEC',
+  ];
+
+  const gridItemMonths = (
+    months.map((item, index) => {
+      return (
+        <EuiFlexItem
+          key={index}
+        >
+          <EuiButtonEmpty color="text" size="s" className="euiCalendarMonthYearSelector__item">
+            {item}
+          </EuiButtonEmpty>
+       </EuiFlexItem>
+      );
+    })
+  );
+
+  const years = [
+    2006,
+    2007,
+    2008,
+    2009,
+    2010,
+    2011,
+    2012,
+    2013,
+    2014,
+    2015,
+    2016,
+    2017,
+  ];
+
+  const gridItemYears = (
+    years.map((item, index) => {
+      return (
+        <EuiFlexItem
+          key={index}
+        >
+          <EuiButtonEmpty color="text" size="s" className="euiCalendarMonthYearSelector__item">
+            {item}
+          </EuiButtonEmpty>
+       </EuiFlexItem>
+      );
+    })
+  );
+
   const classes = classNames('euiCalendarMonthYearSelector', className);
+  const menuClasses = classNames(
+    'euiCalendarMonthYearSelector__menu',
+  );
 
   return (
-    <EuiFlexGroup
-      alignItems="center"
-      justifyContent="spaceBetween"
+    <div
       className={classes}
       {...rest}
     >
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          size="s"
-          color="text"
-          iconType="arrowLeft"
-          aria-label="Previous month"
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <div>
-          <span className="euiCalendarMonth">December</span>
-          <span className="euiCalendarYear"> 2017</span>
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          size="s"
-          color="text"
-          iconType="arrowRight"
-          aria-label="Next month"
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="spaceBetween"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size="s"
+            color="text"
+            iconType="arrowLeft"
+            aria-label="Previous month"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <div>
+            <span className="euiCalendarMonth">December</span>
+            <span className="euiCalendarYear"> 2017</span>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size="s"
+            color="text"
+            iconType="arrowRight"
+            aria-label="Next month"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <div className={menuClasses}>
+        <EuiFlexGrid columns={4} gutterSize="none">
+          {gridItemMonths}
+        </EuiFlexGrid>
+        <EuiHorizontalRule margin="xs" />
+        <EuiFlexGrid columns={4} gutterSize="none">
+          {gridItemYears}
+        </EuiFlexGrid>
+        <EuiHorizontalRule margin="xs" />
+        <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem>
+            <EuiTextColor color="subdued">
+              <EuiText>
+                <p>Select a month and year</p>
+              </EuiText>
+            </EuiTextColor>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty flush="right" size="s" iconType="check">
+              Done
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js
index 9f1947704b74..4d685cbf8038 100644
--- a/src/components/form/date_time/date_time.js
+++ b/src/components/form/date_time/date_time.js
@@ -12,6 +12,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTimeSelector,
+  EuiOutsideClickDetector,
 } from '../../../components';
 
 export class EuiDateTime extends Component {
@@ -22,47 +23,77 @@ export class EuiDateTime extends Component {
 
   constructor(props) {
     super(props);
+
+    this.state = {
+      isPopoverOpen: this.props.isPopoverOpen,
+      value: '12/18/2017 01:02:03 PM',
+    };
+
+    this.handleShowPopover = this.handleShowPopover.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isPopoverOpen !== this.state.isPopoverOpen) {
+      this.setState({ isPopoverOpen: nextProps.isPopoverOpen });
+    }
+  }
+
+  handleShowPopover() {
+    this.setState({
+      isPopoverOpen: true,
+    });
+  }
+
+  handleChange(event) {
+    this.setState({
+      value: event.target.value,
+    });
   }
 
   render() {
     const {
       children,
       className,
+      closePopover,
+      isPopoverOpen,
       ...rest
     } = this.props;
 
     const classes = classNames(
       'euiDateTime',
+      {
+        'euiDateTime-isOpen': this.state.isPopoverOpen,
+      },
       className
     );
 
     return (
-      <div
-        className={classes}
-        {...rest}
-      >
-        <EuiFormRow
-          id="asdf"
-          label="Calendar"
+      <EuiOutsideClickDetector onOutsideClick={closePopover}>
+        <div
+          className={classes}
+          {...rest}
         >
           <EuiFieldText
             icon="calendar"
-            iconSide="right"
             className="euiDateTime__input"
-            value="12/13/2017 01:02:03 PM"
+            onFocus={this.handleShowPopover}
+            value={this.state.value}
+            onChange={this.handleChange}
           />
-        </EuiFormRow>
-        <EuiPanel hasShadow paddingSize="none">
-          <EuiFlexGroup gutterSize="none">
-            <EuiFlexItem grow={false} className="euiDateTime__dateColumn">
-              <EuiCalendar />
-            </EuiFlexItem>
-            <EuiFlexItem className="euiDateTime__timeColumn">
-              <EuiTimeSelector />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPanel>
-      </div>
+
+          <EuiPanel hasShadow paddingSize="none" className="euiDateTime__panel">
+            <EuiFlexGroup gutterSize="none">
+              <EuiFlexItem grow={false} className="euiDateTime__dateColumn">
+                <EuiCalendar />
+              </EuiFlexItem>
+              <EuiFlexItem className="euiDateTime__timeColumn">
+                <EuiTimeSelector />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </div>
+      </EuiOutsideClickDetector>
     );
   }
 }