From d55d76ca90f80f0748439be3e8cdf14db0fcbff3 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 19 Dec 2017 15:56:09 -0800
Subject: [PATCH] datetime prototype

---
 .../views/date_time/calendar_demo_arrays.js   | 90 +++++++++++++++++++
 .../src/views/date_time/calendar_inline.js    | 11 +++
 src-docs/src/views/date_time/date_time.js     |  5 ++
 .../src/views/date_time/date_time_example.js  | 74 +++++++++++----
 .../date_time/date_without_time_selector.js   | 39 ++++++++
 src/components/form/date_time/_date_time.scss |  1 +
 .../form/date_time/calendar/calendar.js       | 53 +----------
 .../form/date_time/calendar/calendar.test.js  |  2 +-
 .../calendar/calendar_month_year_selector.js  |  8 +-
 .../calendar_month_year_selector.test.js      |  2 +-
 src/components/form/date_time/date_time.js    | 22 +++--
 .../form/date_time/date_time.test.js          |  2 +-
 .../date_time/time_selector/time_selector.js  |  6 +-
 .../time_selector/time_selector.test.js       |  2 +-
 14 files changed, 237 insertions(+), 80 deletions(-)
 create mode 100644 src-docs/src/views/date_time/calendar_demo_arrays.js
 create mode 100644 src-docs/src/views/date_time/calendar_inline.js
 create mode 100644 src-docs/src/views/date_time/date_without_time_selector.js

