carbon-react 147.9.0 → 147.9.1

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 (5) hide show
  1. package/esm/components/time/time.component.d.ts +3 -1
  2. package/esm/components/time/time.component.js +26 -4
  3. package/lib/components/time/time.component.d.ts +3 -1
  4. package/lib/components/time/time.component.js +26 -4
  5. package/package.json +1 -1
package/esm/components/time/time.component.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare type TimeValue = {
9
9
  hours: string;
10
10
  minutes: string;
11
11
  period?: ToggleValue;
12
+ formattedHours?: string;
13
+ formattedMinutes?: string;
12
14
  };
13
15
  export interface TimeInputEvent {
14
16
  target: {
@@ -55,7 +57,7 @@ export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps
55
57
  /** Set a name value on the component */
56
58
  name?: string;
57
59
  /** Callback called when focus is lost on input elements */
58
- onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
60
+ onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
59
61
  /** Flag to configure component as mandatory */
60
62
  required?: boolean;
61
63
  /** Flag to configure component as optional */
package/esm/components/time/time.component.js CHANGED
@@ -55,7 +55,10 @@ const Time = /*#__PURE__*/React.forwardRef(({
55
55
  minutes: minuteValue,
56
56
  period: toggleValue
57
57
  } = value;
58
+ const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
59
+ const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
58
60
  const [inputValues, setInputValues] = useState([hourValue, minuteValue]);
61
+ const [formattedInputValues, setFormattedInputValues] = useState([formattedHoursValue, formattedMinutesValue]);
59
62
  const locale = useLocale();
60
63
  const showToggle = toggleValue !== undefined;
61
64
  const [period, setPeriod] = useState(toggleValue);
@@ -104,6 +107,9 @@ const Time = /*#__PURE__*/React.forwardRef(({
104
107
  const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
105
108
  const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
106
109
  setInputValues([hours, minutes]);
110
+ const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
111
+ const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
112
+ setFormattedInputValues([formattedHours, formattedMinutes]);
107
113
  onChange({
108
114
  target: {
109
115
  name,
@@ -111,13 +117,16 @@ const Time = /*#__PURE__*/React.forwardRef(({
111
117
  value: {
112
118
  hours,
113
119
  minutes,
114
- period
120
+ period,
121
+ formattedHours,
122
+ formattedMinutes
115
123
  }
116
124
  }
117
125
  });
118
126
  };
119
127
  const handlePeriodChange = periodName => {
120
128
  const [hours, minutes] = inputValues;
129
+ const [formattedHours, formattedMinutes] = formattedInputValues;
121
130
  setPeriod(periodName);
122
131
  onChange({
123
132
  target: {
@@ -126,18 +135,29 @@ const Time = /*#__PURE__*/React.forwardRef(({
126
135
  value: {
127
136
  hours,
128
137
  minutes,
129
- period: periodName
138
+ period: periodName,
139
+ formattedHours,
140
+ formattedMinutes
130
141
  }
131
142
  }
132
143
  });
133
144
  };
134
145
  const handleBlur = useCallback(ev => {
135
146
  setTimeout(() => {
147
+ const [hours, minutes] = inputValues;
148
+ const [formattedHours, formattedMinutes] = formattedInputValues;
149
+ const timeValueObj = {
150
+ hours,
151
+ minutes,
152
+ period,
153
+ formattedHours,
154
+ formattedMinutes
155
+ };
136
156
  if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
137
- onBlur?.(ev);
157
+ onBlur?.(ev, timeValueObj);
138
158
  }
139
159
  });
140
- }, [onBlur]);
160
+ }, [formattedInputValues, inputValues, onBlur, period]);
141
161
  return /*#__PURE__*/React.createElement(Fieldset, _extends({
142
162
  legend: label,
143
163
  legendMargin: {
@@ -429,6 +449,8 @@ if (process.env.NODE_ENV !== "production") {
429
449
  })
430
450
  }),
431
451
  "value": PropTypes.shape({
452
+ "formattedHours": PropTypes.string,
453
+ "formattedMinutes": PropTypes.string,
432
454
  "hours": PropTypes.string.isRequired,
433
455
  "minutes": PropTypes.string.isRequired,
434
456
  "period": PropTypes.oneOf(["AM", "PM"])
package/lib/components/time/time.component.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare type TimeValue = {
9
9
  hours: string;
10
10
  minutes: string;
11
11
  period?: ToggleValue;
12
+ formattedHours?: string;
13
+ formattedMinutes?: string;
12
14
  };
13
15
  export interface TimeInputEvent {
14
16
  target: {
@@ -55,7 +57,7 @@ export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps
55
57
  /** Set a name value on the component */
56
58
  name?: string;
57
59
  /** Callback called when focus is lost on input elements */
58
- onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
60
+ onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
59
61
  /** Flag to configure component as mandatory */
60
62
  required?: boolean;
61
63
  /** Flag to configure component as optional */
package/lib/components/time/time.component.js CHANGED
@@ -64,7 +64,10 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
64
64
  minutes: minuteValue,
65
65
  period: toggleValue
66
66
  } = value;
67
+ const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
68
+ const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
67
69
  const [inputValues, setInputValues] = (0, _react.useState)([hourValue, minuteValue]);
70
+ const [formattedInputValues, setFormattedInputValues] = (0, _react.useState)([formattedHoursValue, formattedMinutesValue]);
68
71
  const locale = (0, _useLocale.default)();
69
72
  const showToggle = toggleValue !== undefined;
70
73
  const [period, setPeriod] = (0, _react.useState)(toggleValue);
@@ -113,6 +116,9 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
113
116
  const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
114
117
  const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
115
118
  setInputValues([hours, minutes]);
119
+ const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
120
+ const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
121
+ setFormattedInputValues([formattedHours, formattedMinutes]);
116
122
  onChange({
117
123
  target: {
118
124
  name,
@@ -120,13 +126,16 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
120
126
  value: {
121
127
  hours,
122
128
  minutes,
123
- period
129
+ period,
130
+ formattedHours,
131
+ formattedMinutes
124
132
  }
125
133
  }
126
134
  });
127
135
  };
128
136
  const handlePeriodChange = periodName => {
129
137
  const [hours, minutes] = inputValues;
138
+ const [formattedHours, formattedMinutes] = formattedInputValues;
130
139
  setPeriod(periodName);
131
140
  onChange({
132
141
  target: {
@@ -135,18 +144,29 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
135
144
  value: {
136
145
  hours,
137
146
  minutes,
138
- period: periodName
147
+ period: periodName,
148
+ formattedHours,
149
+ formattedMinutes
139
150
  }
140
151
  }
141
152
  });
142
153
  };
143
154
  const handleBlur = (0, _react.useCallback)(ev => {
144
155
  setTimeout(() => {
156
+ const [hours, minutes] = inputValues;
157
+ const [formattedHours, formattedMinutes] = formattedInputValues;
158
+ const timeValueObj = {
159
+ hours,
160
+ minutes,
161
+ period,
162
+ formattedHours,
163
+ formattedMinutes
164
+ };
145
165
  if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
146
- onBlur?.(ev);
166
+ onBlur?.(ev, timeValueObj);
147
167
  }
148
168
  });
149
- }, [onBlur]);
169
+ }, [formattedInputValues, inputValues, onBlur, period]);
150
170
  return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
151
171
  legend: label,
152
172
  legendMargin: {
@@ -438,6 +458,8 @@ if (process.env.NODE_ENV !== "production") {
438
458
  })
439
459
  }),
440
460
  "value": _propTypes.default.shape({
461
+ "formattedHours": _propTypes.default.string,
462
+ "formattedMinutes": _propTypes.default.string,
441
463
  "hours": _propTypes.default.string.isRequired,
442
464
  "minutes": _propTypes.default.string.isRequired,
443
465
  "period": _propTypes.default.oneOf(["AM", "PM"])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "147.9.0",
3
+ "version": "147.9.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",