date time, with month selector

elastic · Dec 18, 2017 · de5ebcf · de5ebcf
1 parent 52661c4
commit de5ebcf
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,45 +6,141 @@ import {
  EuiFlexGroup,
  EuiFlexItem,
  EuiButtonIcon,
+ EuiTitle,
+ EuiFlexGrid,
+ EuiHorizontalRule,
+ EuiButtonEmpty,
+ EuiSpacer,
+ EuiText,
+ EuiTextColor,
 } from '../../../../components';
 
 export const EuiCalendarMonthYearSelector = ({
  children,
  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>
  );
 };