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';