Skip to content

Commit 6abea25

Browse files
GilbertCherrieGilbertCherrie
committed
Test changes
1 parent 7469eef commit 6abea25

File tree

4 files changed

+40
-64
lines changed

4 files changed

+40
-64
lines changed

‎packages/carbon-component-mapper/demo/demo-schemas/sandbox.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,12 +453,14 @@ const output = {
453453
name: 'date_time_control_1',
454454
label: 'Timepicker',
455455
title: 'Timepicker',
456+
twelveHoursFormat: true,
456457
component: components.TIME_PICKER
457458
},
458459
{
459460
name: 'date_time_control_2',
460461
label: 'Timepicker with past days',
461462
title: 'Timepicker with past days',
463+
twelveHoursFormat: true,
462464
component: components.TIME_PICKER
463465
}
464466
],

‎packages/carbon-component-mapper/demo/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ class App extends React.Component {
2626
}
2727

2828
render() {
29+
const date = new Date();
30+
date.setHours(18);
31+
const date2 = new Date();
32+
date2.setHours(0,0,0,0);
2933
return (
3034
<div style={{ widht: '100%' }}>
3135
<div style={{ maxWidth: 800, marginLeft: 'auto', marginRight: 'auto' }}>
@@ -37,7 +41,7 @@ class App extends React.Component {
3741
Wizard
3842
</Button>
3943
<Button onClick={() => this.setState((state) => fieldArrayState)}>arraySchema</Button>
40-
<Button onClick={() => this.setState((state) => ({ schema: sandboxSchema, additionalOptions: {} }))}>Sandbox</Button>
44+
<Button onClick={() => this.setState((state) => ({ schema: sandboxSchema, additionalOptions: { initialValues: { date_time_control_1: date, date_time_control_2: date2} } }))}>Sandbox</Button>
4145
<Button onClick={() => this.setState((state) => ({ schema: demoSchema, additionalOptions: {} }))}>Super schema</Button>
4246
</div>
4347
<FormRenderer

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

Lines changed: 31 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import HelperTextBlock from '../helper-text-block/helper-text-block';
88
const TimePickerBase = ({
99
WrapperProps,
1010
input,
11-
initialLoad,
11+
format,
1212
enhnancedOnBlur,
1313
enhancedOnChange,
1414
finalValue,
@@ -20,70 +20,43 @@ const TimePickerBase = ({
2020
selectFormat,
2121
selectTimezone,
2222
...rest
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 (
23+
}) => (
3524
<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>
25+
<CarbonTimePicker
26+
{...input}
27+
{...(enhnancedOnBlur && { onBlur: enhnancedOnBlur })}
28+
{...(enhancedOnChange && { onChange: (e) => enhancedOnChange(e.target.value) })}
29+
onBlur={enhnancedOnBlur}
30+
value={finalValue}
31+
key={input.name}
32+
id={input.name}
33+
invalid={Boolean(invalid)}
34+
invalidText={invalid || ''}
35+
{...rest}
36+
>
37+
{twelveHoursFormat && (
38+
<TimePickerSelect defaultValue={format} labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
39+
<SelectItem value="AM" text="AM" />
40+
<SelectItem value="PM" text="PM" />
41+
</TimePickerSelect>
42+
)}
43+
{timezones && (
44+
<TimePickerSelect labelText="Timezone" id={`${rest.id || input.name}-timezones`} onChange={({ target: { value } }) => selectTimezone(value)}>
45+
{timezones.map(({ showAs, ...tz }) => (
46+
<SelectItem key={tz.value} text={tz.label} {...tz} />
47+
))}
48+
</TimePickerSelect>
49+
)}
50+
</CarbonTimePicker>
51+
<HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
52+
</div>
7953
);
80-
};
54+
8155

8256
TimePickerBase.propTypes = {
8357
isDisabled: PropTypes.bool,
8458
isReadOnly: PropTypes.bool,
8559
isRequired: PropTypes.bool,
86-
initialLoad: PropTypes.bool,
8760
label: PropTypes.node,
8861
labelText: PropTypes.node,
8962
description: PropTypes.node,
@@ -98,7 +71,6 @@ TimePickerBase.propTypes = {
9871
WrapperProps: PropTypes.object,
9972
input: PropTypes.shape({
10073
name: PropTypes.string,
101-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.date]),
10274
}).isRequired,
10375
enhnancedOnBlur: PropTypes.func,
10476
enhancedOnChange: PropTypes.func,

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import TimePickerBase from '../time-picker-base';
77

88
const TimePickerDate = (props) => {
99
const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
10-
1110
const [timezone, selectTimezone] = useState(timezones ? timezones[0]?.value : '');
12-
const [format, selectFormat] = useState('AM');
11+
const [format, selectFormat] = useState(() => input.value?.getHours?.() >= 12 ? "PM" : "AM");
1312
const isMounted = useRef(false);
1413

1514
const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
@@ -66,7 +65,7 @@ const TimePickerDate = (props) => {
6665
<TimePickerBase
6766
WrapperProps={WrapperProps}
6867
input={input}
69-
initialLoad={meta.touched}
68+
format={format}
7069
enhnancedOnBlur={enhnancedOnBlur}
7170
finalValue={finalValue}
7271
invalid={invalid}
@@ -85,7 +84,6 @@ TimePickerDate.propTypes = {
8584
isDisabled: PropTypes.bool,
8685
isReadOnly: PropTypes.bool,
8786
isRequired: PropTypes.bool,
88-
initialLoad: PropTypes.bool,
8987
label: PropTypes.node,
9088
labelText: PropTypes.node,
9189
description: PropTypes.node,

0 commit comments

Comments
 (0)