@elastic/eui 94.5.1 → 94.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/date_picker/date_picker.js +4 -1
- package/es/components/date_picker/react-datepicker/src/index.js +7 -2
- package/es/components/drag_and_drop/drag_drop_context.js +0 -2
- package/es/components/flex/flex_group.js +4 -3
- package/es/components/flex/flex_item.js +4 -3
- package/es/components/table/table_header_cell.js +1 -1
- package/es/components/table/table_header_cell_checkbox.js +2 -1
- package/es/components/table/table_header_cell_shared.js +9 -0
- package/eui.d.ts +29 -24
- package/i18ntokens.json +6 -6
- package/lib/components/date_picker/date_picker.js +4 -1
- package/lib/components/date_picker/react-datepicker/src/index.js +7 -2
- package/lib/components/drag_and_drop/drag_drop_context.js +0 -1
- package/lib/components/flex/flex_group.js +4 -3
- package/lib/components/flex/flex_item.js +4 -3
- package/lib/components/table/table_header_cell.js +1 -1
- package/lib/components/table/table_header_cell_checkbox.js +2 -1
- package/lib/components/table/table_header_cell_shared.js +16 -0
- package/optimize/es/components/date_picker/date_picker.js +4 -1
- package/optimize/es/components/date_picker/react-datepicker/src/index.js +7 -2
- package/optimize/es/components/drag_and_drop/drag_drop_context.js +0 -2
- package/optimize/es/components/flex/flex_group.js +4 -3
- package/optimize/es/components/flex/flex_item.js +4 -3
- package/optimize/es/components/table/table_header_cell_checkbox.js +1 -0
- package/optimize/es/components/table/table_header_cell_shared.js +9 -0
- package/optimize/lib/components/date_picker/date_picker.js +4 -1
- package/optimize/lib/components/date_picker/react-datepicker/src/index.js +7 -2
- package/optimize/lib/components/drag_and_drop/drag_drop_context.js +0 -1
- package/optimize/lib/components/flex/flex_group.js +4 -3
- package/optimize/lib/components/flex/flex_item.js +4 -3
- package/optimize/lib/components/table/table_header_cell_checkbox.js +1 -0
- package/optimize/lib/components/table/table_header_cell_shared.js +16 -0
- package/package.json +1 -1
- package/test-env/components/date_picker/date_picker.js +4 -1
- package/test-env/components/date_picker/react-datepicker/src/index.js +7 -2
- package/test-env/components/drag_and_drop/drag_drop_context.js +0 -1
- package/test-env/components/flex/flex_group.js +4 -3
- package/test-env/components/flex/flex_item.js +4 -3
- package/test-env/components/table/table_header_cell.js +1 -1
- package/test-env/components/table/table_header_cell_checkbox.js +2 -1
- package/test-env/components/table/table_header_cell_shared.js +16 -0
- package/src/components/date_picker/react-datepicker/LICENSE +0 -21
- package/src/components/date_picker/react-datepicker/README.md +0 -168
- package/src/services/theme/README.md +0 -153
- package/src/test/README.md +0 -44
|
@@ -69,7 +69,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
|
|
|
69
69
|
injectTimes = _ref.injectTimes,
|
|
70
70
|
inline = _ref.inline,
|
|
71
71
|
inputRef = _ref.inputRef,
|
|
72
|
-
|
|
72
|
+
_isInvalid = _ref.isInvalid,
|
|
73
73
|
isLoading = _ref.isLoading,
|
|
74
74
|
locale = _ref.locale,
|
|
75
75
|
maxDate = _ref.maxDate,
|
|
@@ -102,6 +102,9 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
|
|
|
102
102
|
'euiDatePicker--inline': inline,
|
|
103
103
|
'euiDatePicker--shadow': inline && shadow
|
|
104
104
|
});
|
|
105
|
+
|
|
106
|
+
// Check for whether the passed `selected` moment date is valid
|
|
107
|
+
var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
|
|
105
108
|
var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
|
|
106
109
|
isInvalid: isInvalid,
|
|
107
110
|
isLoading: isLoading
|
|
@@ -52,6 +52,9 @@ function hasPreSelectionChanged(date1, date2) {
|
|
|
52
52
|
}
|
|
53
53
|
function hasSelectionChanged(date1, date2) {
|
|
54
54
|
if (date1 && date2) {
|
|
55
|
+
if (date1._isValid === false && date2._isValid === false) {
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
55
58
|
return !equals(date1, date2);
|
|
56
59
|
}
|
|
57
60
|
return false;
|
|
@@ -72,6 +75,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
72
75
|
return _this.props.openToDate ? newDate(_this.props.openToDate) : _this.props.selectsEnd && _this.props.startDate ? newDate(_this.props.startDate) : _this.props.selectsStart && _this.props.endDate ? newDate(_this.props.endDate) : now(_this.props.utcOffset);
|
|
73
76
|
});
|
|
74
77
|
_defineProperty(_assertThisInitialized(_this), "calcInitialState", function () {
|
|
78
|
+
var _this$props$selected;
|
|
75
79
|
var defaultPreSelection = _this.getPreSelection();
|
|
76
80
|
var minDate = getEffectiveMinDate(_this.props);
|
|
77
81
|
var maxDate = getEffectiveMaxDate(_this.props);
|
|
@@ -79,7 +83,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
79
83
|
return {
|
|
80
84
|
open: _this.props.startOpen || false,
|
|
81
85
|
preventFocus: false,
|
|
82
|
-
preSelection: _this.props.selected ? newDate(_this.props.selected) : boundedPreSelection,
|
|
86
|
+
preSelection: (_this$props$selected = _this.props.selected) !== null && _this$props$selected !== void 0 && _this$props$selected._isValid ? newDate(_this.props.selected) : boundedPreSelection,
|
|
83
87
|
// transforming highlighted days (perhaps nested array)
|
|
84
88
|
// to flat Map for faster access in day.jsx
|
|
85
89
|
highlightDates: getHightLightDaysMap(_this.props.highlightDates),
|
|
@@ -431,6 +435,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
431
435
|
_this.onClearClick();
|
|
432
436
|
});
|
|
433
437
|
_defineProperty(_assertThisInitialized(_this), "renderCalendar", function () {
|
|
438
|
+
var _this$props$selected2;
|
|
434
439
|
if (!_this.props.inline && !_this.isCalendarOpen()) {
|
|
435
440
|
return null;
|
|
436
441
|
}
|
|
@@ -446,7 +451,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
446
451
|
useWeekdaysShort: _this.props.useWeekdaysShort,
|
|
447
452
|
formatWeekDay: _this.props.formatWeekDay,
|
|
448
453
|
dropdownMode: _this.props.dropdownMode,
|
|
449
|
-
selected: _this.props.selected,
|
|
454
|
+
selected: (_this$props$selected2 = _this.props.selected) !== null && _this$props$selected2 !== void 0 && _this$props$selected2._isValid ? _this.props.selected : undefined,
|
|
450
455
|
preSelection: _this.state.preSelection,
|
|
451
456
|
onSelect: _this.handleSelect,
|
|
452
457
|
onWeekSelect: _this.props.onWeekSelect,
|
|
@@ -12,8 +12,6 @@ var _excluded = ["onBeforeDragStart", "onDragStart", "onDragUpdate", "onDragEnd"
|
|
|
12
12
|
|
|
13
13
|
import React, { useState, createContext } from 'react';
|
|
14
14
|
import { DragDropContext } from '@hello-pangea/dnd';
|
|
15
|
-
|
|
16
|
-
// export interface EuiDragDropContextProps extends DragDropContextProps {}
|
|
17
15
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
18
16
|
export var EuiDragDropContextContext = /*#__PURE__*/createContext({
|
|
19
17
|
isDraggingType: null
|
|
@@ -39,9 +39,10 @@ var EuiFlexGroupInternal = function EuiFlexGroupInternal(_ref, ref) {
|
|
|
39
39
|
var cssStyles = [styles.euiFlexGroup, responsive && !direction.includes('column') && styles.responsive, wrap && styles.wrap, styles.gutterSizes[gutterSize], styles.justifyContent[justifyContent], styles.alignItems[alignItems], styles.direction[direction]];
|
|
40
40
|
var classes = classNames('euiFlexGroup', className);
|
|
41
41
|
|
|
42
|
-
// Cast
|
|
43
|
-
//
|
|
44
|
-
//
|
|
42
|
+
// Cast `component` to FunctionComponent to simplify its type.
|
|
43
|
+
// Note that FunctionComponent type is used here for purely typing
|
|
44
|
+
// convenience since we specify the return type above, and function
|
|
45
|
+
// components don't support `ref`s, but that doesn't matter in this case.
|
|
45
46
|
var Component = component;
|
|
46
47
|
return ___EmotionJSX(Component, _extends({}, rest, {
|
|
47
48
|
ref: ref,
|
|
@@ -30,9 +30,10 @@ var EuiFlexItemInternal = function EuiFlexItemInternal(_ref, ref) {
|
|
|
30
30
|
var cssStyles = [styles.euiFlexItem, !grow ? styles.growZero : styles.grow, grow && (typeof grow === 'number' ? styles.growSizes[grow] : styles.growSizes['1'])];
|
|
31
31
|
var classes = classNames('euiFlexItem', className);
|
|
32
32
|
|
|
33
|
-
// Cast
|
|
34
|
-
//
|
|
35
|
-
//
|
|
33
|
+
// Cast `component` to FunctionComponent to simplify its type.
|
|
34
|
+
// Note that FunctionComponent type is used here for purely typing
|
|
35
|
+
// convenience since we specify the return type above, and function
|
|
36
|
+
// components don't support `ref`s, but that doesn't matter in this case.
|
|
36
37
|
var Component = component;
|
|
37
38
|
return ___EmotionJSX(Component, _extends({}, rest, {
|
|
38
39
|
ref: ref,
|
|
@@ -26,6 +26,7 @@ export var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(_ref
|
|
|
26
26
|
var classes = classNames('euiTableHeaderCellCheckbox', className);
|
|
27
27
|
var styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles);
|
|
28
28
|
var inlineStyles = resolveWidthAsStyle(style, width);
|
|
29
|
+
console.log('inlineStyles', inlineStyles);
|
|
29
30
|
return ___EmotionJSX("th", _extends({
|
|
30
31
|
css: styles.euiTableHeaderCellCheckbox,
|
|
31
32
|
className: classes,
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
3
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
4
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
5
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
6
|
+
* Side Public License, v 1.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export var HEADER_CELL_SCOPE = ['col', 'row', 'colgroup', 'rowgroup'];
|
|
@@ -79,7 +79,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
|
|
|
79
79
|
injectTimes = _ref.injectTimes,
|
|
80
80
|
inline = _ref.inline,
|
|
81
81
|
inputRef = _ref.inputRef,
|
|
82
|
-
|
|
82
|
+
_isInvalid = _ref.isInvalid,
|
|
83
83
|
isLoading = _ref.isLoading,
|
|
84
84
|
locale = _ref.locale,
|
|
85
85
|
maxDate = _ref.maxDate,
|
|
@@ -112,6 +112,9 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
|
|
|
112
112
|
'euiDatePicker--inline': inline,
|
|
113
113
|
'euiDatePicker--shadow': inline && shadow
|
|
114
114
|
});
|
|
115
|
+
|
|
116
|
+
// Check for whether the passed `selected` moment date is valid
|
|
117
|
+
var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
|
|
115
118
|
var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
|
|
116
119
|
isInvalid: isInvalid,
|
|
117
120
|
isLoading: isLoading
|
|
@@ -63,6 +63,9 @@ function hasPreSelectionChanged(date1, date2) {
|
|
|
63
63
|
}
|
|
64
64
|
function hasSelectionChanged(date1, date2) {
|
|
65
65
|
if (date1 && date2) {
|
|
66
|
+
if (date1._isValid === false && date2._isValid === false) {
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
66
69
|
return !(0, _date_utils.equals)(date1, date2);
|
|
67
70
|
}
|
|
68
71
|
return false;
|
|
@@ -83,6 +86,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
83
86
|
return _this.props.openToDate ? (0, _date_utils.newDate)(_this.props.openToDate) : _this.props.selectsEnd && _this.props.startDate ? (0, _date_utils.newDate)(_this.props.startDate) : _this.props.selectsStart && _this.props.endDate ? (0, _date_utils.newDate)(_this.props.endDate) : (0, _date_utils.now)(_this.props.utcOffset);
|
|
84
87
|
});
|
|
85
88
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcInitialState", function () {
|
|
89
|
+
var _this$props$selected;
|
|
86
90
|
var defaultPreSelection = _this.getPreSelection();
|
|
87
91
|
var minDate = (0, _date_utils.getEffectiveMinDate)(_this.props);
|
|
88
92
|
var maxDate = (0, _date_utils.getEffectiveMaxDate)(_this.props);
|
|
@@ -90,7 +94,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
90
94
|
return {
|
|
91
95
|
open: _this.props.startOpen || false,
|
|
92
96
|
preventFocus: false,
|
|
93
|
-
preSelection: _this.props.selected ? (0, _date_utils.newDate)(_this.props.selected) : boundedPreSelection,
|
|
97
|
+
preSelection: (_this$props$selected = _this.props.selected) !== null && _this$props$selected !== void 0 && _this$props$selected._isValid ? (0, _date_utils.newDate)(_this.props.selected) : boundedPreSelection,
|
|
94
98
|
// transforming highlighted days (perhaps nested array)
|
|
95
99
|
// to flat Map for faster access in day.jsx
|
|
96
100
|
highlightDates: (0, _date_utils.getHightLightDaysMap)(_this.props.highlightDates),
|
|
@@ -442,6 +446,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
442
446
|
_this.onClearClick();
|
|
443
447
|
});
|
|
444
448
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCalendar", function () {
|
|
449
|
+
var _this$props$selected2;
|
|
445
450
|
if (!_this.props.inline && !_this.isCalendarOpen()) {
|
|
446
451
|
return null;
|
|
447
452
|
}
|
|
@@ -457,7 +462,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
457
462
|
useWeekdaysShort: _this.props.useWeekdaysShort,
|
|
458
463
|
formatWeekDay: _this.props.formatWeekDay,
|
|
459
464
|
dropdownMode: _this.props.dropdownMode,
|
|
460
|
-
selected: _this.props.selected,
|
|
465
|
+
selected: (_this$props$selected2 = _this.props.selected) !== null && _this$props$selected2 !== void 0 && _this$props$selected2._isValid ? _this.props.selected : undefined,
|
|
461
466
|
preSelection: _this.state.preSelection,
|
|
462
467
|
onSelect: _this.handleSelect,
|
|
463
468
|
onWeekSelect: _this.props.onWeekSelect,
|
|
@@ -20,7 +20,6 @@ var _excluded = ["onBeforeDragStart", "onDragStart", "onDragUpdate", "onDragEnd"
|
|
|
20
20
|
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
21
21
|
* Side Public License, v 1.
|
|
22
22
|
*/
|
|
23
|
-
// export interface EuiDragDropContextProps extends DragDropContextProps {}
|
|
24
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
25
|
var EuiDragDropContextContext = /*#__PURE__*/(0, _react.createContext)({
|
|
@@ -52,9 +52,10 @@ var EuiFlexGroupInternal = function EuiFlexGroupInternal(_ref, ref) {
|
|
|
52
52
|
var cssStyles = [styles.euiFlexGroup, responsive && !direction.includes('column') && styles.responsive, wrap && styles.wrap, styles.gutterSizes[gutterSize], styles.justifyContent[justifyContent], styles.alignItems[alignItems], styles.direction[direction]];
|
|
53
53
|
var classes = (0, _classnames.default)('euiFlexGroup', className);
|
|
54
54
|
|
|
55
|
-
// Cast
|
|
56
|
-
//
|
|
57
|
-
//
|
|
55
|
+
// Cast `component` to FunctionComponent to simplify its type.
|
|
56
|
+
// Note that FunctionComponent type is used here for purely typing
|
|
57
|
+
// convenience since we specify the return type above, and function
|
|
58
|
+
// components don't support `ref`s, but that doesn't matter in this case.
|
|
58
59
|
var Component = component;
|
|
59
60
|
return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
|
|
60
61
|
ref: ref,
|
|
@@ -39,9 +39,10 @@ var EuiFlexItemInternal = function EuiFlexItemInternal(_ref, ref) {
|
|
|
39
39
|
var cssStyles = [_flex_item.euiFlexItemStyles.euiFlexItem, !grow ? _flex_item.euiFlexItemStyles.growZero : _flex_item.euiFlexItemStyles.grow, grow && (typeof grow === 'number' ? _flex_item.euiFlexItemStyles.growSizes[grow] : _flex_item.euiFlexItemStyles.growSizes['1'])];
|
|
40
40
|
var classes = (0, _classnames.default)('euiFlexItem', className);
|
|
41
41
|
|
|
42
|
-
// Cast
|
|
43
|
-
//
|
|
44
|
-
//
|
|
42
|
+
// Cast `component` to FunctionComponent to simplify its type.
|
|
43
|
+
// Note that FunctionComponent type is used here for purely typing
|
|
44
|
+
// convenience since we specify the return type above, and function
|
|
45
|
+
// components don't support `ref`s, but that doesn't matter in this case.
|
|
45
46
|
var Component = component;
|
|
46
47
|
return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
|
|
47
48
|
ref: ref,
|
|
@@ -32,6 +32,7 @@ var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(_ref) {
|
|
|
32
32
|
var classes = (0, _classnames.default)('euiTableHeaderCellCheckbox', className);
|
|
33
33
|
var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
|
|
34
34
|
var inlineStyles = (0, _utils.resolveWidthAsStyle)(style, width);
|
|
35
|
+
console.log('inlineStyles', inlineStyles);
|
|
35
36
|
return (0, _react2.jsx)("th", (0, _extends2.default)({
|
|
36
37
|
css: styles.euiTableHeaderCellCheckbox,
|
|
37
38
|
className: classes,
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.HEADER_CELL_SCOPE = void 0;
|
|
7
|
+
/*
|
|
8
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
9
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
10
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
11
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
12
|
+
* Side Public License, v 1.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
var HEADER_CELL_SCOPE = ['col', 'row', 'colgroup', 'rowgroup'];
|
|
16
|
+
exports.HEADER_CELL_SCOPE = HEADER_CELL_SCOPE;
|
package/package.json
CHANGED
|
@@ -80,7 +80,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
|
|
|
80
80
|
injectTimes = _ref.injectTimes,
|
|
81
81
|
inline = _ref.inline,
|
|
82
82
|
inputRef = _ref.inputRef,
|
|
83
|
-
|
|
83
|
+
_isInvalid = _ref.isInvalid,
|
|
84
84
|
isLoading = _ref.isLoading,
|
|
85
85
|
locale = _ref.locale,
|
|
86
86
|
maxDate = _ref.maxDate,
|
|
@@ -113,6 +113,9 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
|
|
|
113
113
|
'euiDatePicker--inline': inline,
|
|
114
114
|
'euiDatePicker--shadow': inline && shadow
|
|
115
115
|
});
|
|
116
|
+
|
|
117
|
+
// Check for whether the passed `selected` moment date is valid
|
|
118
|
+
var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
|
|
116
119
|
var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
|
|
117
120
|
isInvalid: isInvalid,
|
|
118
121
|
isLoading: isLoading
|
|
@@ -63,6 +63,9 @@ function hasPreSelectionChanged(date1, date2) {
|
|
|
63
63
|
}
|
|
64
64
|
function hasSelectionChanged(date1, date2) {
|
|
65
65
|
if (date1 && date2) {
|
|
66
|
+
if (date1._isValid === false && date2._isValid === false) {
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
66
69
|
return !(0, _date_utils.equals)(date1, date2);
|
|
67
70
|
}
|
|
68
71
|
return false;
|
|
@@ -83,6 +86,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
83
86
|
return _this.props.openToDate ? (0, _date_utils.newDate)(_this.props.openToDate) : _this.props.selectsEnd && _this.props.startDate ? (0, _date_utils.newDate)(_this.props.startDate) : _this.props.selectsStart && _this.props.endDate ? (0, _date_utils.newDate)(_this.props.endDate) : (0, _date_utils.now)(_this.props.utcOffset);
|
|
84
87
|
});
|
|
85
88
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcInitialState", function () {
|
|
89
|
+
var _this$props$selected;
|
|
86
90
|
var defaultPreSelection = _this.getPreSelection();
|
|
87
91
|
var minDate = (0, _date_utils.getEffectiveMinDate)(_this.props);
|
|
88
92
|
var maxDate = (0, _date_utils.getEffectiveMaxDate)(_this.props);
|
|
@@ -90,7 +94,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
90
94
|
return {
|
|
91
95
|
open: _this.props.startOpen || false,
|
|
92
96
|
preventFocus: false,
|
|
93
|
-
preSelection: _this.props.selected ? (0, _date_utils.newDate)(_this.props.selected) : boundedPreSelection,
|
|
97
|
+
preSelection: (_this$props$selected = _this.props.selected) !== null && _this$props$selected !== void 0 && _this$props$selected._isValid ? (0, _date_utils.newDate)(_this.props.selected) : boundedPreSelection,
|
|
94
98
|
// transforming highlighted days (perhaps nested array)
|
|
95
99
|
// to flat Map for faster access in day.jsx
|
|
96
100
|
highlightDates: (0, _date_utils.getHightLightDaysMap)(_this.props.highlightDates),
|
|
@@ -442,6 +446,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
442
446
|
_this.onClearClick();
|
|
443
447
|
});
|
|
444
448
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCalendar", function () {
|
|
449
|
+
var _this$props$selected2;
|
|
445
450
|
if (!_this.props.inline && !_this.isCalendarOpen()) {
|
|
446
451
|
return null;
|
|
447
452
|
}
|
|
@@ -457,7 +462,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
457
462
|
useWeekdaysShort: _this.props.useWeekdaysShort,
|
|
458
463
|
formatWeekDay: _this.props.formatWeekDay,
|
|
459
464
|
dropdownMode: _this.props.dropdownMode,
|
|
460
|
-
selected: _this.props.selected,
|
|
465
|
+
selected: (_this$props$selected2 = _this.props.selected) !== null && _this$props$selected2 !== void 0 && _this$props$selected2._isValid ? _this.props.selected : undefined,
|
|
461
466
|
preSelection: _this.state.preSelection,
|
|
462
467
|
onSelect: _this.handleSelect,
|
|
463
468
|
onWeekSelect: _this.props.onWeekSelect,
|
|
@@ -20,7 +20,6 @@ var _excluded = ["onBeforeDragStart", "onDragStart", "onDragUpdate", "onDragEnd"
|
|
|
20
20
|
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
21
21
|
* Side Public License, v 1.
|
|
22
22
|
*/
|
|
23
|
-
// export interface EuiDragDropContextProps extends DragDropContextProps {}
|
|
24
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
25
|
var EuiDragDropContextContext = /*#__PURE__*/(0, _react.createContext)({
|
|
@@ -52,9 +52,10 @@ var EuiFlexGroupInternal = function EuiFlexGroupInternal(_ref, ref) {
|
|
|
52
52
|
var cssStyles = [styles.euiFlexGroup, responsive && !direction.includes('column') && styles.responsive, wrap && styles.wrap, styles.gutterSizes[gutterSize], styles.justifyContent[justifyContent], styles.alignItems[alignItems], styles.direction[direction]];
|
|
53
53
|
var classes = (0, _classnames.default)('euiFlexGroup', className);
|
|
54
54
|
|
|
55
|
-
// Cast
|
|
56
|
-
//
|
|
57
|
-
//
|
|
55
|
+
// Cast `component` to FunctionComponent to simplify its type.
|
|
56
|
+
// Note that FunctionComponent type is used here for purely typing
|
|
57
|
+
// convenience since we specify the return type above, and function
|
|
58
|
+
// components don't support `ref`s, but that doesn't matter in this case.
|
|
58
59
|
var Component = component;
|
|
59
60
|
return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
|
|
60
61
|
ref: ref,
|
|
@@ -39,9 +39,10 @@ var EuiFlexItemInternal = function EuiFlexItemInternal(_ref, ref) {
|
|
|
39
39
|
var cssStyles = [_flex_item.euiFlexItemStyles.euiFlexItem, !grow ? _flex_item.euiFlexItemStyles.growZero : _flex_item.euiFlexItemStyles.grow, grow && (typeof grow === 'number' ? _flex_item.euiFlexItemStyles.growSizes[grow] : _flex_item.euiFlexItemStyles.growSizes['1'])];
|
|
40
40
|
var classes = (0, _classnames.default)('euiFlexItem', className);
|
|
41
41
|
|
|
42
|
-
// Cast
|
|
43
|
-
//
|
|
44
|
-
//
|
|
42
|
+
// Cast `component` to FunctionComponent to simplify its type.
|
|
43
|
+
// Note that FunctionComponent type is used here for purely typing
|
|
44
|
+
// convenience since we specify the return type above, and function
|
|
45
|
+
// components don't support `ref`s, but that doesn't matter in this case.
|
|
45
46
|
var Component = component;
|
|
46
47
|
return (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
|
|
47
48
|
ref: ref,
|
|
@@ -136,7 +136,7 @@ EuiTableHeaderCell.propTypes = {
|
|
|
136
136
|
isSorted: _propTypes.default.bool,
|
|
137
137
|
mobileOptions: _propTypes.default.any,
|
|
138
138
|
onSort: _propTypes.default.func,
|
|
139
|
-
scope: _propTypes.default.
|
|
139
|
+
scope: _propTypes.default.any,
|
|
140
140
|
width: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]),
|
|
141
141
|
description: _propTypes.default.string,
|
|
142
142
|
/**
|
|
@@ -33,6 +33,7 @@ var EuiTableHeaderCellCheckbox = function EuiTableHeaderCellCheckbox(_ref) {
|
|
|
33
33
|
var classes = (0, _classnames.default)('euiTableHeaderCellCheckbox', className);
|
|
34
34
|
var styles = (0, _services.useEuiMemoizedStyles)(_table_cells_shared.euiTableCellCheckboxStyles);
|
|
35
35
|
var inlineStyles = (0, _utils.resolveWidthAsStyle)(style, width);
|
|
36
|
+
console.log('inlineStyles', inlineStyles);
|
|
36
37
|
return (0, _react2.jsx)("th", (0, _extends2.default)({
|
|
37
38
|
css: styles.euiTableHeaderCellCheckbox,
|
|
38
39
|
className: classes,
|
|
@@ -49,5 +50,5 @@ EuiTableHeaderCellCheckbox.propTypes = {
|
|
|
49
50
|
"data-test-subj": _propTypes.default.string,
|
|
50
51
|
css: _propTypes.default.any,
|
|
51
52
|
width: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]),
|
|
52
|
-
scope: _propTypes.default.
|
|
53
|
+
scope: _propTypes.default.any
|
|
53
54
|
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.HEADER_CELL_SCOPE = void 0;
|
|
7
|
+
/*
|
|
8
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
9
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
10
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
11
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
12
|
+
* Side Public License, v 1.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
var HEADER_CELL_SCOPE = ['col', 'row', 'colgroup', 'rowgroup'];
|
|
16
|
+
exports.HEADER_CELL_SCOPE = HEADER_CELL_SCOPE;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
The MIT License (MIT)
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2018 HackerOne Inc and individual contributors
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
_Forked by @elastic/eui from Hacker0x01/react-datepicker for accessibility and consolidation of services._
|
|
2
|
-
|
|
3
|
-
Decision to not use a more traditional "vendor" directory approach includes redundant services, unnecessary dependencies, and a separate build pipeline. Most notably, `react-datepicker` included third-party popover and focus trap service and components that do not align with EUI interaction standards and were replaced, at parity, with EUI components.
|
|
4
|
-
|
|
5
|
-
Other modifications:
|
|
6
|
-
|
|
7
|
-
* Changed to `.js` naming to conform to EUI build processes
|
|
8
|
-
* Removed files related to repository management and publishing
|
|
9
|
-
* Adjusted `babel.rc` and `package.json` naming to avoid babel configuration conflicts
|
|
10
|
-
|
|
11
|
-
___
|
|
12
|
-
# React Date Picker
|
|
13
|
-
|
|
14
|
-
[](https://badge.fury.io/js/react-datepicker)
|
|
15
|
-
[](https://travis-ci.org/Hacker0x01/react-datepicker)
|
|
16
|
-
[](https://david-dm.org/Hacker0x01/react-datepicker)
|
|
17
|
-
[](https://codecov.io/gh/Hacker0x01/react-datepicker)
|
|
18
|
-
[](https://npmjs.org/package/react-datepicker)
|
|
19
|
-
[](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/context:javascript)
|
|
20
|
-
[](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/alerts)
|
|
21
|
-
|
|
22
|
-
A simple and reusable Datepicker component for React ([Demo](https://reactdatepicker.com/))
|
|
23
|
-
|
|
24
|
-

|
|
25
|
-
|
|
26
|
-
## Installation
|
|
27
|
-
|
|
28
|
-
The package can be installed via NPM:
|
|
29
|
-
|
|
30
|
-
```
|
|
31
|
-
npm install react-datepicker --save
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
|
|
35
|
-
|
|
36
|
-
```js
|
|
37
|
-
import React from "react";
|
|
38
|
-
import DatePicker from "react-datepicker";
|
|
39
|
-
import moment from "moment";
|
|
40
|
-
|
|
41
|
-
import "react-datepicker/dist/react-datepicker.css";
|
|
42
|
-
|
|
43
|
-
// CSS Modules, react-datepicker-cssmodules.css
|
|
44
|
-
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
|
|
45
|
-
|
|
46
|
-
class Example extends React.Component {
|
|
47
|
-
constructor(props) {
|
|
48
|
-
super(props);
|
|
49
|
-
this.state = {
|
|
50
|
-
startDate: moment()
|
|
51
|
-
};
|
|
52
|
-
this.handleChange = this.handleChange.bind(this);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
handleChange(date) {
|
|
56
|
-
this.setState({
|
|
57
|
-
startDate: date
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
render() {
|
|
62
|
-
return (
|
|
63
|
-
<DatePicker
|
|
64
|
-
selected={this.state.startDate}
|
|
65
|
-
onChange={this.handleChange}
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
## Configuration
|
|
73
|
-
|
|
74
|
-
The most basic use of the DatePicker can be described with:
|
|
75
|
-
|
|
76
|
-
```js
|
|
77
|
-
<DatePicker selected={this.state.date} onChange={this.handleChange} />
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
You can use `onSelect` event handler which fires each time some calendar date has been selected
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
<DatePicker
|
|
84
|
-
selected={this.state.date}
|
|
85
|
-
onSelect={this.handleSelect} //when day is clicked
|
|
86
|
-
onChange={this.handleChange} //only when value has changed
|
|
87
|
-
/>
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
`onClickOutside` handler may be useful to close datepicker in `inline` mode
|
|
91
|
-
|
|
92
|
-
See [here](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) for a full list of props that may be passed to the component. Examples are given on the [main website](https://hacker0x01.github.io/react-datepicker).
|
|
93
|
-
|
|
94
|
-
### Time picker
|
|
95
|
-
|
|
96
|
-
You can also include a time picker by adding the showTimeSelect prop
|
|
97
|
-
|
|
98
|
-
```js
|
|
99
|
-
<DatePicker
|
|
100
|
-
selected={this.state.date}
|
|
101
|
-
onChange={this.handleChange}
|
|
102
|
-
showTimeSelect
|
|
103
|
-
dateFormat="LLL"
|
|
104
|
-
/>
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
Times will be displayed at 30-minute intervals by default (default configurable via timeInterval prop)
|
|
108
|
-
|
|
109
|
-
More examples of how to use the time picker are given on the [main website](https://hacker0x01.github.io/react-datepicker)
|
|
110
|
-
|
|
111
|
-
### Localization
|
|
112
|
-
|
|
113
|
-
The date picker relies on [moment.js internationalization](http://momentjs.com/docs/#/i18n/) to localize its display components. By default, the date picker will use the locale globally set in moment, which is English. Locales can be changed in the following ways:
|
|
114
|
-
|
|
115
|
-
* **Globally** by calling `moment.locale(lang)`
|
|
116
|
-
* **Picker-specific** by providing the `locale` prop
|
|
117
|
-
|
|
118
|
-
Locales can be further configured in moment with various [customization options](http://momentjs.com/docs/#/customization/).
|
|
119
|
-
|
|
120
|
-
_As of version 0.23, the `weekdays` and `weekStart` DatePicker props have been removed. Instead, they can be configured with the `weekdaysMin` and `week.dow` moment locale customization options._
|
|
121
|
-
|
|
122
|
-
## Compatibility
|
|
123
|
-
|
|
124
|
-
### React
|
|
125
|
-
|
|
126
|
-
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
|
|
127
|
-
|
|
128
|
-
Latest compatible versions:
|
|
129
|
-
|
|
130
|
-
* React 15.5 or newer: All above React-datepicker v.0.40.0
|
|
131
|
-
* React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
|
|
132
|
-
* React 0.14 or newer: All above React-datepicker v0.13.0
|
|
133
|
-
* React 0.13: React-datepicker v0.13.0
|
|
134
|
-
* pre React 0.13: React-datepicker v0.6.2
|
|
135
|
-
|
|
136
|
-
### Browser Support
|
|
137
|
-
|
|
138
|
-
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
|
|
139
|
-
|
|
140
|
-
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the [classlist polyfill](https://www.npmjs.com/package/classlist-polyfill) is needed, but this may change or break at any point in the future.
|
|
141
|
-
|
|
142
|
-
## Local Development
|
|
143
|
-
|
|
144
|
-
The `master` branch contains the latest version of the Datepicker component. To start your example app, you can run `yarn start`. This starts a simple webserver on http://localhost:8080.
|
|
145
|
-
|
|
146
|
-
You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
|
|
147
|
-
|
|
148
|
-
### The examples
|
|
149
|
-
|
|
150
|
-
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
|
|
151
|
-
|
|
152
|
-
## Accessibility
|
|
153
|
-
|
|
154
|
-
### Keyboard support
|
|
155
|
-
|
|
156
|
-
* _Left_: Move to the previous day.
|
|
157
|
-
* _Right_: Move to the next day.
|
|
158
|
-
* _Up_: Move to the previous week.
|
|
159
|
-
* _Down_: Move to the next week.
|
|
160
|
-
* _PgUp_: Move to the previous month.
|
|
161
|
-
* _PgDn_: Move to the next month.
|
|
162
|
-
* _Home_: Move to the previous year.
|
|
163
|
-
* _End_: Move to the next year.
|
|
164
|
-
* _Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)
|
|
165
|
-
|
|
166
|
-
## License
|
|
167
|
-
|
|
168
|
-
Copyright (c) 2018 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
|