diff --git a/src-docs/src/views/date_time/calendar_demo_arrays.js b/src-docs/src/views/date_time/calendar_demo_arrays.js
new file mode 100644
index 000000000000..a332904f303d
--- /dev/null
+++ b/src-docs/src/views/date_time/calendar_demo_arrays.js
@@ -0,0 +1,90 @@
+
+export const EXAMPLE_CAL_RANGE = [
+  { numberedDay: 26 },
+  { numberedDay: 27 },
+  { numberedDay: 28 },
+  { numberedDay: 29 },
+  { numberedDay: 30 },
+  { numberedDay: 1, isInTheCurrentMonth: true },
+  { numberedDay: 2, isInTheCurrentMonth: true },
+  { numberedDay: 3, isInTheCurrentMonth: true },
+  { numberedDay: 4, isInTheCurrentMonth: true },
+  { numberedDay: 5, isInTheCurrentMonth: true },
+  { numberedDay: 6, isInTheCurrentMonth: true },
+  { numberedDay: 7, isInTheCurrentMonth: true, isToday: true },
+  { numberedDay: 8, isInTheCurrentMonth: true, isSelected: true, isStartDate: true },
+  { numberedDay: 9, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 10, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 11, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 12, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 13, isInTheCurrentMonth: true, isSelected: true },
+  { numberedDay: 14, isInTheCurrentMonth: true, isSelected: true, isEndDate: true },
+  { numberedDay: 15, isInTheCurrentMonth: true },
+  { numberedDay: 16, isInTheCurrentMonth: true },
+  { numberedDay: 17, isInTheCurrentMonth: true },
+  { numberedDay: 18, isInTheCurrentMonth: true },
+  { numberedDay: 19, isInTheCurrentMonth: true },
+  { numberedDay: 20, isInTheCurrentMonth: true },
+  { numberedDay: 21, isInTheCurrentMonth: true },
+  { numberedDay: 22, isInTheCurrentMonth: true },
+  { numberedDay: 23, isInTheCurrentMonth: true },
+  { numberedDay: 24, isInTheCurrentMonth: true },
+  { numberedDay: 25, isInTheCurrentMonth: true },
+  { numberedDay: 26, isInTheCurrentMonth: true },
+  { numberedDay: 27, isInTheCurrentMonth: true },
+  { numberedDay: 28, isInTheCurrentMonth: true },
+  { numberedDay: 29, isInTheCurrentMonth: true },
+  { numberedDay: 30, isInTheCurrentMonth: true },
+  { numberedDay: 31, isInTheCurrentMonth: true },
+  { numberedDay: 1 },
+  { numberedDay: 2 },
+  { numberedDay: 3 },
+  { numberedDay: 4 },
+  { numberedDay: 5 },
+  { numberedDay: 6 },
+];
+
+export const EXAMPLE_CAL_SINGLE_DATE = [
+  { numberedDay: 26 },
+  { numberedDay: 27 },
+  { numberedDay: 28 },
+  { numberedDay: 29 },
+  { numberedDay: 30 },
+  { numberedDay: 1, isInTheCurrentMonth: true },
+  { numberedDay: 2, isInTheCurrentMonth: true },
+  { numberedDay: 3, isInTheCurrentMonth: true },
+  { numberedDay: 4, isInTheCurrentMonth: true },
+  { numberedDay: 5, isInTheCurrentMonth: true },
+  { numberedDay: 6, isInTheCurrentMonth: true },
+  { numberedDay: 7, isInTheCurrentMonth: true, isToday: true },
+  { numberedDay: 8, isInTheCurrentMonth: true },
+  { numberedDay: 9, isInTheCurrentMonth: true },
+  { numberedDay: 10, isInTheCurrentMonth: true },
+  { numberedDay: 11, isInTheCurrentMonth: true },
+  { numberedDay: 12, isInTheCurrentMonth: true },
+  { numberedDay: 13, isInTheCurrentMonth: true },
+  { numberedDay: 14, isInTheCurrentMonth: true, isStartDate: true },
+  { numberedDay: 15, isInTheCurrentMonth: true },
+  { numberedDay: 16, isInTheCurrentMonth: true },
+  { numberedDay: 17, isInTheCurrentMonth: true },
+  { numberedDay: 18, isInTheCurrentMonth: true },
+  { numberedDay: 19, isInTheCurrentMonth: true },
+  { numberedDay: 20, isInTheCurrentMonth: true },
+  { numberedDay: 21, isInTheCurrentMonth: true },
+  { numberedDay: 22, isInTheCurrentMonth: true },
+  { numberedDay: 23, isInTheCurrentMonth: true },
+  { numberedDay: 24, isInTheCurrentMonth: true },
+  { numberedDay: 25, isInTheCurrentMonth: true },
+  { numberedDay: 26, isInTheCurrentMonth: true },
+  { numberedDay: 27, isInTheCurrentMonth: true },
+  { numberedDay: 28, isInTheCurrentMonth: true },
+  { numberedDay: 29, isInTheCurrentMonth: true },
+  { numberedDay: 30, isInTheCurrentMonth: true },
+  { numberedDay: 31, isInTheCurrentMonth: true },
+  { numberedDay: 1 },
+  { numberedDay: 2 },
+  { numberedDay: 3 },
+  { numberedDay: 4 },
+  { numberedDay: 5 },
+  { numberedDay: 6 },
+];
diff --git a/src-docs/src/views/date_time/calendar_inline.js b/src-docs/src/views/date_time/calendar_inline.js
new file mode 100644
index 000000000000..d11cc1377228
--- /dev/null
+++ b/src-docs/src/views/date_time/calendar_inline.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  EuiCalendar,
+} from '../../../../src/components';
+
+import { EXAMPLE_CAL_RANGE } from './calendar_demo_arrays';
+
+export default () => (
+  <EuiCalendar days={EXAMPLE_CAL_RANGE} />
+);
diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js
index 85e6a1560cd1..8a4f4eb81e07 100644
--- a/src-docs/src/views/date_time/date_time.js
+++ b/src-docs/src/views/date_time/date_time.js
@@ -6,6 +6,8 @@ import {
   EuiDateTime,
 } from '../../../../src/components';
 
