@festo-ui/react 6.0.0-dev.229 → 6.0.0-dev.232

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.
Files changed (7) hide show
  1. package/lib/forms/time-picker/TimePicker.d.ts +5 -0
  2. package/lib/forms/time-picker/TimePicker.js +3 -0
  3. package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts +5 -0
  4. package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js +36 -11
  5. package/node/lib/forms/time-picker/TimePicker.js +3 -0
  6. package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js +36 -11
  7. package/package.json +1 -1
package/lib/forms/time-picker/TimePicker.d.ts CHANGED
@@ -2,6 +2,11 @@ import React, { ComponentPropsWithoutRef } from 'react';
2
2
  export interface TimePickerOptions {
3
3
  timeFormat?: '12' | '24';
4
4
  showSeconds?: boolean;
5
+ minuteStepSize?: number;
6
+ range?: {
7
+ minValue: Date;
8
+ maxValue: Date;
9
+ };
5
10
  }
6
11
  export interface TimePickerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'> {
7
12
  error?: string;
package/lib/forms/time-picker/TimePicker.js CHANGED
@@ -65,6 +65,7 @@ export const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
65
65
  const [innerValue, setInnerValue] = useState(initialValue ?? new Date());
66
66
  useEffect(() => {
67
67
  if (value !== undefined) {
68
+ value.setMilliseconds(0);
68
69
  setInnerValue(value);
69
70
  }
70
71
  }, [value]);
@@ -145,6 +146,8 @@ export const TimePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
145
146
  onDateChange: handleDateChange,
146
147
  timeFormat: timeFormat,
147
148
  showSeconds: options?.showSeconds,
149
+ minuteStepSize: options?.minuteStepSize,
150
+ range: options?.range,
148
151
  date: innerValue,
