Skip to content

Commit bf8d30e

Browse files
fix(carbon): fix time picker initial value
1 parent f698d5a commit bf8d30e

File tree

3 files changed

+97
-31
lines changed

3 files changed

+97
-31
lines changed

packages/carbon-component-mapper/src/tests/time-picker.test.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,38 @@ describe('TimePicker', () => {
207207
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(10);
208208
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
209209
});
210+
211+
it('handles initial value', async () => {
212+
const date = new Date().setHours(18, 57, 0, 0);
213+
schema = {
214+
fields: [
215+
{
216+
component: componentTypes.TIME_PICKER,
217+
name: 'time-picker',
218+
initialValue: date,
219+
twelveHoursFormat: true,
220+
timezones: [
221+
{ label: 'UTC', value: 'UTC' },
222+
{ label: 'EST', value: 'EAST' },
223+
],
224+
},
225+
],
226+
};
227+
228+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
229+
230+
expect(wrapper.find('input').props().value).toEqual(new Date().setHours(18, 57, 0, 0));
231+
232+
await act(async () => {
233+
wrapper.find('input').simulate('change', { target: { value: '00:35' } });
234+
});
235+
wrapper.update();
236+
237+
await act(async () => {
238+
wrapper.find('form').simulate('submit');
239+
});
240+
wrapper.update();
241+
242+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35' });
243+
});
210244
});

packages/carbon-component-mapper/src/time-picker-base/time-picker-base.js

Lines changed: 61 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import HelperTextBlock from '../helper-text-block/helper-text-block';
88
const TimePickerBase = ({
99
WrapperProps,
1010
input,
11+
initialLoad,
1112
enhnancedOnBlur,
1213
enhancedOnChange,
1314
finalValue,
@@ -19,42 +20,70 @@ const TimePickerBase = ({
1920
selectFormat,
2021
selectTimezone,
2122
...rest
22-
}) => (
23-
<div {...WrapperProps}>
24-
<CarbonTimePicker
25-
{...input}
26-
{...(enhnancedOnBlur && { onBlur: enhnancedOnBlur })}
27-
{...(enhancedOnChange && { onChange: (e) => enhancedOnChange(e.target.value) })}
28-
onBlur={enhnancedOnBlur}
29-
value={finalValue}
30-
key={input.name}
31-
id={input.name}
32-
invalid={Boolean(invalid)}
33-
invalidText={invalid || ''}
34-
{...rest}
35-
>
36-
{twelveHoursFormat && (
37-
<TimePickerSelect labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
38-
<SelectItem value="AM" text="AM" />
39-
<SelectItem value="PM" text="PM" />
40-
</TimePickerSelect>
41-
)}
42-
{timezones && (
43-
<TimePickerSelect labelText="Timezone" id={`${rest.id || input.name}-timezones`} onChange={({ target: { value } }) => selectTimezone(value)}>
44-
{timezones.map(({ showAs, ...tz }) => (
45-
<SelectItem key={tz.value} text={tz.label} {...tz} />
46-
))}
47-
</TimePickerSelect>
48-
)}
49-
</CarbonTimePicker>
50-
<HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
51-
</div>
52-
);
23+
}) => {
24+
let defaultFormat;
25+
if (initialLoad === false) {
26+
if (input.value) {
27+
const date = new Date(input.value);
28+
if (date.getHours() >= 12) {
29+
defaultFormat = 'PM';
30+
}
31+
}
32+
}
33+
34+
return (
35+
<div {...WrapperProps}>
36+
<CarbonTimePicker
37+
{...input}
38+
{...(enhnancedOnBlur && { onBlur: enhnancedOnBlur })}
39+
{...(enhancedOnChange && { onChange: (e) => enhancedOnChange(e.target.value) })}
40+
onBlur={enhnancedOnBlur}
41+
value={finalValue}
42+
key={input.name}
43+
id={input.name}
44+
invalid={Boolean(invalid)}
45+
invalidText={invalid || ''}
46+
{...rest}
47+
>
48+
{twelveHoursFormat && defaultFormat === 'PM' && (
49+
<TimePickerSelect
50+
labelText="Period"
51+
defaultValue={'PM'}
52+
id={`${rest.id || input.name}-12h`}
53+
onChange={({ target: { value } }) => selectFormat(value)}
54+
>
55+
<SelectItem value="AM" text="AM" />
56+
<SelectItem value="PM" text="PM" />
57+
</TimePickerSelect>
58+
)}
59+
{twelveHoursFormat && defaultFormat === undefined && (
60+
<TimePickerSelect labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
61+
<SelectItem value="AM" text="AM" />
62+
<SelectItem value="PM" text="PM" />
63+
</TimePickerSelect>
64+
)}
65+
{timezones && (
66+
<TimePickerSelect
67+
labelText="Timezone"
68+
id={`${rest.id || input.name}-timezones`}
69+
onChange={({ target: { value } }) => selectTimezone(value)}
70+
>
71+
{timezones.map(({ showAs, ...tz }) => (
72+
<SelectItem key={tz.value} text={tz.label} {...tz} />
73+
))}
74+
</TimePickerSelect>
75+
)}
76+
</CarbonTimePicker>
77+
<HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
78+
</div>
79+
);
80+
};
5381

5482
TimePickerBase.propTypes = {
5583
isDisabled: PropTypes.bool,
5684
isReadOnly: PropTypes.bool,
5785
isRequired: PropTypes.bool,
86+
initialLoad: PropTypes.bool,
5887
label: PropTypes.node,
5988
labelText: PropTypes.node,
6089
description: PropTypes.node,
@@ -69,6 +98,7 @@ TimePickerBase.propTypes = {
6998
WrapperProps: PropTypes.object,
7099
input: PropTypes.shape({
71100
name: PropTypes.string,
101+
value: PropTypes.oneOf(PropTypes.string, PropTypes.date),
72102
}).isRequired,
73103
enhnancedOnBlur: PropTypes.func,
74104
enhancedOnChange: PropTypes.func,

packages/carbon-component-mapper/src/time-picker-date/time-picker-date.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const TimePickerDate = (props) => {
6666
<TimePickerBase
6767
WrapperProps={WrapperProps}
6868
input={input}
69+
initialLoad={meta.touched}
6970
enhnancedOnBlur={enhnancedOnBlur}
7071
finalValue={finalValue}
7172
invalid={invalid}
@@ -84,6 +85,7 @@ TimePickerDate.propTypes = {
8485
isDisabled: PropTypes.bool,
8586
isReadOnly: PropTypes.bool,
8687
isRequired: PropTypes.bool,
88+
initialLoad: PropTypes.bool,
8789
label: PropTypes.node,
8890
labelText: PropTypes.node,
8991
description: PropTypes.node,

0 commit comments

Comments
 (0)