+import { EXAMPLE_CAL_SINGLE_DATE } from './calendar_demo_arrays';
+
 export default class extends Component {
   constructor(props) {
     super(props);
@@ -26,6 +28,9 @@ export default class extends Component {
       <EuiDateTime
         isPopoverOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
+        days={EXAMPLE_CAL_SINGLE_DATE}
+        value="12/18/2017 01:02:03 PM"
+        hasTimeSelector
       />
     );
   }
diff --git a/src-docs/src/views/date_time/date_time_example.js b/src-docs/src/views/date_time/date_time_example.js
index 7a9179af1eb4..8f62a6bdf657 100644
--- a/src-docs/src/views/date_time/date_time_example.js
+++ b/src-docs/src/views/date_time/date_time_example.js
@@ -14,22 +14,64 @@ import DateTime from './date_time';
 const dateTimeSource = require('!!raw-loader!./date_time');
 const dateTimeHtml = renderToHtml(DateTime);
 
+import DateWithoutSelector from './date_without_time_selector';
+const dateWithoutSelectorSource = require('!!raw-loader!./date_without_time_selector');
+const dateWithoutSelectorHtml = renderToHtml(DateTime);
+
+import CalendarInline from './calendar_inline';
+const calendarInlineSource = require('!!raw-loader!./calendar_inline');
+const calendarInlineHtml = renderToHtml(CalendarInline);
+
 export const DateTimeExample = {
   title: 'DateTime',
-  sections: [{
-    title: 'DateTime',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: dateTimeSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: dateTimeHtml,
-    }],
-    text: (
-      <p>
-        Description needed: how to use the <EuiCode>EuiDateTime</EuiCode> component.
-      </p>
-    ),
-    demo: <DateTime />,
-  }],
+  sections: [
+    {
+      title: 'DateTime',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: dateTimeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dateTimeHtml,
+      }],
+      text: (
+        <p>
+          Description needed: how to use the <EuiCode>EuiDateTime</EuiCode> component.
+        </p>
+      ),
+      demo: <DateTime />,
+    },
+    {
+      title: 'DateTime without time selector',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: dateWithoutSelectorSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dateWithoutSelectorHtml,
+      }],
+      text: (
+        <p>
+          Description needed: how to use the <EuiCode>EuiDateTime</EuiCode> component.
+        </p>
+      ),
+      demo: <DateWithoutSelector />,
+    },
+    {
+      title: 'Calendar',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: calendarInlineSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: calendarInlineHtml,
+      }],
+      text: (
+        <p>
+          The <EuiCode>EuiCalendar</EuiCode> component should be usable as its own inline element.
+        </p>
+      ),
+      demo: <CalendarInline />,
+    },
+  ],
 };
diff --git a/src-docs/src/views/date_time/date_without_time_selector.js b/src-docs/src/views/date_time/date_without_time_selector.js
new file mode 100644
index 000000000000..052354ed76f5
--- /dev/null
+++ b/src-docs/src/views/date_time/date_without_time_selector.js
@@ -0,0 +1,39 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiDateTime,
+  EuiFormRow,
+} from '../../../../src/components';
+
+import { EXAMPLE_CAL_SINGLE_DATE } from './calendar_demo_arrays';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  closePopover() {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <EuiFormRow label="Date with time selector">
+        <EuiDateTime
+          isPopoverOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover.bind(this)}
+          days={EXAMPLE_CAL_SINGLE_DATE}
+          value="12/18/2017"
+        />
+      </EuiFormRow>
+    );
+  }
+}
diff --git a/src/components/form/date_time/_date_time.scss b/src/components/form/date_time/_date_time.scss
index 9656b2a5ae55..7f0eea0f3c7c 100644
--- a/src/components/form/date_time/_date_time.scss
+++ b/src/components/form/date_time/_date_time.scss
@@ -21,6 +21,7 @@
     top: 100%;
     left: -1px;
     right: -1px;
+    z-index: $euiZContentMenu;
     transition:
       transition $euiAnimSpeedNormal $euiAnimSlightResistance,
       opacity $euiAnimSpeedNormal $euiAnimSlightResistance