149
152
  style: {
150
153
  ...styles.popper,
package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.d.ts CHANGED
@@ -5,6 +5,11 @@ interface TimePickerDropdownProps {
5
5
  date: Date;
6
6
  onDateChange: (date: Date) => void;
7
7
  showSeconds?: boolean;
8
+ minuteStepSize?: number;
9
+ range?: {
10
+ minValue: Date;
11
+ maxValue: Date;
12
+ };
8
13
  onClose: (date?: Date) => void;
9
14
  style?: React.CSSProperties;
10
15
  labelRef: RefObject<HTMLDivElement>;
package/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js CHANGED
@@ -12,6 +12,8 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
12
12
  date,
13
13
  onDateChange,
14
14
  showSeconds,
15
+ minuteStepSize,
16
+ range,
15
17
  onClose,
16
18
  style,
17
19
  labelRef
@@ -27,6 +29,12 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
27
29
  const min = 0;
28
30
  const hourMax = timeFormat === '12' ? 12 : 23;
29
31
  const minutesSecondsMax = 59;
32
+ let innerMinuteStepSize = 1;
33
+ if (minuteStepSize) {
34
+ if (minuteStepSize > 1 && minuteStepSize < 60) {
35
+ innerMinuteStepSize = Math.round(minuteStepSize);
36
+ }
37
+ }
30
38
  useEffect(() => {
31
39
  requestAnimationFrame(() => {
32
40
  hoursRef.current?.focus();
@@ -37,47 +45,64 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
37
45
  onClose(e.key === 'Enter' ? innerDate : undefined);
38
46
  }
39
47
  }
48
+ function limitRange(newDate) {
49
+ if (range) {
50
+ if (newDate > range.maxValue) {
51
+ return range.minValue;
52
+ }
53
+ if (newDate < range.minValue) {
54
+ return range.maxValue;
55
+ }
56
+ }
57
+ return newDate;
58
+ }
40
59
  function handleHourIncrement(increment) {
41
- const newDate = new Date(innerDate);
60
+ let newDate = new Date(innerDate);
42
61
  newDate.setHours(innerDate.getHours() + increment);
62
+ newDate = limitRange(newDate);
43
63
  setInnerDate(newDate);
44
64
  onDateChange(newDate);
45
65
  setTmpHours(null);
46
66
  }
47
67
  function handleHourChange(e) {
48
- const newDate = new Date(innerDate);
68
+ let newDate = new Date(innerDate);
49
69
  const hour = +e.target.value;
50
70
  newDate.setHours(Math.min(Math.max(hour, min), hourMax));
71
+ newDate = limitRange(newDate);
51
72
  setInnerDate(newDate);
52
- setTmpHours(e.target.value);
73
+ setTmpHours(newDate.getHours().toString());
53
74
  }
54
75
  function handleMinuteIncrement(increment) {
55
- const newDate = new Date(innerDate);
76
+ let newDate = new Date(innerDate);
56
77
  newDate.setMinutes(innerDate.getMinutes() + increment);
78
+ newDate = limitRange(newDate);
57
79
  setInnerDate(newDate);
58
80
  onDateChange(newDate);
59
81
  setTmpMinutes(null);
60
82
  }
61
83
  function handleMinuteChange(e) {
62
- const newDate = new Date(innerDate);
84
+ let newDate = new Date(innerDate);
63
85
  const minute = +e.target.value;
64
86
  newDate.setMinutes(Math.min(Math.max(minute, min), minutesSecondsMax));
87
+ newDate = limitRange(newDate);
65
88
  setInnerDate(newDate);
66
- setTmpMinutes(e.target.value);
89
+ setTmpMinutes(newDate.getMinutes().toString());
67
90
  }
68
91
  function handleSecondIncrement(increment) {
69
- const newDate = new Date(innerDate);
92
+ let newDate = new Date(innerDate);
70
93
  newDate.setSeconds(innerDate.getSeconds() + increment);
94
+ newDate = limitRange(newDate);
71
95
  setInnerDate(newDate);
72
96
  onDateChange(newDate);
73
97
  setTmpSeconds(null);
74
98
  }
75
99
  function handleSecondChange(e) {
76
- const newDate = new Date(innerDate);
100
+ let newDate = new Date(innerDate);
77
101
  const seconds = +e.target.value;
78
102
  newDate.setSeconds(Math.min(Math.max(seconds, min), minutesSecondsMax));
103
+ newDate = limitRange(newDate);
79
104
  setInnerDate(newDate);
80
- setTmpSeconds(e.target.value);
105
+ setTmpSeconds(newDate.getSeconds().toString());
81
106
  }
82
107
  const hours = timeFormat === '12' ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
83
108
  function toggleAmPm() {
@@ -141,7 +166,7 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
141
166
  children: [/*#__PURE__*/_jsx(LinkButton, {
142
167
  "aria-label": "minute up",
143
168
  className: "fwe-dark",
144
- onClick: () => handleMinuteIncrement(1),
169
+ onClick: () => handleMinuteIncrement(innerMinuteStepSize),
145
170
  icon: /*#__PURE__*/_jsx("i", {
146
171
  "aria-hidden": true,
147
172
  className: "fwe-icon fwe-icon-arrows-expand"
@@ -155,7 +180,7 @@ const TimePickerDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
155
180
  }), /*#__PURE__*/_jsx(LinkButton, {
156
181
  "aria-label": "minute down",
157
182
  className: "fwe-dark",
158
- onClick: () => handleMinuteIncrement(-1),
183
+ onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
159
184
  icon: /*#__PURE__*/_jsx("i", {
160
185
  "aria-hidden": true,
161
186
  className: "fwe-icon fwe-icon-arrows-collapse"
package/node/lib/forms/time-picker/TimePicker.js CHANGED
@@ -72,6 +72,7 @@ const TimePicker = exports.TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
72
72
  const [innerValue, setInnerValue] = (0, _react.useState)(initialValue ?? new Date());
73
73
  (0, _react.useEffect)(() => {
74
74
  if (value !== undefined) {
75
+ value.setMilliseconds(0);
75
76
  setInnerValue(value);
76
77
  }
77
78
  }, [value]);
@@ -152,6 +153,8 @@ const TimePicker = exports.TimePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
152
153
  onDateChange: handleDateChange,
153
154
  timeFormat: timeFormat,
154
155
  showSeconds: options?.showSeconds,
156
+ minuteStepSize: options?.minuteStepSize,
157
+ range: options?.range,
155
158
  date: innerValue,
156
159
  style: {
157
160
  ...styles.popper,
package/node/lib/forms/time-picker/time-picker-dropdown/TimePickerDropdown.js CHANGED
@@ -20,6 +20,8 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
20
20
  date,
21
21
  onDateChange,
22
22
  showSeconds,
23
+ minuteStepSize,
24
+ range,
23
25
  onClose,
24
26
  style,
25
27
  labelRef
@@ -35,6 +37,12 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
35
37
  const min = 0;
36
38
  const hourMax = timeFormat === '12' ? 12 : 23;
37
39
  const minutesSecondsMax = 59;
40
+ let innerMinuteStepSize = 1;
41
+ if (minuteStepSize) {
42
+ if (minuteStepSize > 1 && minuteStepSize < 60) {
43
+ innerMinuteStepSize = Math.round(minuteStepSize);
44
+ }
45
+ }
38
46
  (0, _react.useEffect)(() => {
39
47
  requestAnimationFrame(() => {
40
48
  hoursRef.current?.focus();
@@ -45,47 +53,64 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
45
53
  onClose(e.key === 'Enter' ? innerDate : undefined);
46
54
  }
47
55
  }
56
+ function limitRange(newDate) {
57
+ if (range) {
58
+ if (newDate > range.maxValue) {
59
+ return range.minValue;
60
+ }
61
+ if (newDate < range.minValue) {
62
+ return range.maxValue;
63
+ }
64
+ }
65
+ return newDate;
66
+ }
48
67
  function handleHourIncrement(increment) {
49
- const newDate = new Date(innerDate);
68
+ let newDate = new Date(innerDate);
50
69
  newDate.setHours(innerDate.getHours() + increment);
70
+ newDate = limitRange(newDate);
51
71
  setInnerDate(newDate);
52
72
  onDateChange(newDate);
53
73
  setTmpHours(null);
54
74
  }
55
75
  function handleHourChange(e) {
56
- const newDate = new Date(innerDate);
76
+ let newDate = new Date(innerDate);
57
77
  const hour = +e.target.value;
58
78
  newDate.setHours(Math.min(Math.max(hour, min), hourMax));
79
+ newDate = limitRange(newDate);
59
80
  setInnerDate(newDate);
60
- setTmpHours(e.target.value);
81
+ setTmpHours(newDate.getHours().toString());
61
82
  }
62
83
  function handleMinuteIncrement(increment) {
63
- const newDate = new Date(innerDate);
84
+ let newDate = new Date(innerDate);
64
85
  newDate.setMinutes(innerDate.getMinutes() + increment);
86
+ newDate = limitRange(newDate);
65
87
  setInnerDate(newDate);
66
88
  onDateChange(newDate);
67
89
  setTmpMinutes(null);
68
90
  }
69
91
  function handleMinuteChange(e) {
70
- const newDate = new Date(innerDate);
92
+ let newDate = new Date(innerDate);
71
93
  const minute = +e.target.value;
72
94
  newDate.setMinutes(Math.min(Math.max(minute, min), minutesSecondsMax));
95
+ newDate = limitRange(newDate);
73
96
  setInnerDate(newDate);
74
- setTmpMinutes(e.target.value);
97
+ setTmpMinutes(newDate.getMinutes().toString());
75
98
  }
76
99
  function handleSecondIncrement(increment) {
77
- const newDate = new Date(innerDate);
100
+ let newDate = new Date(innerDate);
78
101
  newDate.setSeconds(innerDate.getSeconds() + increment);
102
+ newDate = limitRange(newDate);
79
103
  setInnerDate(newDate);
80
104
  onDateChange(newDate);
81
105
  setTmpSeconds(null);
82
106
  }
83
107
  function handleSecondChange(e) {
84
- const newDate = new Date(innerDate);
108
+ let newDate = new Date(innerDate);
85
109
  const seconds = +e.target.value;
86
110
  newDate.setSeconds(Math.min(Math.max(seconds, min), minutesSecondsMax));
111
+ newDate = limitRange(newDate);
87
112
  setInnerDate(newDate);
88
- setTmpSeconds(e.target.value);
113
+ setTmpSeconds(newDate.getSeconds().toString());
89
114
  }
90
115
  const hours = timeFormat === '12' ? (innerDate.getHours() + 11) % 12 + 1 : innerDate.getHours();
91
116
  function toggleAmPm() {
@@ -149,7 +174,7 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
149
174
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
150
175
  "aria-label": "minute up",
151
176
  className: "fwe-dark",
152
- onClick: () => handleMinuteIncrement(1),
177
+ onClick: () => handleMinuteIncrement(innerMinuteStepSize),
153
178
  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
154
179
  "aria-hidden": true,
155
180
  className: "fwe-icon fwe-icon-arrows-expand"
@@ -163,7 +188,7 @@ const TimePickerDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
163
188
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkButton.default, {
164
189
  "aria-label": "minute down",
165
190
  className: "fwe-dark",
166
- onClick: () => handleMinuteIncrement(-1),
191
+ onClick: () => handleMinuteIncrement(-innerMinuteStepSize),
167
192
  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
168
193
  "aria-hidden": true,
169
194
  className: "fwe-icon fwe-icon-arrows-collapse"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/react",
3
- "version": "6.0.0-dev.229",
3
+ "version": "6.0.0-dev.232",
4
4
  "author": "Festo UI (styleguide@festo.com)",
5
5
  "license": "apache-2.0",
6
6
  "exports": {