datetime

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

Hide file tree

Showing 12 changed files with 403 additions and 272 deletions.
diff --git a/src/components/form/date_time/calendar/_calendar.scss b/src/components/form/date_time/calendar/_calendar.scss
@@ -2,17 +2,4 @@
  width: ($euiSizeXL * 7) + ($euiSizeXS * 13);
  position: relative;
 
- .euiCalendarMonth {
- display: inline;
- font-size: $euiFontSizeL;
- font-weight: $euiFontWeightMedium;
- color: $euiColorFullShade;
- }
-
- .euiCalendarYear {
- display: inline;
- font-size: $euiFontSizeL;
- color: $euiColorDarkShade;
- font-weight: $euiFontWeightLight;
- }
 }
diff --git a/src/components/form/date_time/calendar/_calendar_grid_item.scss b/src/components/form/date_time/calendar/_calendar_grid_item.scss
@@ -49,6 +49,10 @@
  &:focus {
  box-shadow: 0 0 0 2px $euiColorPrimary;
  }
+
+ &:disabled {
+ cursor: default;
+ }
  }
 
  &.euiCalendarGridItem-isStartDate,

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
@@ -17,7 +17,37 @@
  }
 
  &.euiCalendarMonthYearSelector-isOpen {
- visibility: visible;
- opacity: 1;
+ .euiCalendarMonthYearSelector__menu {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+
+ .euiCalendarMonthYearSelector__month {
+ display: inline;
+ font-size: $euiFontSizeL;
+ font-weight: $euiFontWeightMedium;
+ color: $euiColorFullShade;
+ }
+
+ .euiCalendarMonthYearSelector__year {
+ display: inline;
+ font-size: $euiFontSizeL;
+ color: $euiColorDarkShade;
+ font-weight: $euiFontWeightLight;
+ }
+
+ .euiCalendarMonthYearSelector__button {
+
+ &:focus {
+ background: $euiFocusBackgroundColor;
+ }
+
+ &:hover {
+ .euiCalendarMonthYearSelector__month,
+ .euiCalendarMonthYearSelector__year {
+ color: $euiColorPrimary;
+ }
+ }
  }
 }
diff --git a/src/components/form/date_time/calendar/calendar.js b/src/components/form/date_time/calendar/calendar.js
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {
+ Component,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -9,113 +11,145 @@ import {
  EuiSpacer,
 } from '../../../../components';
 
-export const EuiCalendar = ({
- className,
- ...rest
-}) => {
- const classes = classNames('euiCalendar', className);
+export class EuiCalendar extends Component {
+ static propTypes = {
+  children: PropTypes.node,
+ className: PropTypes.string,
+ }
 
- 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},
- ];
+ constructor(props) {
+ super(props);
 
- const gridItemNumberedDays = (
- numberedDays.map((item, index) => {
- return (
- <EuiCalendarGridItem
- key={index}
- isInTheCurrentMonth={item.isInTheCurrentMonth}
- isSelected={item.isSelected}
- isToday={item.isToday}
- isStartDate={item.isStartDate}
- isEndDate={item.isEndDate}
- >
- {item.numberedDay}
- </EuiCalendarGridItem>
- );
- })
- );
+ this.state = {
+ isMonthYearSelectorOpen: false,
+ };
 
- const daysOfWeek = [
- 'SUN',
- 'MON',
- 'TUE',
- 'WED',
- 'THU',
- 'FRI',
- 'SAT'
- ];
+ this.closeMenu = this.closeMenu.bind(this);
+ }
 
- const gridItemDaysOfWeek = (
- daysOfWeek.map((item, index) => {
- return (
- <EuiCalendarGridItem
- key={index}
- disabled
- >
- {item}
- </EuiCalendarGridItem>
- );
- })
- );
+ closeMenu() {
+ this.setState({
+ isMonthYearSelectorOpen: false,
+ });
+ }
 
- return (
- <div
- className={classes}
- {...rest}
- >
- <EuiCalendarMonthYearSelector />
- <EuiSpacer size="s" />
- <EuiCalendarGrid>
- {gridItemDaysOfWeek}
- </EuiCalendarGrid>
- <EuiCalendarGrid>
- {gridItemNumberedDays}
- </EuiCalendarGrid>
- </div>
- );
-};
+ render() {
+ const {
+ children,
+ className,
+ closeMenu,
+ isMonthYearSelectorOpen,
+ ...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) => {
+ return (
+ <EuiCalendarGridItem
+ key={index}
+ isInTheCurrentMonth={item.isInTheCurrentMonth}
+ isSelected={item.isSelected}
+ isToday={item.isToday}
+ isStartDate={item.isStartDate}
+ isEndDate={item.isEndDate}
+ >
+ {item.numberedDay}
+ </EuiCalendarGridItem>
+ );
+ })
+ );
+
+ const daysOfWeek = [
+ 'SUN',
+ 'MON',
+ 'TUE',
+ 'WED',
+ 'THU',
+ 'FRI',
+ 'SAT'
+ ];
+
+ const gridItemDaysOfWeek = (
+ daysOfWeek.map((item, index) => {
+ return (
+ <EuiCalendarGridItem
+ key={index}
+ disabled
+ >
+ {item}
+ </EuiCalendarGridItem>
+ );
+ })
+ );
+
+ return (
+ <div
+ className={classes}
+ {...rest}
+ >
+ <EuiCalendarMonthYearSelector
+ isMonthYearSelectorOpen={this.state.isMonthYearSelectorOpen}
+ closeMenu={this.closeMenu}
+ />
+
+ <EuiSpacer size="s" />
+ <EuiCalendarGrid>
+ {gridItemDaysOfWeek}
+ </EuiCalendarGrid>
+ <EuiCalendarGrid>
+ {gridItemNumberedDays}
+ </EuiCalendarGrid>
+ </div>
+ );
+ }
+}
 
 EuiCalendar.propTypes = {
  children: PropTypes.node,

diff --git a/src/components/form/date_time/calendar/calendar_grid.test.js b/src/components/form/date_time/calendar/calendar_grid.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 { EuiCalendarGrid } from './calendar_grid';
 

diff --git a/src/components/form/date_time/calendar/calendar_grid_item.js b/src/components/form/date_time/calendar/calendar_grid_item.js
@@ -2,15 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import {
- COLORS,
- EuiTextColor,
-} from './../../../text//text_color';
 
 export const EuiCalendarGridItem = ({
  children,
  className,
- color,
  isInTheCurrentMonth,
  isSelected,
  isStartDate,
@@ -46,7 +41,6 @@ export const EuiCalendarGridItem = ({
 EuiCalendarGridItem.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
- color: PropTypes.oneOf(COLORS),
  isInTheCurrentMonth: PropTypes.bool,
  isSelected: PropTypes.bool,
  isToday: PropTypes.bool,

diff --git a/src/components/form/date_time/calendar/calendar_grid_item.test.js b/src/components/form/date_time/calendar/calendar_grid_item.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 { EuiCalendarGridItem } from './calendar_grid_item';