From 79e69ff9505d47d5011f0b80f29bec2cbc5069e6 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 6 Dec 2017 16:25:58 -0800 Subject: [PATCH 01/12] initial components --- src-docs/src/routes.js | 4 ++ src-docs/src/views/date_time/date_time.js | 11 ++++++ .../src/views/date_time/date_time_example.js | 35 +++++++++++++++++ src/components/date_time/_date_time.scss | 3 ++ src/components/date_time/_index.scss | 1 + src/components/date_time/date_time.js | 38 +++++++++++++++++++ src/components/date_time/date_time.test.js | 16 ++++++++ src/components/date_time/index.js | 3 ++ src/components/index.js | 4 ++ src/components/index.scss | 1 + 10 files changed, 116 insertions(+) create mode 100644 src-docs/src/views/date_time/date_time.js create mode 100644 src-docs/src/views/date_time/date_time_example.js create mode 100644 src/components/date_time/_date_time.scss create mode 100644 src/components/date_time/_index.scss create mode 100644 src/components/date_time/date_time.js create mode 100644 src/components/date_time/date_time.test.js create mode 100644 src/components/date_time/index.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index b6328069af4..a1dfd783c06 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -61,6 +61,9 @@ import { ColorPickerExample } import { ContextMenuExample } from './views/context_menu/context_menu_example'; +import { DateTimeExample } + from '../../views/date_time/date_time_example'; + import { DescriptionListExample } from './views/description_list/description_list_example'; @@ -213,6 +216,7 @@ const components = [ CodeExample, ColorPickerExample, ContextMenuExample, + DateTimeExample, DescriptionListExample, ErrorBoundaryExample, ExpressionExample, diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js new file mode 100644 index 00000000000..023857d3d8d --- /dev/null +++ b/src-docs/src/views/date_time/date_time.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { + EuiDateTime, +} from '../../../../src/components'; + +export default () => ( + + + +); diff --git a/src-docs/src/views/date_time/date_time_example.js b/src-docs/src/views/date_time/date_time_example.js new file mode 100644 index 00000000000..7a9179af1eb --- /dev/null +++ b/src-docs/src/views/date_time/date_time_example.js @@ -0,0 +1,35 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideSectionTypes, +} from '../../components'; + +import { + EuiCode, +} from '../../../../src/components'; + +import DateTime from './date_time'; +const dateTimeSource = require('!!raw-loader!./date_time'); +const dateTimeHtml = renderToHtml(DateTime); + +export const DateTimeExample = { + title: 'DateTime', + sections: [{ + title: 'DateTime', + source: [{ + type: GuideSectionTypes.JS, + code: dateTimeSource, + }, { + type: GuideSectionTypes.HTML, + code: dateTimeHtml, + }], + text: ( +

+ Description needed: how to use the EuiDateTime component. +

+ ), + demo: , + }], +}; diff --git a/src/components/date_time/_date_time.scss b/src/components/date_time/_date_time.scss new file mode 100644 index 00000000000..c1d899866d1 --- /dev/null +++ b/src/components/date_time/_date_time.scss @@ -0,0 +1,3 @@ +.euiDateTime { + +} diff --git a/src/components/date_time/_index.scss b/src/components/date_time/_index.scss new file mode 100644 index 00000000000..71fc5e78c42 --- /dev/null +++ b/src/components/date_time/_index.scss @@ -0,0 +1 @@ +@import 'date_time'; diff --git a/src/components/date_time/date_time.js b/src/components/date_time/date_time.js new file mode 100644 index 00000000000..b0dd953ea63 --- /dev/null +++ b/src/components/date_time/date_time.js @@ -0,0 +1,38 @@ +import React, { + Component, +} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export class EuiDateTime extends Component { + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + } + + constructor(props) { + super(props); + } + + render() { + const { + children, + className, + ...rest, + } = this.props; + + const classes = classNames( + 'euiDateTime', + className + ); + + return ( +
+ {children} +
+ ); + } +} diff --git a/src/components/date_time/date_time.test.js b/src/components/date_time/date_time.test.js new file mode 100644 index 00000000000..82f59229bd8 --- /dev/null +++ b/src/components/date_time/date_time.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiDateTime } from './date_time'; + +describe('EuiDateTime', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/date_time/index.js b/src/components/date_time/index.js new file mode 100644 index 00000000000..4330b56cd4d --- /dev/null +++ b/src/components/date_time/index.js @@ -0,0 +1,3 @@ +export { + EuiDateTime, +} from './date_time'; diff --git a/src/components/index.js b/src/components/index.js index a52fbf455ff..ffe1e1dfc9e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -49,6 +49,10 @@ export { EuiContextMenuItem, } from './context_menu'; +export { + EuiDateTime, +} from './date_time'; + export { EuiDescriptionList, EuiDescriptionListTitle, diff --git a/src/components/index.scss b/src/components/index.scss index 45a242e0f88..5a3ad46a15c 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -12,6 +12,7 @@ @import 'code_editor/index'; @import 'color_picker/index'; @import 'context_menu/index'; +@import 'date_time/index'; @import 'description_list/index'; @import 'error_boundary/index'; @import 'expression/index'; From cc2b4776fb0f7f67d58af1945011a169f502bf23 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 7 Dec 2017 10:46:31 -0800 Subject: [PATCH 02/12] cal components --- src-docs/src/views/date_time/date_time.js | 3 +- src/components/date_time/_calendar.scss | 3 ++ src/components/date_time/_calendar_box.scss | 3 ++ src/components/date_time/_index.scss | 2 + src/components/date_time/calendar.js | 43 +++++++++++++++++++ src/components/date_time/calendar.test.js | 16 +++++++ src/components/date_time/calendar_box.js | 25 +++++++++++ src/components/date_time/calendar_box.test.js | 16 +++++++ src/components/date_time/date_time.js | 2 +- src/components/date_time/index.js | 8 ++++ src/components/index.js | 2 + 11 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 src/components/date_time/_calendar.scss create mode 100644 src/components/date_time/_calendar_box.scss create mode 100644 src/components/date_time/calendar.js create mode 100644 src/components/date_time/calendar.test.js create mode 100644 src/components/date_time/calendar_box.js create mode 100644 src/components/date_time/calendar_box.test.js diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js index 023857d3d8d..8a97acd519f 100644 --- a/src-docs/src/views/date_time/date_time.js +++ b/src-docs/src/views/date_time/date_time.js @@ -2,10 +2,11 @@ import React from 'react'; import { EuiDateTime, + EuiCalendar, } from '../../../../src/components'; export default () => ( - + ); diff --git a/src/components/date_time/_calendar.scss b/src/components/date_time/_calendar.scss new file mode 100644 index 00000000000..5c76ce57bf8 --- /dev/null +++ b/src/components/date_time/_calendar.scss @@ -0,0 +1,3 @@ +.euiCalendar { + +} diff --git a/src/components/date_time/_calendar_box.scss b/src/components/date_time/_calendar_box.scss new file mode 100644 index 00000000000..1fa3db9a8be --- /dev/null +++ b/src/components/date_time/_calendar_box.scss @@ -0,0 +1,3 @@ +.euiCalendarBox { + +} diff --git a/src/components/date_time/_index.scss b/src/components/date_time/_index.scss index 71fc5e78c42..36c6eaad128 100644 --- a/src/components/date_time/_index.scss +++ b/src/components/date_time/_index.scss @@ -1 +1,3 @@ @import 'date_time'; +@import 'calendar'; +@import 'calendar_box'; diff --git a/src/components/date_time/calendar.js b/src/components/date_time/calendar.js new file mode 100644 index 00000000000..fa5cba96764 --- /dev/null +++ b/src/components/date_time/calendar.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiCalendarBox, +} from '..'; + +export const EuiCalendar = ({ + className, + ...rest +}) => { + const classes = classNames('euiCalendar', className); + + const numberedDays = [ + 26, 27, 28, 29, 30, 1, 2, + 3, 4, 5, 6, 7, 8, 9, + 10, 11, 12, 13, 14, 15, 16, + 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, + 31, 1, 2, 3, 4, 5, 6 + ]; + + const boxes = ( + numberedDays.map((number, index) => { + return {number}; + }) + ); + + return ( +
+ {boxes} +
+ ); +}; + +EuiCalendar.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/date_time/calendar.test.js b/src/components/date_time/calendar.test.js new file mode 100644 index 00000000000..bd6efea9d74 --- /dev/null +++ b/src/components/date_time/calendar.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCalendar } from './calendar'; + +describe('EuiCalendar', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/date_time/calendar_box.js b/src/components/date_time/calendar_box.js new file mode 100644 index 00000000000..c5a1874cafa --- /dev/null +++ b/src/components/date_time/calendar_box.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiCalendarBox = ({ + children, + className, + ...rest +}) => { + const classes = classNames('euiCalendarBox', className); + + return ( +
+ {children} +
+ ); +}; + +EuiCalendarBox.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/date_time/calendar_box.test.js b/src/components/date_time/calendar_box.test.js new file mode 100644 index 00000000000..468aef35859 --- /dev/null +++ b/src/components/date_time/calendar_box.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCalendarBox } from './calendar_box'; + +describe('EuiCalendarBox', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/date_time/date_time.js b/src/components/date_time/date_time.js index b0dd953ea63..29ed3d16d75 100644 --- a/src/components/date_time/date_time.js +++ b/src/components/date_time/date_time.js @@ -18,7 +18,7 @@ export class EuiDateTime extends Component { const { children, className, - ...rest, + ...rest } = this.props; const classes = classNames( diff --git a/src/components/date_time/index.js b/src/components/date_time/index.js index 4330b56cd4d..64edd796ed3 100644 --- a/src/components/date_time/index.js +++ b/src/components/date_time/index.js @@ -1,3 +1,11 @@ export { EuiDateTime, } from './date_time'; + +export { + EuiCalendar, +} from './calendar'; + +export { + EuiCalendarBox, +} from './calendar_box'; diff --git a/src/components/index.js b/src/components/index.js index ffe1e1dfc9e..71b98698851 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -50,6 +50,8 @@ export { } from './context_menu'; export { + EuiCalendar, + EuiCalendarBox, EuiDateTime, } from './date_time'; From e417a8f5a6ac86a4b316c27fb458ed257be389dd Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 7 Dec 2017 19:57:46 -0800 Subject: [PATCH 03/12] more cal work --- src/components/date_time/_calendar.scss | 3 - src/components/date_time/_calendar_box.scss | 3 - src/components/date_time/_index.scss | 3 +- src/components/date_time/calendar.js | 43 -------- .../date_time/calendar/_calendar.scss | 17 +++ .../date_time/calendar/_calendar_grid.scss | 6 ++ .../calendar/_calendar_grid_item.scss | 8 ++ src/components/date_time/calendar/calendar.js | 101 ++++++++++++++++++ .../date_time/{ => calendar}/calendar.test.js | 2 +- .../calendar_grid.js} | 8 +- .../date_time/calendar/calendar_grid.test.js | 16 +++ .../date_time/calendar/calendar_grid_item.js | 34 ++++++ .../calendar/calendar_grid_item.test.js | 16 +++ src/components/date_time/calendar/index.js | 11 ++ src/components/date_time/calendar/index.scss | 3 + src/components/date_time/calendar_box.test.js | 16 --- src/components/date_time/index.js | 6 +- src/components/index.js | 3 +- 18 files changed, 222 insertions(+), 77 deletions(-) delete mode 100644 src/components/date_time/_calendar.scss delete mode 100644 src/components/date_time/_calendar_box.scss delete mode 100644 src/components/date_time/calendar.js create mode 100644 src/components/date_time/calendar/_calendar.scss create mode 100644 src/components/date_time/calendar/_calendar_grid.scss create mode 100644 src/components/date_time/calendar/_calendar_grid_item.scss create mode 100644 src/components/date_time/calendar/calendar.js rename src/components/date_time/{ => calendar}/calendar.test.js (83%) rename src/components/date_time/{calendar_box.js => calendar/calendar_grid.js} (69%) create mode 100644 src/components/date_time/calendar/calendar_grid.test.js create mode 100644 src/components/date_time/calendar/calendar_grid_item.js create mode 100644 src/components/date_time/calendar/calendar_grid_item.test.js create mode 100644 src/components/date_time/calendar/index.js create mode 100644 src/components/date_time/calendar/index.scss delete mode 100644 src/components/date_time/calendar_box.test.js diff --git a/src/components/date_time/_calendar.scss b/src/components/date_time/_calendar.scss deleted file mode 100644 index 5c76ce57bf8..00000000000 --- a/src/components/date_time/_calendar.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiCalendar { - -} diff --git a/src/components/date_time/_calendar_box.scss b/src/components/date_time/_calendar_box.scss deleted file mode 100644 index 1fa3db9a8be..00000000000 --- a/src/components/date_time/_calendar_box.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiCalendarBox { - -} diff --git a/src/components/date_time/_index.scss b/src/components/date_time/_index.scss index 36c6eaad128..adc82450c1a 100644 --- a/src/components/date_time/_index.scss +++ b/src/components/date_time/_index.scss @@ -1,3 +1,2 @@ @import 'date_time'; -@import 'calendar'; -@import 'calendar_box'; +@import 'calendar/index'; diff --git a/src/components/date_time/calendar.js b/src/components/date_time/calendar.js deleted file mode 100644 index fa5cba96764..00000000000 --- a/src/components/date_time/calendar.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { - EuiCalendarBox, -} from '..'; - -export const EuiCalendar = ({ - className, - ...rest -}) => { - const classes = classNames('euiCalendar', className); - - const numberedDays = [ - 26, 27, 28, 29, 30, 1, 2, - 3, 4, 5, 6, 7, 8, 9, - 10, 11, 12, 13, 14, 15, 16, - 17, 18, 19, 20, 21, 22, 23, - 24, 25, 26, 27, 28, 29, 30, - 31, 1, 2, 3, 4, 5, 6 - ]; - - const boxes = ( - numberedDays.map((number, index) => { - return {number}; - }) - ); - - return ( -
- {boxes} -
- ); -}; - -EuiCalendar.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/date_time/calendar/_calendar.scss b/src/components/date_time/calendar/_calendar.scss new file mode 100644 index 00000000000..8df0b70a544 --- /dev/null +++ b/src/components/date_time/calendar/_calendar.scss @@ -0,0 +1,17 @@ +.euiCalendar { + width: ($euiSizeXL * 7) + ($euiSizeXS * 13); + + .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/date_time/calendar/_calendar_grid.scss b/src/components/date_time/calendar/_calendar_grid.scss new file mode 100644 index 00000000000..072f06533e3 --- /dev/null +++ b/src/components/date_time/calendar/_calendar_grid.scss @@ -0,0 +1,6 @@ +.euiCalendarGrid { + display: flex; + flex-wrap: wrap; + align-items: stretch; + margin: 0 (-$euiSizeXS); +} diff --git a/src/components/date_time/calendar/_calendar_grid_item.scss b/src/components/date_time/calendar/_calendar_grid_item.scss new file mode 100644 index 00000000000..a8d14c5272a --- /dev/null +++ b/src/components/date_time/calendar/_calendar_grid_item.scss @@ -0,0 +1,8 @@ +.euiCalendarGridItem { + flex-basis: $euiSizeXL; + height: $euiSizeXL; + text-align: center; + font-size: $euiSizeM; + line-height: $euiSizeXL; + margin: 0 $euiSizeXS; +} diff --git a/src/components/date_time/calendar/calendar.js b/src/components/date_time/calendar/calendar.js new file mode 100644 index 00000000000..dc84eadf5ed --- /dev/null +++ b/src/components/date_time/calendar/calendar.js @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiCalendarGrid, + EuiCalendarGridItem, + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, + EuiSpacer, +} from '../../../components'; + +export const EuiCalendar = ({ + className, + ...rest +}) => { + const classes = classNames('euiCalendar', className); + + const numberedDays = [ + 26, 27, 28, 29, 30, 1, 2, + 3, 4, 5, 6, 7, 8, 9, + 10, 11, 12, 13, 14, 15, 16, + 17, 18, 19, 20, 21, 22, 23, + 24, 25, 26, 27, 28, 29, 30, + 31, 1, 2, 3, 4, 5, 6 + ]; + + const daysOfWeek = [ + 'SUN', + 'MON', + 'TUE', + 'WED', + 'THU', + 'FRI', + 'SAT' + ]; + + const gridItemDaysOfWeek = ( + daysOfWeek.map((day, index) => { + return ( + + {day} + + ); + }) + ); + + const gridItemNumberedDays = ( + numberedDays.map((number, index) => { + return {number}; + }) + ); + + return ( +
+ + + + + +
+ December + 2017 +
+ + + + + + + + {gridItemDaysOfWeek} + + + {gridItemNumberedDays} + +
+ ); +}; + +EuiCalendar.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/date_time/calendar.test.js b/src/components/date_time/calendar/calendar.test.js similarity index 83% rename from src/components/date_time/calendar.test.js rename to src/components/date_time/calendar/calendar.test.js index bd6efea9d74..96795154993 100644 --- a/src/components/date_time/calendar.test.js +++ b/src/components/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/date_time/calendar_box.js b/src/components/date_time/calendar/calendar_grid.js similarity index 69% rename from src/components/date_time/calendar_box.js rename to src/components/date_time/calendar/calendar_grid.js index c5a1874cafa..c93e4f61655 100644 --- a/src/components/date_time/calendar_box.js +++ b/src/components/date_time/calendar/calendar_grid.js @@ -2,12 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiCalendarBox = ({ +export const EuiCalendarGrid = ({ children, className, - ...rest + ...rest, }) => { - const classes = classNames('euiCalendarBox', className); + const classes = classNames('euiCalendarGrid', className); return (
{ + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/date_time/calendar/calendar_grid_item.js b/src/components/date_time/calendar/calendar_grid_item.js new file mode 100644 index 00000000000..1c2b51f8a18 --- /dev/null +++ b/src/components/date_time/calendar/calendar_grid_item.js @@ -0,0 +1,34 @@ +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, + ...rest +}) => { + const classes = classNames('euiCalendarGridItem', className); + + return ( +
+ + {children} + +
+ ); +}; + +EuiCalendarGridItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + color: PropTypes.oneOf(COLORS), +}; diff --git a/src/components/date_time/calendar/calendar_grid_item.test.js b/src/components/date_time/calendar/calendar_grid_item.test.js new file mode 100644 index 00000000000..d8128855d9a --- /dev/null +++ b/src/components/date_time/calendar/calendar_grid_item.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test/required_props'; + +import { EuiCalendarGridItem } from './calendar_grid_item'; + +describe('EuiCalendarGridItem', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/date_time/calendar/index.js b/src/components/date_time/calendar/index.js new file mode 100644 index 00000000000..a75776b9013 --- /dev/null +++ b/src/components/date_time/calendar/index.js @@ -0,0 +1,11 @@ +export { + EuiCalendar, +} from './calendar'; + +export { + EuiCalendarGridItem, +} from './calendar_grid_item'; + +export { + EuiCalendarGrid, +} from './calendar_grid'; diff --git a/src/components/date_time/calendar/index.scss b/src/components/date_time/calendar/index.scss new file mode 100644 index 00000000000..21fd98d81ac --- /dev/null +++ b/src/components/date_time/calendar/index.scss @@ -0,0 +1,3 @@ +@import 'calendar'; +@import 'calendar_grid'; +@import 'calendar_grid_item'; diff --git a/src/components/date_time/calendar_box.test.js b/src/components/date_time/calendar_box.test.js deleted file mode 100644 index 468aef35859..00000000000 --- a/src/components/date_time/calendar_box.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; - -import { EuiCalendarBox } from './calendar_box'; - -describe('EuiCalendarBox', () => { - test('is rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/date_time/index.js b/src/components/date_time/index.js index 64edd796ed3..483a1abc2ed 100644 --- a/src/components/date_time/index.js +++ b/src/components/date_time/index.js @@ -4,8 +4,6 @@ export { export { EuiCalendar, + EuiCalendarGrid, + EuiCalendarGridItem, } from './calendar'; - -export { - EuiCalendarBox, -} from './calendar_box'; diff --git a/src/components/index.js b/src/components/index.js index 71b98698851..907f83c3187 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -51,7 +51,8 @@ export { export { EuiCalendar, - EuiCalendarBox, + EuiCalendarGrid, + EuiCalendarGridItem, EuiDateTime, } from './date_time'; From 0648050307cd03bf2776e73136c069b8a02c4c5d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 12 Dec 2017 12:44:57 -0800 Subject: [PATCH 04/12] cal components --- .../calendar/_calendar_grid_item.scss | 56 +++++++++ .../_calendar_month_year_selector.scss | 3 + src/components/date_time/calendar/calendar.js | 106 +++++++++++------- .../date_time/calendar/calendar_grid_item.js | 33 +++++- .../calendar/calendar_month_year_selector.js | 54 +++++++++ .../calendar_month_year_selector.test.js | 16 +++ src/components/date_time/calendar/index.js | 4 + src/components/date_time/calendar/index.scss | 1 + src/components/date_time/index.js | 1 + src/components/index.js | 1 + 10 files changed, 230 insertions(+), 45 deletions(-) create mode 100644 src/components/date_time/calendar/_calendar_month_year_selector.scss create mode 100644 src/components/date_time/calendar/calendar_month_year_selector.js create mode 100644 src/components/date_time/calendar/calendar_month_year_selector.test.js diff --git a/src/components/date_time/calendar/_calendar_grid_item.scss b/src/components/date_time/calendar/_calendar_grid_item.scss index a8d14c5272a..4b96d0954de 100644 --- a/src/components/date_time/calendar/_calendar_grid_item.scss +++ b/src/components/date_time/calendar/_calendar_grid_item.scss @@ -5,4 +5,60 @@ font-size: $euiSizeM; line-height: $euiSizeXL; margin: 0 $euiSizeXS; + color: $euiColorDarkShade; + position: relative; + z-index: 1; + + &.euiCalendarGridItem-isInTheCurrentMonth { + color: $euiColorFullShade; + } + + &.euiCalendarGridItem-isToday { + color: $euiColorPrimary; + } + + &.euiCalendarGridItem-isSelected { + &:before { + content: ""; + position: absolute; + height: $euiSizeL; + top: $euiSizeXS; + left: -$euiSizeXS; + right: -$euiSizeXS; + bottom: $euiSizeXS; + background: $euiFocusBackgroundColor; + z-index: -1; + } + } + + &.euiCalendarGridItem-isEndDate:before, + &:nth-child(7n):before { + right: 0; + } + + &.euiCalendarGridItem-isStartDate:before, + &:nth-child(7n + 1):before { + left: 0; + } + + .euiCalendarGridItem__button { + width: 100%; + height: 100%; + border-radius: $euiBorderRadius; + + &:focus { + box-shadow: 0 0 0 2px $euiColorPrimary; + } + } + + &.euiCalendarGridItem-isStartDate, + &.euiCalendarGridItem-isEndDate { + .euiCalendarGridItem__button { + background: $euiColorPrimary; + color: $euiColorEmptyShade; + &:focus { + box-shadow: 0 0 0 2px darken($euiColorPrimary, 10%); + } + } + } } diff --git a/src/components/date_time/calendar/_calendar_month_year_selector.scss b/src/components/date_time/calendar/_calendar_month_year_selector.scss new file mode 100644 index 00000000000..fe42c0f464a --- /dev/null +++ b/src/components/date_time/calendar/_calendar_month_year_selector.scss @@ -0,0 +1,3 @@ +.euiCalendarMonthYearSelector { + +} diff --git a/src/components/date_time/calendar/calendar.js b/src/components/date_time/calendar/calendar.js index dc84eadf5ed..4f68de96777 100644 --- a/src/components/date_time/calendar/calendar.js +++ b/src/components/date_time/calendar/calendar.js @@ -5,9 +5,7 @@ import classNames from 'classnames'; import { EuiCalendarGrid, EuiCalendarGridItem, - EuiFlexGroup, - EuiFlexItem, - EuiButtonIcon, + EuiCalendarMonthYearSelector, EuiSpacer, } from '../../../components'; @@ -18,14 +16,67 @@ export const EuiCalendar = ({ const classes = classNames('euiCalendar', className); const numberedDays = [ - 26, 27, 28, 29, 30, 1, 2, - 3, 4, 5, 6, 7, 8, 9, - 10, 11, 12, 13, 14, 15, 16, - 17, 18, 19, 20, 21, 22, 23, - 24, 25, 26, 27, 28, 29, 30, - 31, 1, 2, 3, 4, 5, 6 + {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 ( + + {item.numberedDay} + + ); + }) + ); + const daysOfWeek = [ 'SUN', 'MON', @@ -37,53 +88,24 @@ export const EuiCalendar = ({ ]; const gridItemDaysOfWeek = ( - daysOfWeek.map((day, index) => { + daysOfWeek.map((item, index) => { return ( - {day} + {item} ); }) ); - const gridItemNumberedDays = ( - numberedDays.map((number, index) => { - return {number}; - }) - ); - return (
- - - - - -
- December - 2017 -
- - - - - + {gridItemDaysOfWeek} diff --git a/src/components/date_time/calendar/calendar_grid_item.js b/src/components/date_time/calendar/calendar_grid_item.js index 1c2b51f8a18..e7cd44704a5 100644 --- a/src/components/date_time/calendar/calendar_grid_item.js +++ b/src/components/date_time/calendar/calendar_grid_item.js @@ -11,18 +11,34 @@ export const EuiCalendarGridItem = ({ children, className, color, + isInTheCurrentMonth, + isSelected, + isStartDate, + isEndDate, + isToday, + disabled, ...rest }) => { - const classes = classNames('euiCalendarGridItem', className); + const classes = classNames( + 'euiCalendarGridItem', + { + 'euiCalendarGridItem-isInTheCurrentMonth': isInTheCurrentMonth, + 'euiCalendarGridItem-isToday': isToday, + 'euiCalendarGridItem-isSelected': isSelected, + 'euiCalendarGridItem-isStartDate': isStartDate, + 'euiCalendarGridItem-isEndDate': isEndDate, + }, + className + ); return (
- +
); }; @@ -31,4 +47,15 @@ EuiCalendarGridItem.propTypes = { children: PropTypes.node, className: PropTypes.string, color: PropTypes.oneOf(COLORS), + isInTheCurrentMonth: PropTypes.bool, + isSelected: PropTypes.bool, + isToday: PropTypes.bool, +}; + +EuiCalendarGridItem.defaultProps = { + isInTheCurrentMonth: false, + isSelected: false, + isToday: false, + isStartDate: false, + isEndDate: false, }; diff --git a/src/components/date_time/calendar/calendar_month_year_selector.js b/src/components/date_time/calendar/calendar_month_year_selector.js new file mode 100644 index 00000000000..7226661496f --- /dev/null +++ b/src/components/date_time/calendar/calendar_month_year_selector.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, +} from '../../../components'; + +export const EuiCalendarMonthYearSelector = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiCalendarMonthYearSelector', className); + + return ( + + + + + +
+ December + 2017 +
+ + + + + + ); +}; + +EuiCalendarMonthYearSelector.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/date_time/calendar/calendar_month_year_selector.test.js b/src/components/date_time/calendar/calendar_month_year_selector.test.js new file mode 100644 index 00000000000..16a5d66d67e --- /dev/null +++ b/src/components/date_time/calendar/calendar_month_year_selector.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCalendarMonthYearSelector } from './calendar_month_year_selector'; + +describe('EuiCalendarMonthYearSelector', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/date_time/calendar/index.js b/src/components/date_time/calendar/index.js index a75776b9013..1df0c34e3ce 100644 --- a/src/components/date_time/calendar/index.js +++ b/src/components/date_time/calendar/index.js @@ -9,3 +9,7 @@ export { export { EuiCalendarGrid, } from './calendar_grid'; + +export { + EuiCalendarMonthYearSelector, +} from './calendar_month_year_selector'; diff --git a/src/components/date_time/calendar/index.scss b/src/components/date_time/calendar/index.scss index 21fd98d81ac..8fc16abdd0b 100644 --- a/src/components/date_time/calendar/index.scss +++ b/src/components/date_time/calendar/index.scss @@ -1,3 +1,4 @@ @import 'calendar'; @import 'calendar_grid'; @import 'calendar_grid_item'; +@import 'calendar_month_year_selector'; diff --git a/src/components/date_time/index.js b/src/components/date_time/index.js index 483a1abc2ed..17a002d2945 100644 --- a/src/components/date_time/index.js +++ b/src/components/date_time/index.js @@ -4,6 +4,7 @@ export { export { EuiCalendar, + EuiCalendarMonthYearSelector, EuiCalendarGrid, EuiCalendarGridItem, } from './calendar'; diff --git a/src/components/index.js b/src/components/index.js index 907f83c3187..83ab7ee6d7a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -54,6 +54,7 @@ export { EuiCalendarGrid, EuiCalendarGridItem, EuiDateTime, + EuiCalendarMonthYearSelector, } from './date_time'; export { From b365d98a2f51a1b3d1f12ad9fec8c610e90966d3 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 14 Dec 2017 12:49:10 -0800 Subject: [PATCH 05/12] datetime --- src-docs/src/views/date_time/date_time.js | 2 + src/components/date_time/_date_time.scss | 3 - src/components/date_time/_index.scss | 2 - .../date_time/calendar/_calendar.scss | 17 --- .../date_time/calendar/_calendar_grid.scss | 6 - .../calendar/_calendar_grid_item.scss | 64 --------- .../_calendar_month_year_selector.scss | 3 - src/components/date_time/calendar/calendar.js | 123 ------------------ .../date_time/calendar/calendar.test.js | 16 --- .../date_time/calendar/calendar_grid.js | 25 ---- .../date_time/calendar/calendar_grid.test.js | 16 --- .../date_time/calendar/calendar_grid_item.js | 61 --------- .../calendar/calendar_grid_item.test.js | 16 --- .../calendar/calendar_month_year_selector.js | 54 -------- .../calendar_month_year_selector.test.js | 16 --- src/components/date_time/calendar/index.js | 15 --- src/components/date_time/calendar/index.scss | 4 - src/components/date_time/date_time.js | 38 ------ src/components/date_time/date_time.test.js | 16 --- src/components/date_time/index.js | 10 -- src/components/form/_index.scss | 1 + src/components/form/index.js | 8 ++ src/components/index.js | 14 +- src/components/index.scss | 1 - 24 files changed, 17 insertions(+), 514 deletions(-) delete mode 100644 src/components/date_time/_date_time.scss delete mode 100644 src/components/date_time/_index.scss delete mode 100644 src/components/date_time/calendar/_calendar.scss delete mode 100644 src/components/date_time/calendar/_calendar_grid.scss delete mode 100644 src/components/date_time/calendar/_calendar_grid_item.scss delete mode 100644 src/components/date_time/calendar/_calendar_month_year_selector.scss delete mode 100644 src/components/date_time/calendar/calendar.js delete mode 100644 src/components/date_time/calendar/calendar.test.js delete mode 100644 src/components/date_time/calendar/calendar_grid.js delete mode 100644 src/components/date_time/calendar/calendar_grid.test.js delete mode 100644 src/components/date_time/calendar/calendar_grid_item.js delete mode 100644 src/components/date_time/calendar/calendar_grid_item.test.js delete mode 100644 src/components/date_time/calendar/calendar_month_year_selector.js delete mode 100644 src/components/date_time/calendar/calendar_month_year_selector.test.js delete mode 100644 src/components/date_time/calendar/index.js delete mode 100644 src/components/date_time/calendar/index.scss delete mode 100644 src/components/date_time/date_time.js delete mode 100644 src/components/date_time/date_time.test.js delete mode 100644 src/components/date_time/index.js diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js index 8a97acd519f..8fd6ee4c936 100644 --- a/src-docs/src/views/date_time/date_time.js +++ b/src-docs/src/views/date_time/date_time.js @@ -2,11 +2,13 @@ import React from 'react'; import { EuiDateTime, + EuiDateTimeInput, EuiCalendar, } from '../../../../src/components'; export default () => ( + ); diff --git a/src/components/date_time/_date_time.scss b/src/components/date_time/_date_time.scss deleted file mode 100644 index c1d899866d1..00000000000 --- a/src/components/date_time/_date_time.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiDateTime { - -} diff --git a/src/components/date_time/_index.scss b/src/components/date_time/_index.scss deleted file mode 100644 index adc82450c1a..00000000000 --- a/src/components/date_time/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'date_time'; -@import 'calendar/index'; diff --git a/src/components/date_time/calendar/_calendar.scss b/src/components/date_time/calendar/_calendar.scss deleted file mode 100644 index 8df0b70a544..00000000000 --- a/src/components/date_time/calendar/_calendar.scss +++ /dev/null @@ -1,17 +0,0 @@ -.euiCalendar { - width: ($euiSizeXL * 7) + ($euiSizeXS * 13); - - .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/date_time/calendar/_calendar_grid.scss b/src/components/date_time/calendar/_calendar_grid.scss deleted file mode 100644 index 072f06533e3..00000000000 --- a/src/components/date_time/calendar/_calendar_grid.scss +++ /dev/null @@ -1,6 +0,0 @@ -.euiCalendarGrid { - display: flex; - flex-wrap: wrap; - align-items: stretch; - margin: 0 (-$euiSizeXS); -} diff --git a/src/components/date_time/calendar/_calendar_grid_item.scss b/src/components/date_time/calendar/_calendar_grid_item.scss deleted file mode 100644 index 4b96d0954de..00000000000 --- a/src/components/date_time/calendar/_calendar_grid_item.scss +++ /dev/null @@ -1,64 +0,0 @@ -.euiCalendarGridItem { - flex-basis: $euiSizeXL; - height: $euiSizeXL; - text-align: center; - font-size: $euiSizeM; - line-height: $euiSizeXL; - margin: 0 $euiSizeXS; - color: $euiColorDarkShade; - position: relative; - z-index: 1; - - &.euiCalendarGridItem-isInTheCurrentMonth { - color: $euiColorFullShade; - } - - &.euiCalendarGridItem-isToday { - color: $euiColorPrimary; - } - - &.euiCalendarGridItem-isSelected { - &:before { - content: ""; - position: absolute; - height: $euiSizeL; - top: $euiSizeXS; - left: -$euiSizeXS; - right: -$euiSizeXS; - bottom: $euiSizeXS; - background: $euiFocusBackgroundColor; - z-index: -1; - } - } - - &.euiCalendarGridItem-isEndDate:before, - &:nth-child(7n):before { - right: 0; - } - - &.euiCalendarGridItem-isStartDate:before, - &:nth-child(7n + 1):before { - left: 0; - } - - .euiCalendarGridItem__button { - width: 100%; - height: 100%; - border-radius: $euiBorderRadius; - - &:focus { - box-shadow: 0 0 0 2px $euiColorPrimary; - } - } - - &.euiCalendarGridItem-isStartDate, - &.euiCalendarGridItem-isEndDate { - .euiCalendarGridItem__button { - background: $euiColorPrimary; - color: $euiColorEmptyShade; - &:focus { - box-shadow: 0 0 0 2px darken($euiColorPrimary, 10%); - } - } - } -} diff --git a/src/components/date_time/calendar/_calendar_month_year_selector.scss b/src/components/date_time/calendar/_calendar_month_year_selector.scss deleted file mode 100644 index fe42c0f464a..00000000000 --- a/src/components/date_time/calendar/_calendar_month_year_selector.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiCalendarMonthYearSelector { - -} diff --git a/src/components/date_time/calendar/calendar.js b/src/components/date_time/calendar/calendar.js deleted file mode 100644 index 4f68de96777..00000000000 --- a/src/components/date_time/calendar/calendar.js +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { - EuiCalendarGrid, - EuiCalendarGridItem, - EuiCalendarMonthYearSelector, - EuiSpacer, -} from '../../../components'; - -export const EuiCalendar = ({ - className, - ...rest -}) => { - 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 ( - - {item.numberedDay} - - ); - }) - ); - - const daysOfWeek = [ - 'SUN', - 'MON', - 'TUE', - 'WED', - 'THU', - 'FRI', - 'SAT' - ]; - - const gridItemDaysOfWeek = ( - daysOfWeek.map((item, index) => { - return ( - - {item} - - ); - }) - ); - - return ( -
- - - - {gridItemDaysOfWeek} - - - {gridItemNumberedDays} - -
- ); -}; - -EuiCalendar.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/date_time/calendar/calendar.test.js b/src/components/date_time/calendar/calendar.test.js deleted file mode 100644 index 96795154993..00000000000 --- a/src/components/date_time/calendar/calendar.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiCalendar } from './calendar'; - -describe('EuiCalendar', () => { - test('is rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/date_time/calendar/calendar_grid.js b/src/components/date_time/calendar/calendar_grid.js deleted file mode 100644 index c93e4f61655..00000000000 --- a/src/components/date_time/calendar/calendar_grid.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -export const EuiCalendarGrid = ({ - children, - className, - ...rest, -}) => { - const classes = classNames('euiCalendarGrid', className); - - return ( -
- {children} -
- ); -}; - -EuiCalendarGrid.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/date_time/calendar/calendar_grid.test.js b/src/components/date_time/calendar/calendar_grid.test.js deleted file mode 100644 index 7d29aa0cd6e..00000000000 --- a/src/components/date_time/calendar/calendar_grid.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiCalendarGrid } from './calendar_grid'; - -describe('EuiCalendarGrid', () => { - test('is rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/date_time/calendar/calendar_grid_item.js b/src/components/date_time/calendar/calendar_grid_item.js deleted file mode 100644 index e7cd44704a5..00000000000 --- a/src/components/date_time/calendar/calendar_grid_item.js +++ /dev/null @@ -1,61 +0,0 @@ -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, - isEndDate, - isToday, - disabled, - ...rest -}) => { - const classes = classNames( - 'euiCalendarGridItem', - { - 'euiCalendarGridItem-isInTheCurrentMonth': isInTheCurrentMonth, - 'euiCalendarGridItem-isToday': isToday, - 'euiCalendarGridItem-isSelected': isSelected, - 'euiCalendarGridItem-isStartDate': isStartDate, - 'euiCalendarGridItem-isEndDate': isEndDate, - }, - className - ); - - return ( -
- -
- ); -}; - -EuiCalendarGridItem.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - color: PropTypes.oneOf(COLORS), - isInTheCurrentMonth: PropTypes.bool, - isSelected: PropTypes.bool, - isToday: PropTypes.bool, -}; - -EuiCalendarGridItem.defaultProps = { - isInTheCurrentMonth: false, - isSelected: false, - isToday: false, - isStartDate: false, - isEndDate: false, -}; diff --git a/src/components/date_time/calendar/calendar_grid_item.test.js b/src/components/date_time/calendar/calendar_grid_item.test.js deleted file mode 100644 index d8128855d9a..00000000000 --- a/src/components/date_time/calendar/calendar_grid_item.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiCalendarGridItem } from './calendar_grid_item'; - -describe('EuiCalendarGridItem', () => { - test('is rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/date_time/calendar/calendar_month_year_selector.js b/src/components/date_time/calendar/calendar_month_year_selector.js deleted file mode 100644 index 7226661496f..00000000000 --- a/src/components/date_time/calendar/calendar_month_year_selector.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { - EuiFlexGroup, - EuiFlexItem, - EuiButtonIcon, -} from '../../../components'; - -export const EuiCalendarMonthYearSelector = ({ - children, - className, - ...rest, -}) => { - const classes = classNames('euiCalendarMonthYearSelector', className); - - return ( - - - - - -
- December - 2017 -
- - - - - - ); -}; - -EuiCalendarMonthYearSelector.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/date_time/calendar/calendar_month_year_selector.test.js b/src/components/date_time/calendar/calendar_month_year_selector.test.js deleted file mode 100644 index 16a5d66d67e..00000000000 --- a/src/components/date_time/calendar/calendar_month_year_selector.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; - -import { EuiCalendarMonthYearSelector } from './calendar_month_year_selector'; - -describe('EuiCalendarMonthYearSelector', () => { - test('is rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/date_time/calendar/index.js b/src/components/date_time/calendar/index.js deleted file mode 100644 index 1df0c34e3ce..00000000000 --- a/src/components/date_time/calendar/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export { - EuiCalendar, -} from './calendar'; - -export { - EuiCalendarGridItem, -} from './calendar_grid_item'; - -export { - EuiCalendarGrid, -} from './calendar_grid'; - -export { - EuiCalendarMonthYearSelector, -} from './calendar_month_year_selector'; diff --git a/src/components/date_time/calendar/index.scss b/src/components/date_time/calendar/index.scss deleted file mode 100644 index 8fc16abdd0b..00000000000 --- a/src/components/date_time/calendar/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'calendar'; -@import 'calendar_grid'; -@import 'calendar_grid_item'; -@import 'calendar_month_year_selector'; diff --git a/src/components/date_time/date_time.js b/src/components/date_time/date_time.js deleted file mode 100644 index 29ed3d16d75..00000000000 --- a/src/components/date_time/date_time.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { - Component, -} from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -export class EuiDateTime extends Component { - static propTypes = { - children: PropTypes.node, - className: PropTypes.string, - } - - constructor(props) { - super(props); - } - - render() { - const { - children, - className, - ...rest - } = this.props; - - const classes = classNames( - 'euiDateTime', - className - ); - - return ( -
- {children} -
- ); - } -} diff --git a/src/components/date_time/date_time.test.js b/src/components/date_time/date_time.test.js deleted file mode 100644 index 82f59229bd8..00000000000 --- a/src/components/date_time/date_time.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; - -import { EuiDateTime } from './date_time'; - -describe('EuiDateTime', () => { - test('is rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/date_time/index.js b/src/components/date_time/index.js deleted file mode 100644 index 17a002d2945..00000000000 --- a/src/components/date_time/index.js +++ /dev/null @@ -1,10 +0,0 @@ -export { - EuiDateTime, -} from './date_time'; - -export { - EuiCalendar, - EuiCalendarMonthYearSelector, - EuiCalendarGrid, - EuiCalendarGridItem, -} from './calendar'; diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index 224d29b7043..85ff6dbb605 100644 --- a/src/components/form/_index.scss +++ b/src/components/form/_index.scss @@ -81,6 +81,7 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); } @import 'checkbox/index'; +@import 'date_time/index'; @import 'field_number/index'; @import 'field_password/index'; @import 'field_search/index'; diff --git a/src/components/form/index.js b/src/components/form/index.js index 9b723975f24..8173d5b8925 100644 --- a/src/components/form/index.js +++ b/src/components/form/index.js @@ -2,6 +2,14 @@ export { EuiCheckbox, EuiCheckboxGroup, } from './checkbox'; +export { + EuiDateTime, + EuiDateTimeInput, + EuiCalendar, + EuiCalendarGrid, + EuiCalendarGridItem, + EuiCalendarMonthYearSelector, +} from './date_time'; export { EuiFieldNumber } from './field_number'; export { EuiFieldPassword } from './field_password'; export { EuiFieldSearch } from './field_search'; diff --git a/src/components/index.js b/src/components/index.js index 83ab7ee6d7a..c6d1665b696 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -49,14 +49,6 @@ export { EuiContextMenuItem, } from './context_menu'; -export { - EuiCalendar, - EuiCalendarGrid, - EuiCalendarGridItem, - EuiDateTime, - EuiCalendarMonthYearSelector, -} from './date_time'; - export { EuiDescriptionList, EuiDescriptionListTitle, @@ -86,8 +78,14 @@ export { } from './flyout'; export { + EuiCalendar, + EuiCalendarGrid, + EuiCalendarGridItem, + EuiCalendarMonthYearSelector, EuiCheckbox, EuiCheckboxGroup, + EuiDateTime, + EuiDateTimeInput, EuiFieldNumber, EuiFieldPassword, EuiFieldSearch, diff --git a/src/components/index.scss b/src/components/index.scss index 5a3ad46a15c..45a242e0f88 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -12,7 +12,6 @@ @import 'code_editor/index'; @import 'color_picker/index'; @import 'context_menu/index'; -@import 'date_time/index'; @import 'description_list/index'; @import 'error_boundary/index'; @import 'expression/index'; From fb23d3f625a0a276076a190bc4a868d3f92251bc Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 14 Dec 2017 12:49:26 -0800 Subject: [PATCH 06/12] datetime --- src/components/form/date_time/_date_time.scss | 3 + .../form/date_time/_date_time_input.scss | 3 + src/components/form/date_time/_index.scss | 3 + .../form/date_time/calendar/_calendar.scss | 17 +++ .../date_time/calendar/_calendar_grid.scss | 6 + .../calendar/_calendar_grid_item.scss | 64 +++++++++ .../_calendar_month_year_selector.scss | 3 + .../form/date_time/calendar/calendar.js | 123 ++++++++++++++++++ .../form/date_time/calendar/calendar.test.js | 16 +++ .../form/date_time/calendar/calendar_grid.js | 25 ++++ .../date_time/calendar/calendar_grid.test.js | 16 +++ .../date_time/calendar/calendar_grid_item.js | 61 +++++++++ .../calendar/calendar_grid_item.test.js | 16 +++ .../calendar/calendar_month_year_selector.js | 54 ++++++++ .../calendar_month_year_selector.test.js | 16 +++ .../form/date_time/calendar/index.js | 15 +++ .../form/date_time/calendar/index.scss | 4 + src/components/form/date_time/date_time.js | 38 ++++++ .../form/date_time/date_time.test.js | 16 +++ .../form/date_time/date_time_input.js | 44 +++++++ .../form/date_time/date_time_input.test.js | 16 +++ src/components/form/date_time/index.js | 14 ++ 22 files changed, 573 insertions(+) create mode 100644 src/components/form/date_time/_date_time.scss create mode 100644 src/components/form/date_time/_date_time_input.scss create mode 100644 src/components/form/date_time/_index.scss create mode 100644 src/components/form/date_time/calendar/_calendar.scss create mode 100644 src/components/form/date_time/calendar/_calendar_grid.scss create mode 100644 src/components/form/date_time/calendar/_calendar_grid_item.scss create mode 100644 src/components/form/date_time/calendar/_calendar_month_year_selector.scss create mode 100644 src/components/form/date_time/calendar/calendar.js create mode 100644 src/components/form/date_time/calendar/calendar.test.js create mode 100644 src/components/form/date_time/calendar/calendar_grid.js create mode 100644 src/components/form/date_time/calendar/calendar_grid.test.js create mode 100644 src/components/form/date_time/calendar/calendar_grid_item.js create mode 100644 src/components/form/date_time/calendar/calendar_grid_item.test.js create mode 100644 src/components/form/date_time/calendar/calendar_month_year_selector.js create mode 100644 src/components/form/date_time/calendar/calendar_month_year_selector.test.js create mode 100644 src/components/form/date_time/calendar/index.js create mode 100644 src/components/form/date_time/calendar/index.scss create mode 100644 src/components/form/date_time/date_time.js create mode 100644 src/components/form/date_time/date_time.test.js create mode 100644 src/components/form/date_time/date_time_input.js create mode 100644 src/components/form/date_time/date_time_input.test.js create mode 100644 src/components/form/date_time/index.js diff --git a/src/components/form/date_time/_date_time.scss b/src/components/form/date_time/_date_time.scss new file mode 100644 index 00000000000..c1d899866d1 --- /dev/null +++ b/src/components/form/date_time/_date_time.scss @@ -0,0 +1,3 @@ +.euiDateTime { + +} diff --git a/src/components/form/date_time/_date_time_input.scss b/src/components/form/date_time/_date_time_input.scss new file mode 100644 index 00000000000..d3ed9d2b82b --- /dev/null +++ b/src/components/form/date_time/_date_time_input.scss @@ -0,0 +1,3 @@ +.euiDateTimeInput { + @include euiFormControlStyle; +} diff --git a/src/components/form/date_time/_index.scss b/src/components/form/date_time/_index.scss new file mode 100644 index 00000000000..4c9f1cc6782 --- /dev/null +++ b/src/components/form/date_time/_index.scss @@ -0,0 +1,3 @@ +@import 'date_time'; +@import 'date_time_input'; +@import 'calendar/index'; diff --git a/src/components/form/date_time/calendar/_calendar.scss b/src/components/form/date_time/calendar/_calendar.scss new file mode 100644 index 00000000000..8df0b70a544 --- /dev/null +++ b/src/components/form/date_time/calendar/_calendar.scss @@ -0,0 +1,17 @@ +.euiCalendar { + width: ($euiSizeXL * 7) + ($euiSizeXS * 13); + + .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.scss b/src/components/form/date_time/calendar/_calendar_grid.scss new file mode 100644 index 00000000000..072f06533e3 --- /dev/null +++ b/src/components/form/date_time/calendar/_calendar_grid.scss @@ -0,0 +1,6 @@ +.euiCalendarGrid { + display: flex; + flex-wrap: wrap; + align-items: stretch; + margin: 0 (-$euiSizeXS); +} diff --git a/src/components/form/date_time/calendar/_calendar_grid_item.scss b/src/components/form/date_time/calendar/_calendar_grid_item.scss new file mode 100644 index 00000000000..4b96d0954de --- /dev/null +++ b/src/components/form/date_time/calendar/_calendar_grid_item.scss @@ -0,0 +1,64 @@ +.euiCalendarGridItem { + flex-basis: $euiSizeXL; + height: $euiSizeXL; + text-align: center; + font-size: $euiSizeM; + line-height: $euiSizeXL; + margin: 0 $euiSizeXS; + color: $euiColorDarkShade; + position: relative; + z-index: 1; + + &.euiCalendarGridItem-isInTheCurrentMonth { + color: $euiColorFullShade; + } + + &.euiCalendarGridItem-isToday { + color: $euiColorPrimary; + } + + &.euiCalendarGridItem-isSelected { + &:before { + content: ""; + position: absolute; + height: $euiSizeL; + top: $euiSizeXS; + left: -$euiSizeXS; + right: -$euiSizeXS; + bottom: $euiSizeXS; + background: $euiFocusBackgroundColor; + z-index: -1; + } + } + + &.euiCalendarGridItem-isEndDate:before, + &:nth-child(7n):before { + right: 0; + } + + &.euiCalendarGridItem-isStartDate:before, + &:nth-child(7n + 1):before { + left: 0; + } + + .euiCalendarGridItem__button { + width: 100%; + height: 100%; + border-radius: $euiBorderRadius; + + &:focus { + box-shadow: 0 0 0 2px $euiColorPrimary; + } + } + + &.euiCalendarGridItem-isStartDate, + &.euiCalendarGridItem-isEndDate { + .euiCalendarGridItem__button { + background: $euiColorPrimary; + color: $euiColorEmptyShade; + &:focus { + box-shadow: 0 0 0 2px darken($euiColorPrimary, 10%); + } + } + } +} 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 new file mode 100644 index 00000000000..fe42c0f464a --- /dev/null +++ b/src/components/form/date_time/calendar/_calendar_month_year_selector.scss @@ -0,0 +1,3 @@ +.euiCalendarMonthYearSelector { + +} diff --git a/src/components/form/date_time/calendar/calendar.js b/src/components/form/date_time/calendar/calendar.js new file mode 100644 index 00000000000..f801938c453 --- /dev/null +++ b/src/components/form/date_time/calendar/calendar.js @@ -0,0 +1,123 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiCalendarGrid, + EuiCalendarGridItem, + EuiCalendarMonthYearSelector, + EuiSpacer, +} from '../../../../components'; + +export const EuiCalendar = ({ + className, + ...rest +}) => { + 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 ( + + {item.numberedDay} + + ); + }) + ); + + const daysOfWeek = [ + 'SUN', + 'MON', + 'TUE', + 'WED', + 'THU', + 'FRI', + 'SAT' + ]; + + const gridItemDaysOfWeek = ( + daysOfWeek.map((item, index) => { + return ( + + {item} + + ); + }) + ); + + return ( +
+ + + + {gridItemDaysOfWeek} + + + {gridItemNumberedDays} + +
+ ); +}; + +EuiCalendar.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/form/date_time/calendar/calendar.test.js b/src/components/form/date_time/calendar/calendar.test.js new file mode 100644 index 00000000000..96795154993 --- /dev/null +++ b/src/components/form/date_time/calendar/calendar.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test/required_props'; + +import { EuiCalendar } from './calendar'; + +describe('EuiCalendar', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/form/date_time/calendar/calendar_grid.js b/src/components/form/date_time/calendar/calendar_grid.js new file mode 100644 index 00000000000..c93e4f61655 --- /dev/null +++ b/src/components/form/date_time/calendar/calendar_grid.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiCalendarGrid = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiCalendarGrid', className); + + return ( +
+ {children} +
+ ); +}; + +EuiCalendarGrid.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/form/date_time/calendar/calendar_grid.test.js b/src/components/form/date_time/calendar/calendar_grid.test.js new file mode 100644 index 00000000000..7d29aa0cd6e --- /dev/null +++ b/src/components/form/date_time/calendar/calendar_grid.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test/required_props'; + +import { EuiCalendarGrid } from './calendar_grid'; + +describe('EuiCalendarGrid', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/form/date_time/calendar/calendar_grid_item.js b/src/components/form/date_time/calendar/calendar_grid_item.js new file mode 100644 index 00000000000..ccd0815eeab --- /dev/null +++ b/src/components/form/date_time/calendar/calendar_grid_item.js @@ -0,0 +1,61 @@ +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, + isEndDate, + isToday, + disabled, + ...rest +}) => { + const classes = classNames( + 'euiCalendarGridItem', + { + 'euiCalendarGridItem-isInTheCurrentMonth': isInTheCurrentMonth, + 'euiCalendarGridItem-isToday': isToday, + 'euiCalendarGridItem-isSelected': isSelected, + 'euiCalendarGridItem-isStartDate': isStartDate, + 'euiCalendarGridItem-isEndDate': isEndDate, + }, + className + ); + + return ( +
+ +
+ ); +}; + +EuiCalendarGridItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + color: PropTypes.oneOf(COLORS), + isInTheCurrentMonth: PropTypes.bool, + isSelected: PropTypes.bool, + isToday: PropTypes.bool, +}; + +EuiCalendarGridItem.defaultProps = { + isInTheCurrentMonth: false, + isSelected: false, + isToday: false, + isStartDate: false, + isEndDate: false, +}; 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 new file mode 100644 index 00000000000..d8128855d9a --- /dev/null +++ b/src/components/form/date_time/calendar/calendar_grid_item.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test/required_props'; + +import { EuiCalendarGridItem } from './calendar_grid_item'; + +describe('EuiCalendarGridItem', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); 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 new file mode 100644 index 00000000000..9c4824c4621 --- /dev/null +++ b/src/components/form/date_time/calendar/calendar_month_year_selector.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, +} from '../../../../components'; + +export const EuiCalendarMonthYearSelector = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiCalendarMonthYearSelector', className); + + return ( + + + + + +
+ December + 2017 +
+ + + + + + ); +}; + +EuiCalendarMonthYearSelector.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; 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 new file mode 100644 index 00000000000..16a5d66d67e --- /dev/null +++ b/src/components/form/date_time/calendar/calendar_month_year_selector.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCalendarMonthYearSelector } from './calendar_month_year_selector'; + +describe('EuiCalendarMonthYearSelector', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/form/date_time/calendar/index.js b/src/components/form/date_time/calendar/index.js new file mode 100644 index 00000000000..1df0c34e3ce --- /dev/null +++ b/src/components/form/date_time/calendar/index.js @@ -0,0 +1,15 @@ +export { + EuiCalendar, +} from './calendar'; + +export { + EuiCalendarGridItem, +} from './calendar_grid_item'; + +export { + EuiCalendarGrid, +} from './calendar_grid'; + +export { + EuiCalendarMonthYearSelector, +} from './calendar_month_year_selector'; diff --git a/src/components/form/date_time/calendar/index.scss b/src/components/form/date_time/calendar/index.scss new file mode 100644 index 00000000000..8fc16abdd0b --- /dev/null +++ b/src/components/form/date_time/calendar/index.scss @@ -0,0 +1,4 @@ +@import 'calendar'; +@import 'calendar_grid'; +@import 'calendar_grid_item'; +@import 'calendar_month_year_selector'; diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js new file mode 100644 index 00000000000..29ed3d16d75 --- /dev/null +++ b/src/components/form/date_time/date_time.js @@ -0,0 +1,38 @@ +import React, { + Component, +} from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export class EuiDateTime extends Component { + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + } + + constructor(props) { + super(props); + } + + render() { + const { + children, + className, + ...rest + } = this.props; + + const classes = classNames( + 'euiDateTime', + className + ); + + return ( +
+ {children} +
+ ); + } +} diff --git a/src/components/form/date_time/date_time.test.js b/src/components/form/date_time/date_time.test.js new file mode 100644 index 00000000000..82f59229bd8 --- /dev/null +++ b/src/components/form/date_time/date_time.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiDateTime } from './date_time'; + +describe('EuiDateTime', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/form/date_time/date_time_input.js b/src/components/form/date_time/date_time_input.js new file mode 100644 index 00000000000..21e9231130d --- /dev/null +++ b/src/components/form/date_time/date_time_input.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, +} from '../../../components'; + +export const EuiDateTimeInput = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiDateTimeInput', className); + + return ( +
+ + + + + + + + + + + +
+ ); +}; + +EuiDateTimeInput.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/form/date_time/date_time_input.test.js b/src/components/form/date_time/date_time_input.test.js new file mode 100644 index 00000000000..95e93bcae48 --- /dev/null +++ b/src/components/form/date_time/date_time_input.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test'; + +import { EuiDateTimeInput } from './date_time_input'; + +describe('EuiDateTimeInput', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/form/date_time/index.js b/src/components/form/date_time/index.js new file mode 100644 index 00000000000..38c87d209ff --- /dev/null +++ b/src/components/form/date_time/index.js @@ -0,0 +1,14 @@ +export { + EuiDateTime, +} from './date_time'; + +export { + EuiDateTimeInput, +} from './date_time_input'; + +export { + EuiCalendar, + EuiCalendarMonthYearSelector, + EuiCalendarGrid, + EuiCalendarGridItem, +} from './calendar'; From ec2a6a657379fa72f6c334ace265cc25da8d3ec2 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 15 Dec 2017 10:36:42 -0800 Subject: [PATCH 07/12] cal progress --- src-docs/src/views/date_time/date_time.js | 1 - src/components/form/date_time/_date_time.scss | 16 +++++ .../form/date_time/_date_time_input.scss | 3 - src/components/form/date_time/_index.scss | 2 +- src/components/form/date_time/date_time.js | 32 +++++++++- .../form/date_time/date_time_input.js | 44 ------------- src/components/form/date_time/index.js | 8 +-- .../form/date_time/time_selector/_index.scss | 1 + .../time_selector/_time_selector.scss | 22 +++++++ .../form/date_time/time_selector/index.js | 3 + .../date_time/time_selector/time_selector.js | 61 +++++++++++++++++++ .../time_selector.test.js} | 6 +- src/components/form/field_text/field_text.js | 4 ++ src/components/form/index.js | 2 +- src/components/icon/assets/calendar.svg | 9 ++- src/components/index.js | 1 + 16 files changed, 155 insertions(+), 60 deletions(-) delete mode 100644 src/components/form/date_time/_date_time_input.scss delete mode 100644 src/components/form/date_time/date_time_input.js create mode 100644 src/components/form/date_time/time_selector/_index.scss create mode 100644 src/components/form/date_time/time_selector/_time_selector.scss create mode 100644 src/components/form/date_time/time_selector/index.js create mode 100644 src/components/form/date_time/time_selector/time_selector.js rename src/components/form/date_time/{date_time_input.test.js => time_selector/time_selector.test.js} (62%) diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js index 8fd6ee4c936..5ce8c6b2515 100644 --- a/src-docs/src/views/date_time/date_time.js +++ b/src-docs/src/views/date_time/date_time.js @@ -8,7 +8,6 @@ import { export default () => ( - ); diff --git a/src/components/form/date_time/_date_time.scss b/src/components/form/date_time/_date_time.scss index c1d899866d1..e58f5b7fdfb 100644 --- a/src/components/form/date_time/_date_time.scss +++ b/src/components/form/date_time/_date_time.scss @@ -1,3 +1,19 @@ .euiDateTime { + max-width: $euiFormMaxWidth; + .euiDateTime__input { + padding-right: $euiSizeXXL; + padding-left:$euiSizeM; + } + + .euiDateTime__dateColumn { + padding: $euiSize; + } + + .euiDateTime__timeColumn { + background: $euiColorLightestShade; + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + border-left: $euiBorderThin; + padding: $euiSize 0 $euiSize $euiSizeS; + } } diff --git a/src/components/form/date_time/_date_time_input.scss b/src/components/form/date_time/_date_time_input.scss deleted file mode 100644 index d3ed9d2b82b..00000000000 --- a/src/components/form/date_time/_date_time_input.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiDateTimeInput { - @include euiFormControlStyle; -} diff --git a/src/components/form/date_time/_index.scss b/src/components/form/date_time/_index.scss index 4c9f1cc6782..a24fd54eb6e 100644 --- a/src/components/form/date_time/_index.scss +++ b/src/components/form/date_time/_index.scss @@ -1,3 +1,3 @@ @import 'date_time'; -@import 'date_time_input'; @import 'calendar/index'; +@import 'time_selector/index'; diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js index 29ed3d16d75..9f1947704b7 100644 --- a/src/components/form/date_time/date_time.js +++ b/src/components/form/date_time/date_time.js @@ -4,6 +4,16 @@ import React, { import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { + EuiCalendar, + EuiFormRow, + EuiFieldText, + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiTimeSelector, +} from '../../../components'; + export class EuiDateTime extends Component { static propTypes = { children: PropTypes.node, @@ -31,7 +41,27 @@ export class EuiDateTime extends Component { className={classes} {...rest} > - {children} + + + + + + + + + + + + +
); } diff --git a/src/components/form/date_time/date_time_input.js b/src/components/form/date_time/date_time_input.js deleted file mode 100644 index 21e9231130d..00000000000 --- a/src/components/form/date_time/date_time_input.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import { - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, -} from '../../../components'; - -export const EuiDateTimeInput = ({ - children, - className, - ...rest, -}) => { - const classes = classNames('euiDateTimeInput', className); - - return ( -
- - - - - - - - - - - -
- ); -}; - -EuiDateTimeInput.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -}; diff --git a/src/components/form/date_time/index.js b/src/components/form/date_time/index.js index 38c87d209ff..19eabd94ece 100644 --- a/src/components/form/date_time/index.js +++ b/src/components/form/date_time/index.js @@ -2,13 +2,13 @@ export { EuiDateTime, } from './date_time'; -export { - EuiDateTimeInput, -} from './date_time_input'; - export { EuiCalendar, EuiCalendarMonthYearSelector, EuiCalendarGrid, EuiCalendarGridItem, } from './calendar'; + +export { + EuiTimeSelector, +} from './time_selector'; diff --git a/src/components/form/date_time/time_selector/_index.scss b/src/components/form/date_time/time_selector/_index.scss new file mode 100644 index 00000000000..129a8950807 --- /dev/null +++ b/src/components/form/date_time/time_selector/_index.scss @@ -0,0 +1 @@ +@import 'time_selector'; diff --git a/src/components/form/date_time/time_selector/_time_selector.scss b/src/components/form/date_time/time_selector/_time_selector.scss new file mode 100644 index 00000000000..bb41ae5bc78 --- /dev/null +++ b/src/components/form/date_time/time_selector/_time_selector.scss @@ -0,0 +1,22 @@ +.euiTimeSelector { + @include euiScrollBar; + max-height: 256px; + overflow-y: auto; + + .euiTimeSelector__button { + display: block; + font-size: $euiFontSizeXS; + color: $euiColorDarkShade; + padding: $euiSizeXS / 2 $euiSizeXS; + text-align: right; + width: 100%; + border: $euiBorderThin; + border-color: transparent; + + &:focus { + background: $euiColorEmptyShade; + border-color: $euiColorPrimary; + color: $euiColorPrimary; + } + } +} diff --git a/src/components/form/date_time/time_selector/index.js b/src/components/form/date_time/time_selector/index.js new file mode 100644 index 00000000000..4a6e4201bb2 --- /dev/null +++ b/src/components/form/date_time/time_selector/index.js @@ -0,0 +1,3 @@ +export { + EuiTimeSelector, +} from './time_selector'; diff --git a/src/components/form/date_time/time_selector/time_selector.js b/src/components/form/date_time/time_selector/time_selector.js new file mode 100644 index 00000000000..19bf718dd08 --- /dev/null +++ b/src/components/form/date_time/time_selector/time_selector.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiTimeSelector = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiTimeSelector', className); + + const times = [ + '12:00 AM', + '12:30 AM', + '1:00 AM', + '1:30 AM', + '2:00 AM', + '2:30 AM', + '3:00 AM', + '3:30 AM', + '4:00 AM', + '4:30 AM', + '5:00 AM', + '5:30 AM', + '6:00 AM', + '6:30 AM', + '7:00 AM', + '7:30 AM', + '8:00 AM', + '8:30 AM', + ] + + const timeListItems = ( + times.map((time, index) => { + return ( +
  • + +
    • + ); + }) + ); + + + return ( +
      + {timeListItems} +
    + ); +}; + +EuiTimeSelector.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/form/date_time/date_time_input.test.js b/src/components/form/date_time/time_selector/time_selector.test.js similarity index 62% rename from src/components/form/date_time/date_time_input.test.js rename to src/components/form/date_time/time_selector/time_selector.test.js index 95e93bcae48..1345c4cf98e 100644 --- a/src/components/form/date_time/date_time_input.test.js +++ b/src/components/form/date_time/time_selector/time_selector.test.js @@ -2,12 +2,12 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test'; -import { EuiDateTimeInput } from './date_time_input'; +import { EuiTimeSelector } from './time_selector'; -describe('EuiDateTimeInput', () => { +describe('EuiTimeSelector', () => { test('is rendered', () => { const component = render( - + ); expect(component) diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js index e4436716290..b648a14428f 100644 --- a/src/components/form/field_text/field_text.js +++ b/src/components/form/field_text/field_text.js @@ -17,6 +17,7 @@ export const EuiFieldText = ({ value, className, icon, + iconSide, isInvalid, inputRef, fullWidth, @@ -34,6 +35,7 @@ export const EuiFieldText = ({ icon={icon} fullWidth={fullWidth} isLoading={isLoading} + iconSide={iconSide} > - + + + + + + + diff --git a/src/components/index.js b/src/components/index.js index c6d1665b696..fe43fcafc4b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -102,6 +102,7 @@ export { EuiSelect, EuiSwitch, EuiTextArea, + EuiTimeSelector, EuiValidatableControl, } from './form'; From 4d07f2fe7a31876807a7c14c404a5f8701b2c5a0 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Mon, 18 Dec 2017 14:53:07 -0800 Subject: [PATCH 08/12] date time, with month selector --- src-docs/src/views/date_time/date_time.js | 35 ++++- src/components/flex/_flex_grid.scss | 3 +- src/components/flex/flex_grid.js | 3 +- src/components/form/date_time/_date_time.scss | 27 +++- .../form/date_time/calendar/_calendar.scss | 1 + .../_calendar_month_year_selector.scss | 20 +++ .../calendar/calendar_month_year_selector.js | 148 +++++++++++++++--- src/components/form/date_time/date_time.js | 73 ++++++--- 8 files changed, 247 insertions(+), 63 deletions(-) diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js index 5ce8c6b2515..85e6a1560cd 100644 --- 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 () => ( - - - -); +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isPopoverOpen: false, + }; + } + + closePopover() { + this.setState({ + isPopoverOpen: false, + }); + } + + render() { + return ( + + ); + } +} diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss index f4c6f36bba5..700698d6e91 100644 --- 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 index daaadd7ce0f..160f258ccd5 100644 --- 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 index e58f5b7fdfb..9656b2a5ae5 100644 --- 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 index 8df0b70a544..08a65f9ba43 100644 --- 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 index fe42c0f464a..9217d97e145 100644 --- 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 index 9c4824c4621..23a8a7145e7 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 @@ -6,6 +6,13 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, + EuiTitle, + EuiFlexGrid, + EuiHorizontalRule, + EuiButtonEmpty, + EuiSpacer, + EuiText, + EuiTextColor, } from '../../../../components'; export const EuiCalendarMonthYearSelector = ({ @@ -13,38 +20,127 @@ export const EuiCalendarMonthYearSelector = ({ className, ...rest, }) => { + + const months = [ + 'JAN', + 'FEB', + 'MAR', + 'APR', + 'MAY', + 'JUN', + 'JUL', + 'AUG', + 'SEP', + 'OCT', + 'NOV', + 'DEC', + ]; + + const gridItemMonths = ( + months.map((item, index) => { + return ( + + + {item} + + + ); + }) + ); + + const years = [ + 2006, + 2007, + 2008, + 2009, + 2010, + 2011, + 2012, + 2013, + 2014, + 2015, + 2016, + 2017, + ]; + + const gridItemYears = ( + years.map((item, index) => { + return ( + + + {item} + + + ); + }) + ); + const classes = classNames('euiCalendarMonthYearSelector', className); + const menuClasses = classNames( + 'euiCalendarMonthYearSelector__menu', + ); return ( - - - - - -
    - December - 2017 -
    -     - - - -     + + + + + +
    + December + 2017 +
    +     + + + +     +
    + + {gridItemMonths} + + + + {gridItemYears} + + + + + + +

    Select a month and year

    +     +     +     + + + Done + + +     +
    +
    ); }; diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js index 9f1947704b7..4d685cbf803 100644 --- a/src/components/form/date_time/date_time.js +++ b/src/components/form/date_time/date_time.js @@ -12,6 +12,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiTimeSelector, + EuiOutsideClickDetector, } from '../../../components'; export class EuiDateTime extends Component { @@ -22,47 +23,77 @@ export class EuiDateTime extends Component { constructor(props) { super(props); + + this.state = { + isPopoverOpen: this.props.isPopoverOpen, + value: '12/18/2017 01:02:03 PM', + }; + + this.handleShowPopover = this.handleShowPopover.bind(this); + this.handleChange = this.handleChange.bind(this); + } + + componentWillReceiveProps(nextProps) { + if (nextProps.isPopoverOpen !== this.state.isPopoverOpen) { + this.setState({ isPopoverOpen: nextProps.isPopoverOpen }); + } + } + + handleShowPopover() { + this.setState({ + isPopoverOpen: true, + }); + } + + handleChange(event) { + this.setState({ + value: event.target.value, + }); } render() { const { children, className, + closePopover, + isPopoverOpen, ...rest } = this.props; const classes = classNames( 'euiDateTime', + { + 'euiDateTime-isOpen': this.state.isPopoverOpen, + }, className ); return ( -
    - +
    - - - - - - - - - - - -
    + + + + + + + + + + + +
    + ); } } From ac1054d283be32564b39a357720cbf66a656c55d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 19 Dec 2017 11:01:23 -0800 Subject: [PATCH 09/12] datetime --- .../form/date_time/calendar/_calendar.scss | 13 - .../calendar/_calendar_grid_item.scss | 4 + .../_calendar_month_year_selector.scss | 34 ++- .../form/date_time/calendar/calendar.js | 240 ++++++++------- .../date_time/calendar/calendar_grid.test.js | 2 +- .../date_time/calendar/calendar_grid_item.js | 6 - .../calendar/calendar_grid_item.test.js | 2 +- .../calendar/calendar_month_year_selector.js | 275 ++++++++++-------- src/components/form/date_time/date_time.js | 3 - .../time_selector/_time_selector.scss | 12 + .../date_time/time_selector/time_selector.js | 83 ++++-- src/components/index.js | 1 - 12 files changed, 403 insertions(+), 272 deletions(-) diff --git a/src/components/form/date_time/calendar/_calendar.scss b/src/components/form/date_time/calendar/_calendar.scss index 08a65f9ba43..49eafca46e8 100644 --- 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 index 4b96d0954de..b4056141bb4 100644 --- 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 index 9217d97e145..555522fd53a 100644 --- 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 index f801938c453..96c09d61757 100644 --- 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 ( - - {item.numberedDay} - - ); - }) - ); + 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 ( - - {item} - - ); - }) - ); + closeMenu() { + this.setState({ + isMonthYearSelectorOpen: false, + }); + } - return ( -
    - - - - {gridItemDaysOfWeek} - - - {gridItemNumberedDays} - -
    - ); -}; + 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 ( + + {item.numberedDay} + + ); + }) + ); + + const daysOfWeek = [ + 'SUN', + 'MON', + 'TUE', + 'WED', + 'THU', + 'FRI', + 'SAT' + ]; + + const gridItemDaysOfWeek = ( + daysOfWeek.map((item, index) => { + return ( + + {item} + + ); + }) + ); + + return ( +
    + + + + + {gridItemDaysOfWeek} + + + {gridItemNumberedDays} + +
    + ); + } +} 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 index 7d29aa0cd6e..332bebf09c7 100644 --- 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 index ccd0815eeab..211c1599b3c 100644 --- 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 index d8128855d9a..53f0bcfacb8 100644 --- 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'; 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 23a8a7145e7..8304a1817a5 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 @@ -1,4 +1,6 @@ -import React from 'react'; +import React, { + Component, +} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -6,143 +8,178 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, - EuiTitle, EuiFlexGrid, EuiHorizontalRule, EuiButtonEmpty, - EuiSpacer, EuiText, EuiTextColor, } from '../../../../components'; -export const EuiCalendarMonthYearSelector = ({ - children, - className, - ...rest, -}) => { +export class EuiCalendarMonthYearSelector extends Component { + static propTypes = { + className: PropTypes.string, + isMonthYearSelectorOpen: PropTypes.bool, + } - const months = [ - 'JAN', - 'FEB', - 'MAR', - 'APR', - 'MAY', - 'JUN', - 'JUL', - 'AUG', - 'SEP', - 'OCT', - 'NOV', - 'DEC', - ]; + constructor(props) { + super(props); - const gridItemMonths = ( - months.map((item, index) => { - return ( - - - {item} - - - ); - }) - ); + this.state = { + isMonthYearSelectorOpen: false, + }; - const years = [ - 2006, - 2007, - 2008, - 2009, - 2010, - 2011, - 2012, - 2013, - 2014, - 2015, - 2016, - 2017, - ]; + this.handleShowMenu = this.handleShowMenu.bind(this); + } - const gridItemYears = ( - years.map((item, index) => { - return ( - - - {item} - - - ); - }) - ); + componentWillReceiveProps(nextProps) { + if (nextProps.isMonthYearSelectorOpen !== this.state.isMonthYearSelectorOpen) { + this.setState({ isMonthYearSelectorOpen: nextProps.isMonthYearSelectorOpen }); + } + } + + handleShowMenu() { + this.setState({ + isMonthYearSelectorOpen: true, + }); + } + + render() { + const { + className, + closeMenu, + isMonthYearSelectorOpen, + ...rest + } = this.props; + + const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ]; + + const gridItemMonths = ( + months.map((item, index) => { + return ( + + + {item} + + + ); + }) + ); + + const years = [ + 2006, + 2007, + 2008, + 2009, + 2010, + 2011, + 2012, + 2013, + 2014, + 2015, + 2016, + 2017, + ]; - const classes = classNames('euiCalendarMonthYearSelector', className); - const menuClasses = classNames( - 'euiCalendarMonthYearSelector__menu', - ); + const gridItemYears = ( + years.map((item, index) => { + return ( + + + {item} + + + ); + }) + ); + + const classes = classNames( + 'euiCalendarMonthYearSelector', + { + 'euiCalendarMonthYearSelector-isOpen': this.state.isMonthYearSelectorOpen, + }, + className + ); - return ( -
    - - - - - -
    - December - 2017 -
    -     - - - -     -
    - - {gridItemMonths} - - - - {gridItemYears} - - - - - - -

    Select a month and year

    -     -     + + + - - Done - + + + + +
    + + + + +

    Select a month and year

    +     +     +     + + + +     + + + {gridItemMonths} + + + + {gridItemYears} + +
    -
    - ); -}; + ); + } +} EuiCalendarMonthYearSelector.propTypes = { children: PropTypes.node, diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js index 4d685cbf803..6e86f13fdda 100644 --- a/src/components/form/date_time/date_time.js +++ b/src/components/form/date_time/date_time.js @@ -6,7 +6,6 @@ import classNames from 'classnames'; import { EuiCalendar, - EuiFormRow, EuiFieldText, EuiPanel, EuiFlexGroup, @@ -17,7 +16,6 @@ import { export class EuiDateTime extends Component { static propTypes = { - children: PropTypes.node, className: PropTypes.string, } @@ -53,7 +51,6 @@ export class EuiDateTime extends Component { render() { const { - children, className, closePopover, isPopoverOpen, diff --git a/src/components/form/date_time/time_selector/_time_selector.scss b/src/components/form/date_time/time_selector/_time_selector.scss index bb41ae5bc78..5ee6b53a280 100644 --- a/src/components/form/date_time/time_selector/_time_selector.scss +++ b/src/components/form/date_time/time_selector/_time_selector.scss @@ -12,6 +12,18 @@ width: 100%; border: $euiBorderThin; border-color: transparent; + border-radius: $euiBorderRadius; + + &.euiTimeSelector__button-isSelected { + background: $euiColorPrimary; + color: $euiColorEmptyShade; + + &:focus { + background: $euiColorPrimary; + color: $euiColorEmptyShade; + border-color: darken($euiColorPrimary, 10%); + } + } &:focus { background: $euiColorEmptyShade; 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 19bf718dd08..84655047ace 100644 --- a/src/components/form/date_time/time_selector/time_selector.js +++ b/src/components/form/date_time/time_selector/time_selector.js @@ -3,41 +3,78 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; export const EuiTimeSelector = ({ - children, className, ...rest, }) => { const classes = classNames('euiTimeSelector', className); const times = [ - '12:00 AM', - '12:30 AM', - '1:00 AM', - '1:30 AM', - '2:00 AM', - '2:30 AM', - '3:00 AM', - '3:30 AM', - '4:00 AM', - '4:30 AM', - '5:00 AM', - '5:30 AM', - '6:00 AM', - '6:30 AM', - '7:00 AM', - '7:30 AM', - '8:00 AM', - '8:30 AM', + { time: '12:00 AM' }, + { time: '12:30 AM' }, + { time: '1:00 AM' }, + { time: '1:30 AM' }, + { time: '2:00 AM' }, + { time: '2:30 AM' }, + { time: '3:00 AM' }, + { time: '3:30 AM', isSelected: true}, + { time: '4:00 AM' }, + { time: '4:30 AM' }, + { time: '5:00 AM' }, + { time: '5:30 AM' }, + { time: '6:00 AM' }, + { time: '6:30 AM' }, + { time: '7:00 AM' }, + { time: '7:30 AM' }, + { time: '8:00 AM' }, + { time: '8:30 AM' }, + { time: '9:00 AM' }, + { time: '9:30 AM' }, + { time: '10:00 AM' }, + { time: '10:30 AM' }, + { time: '11:00 AM' }, + { time: '11:30 AM' }, + { time: '12:00 AM' }, + { time: '12:30 PM' }, + { time: '1:00 PM' }, + { time: '1:30 PM' }, + { time: '2:00 PM' }, + { time: '2:30 PM' }, + { time: '3:00 PM' }, + { time: '3:30 PM' }, + { time: '4:00 PM' }, + { time: '4:30 PM' }, + { time: '5:00 PM' }, + { time: '5:30 PM' }, + { time: '6:00 PM' }, + { time: '6:30 PM' }, + { time: '7:00 PM' }, + { time: '7:30 PM' }, + { time: '8:00 PM' }, + { time: '8:30 PM' }, + { time: '9:00 PM' }, + { time: '9:30 PM' }, + { time: '10:00 PM' }, + { time: '10:30 PM' }, + { time: '11:00 PM' }, + { time: '11:30 PM' }, ] const timeListItems = ( - times.map((time, index) => { + times.map((item, index) => { + + const buttonClasses = classNames( + 'euiTimeSelector__button', + { + 'euiTimeSelector__button-isSelected': item.isSelected, + } + ); + return (
  • -
    • ); @@ -50,7 +87,7 @@ export const EuiTimeSelector = ({ className={classes} {...rest} > - {timeListItems} + { timeListItems} ); }; diff --git a/src/components/index.js b/src/components/index.js index fe43fcafc4b..92a85291c46 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -85,7 +85,6 @@ export { EuiCheckbox, EuiCheckboxGroup, EuiDateTime, - EuiDateTimeInput, EuiFieldNumber, EuiFieldPassword, EuiFieldSearch, From e395c5eee5c9140dce4386d60c3050c5ee327146 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 19 Dec 2017 15:56:09 -0800 Subject: [PATCH 10/12] 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 00000000000..a332904f303 --- /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 00000000000..d11cc137722 --- /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 () => ( + +); diff --git a/src-docs/src/views/date_time/date_time.js b/src-docs/src/views/date_time/date_time.js index 85e6a1560cd..8a4f4eb81e0 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 { ); } 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 7a9179af1eb..8f62a6bdf65 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: ( -

    - Description needed: how to use the EuiDateTime component. -

    - ), - demo: , - }], + sections: [ + { + title: 'DateTime', + source: [{ + type: GuideSectionTypes.JS, + code: dateTimeSource, + }, { + type: GuideSectionTypes.HTML, + code: dateTimeHtml, + }], + text: ( +

    + Description needed: how to use the EuiDateTime component. +

    + ), + demo: , + }, + { + title: 'DateTime without time selector', + source: [{ + type: GuideSectionTypes.JS, + code: dateWithoutSelectorSource, + }, { + type: GuideSectionTypes.HTML, + code: dateWithoutSelectorHtml, + }], + text: ( +

    + Description needed: how to use the EuiDateTime component. +

    + ), + demo: , + }, + { + title: 'Calendar', + source: [{ + type: GuideSectionTypes.JS, + code: calendarInlineSource, + }, { + type: GuideSectionTypes.HTML, + code: calendarInlineHtml, + }], + text: ( +

    + The EuiCalendar component should be usable as its own inline element. +

    + ), + demo: , + }, + ], }; 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 00000000000..052354ed76f --- /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 ( + + + + ); + } +} diff --git a/src/components/form/date_time/_date_time.scss b/src/components/form/date_time/_date_time.scss index 9656b2a5ae5..7f0eea0f3c7 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 96c09d61757..727e0e48c94 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 ( - {item} + {item} ); }) diff --git a/src/components/form/date_time/calendar/calendar.test.js b/src/components/form/date_time/calendar/calendar.test.js index 96795154993..72857af7bec 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 8304a1817a5..bc3d7a31c89 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 {
    - + 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 16a5d66d67e..01b63d14d7c 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 6e86f13fdda..fd78aee8586 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 = ( + + + + ); + } + return (
    - + - - - - + + {optionalTimeSelector}
    diff --git a/src/components/form/date_time/date_time.test.js b/src/components/form/date_time/date_time.test.js index 82f59229bd8..b9eadb7c338 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 84655047ace..b1d69bd6467 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} ); }; 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 1345c4cf98e..64ad83c9f0d 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'; From 323c3483bc951a037be97820d6886ca35f2cba67 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 24 Jan 2018 12:43:59 -0800 Subject: [PATCH 11/12] broken circ --- src-docs/src/routes.js | 2 +- src/components/form/index.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index a1dfd783c06..457a86f21ac 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -62,7 +62,7 @@ import { ContextMenuExample } from './views/context_menu/context_menu_example'; import { DateTimeExample } - from '../../views/date_time/date_time_example'; + from './views/date_time/date_time_example'; import { DescriptionListExample } from './views/description_list/description_list_example'; diff --git a/src/components/form/index.js b/src/components/form/index.js index 3ad0f9d4280..2b1afd637dd 100644 --- a/src/components/form/index.js +++ b/src/components/form/index.js @@ -2,6 +2,7 @@ export { EuiCheckbox, EuiCheckboxGroup, } from './checkbox'; + export { EuiDateTime, EuiCalendar, @@ -10,6 +11,7 @@ export { EuiCalendarMonthYearSelector, EuiTimeSelector, } from './date_time'; + export { EuiFieldNumber } from './field_number'; export { EuiFieldPassword } from './field_password'; export { EuiFieldSearch } from './field_search'; From 20949a1955bc4c6ee53bf61f6ae1811a909bfb45 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 24 Jan 2018 13:10:51 -0800 Subject: [PATCH 12/12] fix circ dependencies --- .../form/date_time/calendar/calendar.js | 11 ++++++++++- .../calendar/calendar_month_year_selector.js | 19 ++++++++++++++----- src/components/form/date_time/date_time.js | 19 +++++++++++++++++-- 3 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/components/form/date_time/calendar/calendar.js b/src/components/form/date_time/calendar/calendar.js index 727e0e48c94..c36eeb88eb9 100644 --- a/src/components/form/date_time/calendar/calendar.js +++ b/src/components/form/date_time/calendar/calendar.js @@ -6,10 +6,19 @@ import classNames from 'classnames'; import { EuiCalendarGrid, +} from './calendar_grid'; + +import { EuiCalendarGridItem, +} from './calendar_grid_item'; + +import { EuiCalendarMonthYearSelector, +} from './calendar_month_year_selector'; + +import { EuiSpacer, -} from '../../../../components'; +} from '../../../spacer'; export class EuiCalendar extends Component { static propTypes = { 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 bc3d7a31c89..11e07058379 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 @@ -5,15 +5,24 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { - EuiFlexGroup, - EuiFlexItem, EuiButtonIcon, - EuiFlexGrid, - EuiHorizontalRule, EuiButtonEmpty, +} from '../../../button'; + +import { + EuiHorizontalRule, +} from '../../../horizontal_rule'; + +import { EuiText, EuiTextColor, -} from '../../../../components'; +} from '../../../text'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiFlexGrid, +} from '../../../flex'; export class EuiCalendarMonthYearSelector extends Component { static propTypes = { diff --git a/src/components/form/date_time/date_time.js b/src/components/form/date_time/date_time.js index fd78aee8586..cc0ac3461ad 100644 --- a/src/components/form/date_time/date_time.js +++ b/src/components/form/date_time/date_time.js @@ -5,14 +5,29 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { - EuiCalendar, EuiFieldText, +} from '../../form/field_text'; + +import { + EuiCalendar, +} from './calendar'; + +import { EuiPanel, +} from '../../panel'; + +import { EuiFlexGroup, EuiFlexItem, +} from '../../flex'; + +import { EuiTimeSelector, +} from './time_selector'; + +import { EuiOutsideClickDetector, -} from '../../../components'; +} from '../../outside_click_detector'; export class EuiDateTime extends Component { static propTypes = {