diff --git a/src/components/form/date_time/calendar/calendar.js b/src/components/form/date_time/calendar/calendar.js
index 96c09d617570..727e0e48c949 100644
--- a/src/components/form/date_time/calendar/calendar.js
+++ b/src/components/form/date_time/calendar/calendar.js
@@ -13,7 +13,6 @@ import {
 
 export class EuiCalendar extends Component {
   static propTypes = {
-    children: PropTypes.node,
     className: PropTypes.string,
   }
 
@@ -35,62 +34,16 @@ export class EuiCalendar extends Component {
 
   render() {
     const {
-      children,
       className,
-      closeMenu,
       isMonthYearSelectorOpen,
+      days,
       ...rest
     } = this.props;
 
     const classes = classNames('euiCalendar', className);
 
-    const numberedDays = [
-      { numberedDay: 26 },
-      { numberedDay: 27 },
-      { numberedDay: 28 },
-      { numberedDay: 29 },
-      { numberedDay: 30 },
-      { numberedDay: 1, isInTheCurrentMonth: true },
-      { numberedDay: 2, isInTheCurrentMonth: true },
-      { numberedDay: 3, isInTheCurrentMonth: true },
-      { numberedDay: 4, isInTheCurrentMonth: true },
-      { numberedDay: 5, isInTheCurrentMonth: true },
-      { numberedDay: 6, isInTheCurrentMonth: true },
-      { numberedDay: 7, isInTheCurrentMonth: true, isToday: true },
-      { numberedDay: 8, isInTheCurrentMonth: true, isSelected: true, isStartDate: true },
-      { numberedDay: 9, isInTheCurrentMonth: true, isSelected: true },
-      { numberedDay: 10, isInTheCurrentMonth: true, isSelected: true },
-      { numberedDay: 11, isInTheCurrentMonth: true, isSelected: true },
-      { numberedDay: 12, isInTheCurrentMonth: true, isSelected: true },
-      { numberedDay: 13, isInTheCurrentMonth: true, isSelected: true },
-      { numberedDay: 14, isInTheCurrentMonth: true, isSelected: true, isEndDate: true },
-      { numberedDay: 15, isInTheCurrentMonth: true },
-      { numberedDay: 16, isInTheCurrentMonth: true },
-      { numberedDay: 17, isInTheCurrentMonth: true },
-      { numberedDay: 18, isInTheCurrentMonth: true },
-      { numberedDay: 19, isInTheCurrentMonth: true },
-      { numberedDay: 20, isInTheCurrentMonth: true },
-      { numberedDay: 21, isInTheCurrentMonth: true },
-      { numberedDay: 22, isInTheCurrentMonth: true },
-      { numberedDay: 23, isInTheCurrentMonth: true },
-      { numberedDay: 24, isInTheCurrentMonth: true },
-      { numberedDay: 25, isInTheCurrentMonth: true },
-      { numberedDay: 26, isInTheCurrentMonth: true },
-      { numberedDay: 27, isInTheCurrentMonth: true },
-      { numberedDay: 28, isInTheCurrentMonth: true },
-      { numberedDay: 29, isInTheCurrentMonth: true },
-      { numberedDay: 30, isInTheCurrentMonth: true },
-      { numberedDay: 31, isInTheCurrentMonth: true },
-      { numberedDay: 1 },
-      { numberedDay: 2 },
-      { numberedDay: 3 },
-      { numberedDay: 4 },
-      { numberedDay: 5 },
-      { numberedDay: 6 },
-    ];
-
     const gridItemNumberedDays = (
-      numberedDays.map((item, index) => {
+      days.map((item, index) => {
         return  (
           <EuiCalendarGridItem
             key={index}
@@ -123,7 +76,7 @@ export class EuiCalendar extends Component {
             key={index}
             disabled
           >
-           {item}
+            {item}
           </EuiCalendarGridItem>
         );
       })
diff --git a/src/components/form/date_time/calendar/calendar.test.js b/src/components/form/date_time/calendar/calendar.test.js
index 967951549934..72857af7bece 100644
--- a/src/components/form/date_time/calendar/calendar.test.js
+++ b/src/components/form/date_time/calendar/calendar.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../../test/required_props';
+import { requiredProps } from '../../../../test/required_props';
 
 import { EuiCalendar } from './calendar';
 
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 8304a1817a50..bc3d7a31c89b 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
@@ -125,6 +125,7 @@ export class EuiCalendarMonthYearSelector extends Component {
         <EuiFlexGroup
           alignItems="center"
           justifyContent="spaceBetween"
+          responsive={false}
         >
           <EuiFlexItem grow={false}>
             <EuiButtonIcon
@@ -150,7 +151,12 @@ export class EuiCalendarMonthYearSelector extends Component {
           </EuiFlexItem>
         </EuiFlexGroup>
         <div className="euiCalendarMonthYearSelector__menu">
-          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            justifyContent="spaceBetween"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem>
               <EuiTextColor color="subdued">
                 <EuiText>
diff --git a/src/components/form/date_time/calendar/calendar_month_year_selector.test.js b/src/components/form/date_time/calendar/calendar_month_year_selector.test.js
index 16a5d66d67e9..01b63d14d7c8 100644
--- a/src/components/form/date_time/calendar/calendar_month_year_selector.test.js
+++ b/src/components/form/date_time/calendar/calendar_month_year_selector.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../../test/required_props';
 
 import { EuiCalendarMonthYearSelector } from './calendar_month_year_selector';
 
diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js
index 6e86f13fdda7..fd78aee8586c 100644
--- a/src/components/form/date_time/date_time.js
+++ b/src/components/form/date_time/date_time.js
@@ -24,7 +24,7 @@ export class EuiDateTime extends Component {
 
     this.state = {
       isPopoverOpen: this.props.isPopoverOpen,
-      value: '12/18/2017 01:02:03 PM',
+      value: this.props.value,
     };
 
     this.handleShowPopover = this.handleShowPopover.bind(this);
@@ -54,6 +54,8 @@ export class EuiDateTime extends Component {
       className,
       closePopover,
       isPopoverOpen,
+      days,
+      hasTimeSelector,
       ...rest
     } = this.props;
 
@@ -65,6 +67,16 @@ export class EuiDateTime extends Component {
       className
     );
 
+    let optionalTimeSelector;
+
+    if (hasTimeSelector) {
+      optionalTimeSelector = (
+        <EuiFlexItem className="euiDateTime__timeColumn">
+          <EuiTimeSelector />
+        </EuiFlexItem>
+      );
+    }
+
     return (
       <EuiOutsideClickDetector onOutsideClick={closePopover}>
         <div
@@ -80,13 +92,11 @@ export class EuiDateTime extends Component {
           />
 
           <EuiPanel hasShadow paddingSize="none" className="euiDateTime__panel">
-            <EuiFlexGroup gutterSize="none">
+            <EuiFlexGroup gutterSize="none" justifyContent="spaceAround">
               <EuiFlexItem grow={false} className="euiDateTime__dateColumn">
-                <EuiCalendar />
-              </EuiFlexItem>
-              <EuiFlexItem className="euiDateTime__timeColumn">
-                <EuiTimeSelector />
+                <EuiCalendar days={days} />
               </EuiFlexItem>
+              {optionalTimeSelector}
             </EuiFlexGroup>
           </EuiPanel>
         </div>
diff --git a/src/components/form/date_time/date_time.test.js b/src/components/form/date_time/date_time.test.js
index 82f59229bd89..b9eadb7c3385 100644
--- a/src/components/form/date_time/date_time.test.js
+++ b/src/components/form/date_time/date_time.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../../test/required_props';
 
 import { EuiDateTime } from './date_time';
 
diff --git a/src/components/form/date_time/time_selector/time_selector.js b/src/components/form/date_time/time_selector/time_selector.js
index 84655047acef..b1d69bd64676 100644
--- a/src/components/form/date_time/time_selector/time_selector.js
+++ b/src/components/form/date_time/time_selector/time_selector.js
@@ -16,7 +16,7 @@ export const EuiTimeSelector = ({
     { time: '2:00 AM' },
     { time: '2:30 AM' },
     { time: '3:00 AM' },
-    { time: '3:30 AM', isSelected: true},
+    { time: '3:30 AM', isSelected: true },
     { time: '4:00 AM' },
     { time: '4:30 AM' },
     { time: '5:00 AM' },
@@ -57,7 +57,7 @@ export const EuiTimeSelector = ({
     { time: '10:30 PM' },
     { time: '11:00 PM' },
     { time: '11:30 PM' },
-  ]
+  ];
 
   const timeListItems = (
     times.map((item, index) => {
@@ -87,7 +87,7 @@ export const EuiTimeSelector = ({
       className={classes}
       {...rest}
     >
-    { timeListItems}
+      { timeListItems}
     </ul>
   );
 };
diff --git a/src/components/form/date_time/time_selector/time_selector.test.js b/src/components/form/date_time/time_selector/time_selector.test.js
index 1345c4cf98ef..64ad83c9f0dc 100644
--- a/src/components/form/date_time/time_selector/time_selector.test.js
+++ b/src/components/form/date_time/time_selector/time_selector.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps } from '../../../../test';
 
 import { EuiTimeSelector } from './time_selector';