datetime prototype

elastic · Dec 19, 2017 · d55d76c · d55d76c
1 parent 21e94da
commit d55d76c
Show file tree

Hide file tree

Showing 14 changed files with 237 additions and 80 deletions.
diff --git a/src-docs/src/views/date_time/calendar_demo_arrays.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';