EuiSuperDatePicker (#1351)

* super date picker component * quick select * commonly used ranges * recently used * cleanup quick_select_popover * refresh interval * show date range * relative date parsing * clean up date_popover * relative * absolute tab * implement step forward and step backward * add data-test-subjs needed for existing kibana functional tests * remove global date picker pattern, add comments about EuiSuperDatePicker props * change log * remove kibana file header * only show pretty duration for commonly used ranges and relative to now, now to now isInvalid, recenlty selected in reverse order * use full time unit name in pretty duration * pass roundUp to formatTimeString to ensure date button display is accurate, make onRefreshChange prop optional * index files for super_date_picker and prefix subcomponents with 'Eui' * add isLoading prop to EuiSuperDatePicker * add props documenation for callback functions * show 'next' relative ranges as pretty duration * rename from and to -> start and end * store previous quick select state * snapshot updates * keep quick select popover open on next / previous time window arrow * make pretty duration clickable, add paragraph to example * show tooltip when time changes * allow setting relative unit when value is zero * updates from chandlerprall review * remove moment-timezone dependency, not needed * remove getDerivedStateFromProps from EuiSuperDatePicker, EuiAbsoluteTab, EuiRefreshInterval, and EuiRelativeTab * move changelog message under master section * moved prop types to Wrapped component so they are usable in docs * check component is mounted for show and hide tooltip * update to datemath dependency with moment as peer
elastic · Dec 17, 2018 · da70b5c · da70b5c
1 parent 28e0a1a
commit da70b5c
Show file tree

Hide file tree

Showing 38 changed files with 2,594 additions and 597 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `onFocus` prop to `EuiComboBox` ([#1375](https://github.com/elastic/eui/pull/1375))
 - Added `DisambiguateSet` and `ExclusiveUnion` utility types ([#1368](https://github.com/elastic/eui/pull/1368))
+- Added `EuiSuperDatePicker` component ([#1351](https://github.com/elastic/eui/pull/1351))
 
 **Bug fixes**
 

diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
+    "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",
@@ -170,6 +171,7 @@
     "yo": "^2.0.0"
   },
   "peerDependencies": {
+    "@elastic/datemath": "^5.0.2",
     "moment": "^2.13.0",
     "prop-types": "^15.5.0",
     "react": "^16.3",

diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss
@@ -1,4 +1,3 @@
 @import '../../src/theme_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';
diff --git a/src-docs/src/theme_k6_dark.scss b/src-docs/src/theme_k6_dark.scss
@@ -1,4 +1,3 @@
 @import '../../src/theme_k6_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';
diff --git a/src-docs/src/theme_k6_light.scss b/src-docs/src/theme_k6_light.scss
@@ -1,4 +1,3 @@
 @import '../../src/theme_k6_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';
diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss
@@ -1,4 +1,3 @@
 @import '../../src/theme_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-@import './views/date_picker/global_date_picker';
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
@@ -11,7 +11,7 @@ import {
   EuiLink,
   EuiDatePicker,
   EuiDatePickerRange,
-  EuiCallOut,
+  EuiSuperDatePicker,
 } from '../../../../src/components';
 
 import DatePicker from './date_picker';
@@ -58,9 +58,9 @@ import Utc from './utc';
 const utcSource = require('!!raw-loader!./utc');
 const utcHtml = renderToHtml(Utc);
 
-import GlobalDatePicker from './global_date_picker';
-const globalDatePickerSource = require('!!raw-loader!./global_date_picker');
-const globalDatePickerHtml = renderToHtml(GlobalDatePicker);
+import SuperDatePicker from './super_date_picker';
+const superDatePickerSource = require('!!raw-loader!./super_date_picker');
+const superDatePickerHtml = renderToHtml(SuperDatePicker);
 
 export const DatePickerExample = {
   title: 'DatePicker',
@@ -266,24 +266,24 @@ export const DatePickerExample = {
     ),
     demo: <Classes />,
   }, {
-    title: 'Global date picker',
+    title: 'Super date picker',
     source: [{
       type: GuideSectionTypes.JS,
-      code: globalDatePickerSource,
+      code: superDatePickerSource,
     }, {
       type: GuideSectionTypes.HTML,
-      code: globalDatePickerHtml,
+      code: superDatePickerHtml,
     }],
     text: (
       <div>
-        <EuiCallOut color="warning" title="Demo of visual pattern only">
-          <p>
-            This documents a <strong>visual</strong> pattern for the eventual replacement of Kibana&apos;s
-            global date/time picker. It uses all EUI components with some custom styles.
-          </p>
-        </EuiCallOut>
+        <p>
+          <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> date times are passed as strings
+          in either datemath format (e.g.: now, now-15m, now-15m/m)
+          or as absolute date in the format <EuiCode>YYYY-MM-DDTHH:mm:ss.sssZ</EuiCode>
+        </p>
       </div>
     ),
-    demo: <GlobalDatePicker />,
+    demo: <SuperDatePicker />,
+    props: { EuiSuperDatePicker },
   }],
 };