rsuite 5.48.0 → 5.49.0
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/CHANGELOG.md +22 -0
- package/Cascader/styles/index.less +1 -0
- package/DatePicker/styles/index.less +18 -11
- package/DateRangeInput/package.json +7 -0
- package/DateRangePicker/styles/index.less +10 -0
- package/InputGroup/styles/index.less +1 -0
- package/Picker/styles/index.less +20 -0
- package/README.md +34 -24
- package/Sidenav/styles/index.less +2 -0
- package/cjs/Calendar/CalendarContainer.d.ts +2 -0
- package/cjs/Calendar/CalendarContainer.js +11 -4
- package/cjs/Calendar/CalendarHeader.js +2 -0
- package/cjs/Calendar/MonthDropdown.js +7 -2
- package/cjs/Calendar/MonthDropdownItem.js +2 -2
- package/cjs/Calendar/Table.js +6 -1
- package/cjs/Calendar/TimeDropdown.js +17 -10
- package/cjs/Calendar/types.d.ts +1 -0
- package/cjs/CustomProvider/CustomProvider.d.ts +13 -0
- package/cjs/CustomProvider/CustomProvider.js +2 -2
- package/cjs/DateInput/DateField.d.ts +9 -31
- package/cjs/DateInput/DateField.js +61 -12
- package/cjs/DateInput/DateInput.d.ts +7 -2
- package/cjs/DateInput/DateInput.js +74 -92
- package/cjs/DateInput/index.d.ts +4 -0
- package/cjs/DateInput/index.js +19 -1
- package/cjs/DateInput/useDateInputState.d.ts +7 -31
- package/cjs/DateInput/useDateInputState.js +39 -15
- package/cjs/DateInput/useIsFocused.d.ts +7 -0
- package/cjs/DateInput/useIsFocused.js +28 -0
- package/cjs/DateInput/useKeyboardInputEvent.d.ts +10 -0
- package/cjs/DateInput/useKeyboardInputEvent.js +44 -0
- package/cjs/DateInput/utils.d.ts +23 -1
- package/cjs/DateInput/utils.js +155 -51
- package/cjs/DatePicker/DatePicker.d.ts +20 -7
- package/cjs/DatePicker/DatePicker.js +215 -245
- package/cjs/DatePicker/PickerIndicator.d.ts +10 -0
- package/cjs/DatePicker/PickerIndicator.js +48 -0
- package/cjs/DatePicker/PickerLabel.d.ts +9 -0
- package/cjs/DatePicker/PickerLabel.js +23 -0
- package/cjs/DatePicker/Toolbar.js +3 -21
- package/cjs/DatePicker/utils.d.ts +5 -1
- package/cjs/DatePicker/utils.js +17 -1
- package/cjs/DateRangeInput/DateRangeInput.d.ts +29 -0
- package/cjs/DateRangeInput/DateRangeInput.js +244 -0
- package/cjs/DateRangeInput/index.d.ts +3 -0
- package/cjs/DateRangeInput/index.js +9 -0
- package/cjs/DateRangeInput/utils.d.ts +61 -0
- package/cjs/DateRangeInput/utils.js +146 -0
- package/cjs/DateRangePicker/DateRangePicker.js +12 -2
- package/cjs/FormControl/FormControl.js +2 -1
- package/cjs/Input/Input.d.ts +11 -0
- package/cjs/Input/Input.js +11 -8
- package/cjs/MultiCascader/MultiCascader.js +3 -1
- package/cjs/Overlay/OverlayTrigger.d.ts +3 -0
- package/cjs/Overlay/OverlayTrigger.js +5 -0
- package/cjs/Picker/PickerToggle.js +2 -1
- package/cjs/Picker/usePickerRef.d.ts +17 -0
- package/cjs/Picker/usePickerRef.js +82 -0
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +3 -1
- package/cjs/locales/index.d.ts +2 -2
- package/cjs/useMediaQuery/useMediaQuery.js +2 -2
- package/cjs/utils/index.d.ts +2 -0
- package/cjs/utils/index.js +8 -2
- package/cjs/utils/useCustom.js +1 -1
- package/cjs/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/cjs/utils/useIsomorphicLayoutEffect.js +9 -0
- package/dist/rsuite-no-reset-rtl.css +51 -141
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +51 -141
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +51 -9
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +51 -9
- package/dist/rsuite.js +4804 -250
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/Calendar/CalendarContainer.d.ts +2 -0
- package/esm/Calendar/CalendarContainer.js +12 -5
- package/esm/Calendar/CalendarHeader.js +2 -0
- package/esm/Calendar/MonthDropdown.js +7 -2
- package/esm/Calendar/MonthDropdownItem.js +2 -2
- package/esm/Calendar/Table.js +6 -1
- package/esm/Calendar/TimeDropdown.js +17 -10
- package/esm/Calendar/types.d.ts +1 -0
- package/esm/CustomProvider/CustomProvider.d.ts +13 -0
- package/esm/CustomProvider/CustomProvider.js +3 -3
- package/esm/DateInput/DateField.d.ts +9 -31
- package/esm/DateInput/DateField.js +61 -12
- package/esm/DateInput/DateInput.d.ts +7 -2
- package/esm/DateInput/DateInput.js +77 -95
- package/esm/DateInput/index.d.ts +4 -0
- package/esm/DateInput/index.js +4 -0
- package/esm/DateInput/useDateInputState.d.ts +7 -31
- package/esm/DateInput/useDateInputState.js +41 -18
- package/esm/DateInput/useIsFocused.d.ts +7 -0
- package/esm/DateInput/useIsFocused.js +22 -0
- package/esm/DateInput/useKeyboardInputEvent.d.ts +10 -0
- package/esm/DateInput/useKeyboardInputEvent.js +38 -0
- package/esm/DateInput/utils.d.ts +23 -1
- package/esm/DateInput/utils.js +150 -51
- package/esm/DatePicker/DatePicker.d.ts +20 -7
- package/esm/DatePicker/DatePicker.js +218 -248
- package/esm/DatePicker/PickerIndicator.d.ts +10 -0
- package/esm/DatePicker/PickerIndicator.js +42 -0
- package/esm/DatePicker/PickerLabel.d.ts +9 -0
- package/esm/DatePicker/PickerLabel.js +17 -0
- package/esm/DatePicker/Toolbar.js +3 -21
- package/esm/DatePicker/utils.d.ts +5 -1
- package/esm/DatePicker/utils.js +16 -1
- package/esm/DateRangeInput/DateRangeInput.d.ts +29 -0
- package/esm/DateRangeInput/DateRangeInput.js +237 -0
- package/esm/DateRangeInput/index.d.ts +3 -0
- package/esm/DateRangeInput/index.js +3 -0
- package/esm/DateRangeInput/utils.d.ts +61 -0
- package/esm/DateRangeInput/utils.js +137 -0
- package/esm/DateRangePicker/DateRangePicker.js +12 -2
- package/esm/FormControl/FormControl.js +2 -1
- package/esm/Input/Input.d.ts +11 -0
- package/esm/Input/Input.js +12 -9
- package/esm/MultiCascader/MultiCascader.js +4 -2
- package/esm/Overlay/OverlayTrigger.d.ts +3 -0
- package/esm/Overlay/OverlayTrigger.js +5 -0
- package/esm/Picker/PickerToggle.js +2 -1
- package/esm/Picker/usePickerRef.d.ts +17 -0
- package/esm/Picker/usePickerRef.js +77 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +1 -0
- package/esm/locales/index.d.ts +2 -2
- package/esm/useMediaQuery/useMediaQuery.js +2 -2
- package/esm/utils/index.d.ts +2 -0
- package/esm/utils/index.js +3 -1
- package/esm/utils/useCustom.js +2 -2
- package/esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
- package/esm/utils/useIsomorphicLayoutEffect.js +4 -0
- package/package.json +1 -1
- package/styles/color-modes/dark.less +1 -0
- package/styles/color-modes/high-contrast.less +1 -0
- package/styles/color-modes/light.less +1 -0
- package/styles/normalize.less +230 -231
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
-
import React, { useState,
|
|
4
|
+
import React, { useState, useRef, useMemo } from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
5
6
|
import Input from '../Input';
|
|
6
|
-
import { mergeRefs, useCustom, useControlled,
|
|
7
|
-
import { getInputSelectedState, validateDateTime,
|
|
7
|
+
import { mergeRefs, useCustom, useControlled, useEventCallback } from '../utils';
|
|
8
|
+
import { getInputSelectedState, validateDateTime, isFieldFullValue, useInputSelection } from './utils';
|
|
8
9
|
import useDateInputState from './useDateInputState';
|
|
9
|
-
|
|
10
|
+
import useKeyboardInputEvent from './useKeyboardInputEvent';
|
|
11
|
+
import useIsFocused from './useIsFocused';
|
|
10
12
|
/**
|
|
11
13
|
* The DateInput component lets users select a date with the keyboard.
|
|
12
14
|
* @version 5.58.0
|
|
@@ -17,9 +19,12 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
17
19
|
formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
|
|
18
20
|
valueProp = props.value,
|
|
19
21
|
defaultValue = props.defaultValue,
|
|
22
|
+
placeholder = props.placeholder,
|
|
20
23
|
onChange = props.onChange,
|
|
21
24
|
onKeyDown = props.onKeyDown,
|
|
22
|
-
|
|
25
|
+
onBlur = props.onBlur,
|
|
26
|
+
onFocus = props.onFocus,
|
|
27
|
+
rest = _objectWithoutPropertiesLoose(props, ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
|
|
23
28
|
var inputRef = useRef();
|
|
24
29
|
var _useState = useState({
|
|
25
30
|
selectedPattern: 'y',
|
|
@@ -30,14 +35,14 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
30
35
|
setSelectedState = _useState[1];
|
|
31
36
|
var _useCustom = useCustom('Calendar'),
|
|
32
37
|
locale = _useCustom.locale;
|
|
33
|
-
var
|
|
38
|
+
var dateLocale = locale.dateLocale;
|
|
34
39
|
var _useControlled = useControlled(valueProp, defaultValue),
|
|
35
40
|
value = _useControlled[0],
|
|
36
41
|
setValue = _useControlled[1],
|
|
37
42
|
isControlled = _useControlled[2];
|
|
38
43
|
var _useDateInputState = useDateInputState({
|
|
39
44
|
formatStr: formatStr,
|
|
40
|
-
|
|
45
|
+
locale: dateLocale,
|
|
41
46
|
date: value,
|
|
42
47
|
isControlledDate: isControlled
|
|
43
48
|
}),
|
|
@@ -45,49 +50,36 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
45
50
|
setDateOffset = _useDateInputState.setDateOffset,
|
|
46
51
|
setDateField = _useDateInputState.setDateField,
|
|
47
52
|
getDateField = _useDateInputState.getDateField,
|
|
48
|
-
toDateString = _useDateInputState.toDateString
|
|
53
|
+
toDateString = _useDateInputState.toDateString,
|
|
54
|
+
isEmptyValue = _useDateInputState.isEmptyValue;
|
|
49
55
|
var dateString = toDateString();
|
|
50
56
|
var keyPressOptions = useMemo(function () {
|
|
51
57
|
return {
|
|
52
58
|
formatStr: formatStr,
|
|
53
|
-
localize: localize,
|
|
59
|
+
localize: dateLocale.localize,
|
|
54
60
|
selectedMonth: dateField.month,
|
|
55
61
|
dateString: dateString
|
|
56
62
|
};
|
|
57
|
-
}, [dateField, dateString, formatStr,
|
|
58
|
-
var
|
|
59
|
-
if (selectionStart === void 0) {
|
|
60
|
-
selectionStart = selectedState.selectionStart;
|
|
61
|
-
}
|
|
62
|
-
if (selectionEnd === void 0) {
|
|
63
|
-
selectionEnd = selectedState.selectionEnd;
|
|
64
|
-
}
|
|
65
|
-
var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
|
|
66
|
-
if (isTestEnvironment) {
|
|
67
|
-
safeSetSelection(input, selectionStart, selectionEnd);
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
requestAnimationFrame(function () {
|
|
71
|
-
safeSetSelection(input, selectionStart, selectionEnd);
|
|
72
|
-
});
|
|
73
|
-
}, [selectedState]);
|
|
74
|
-
var handleChange = useCallback(function (value, event) {
|
|
75
|
-
setValue(value);
|
|
63
|
+
}, [dateField, dateString, formatStr, dateLocale]);
|
|
64
|
+
var handleChange = useEventCallback(function (value, event) {
|
|
76
65
|
onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
setValue(value);
|
|
67
|
+
});
|
|
68
|
+
var setSelectionRange = useInputSelection(inputRef);
|
|
69
|
+
var onSegmentChange = useEventCallback(function (event, nextDirection) {
|
|
79
70
|
var input = event.target;
|
|
80
|
-
var
|
|
71
|
+
var key = event.key;
|
|
72
|
+
var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
|
|
81
73
|
var state = getInputSelectedState(_extends({}, keyPressOptions, {
|
|
82
74
|
input: input,
|
|
83
75
|
direction: direction
|
|
84
76
|
}));
|
|
85
77
|
setSelectionRange(state.selectionStart, state.selectionEnd);
|
|
86
78
|
setSelectedState(state);
|
|
87
|
-
}
|
|
88
|
-
var
|
|
89
|
-
var key = event.key;
|
|
79
|
+
});
|
|
80
|
+
var onSegmentValueChange = useEventCallback(function (event) {
|
|
90
81
|
var input = event.target;
|
|
82
|
+
var key = event.key;
|
|
91
83
|
var offset = key === 'ArrowUp' ? 1 : -1;
|
|
92
84
|
var state = getInputSelectedState(_extends({}, keyPressOptions, {
|
|
93
85
|
input: input,
|
|
@@ -98,31 +90,10 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
98
90
|
return handleChange(date, event);
|
|
99
91
|
});
|
|
100
92
|
setSelectionRange(state.selectionStart, state.selectionEnd);
|
|
101
|
-
}
|
|
102
|
-
var
|
|
103
|
-
var patternGroup = getPatternGroups(formatStr, pattern);
|
|
104
|
-
if (value.toString().length === patternGroup.length) {
|
|
105
|
-
return true;
|
|
106
|
-
}
|
|
107
|
-
switch (pattern) {
|
|
108
|
-
case 'M':
|
|
109
|
-
return parseInt(value + "0") > 12;
|
|
110
|
-
case 'd':
|
|
111
|
-
return parseInt(value + "0") > 31;
|
|
112
|
-
case 'H':
|
|
113
|
-
return parseInt(value + "0") > 23;
|
|
114
|
-
case 'h':
|
|
115
|
-
return parseInt(value + "0") > 12;
|
|
116
|
-
case 'm':
|
|
117
|
-
case 's':
|
|
118
|
-
return parseInt(value + "0") > 59;
|
|
119
|
-
default:
|
|
120
|
-
return false;
|
|
121
|
-
}
|
|
122
|
-
}, [formatStr]);
|
|
123
|
-
var handleChangeFieldValueWithNumericKeys = useCallback(function (event) {
|
|
124
|
-
var key = event.key;
|
|
93
|
+
});
|
|
94
|
+
var onSegmentValueChangeWithNumericKeys = useEventCallback(function (event) {
|
|
125
95
|
var input = event.target;
|
|
96
|
+
var key = event.key;
|
|
126
97
|
var pattern = selectedState.selectedPattern;
|
|
127
98
|
if (!pattern) {
|
|
128
99
|
return;
|
|
@@ -155,61 +126,72 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
155
126
|
setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
|
|
156
127
|
|
|
157
128
|
// If the field is full value, move the cursor to the next field
|
|
158
|
-
if (isFieldFullValue(newValue, pattern) && input.selectionEnd !== input.value.length) {
|
|
159
|
-
|
|
129
|
+
if (isFieldFullValue(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
|
|
130
|
+
onSegmentChange(event, 'right');
|
|
160
131
|
}
|
|
161
|
-
}
|
|
162
|
-
var
|
|
132
|
+
});
|
|
133
|
+
var onSegmentValueRemove = useEventCallback(function (event) {
|
|
134
|
+
var input = event.target;
|
|
163
135
|
if (selectedState.selectedPattern) {
|
|
136
|
+
var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
|
|
137
|
+
input: input,
|
|
138
|
+
valueOffset: null
|
|
139
|
+
}));
|
|
140
|
+
setSelectedState(nextState);
|
|
141
|
+
setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
|
|
164
142
|
setDateField(selectedState.selectedPattern, null, function (date) {
|
|
165
143
|
return handleChange(date, event);
|
|
166
144
|
});
|
|
167
|
-
setSelectionRange();
|
|
168
145
|
}
|
|
169
|
-
}
|
|
170
|
-
var
|
|
171
|
-
var _key$match;
|
|
172
|
-
var key = event.key;
|
|
173
|
-
switch (key) {
|
|
174
|
-
case 'ArrowRight':
|
|
175
|
-
case 'ArrowLeft':
|
|
176
|
-
handleChangeField(event);
|
|
177
|
-
event.preventDefault();
|
|
178
|
-
break;
|
|
179
|
-
case 'ArrowUp':
|
|
180
|
-
case 'ArrowDown':
|
|
181
|
-
handleChangeFieldValue(event);
|
|
182
|
-
event.preventDefault();
|
|
183
|
-
break;
|
|
184
|
-
case 'Backspace':
|
|
185
|
-
handleRemoveFieldValue(event);
|
|
186
|
-
event.preventDefault();
|
|
187
|
-
break;
|
|
188
|
-
case (_key$match = key.match(/\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:
|
|
189
|
-
handleChangeFieldValueWithNumericKeys(event);
|
|
190
|
-
event.preventDefault();
|
|
191
|
-
break;
|
|
192
|
-
}
|
|
193
|
-
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
194
|
-
};
|
|
195
|
-
var handleClick = useCallback(function (event) {
|
|
146
|
+
});
|
|
147
|
+
var handleClick = useEventCallback(function (event) {
|
|
196
148
|
var input = event.target;
|
|
197
149
|
var state = getInputSelectedState(_extends({}, keyPressOptions, {
|
|
198
150
|
input: input
|
|
199
151
|
}));
|
|
200
152
|
setSelectedState(state);
|
|
201
153
|
setSelectionRange(state.selectionStart, state.selectionEnd);
|
|
202
|
-
}
|
|
154
|
+
});
|
|
155
|
+
var onKeyboardInput = useKeyboardInputEvent({
|
|
156
|
+
onSegmentChange: onSegmentChange,
|
|
157
|
+
onSegmentValueChange: onSegmentValueChange,
|
|
158
|
+
onSegmentValueChangeWithNumericKeys: onSegmentValueChangeWithNumericKeys,
|
|
159
|
+
onSegmentValueRemove: onSegmentValueRemove,
|
|
160
|
+
onKeyDown: onKeyDown
|
|
161
|
+
});
|
|
162
|
+
var _useIsFocused = useIsFocused({
|
|
163
|
+
onBlur: onBlur,
|
|
164
|
+
onFocus: onFocus
|
|
165
|
+
}),
|
|
166
|
+
focused = _useIsFocused[0],
|
|
167
|
+
focusEventProps = _useIsFocused[1];
|
|
168
|
+
var renderedValue = useMemo(function () {
|
|
169
|
+
if (!isEmptyValue()) {
|
|
170
|
+
return dateString;
|
|
171
|
+
}
|
|
172
|
+
return !focused ? '' : dateString;
|
|
173
|
+
}, [dateString, focused, isEmptyValue]);
|
|
203
174
|
return /*#__PURE__*/React.createElement(Input, _extends({
|
|
204
|
-
inputMode:
|
|
175
|
+
inputMode: focused ? 'numeric' : 'text',
|
|
205
176
|
autoComplete: "off",
|
|
206
177
|
autoCorrect: "off",
|
|
207
178
|
spellCheck: false,
|
|
208
179
|
ref: mergeRefs(inputRef, ref),
|
|
209
|
-
onKeyDown:
|
|
180
|
+
onKeyDown: onKeyboardInput,
|
|
210
181
|
onClick: handleClick,
|
|
211
|
-
value:
|
|
212
|
-
|
|
182
|
+
value: renderedValue,
|
|
183
|
+
placeholder: placeholder || formatStr
|
|
184
|
+
}, focusEventProps, rest));
|
|
213
185
|
});
|
|
214
186
|
DateInput.displayName = 'DateInput';
|
|
187
|
+
DateInput.propTypes = {
|
|
188
|
+
defaultValue: PropTypes.instanceOf(Date),
|
|
189
|
+
format: PropTypes.string,
|
|
190
|
+
value: PropTypes.instanceOf(Date),
|
|
191
|
+
placeholder: PropTypes.string,
|
|
192
|
+
onChange: PropTypes.func,
|
|
193
|
+
onKeyDown: PropTypes.func,
|
|
194
|
+
onBlur: PropTypes.func,
|
|
195
|
+
onFocus: PropTypes.func
|
|
196
|
+
};
|
|
215
197
|
export default DateInput;
|
package/esm/DateInput/index.d.ts
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import DateInput from './DateInput';
|
|
2
|
+
export { useDateInputState } from './useDateInputState';
|
|
3
|
+
export { useKeyboardInputEvent } from './useKeyboardInputEvent';
|
|
4
|
+
export { useIsFocused } from './useIsFocused';
|
|
5
|
+
export * from './utils';
|
|
2
6
|
export type { DateInputProps } from './DateInput';
|
|
3
7
|
export default DateInput;
|
package/esm/DateInput/index.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import DateInput from './DateInput';
|
|
3
|
+
export { useDateInputState } from './useDateInputState';
|
|
4
|
+
export { useKeyboardInputEvent } from './useKeyboardInputEvent';
|
|
5
|
+
export { useIsFocused } from './useIsFocused';
|
|
6
|
+
export * from './utils';
|
|
3
7
|
export default DateInput;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
+
import { format } from '../utils/dateUtils';
|
|
1
2
|
import type { Locale } from 'date-fns';
|
|
2
3
|
interface DateInputState {
|
|
3
4
|
formatStr: string;
|
|
4
|
-
|
|
5
|
+
formatDate?: typeof format;
|
|
6
|
+
locale: Locale;
|
|
5
7
|
date?: Date | null;
|
|
6
8
|
isControlledDate?: boolean;
|
|
7
9
|
}
|
|
8
|
-
declare function useDateInputState({ formatStr,
|
|
10
|
+
export declare function useDateInputState({ formatStr, locale, date, isControlledDate }: DateInputState): {
|
|
9
11
|
dateField: {
|
|
10
12
|
year: any;
|
|
11
13
|
format: string;
|
|
@@ -18,7 +20,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
18
20
|
hour: number | null;
|
|
19
21
|
minute: number | null;
|
|
20
22
|
second: number | null;
|
|
21
|
-
meridian: "AM" | "PM" | null;
|
|
22
23
|
constructor: Function;
|
|
23
24
|
toString(): string;
|
|
24
25
|
toLocaleString(): string;
|
|
@@ -39,7 +40,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
39
40
|
hour: number | null;
|
|
40
41
|
minute: number | null;
|
|
41
42
|
second: number | null;
|
|
42
|
-
meridian: "AM" | "PM" | null;
|
|
43
43
|
constructor: Function;
|
|
44
44
|
toString(): string;
|
|
45
45
|
toLocaleString(): string;
|
|
@@ -60,7 +60,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
60
60
|
hour: number | null;
|
|
61
61
|
minute: number | null;
|
|
62
62
|
second: number | null;
|
|
63
|
-
meridian: "AM" | "PM" | null;
|
|
64
63
|
constructor: Function;
|
|
65
64
|
toString(): string;
|
|
66
65
|
toLocaleString(): string;
|
|
@@ -81,7 +80,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
81
80
|
day: number | null;
|
|
82
81
|
minute: number | null;
|
|
83
82
|
second: number | null;
|
|
84
|
-
meridian: "AM" | "PM" | null;
|
|
85
83
|
constructor: Function;
|
|
86
84
|
toString(): string;
|
|
87
85
|
toLocaleString(): string;
|
|
@@ -102,7 +100,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
102
100
|
day: number | null;
|
|
103
101
|
hour: number | null;
|
|
104
102
|
second: number | null;
|
|
105
|
-
meridian: "AM" | "PM" | null;
|
|
106
103
|
constructor: Function;
|
|
107
104
|
toString(): string;
|
|
108
105
|
toLocaleString(): string;
|
|
@@ -123,28 +120,6 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
123
120
|
day: number | null;
|
|
124
121
|
hour: number | null;
|
|
125
122
|
minute: number | null;
|
|
126
|
-
meridian: "AM" | "PM" | null;
|
|
127
|
-
constructor: Function;
|
|
128
|
-
toString(): string;
|
|
129
|
-
toLocaleString(): string;
|
|
130
|
-
valueOf(): Object;
|
|
131
|
-
hasOwnProperty(v: PropertyKey): boolean;
|
|
132
|
-
isPrototypeOf(v: Object): boolean;
|
|
133
|
-
propertyIsEnumerable(v: PropertyKey): boolean;
|
|
134
|
-
should: Chai.Assertion;
|
|
135
|
-
} | {
|
|
136
|
-
meridian: any;
|
|
137
|
-
format: string;
|
|
138
|
-
patternArray: {
|
|
139
|
-
pattern: string;
|
|
140
|
-
key: string;
|
|
141
|
-
}[];
|
|
142
|
-
year: number | null;
|
|
143
|
-
month: number | null;
|
|
144
|
-
day: number | null;
|
|
145
|
-
hour: number | null;
|
|
146
|
-
minute: number | null;
|
|
147
|
-
second: number | null;
|
|
148
123
|
constructor: Function;
|
|
149
124
|
toString(): string;
|
|
150
125
|
toLocaleString(): string;
|
|
@@ -154,12 +129,13 @@ declare function useDateInputState({ formatStr, localize, date, isControlledDate
|
|
|
154
129
|
propertyIsEnumerable(v: PropertyKey): boolean;
|
|
155
130
|
should: Chai.Assertion;
|
|
156
131
|
};
|
|
157
|
-
setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date) => void) | undefined) => void;
|
|
158
|
-
setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date) => void) | undefined) => void;
|
|
132
|
+
setDateOffset: (pattern: string, offset: number, callback?: ((newDate: Date | null) => void) | undefined) => void;
|
|
133
|
+
setDateField: (pattern: string, value: number | null, callback?: ((newDate: Date | null) => void) | undefined) => void;
|
|
159
134
|
getDateField: (pattern: string) => {
|
|
160
135
|
name: any;
|
|
161
136
|
value: any;
|
|
162
137
|
};
|
|
163
138
|
toDateString: () => string;
|
|
139
|
+
isEmptyValue: (type?: string | undefined, value?: number | null | undefined) => boolean | undefined;
|
|
164
140
|
};
|
|
165
141
|
export default useDateInputState;
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import {
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
3
|
import startCase from 'lodash/startCase';
|
|
4
|
-
import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth } from '../utils/dateUtils';
|
|
4
|
+
import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth, isValid } from '../utils/dateUtils';
|
|
5
5
|
import { useDateField, patternMap } from './DateField';
|
|
6
|
-
function useDateInputState(_ref) {
|
|
6
|
+
export function useDateInputState(_ref) {
|
|
7
7
|
var formatStr = _ref.formatStr,
|
|
8
|
-
|
|
8
|
+
locale = _ref.locale,
|
|
9
9
|
date = _ref.date,
|
|
10
10
|
isControlledDate = _ref.isControlledDate;
|
|
11
|
-
var _useDateField = useDateField(formatStr, localize, date),
|
|
11
|
+
var _useDateField = useDateField(formatStr, locale.localize, date),
|
|
12
12
|
dateField = _useDateField.dateField,
|
|
13
13
|
dispatch = _useDateField.dispatch,
|
|
14
14
|
toDateString = _useDateField.toDateString,
|
|
15
|
-
toDate = _useDateField.toDate
|
|
16
|
-
|
|
15
|
+
toDate = _useDateField.toDate,
|
|
16
|
+
isEmptyValue = _useDateField.isEmptyValue;
|
|
17
|
+
var setDateOffset = function setDateOffset(pattern, offset, callback) {
|
|
17
18
|
var currentDate = new Date();
|
|
18
19
|
var year = dateField.year || currentDate.getFullYear();
|
|
19
20
|
var month = dateField.month ? dateField.month - 1 : currentDate.getMonth();
|
|
@@ -56,8 +57,8 @@ function useDateInputState(_ref) {
|
|
|
56
57
|
value = addSeconds(new Date(year, month, day, hour, minute, second), offset).getSeconds();
|
|
57
58
|
break;
|
|
58
59
|
case 'a':
|
|
59
|
-
actionName = '
|
|
60
|
-
value =
|
|
60
|
+
actionName = 'setHour';
|
|
61
|
+
value = hour >= 12 ? hour - 12 : hour + 12;
|
|
61
62
|
break;
|
|
62
63
|
}
|
|
63
64
|
if (actionName && value) {
|
|
@@ -68,8 +69,8 @@ function useDateInputState(_ref) {
|
|
|
68
69
|
var field = patternMap[pattern];
|
|
69
70
|
callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
|
|
70
71
|
}
|
|
71
|
-
}
|
|
72
|
-
var setDateField =
|
|
72
|
+
};
|
|
73
|
+
var setDateField = function setDateField(pattern, value, callback) {
|
|
73
74
|
var field = patternMap[pattern];
|
|
74
75
|
var actionName = "set" + startCase(field);
|
|
75
76
|
dispatch({
|
|
@@ -77,23 +78,45 @@ function useDateInputState(_ref) {
|
|
|
77
78
|
value: value
|
|
78
79
|
});
|
|
79
80
|
callback === null || callback === void 0 ? void 0 : callback(toDate(field, value));
|
|
80
|
-
}
|
|
81
|
-
var getDateField =
|
|
81
|
+
};
|
|
82
|
+
var getDateField = function getDateField(pattern) {
|
|
82
83
|
var fieldName = patternMap[pattern];
|
|
83
84
|
return {
|
|
84
85
|
name: fieldName,
|
|
85
86
|
value: dateField[fieldName]
|
|
86
87
|
};
|
|
87
|
-
}
|
|
88
|
-
var toControlledDateString =
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
};
|
|
89
|
+
var toControlledDateString = function toControlledDateString() {
|
|
90
|
+
if (date && isValid(date)) {
|
|
91
|
+
return format(date, formatStr, {
|
|
92
|
+
locale: locale
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
// if date is not valid, return uncontrolled date string
|
|
96
|
+
return toDateString();
|
|
97
|
+
};
|
|
98
|
+
useEffect(function () {
|
|
99
|
+
if (isControlledDate) {
|
|
100
|
+
if (date && isValid(date)) {
|
|
101
|
+
dispatch({
|
|
102
|
+
type: 'setNewDate',
|
|
103
|
+
value: date
|
|
104
|
+
});
|
|
105
|
+
} else if (date === null) {
|
|
106
|
+
dispatch({
|
|
107
|
+
type: 'setNewDate',
|
|
108
|
+
value: null
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}, [date, dispatch, isControlledDate]);
|
|
91
113
|
return {
|
|
92
114
|
dateField: dateField,
|
|
93
115
|
setDateOffset: setDateOffset,
|
|
94
116
|
setDateField: setDateField,
|
|
95
117
|
getDateField: getDateField,
|
|
96
|
-
toDateString: isControlledDate ? toControlledDateString : toDateString
|
|
118
|
+
toDateString: isControlledDate ? toControlledDateString : toDateString,
|
|
119
|
+
isEmptyValue: isEmptyValue
|
|
97
120
|
};
|
|
98
121
|
}
|
|
99
122
|
export default useDateInputState;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface FocusEventOptions {
|
|
3
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
4
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
5
|
+
}
|
|
6
|
+
export declare function useIsFocused({ onFocus: onFocusProp, onBlur: onBlurProp }: FocusEventOptions): [boolean, FocusEventOptions];
|
|
7
|
+
export default useIsFocused;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useState, useCallback } from 'react';
|
|
3
|
+
export function useIsFocused(_ref) {
|
|
4
|
+
var onFocusProp = _ref.onFocus,
|
|
5
|
+
onBlurProp = _ref.onBlur;
|
|
6
|
+
var _useState = useState(false),
|
|
7
|
+
isFocused = _useState[0],
|
|
8
|
+
setIsFocused = _useState[1];
|
|
9
|
+
var onFocus = useCallback(function (event) {
|
|
10
|
+
setIsFocused(true);
|
|
11
|
+
onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
|
|
12
|
+
}, [onFocusProp]);
|
|
13
|
+
var onBlur = useCallback(function (event) {
|
|
14
|
+
setIsFocused(false);
|
|
15
|
+
onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
|
|
16
|
+
}, [onBlurProp]);
|
|
17
|
+
return [isFocused, {
|
|
18
|
+
onFocus: onFocus,
|
|
19
|
+
onBlur: onBlur
|
|
20
|
+
}];
|
|
21
|
+
}
|
|
22
|
+
export default useIsFocused;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface KeyboardEventOptions {
|
|
3
|
+
onSegmentChange?: (kevent: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
4
|
+
onSegmentValueChange?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
5
|
+
onSegmentValueChangeWithNumericKeys?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
6
|
+
onSegmentValueRemove?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
7
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare function useKeyboardInputEvent({ onSegmentChange, onSegmentValueChange, onSegmentValueChangeWithNumericKeys, onSegmentValueRemove, onKeyDown }: KeyboardEventOptions): (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
10
|
+
export default useKeyboardInputEvent;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
export function useKeyboardInputEvent(_ref) {
|
|
3
|
+
var onSegmentChange = _ref.onSegmentChange,
|
|
4
|
+
onSegmentValueChange = _ref.onSegmentValueChange,
|
|
5
|
+
onSegmentValueChangeWithNumericKeys = _ref.onSegmentValueChangeWithNumericKeys,
|
|
6
|
+
onSegmentValueRemove = _ref.onSegmentValueRemove,
|
|
7
|
+
onKeyDown = _ref.onKeyDown;
|
|
8
|
+
return function (event) {
|
|
9
|
+
var _key$match, _key$match2;
|
|
10
|
+
var key = event.key;
|
|
11
|
+
switch (key) {
|
|
12
|
+
case 'ArrowRight':
|
|
13
|
+
case 'ArrowLeft':
|
|
14
|
+
onSegmentChange === null || onSegmentChange === void 0 ? void 0 : onSegmentChange(event);
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
break;
|
|
17
|
+
case 'ArrowUp':
|
|
18
|
+
case 'ArrowDown':
|
|
19
|
+
onSegmentValueChange === null || onSegmentValueChange === void 0 ? void 0 : onSegmentValueChange(event);
|
|
20
|
+
event.preventDefault();
|
|
21
|
+
break;
|
|
22
|
+
case 'Backspace':
|
|
23
|
+
onSegmentValueRemove === null || onSegmentValueRemove === void 0 ? void 0 : onSegmentValueRemove(event);
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
break;
|
|
26
|
+
case (_key$match = key.match(/\d/)) === null || _key$match === void 0 ? void 0 : _key$match.input:
|
|
27
|
+
// Allow numeric keys to be entered
|
|
28
|
+
onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 ? void 0 : onSegmentValueChangeWithNumericKeys(event);
|
|
29
|
+
event.preventDefault();
|
|
30
|
+
case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:
|
|
31
|
+
// Prevent letters from being entered
|
|
32
|
+
event.preventDefault();
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
35
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
export default useKeyboardInputEvent;
|
package/esm/DateInput/utils.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { type Locale } from 'date-fns';
|
|
2
3
|
interface SelectedStateOptions {
|
|
3
4
|
/**
|
|
@@ -24,13 +25,32 @@ interface SelectedStateOptions {
|
|
|
24
25
|
* The offset of the value, which is used to calculate the month.
|
|
25
26
|
* This value will be changed when pressing the up and down arrow keys.
|
|
26
27
|
*/
|
|
27
|
-
valueOffset?: number;
|
|
28
|
+
valueOffset?: number | null;
|
|
28
29
|
/**
|
|
29
30
|
* The date is rendered in string format according to format
|
|
30
31
|
*/
|
|
31
32
|
dateString: string;
|
|
32
33
|
}
|
|
33
34
|
export declare function getPatternGroups(format: string, pattern: string): string;
|
|
35
|
+
interface SelectIndexGapOptions {
|
|
36
|
+
pattern: string;
|
|
37
|
+
formatStr: string;
|
|
38
|
+
valueOffset: number | null;
|
|
39
|
+
selectedMonth: number | null;
|
|
40
|
+
localize: Locale['localize'];
|
|
41
|
+
}
|
|
42
|
+
export declare function getSelectIndexGap(options: SelectIndexGapOptions): number;
|
|
43
|
+
interface DatePatternOptions {
|
|
44
|
+
selectionIndex: number;
|
|
45
|
+
positionOffset?: number;
|
|
46
|
+
formatStr: string;
|
|
47
|
+
dateString: string;
|
|
48
|
+
valueOffset: number | null;
|
|
49
|
+
selectedMonth: number | null;
|
|
50
|
+
localize: Locale['localize'];
|
|
51
|
+
}
|
|
52
|
+
export declare function getDatePattern(options: DatePatternOptions): string;
|
|
53
|
+
export declare function isCursorAfterMonth(cursorIndex: number, formatStr: string): boolean;
|
|
34
54
|
export declare function getInputSelectedState(options: SelectedStateOptions): {
|
|
35
55
|
selectionStart: number;
|
|
36
56
|
selectionEnd: number;
|
|
@@ -38,4 +58,6 @@ export declare function getInputSelectedState(options: SelectedStateOptions): {
|
|
|
38
58
|
};
|
|
39
59
|
export declare function validateDateTime(type: string, value: number): boolean;
|
|
40
60
|
export declare function modifyDate(date: Date, type: string, value: number): Date;
|
|
61
|
+
export declare function isFieldFullValue(formatStr: string, value: number, pattern: string): boolean;
|
|
62
|
+
export declare function useInputSelection(input: React.RefObject<any>): (selectionStart: number, selectionEnd: number) => void;
|
|
41
63
|
export {};
|