fix(carbon): fix initial value for date timepicker

Author: rvsia

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

@@ -193,7 +193,7 @@ describe('TimePicker<String>', () => {
     onSubmit.mockReset();
 
     await act(async () => {
-      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
+      wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'UTC' } });
     });
     wrapper.update();
 
@@ -203,7 +203,7 @@ describe('TimePicker<String>', () => {
     wrapper.update();
 
     expect(wrapper.find('input').props().value).toEqual('00:35');
-    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 UTC EST' });
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 AM UTC' });
   });
 
   it('handles initial value', async () => {

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

@@ -194,7 +194,7 @@ describe('TimePicker', () => {
     onSubmit.mockReset();
 
     await act(async () => {
-      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
+      wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'UTC' } });
     });
     wrapper.update();
 
@@ -203,8 +203,47 @@ describe('TimePicker', () => {
     });
     wrapper.update();
 
-    expect(wrapper.find('input').props().value).toEqual('10:35');
-    expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(10);
+    expect(wrapper.find('input').props().value).toEqual('05:35');
+    expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(5);
     expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
   });
+
+  it('handles initial value', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+          initialValue: new Date('December 17, 1995 16:00:00'),
+          twelveHoursFormat: true,
+        },
+      ],
+    };
+
+    await act(async () => {
+      wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('04:00');
+    expect(wrapper.find('select').props().defaultValue).toEqual('PM');
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '03:00' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('input').simulate('blur');
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(15);
+    expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(0);
+  });
 });

packages/carbon-component-mapper/src/time-picker-base/time-picker-base.d.ts

@@ -20,6 +20,8 @@ interface InternalTimePickerBaseProps extends CarbonTimePickerProps, AnyObject {
     warnText?: ReactNode;
     selectFormat: (value: 'AM' | 'PM') => void;
     selectTimezone: (value: string) => void;
+    format?: 'AM' | 'PM';
+    defaultTimezone?: string;
 }
 
 export type TimePickerBaseProps = InternalTimePickerBaseProps & FormGroupProps;

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

@@ -18,6 +18,8 @@ const TimePickerBase = ({
   warnText,
   selectFormat,
   selectTimezone,
+  format,
+  timezone,
   ...rest
 }) => (
   <div {...WrapperProps}>
@@ -34,13 +36,23 @@ const TimePickerBase = ({
       {...rest}
     >
       {twelveHoursFormat && (
-        <TimePickerSelect labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
+        <TimePickerSelect
+          defaultValue={format}
+          labelText="Period"
+          id={`${rest.id || input.name}-12h`}
+          onChange={({ target: { value } }) => selectFormat(value)}
+        >
           <SelectItem value="AM" text="AM" />
           <SelectItem value="PM" text="PM" />
         </TimePickerSelect>
       )}
       {timezones && (
-        <TimePickerSelect labelText="Timezone" id={`${rest.id || input.name}-timezones`} onChange={({ target: { value } }) => selectTimezone(value)}>
+        <TimePickerSelect
+          defaultValue={timezone}
+          labelText="Timezone"
+          id={`${rest.id || input.name}-timezones`}
+          onChange={({ target: { value } }) => selectTimezone(value)}
+        >
           {timezones.map(({ showAs, ...tz }) => (
             <SelectItem key={tz.value} text={tz.label} {...tz} />
           ))}
@@ -78,6 +90,8 @@ TimePickerBase.propTypes = {
   warnText: PropTypes.node,
   selectFormat: PropTypes.func.isRequired,
   selectTimezone: PropTypes.func.isRequired,
+  format: PropTypes.oneOf(['AM', 'PM']),
+  timezone: PropTypes.string,
 };
 
 export default TimePickerBase;

packages/carbon-component-mapper/src/time-picker-date/time-picker-date.d.ts

@@ -12,6 +12,7 @@ export interface Timezone extends SelectItemProps {
 interface InternalTimePickerProps extends CarbonTimePickerProps {
     twelveHoursFormat?: boolean;
     timezones?: Timezone[];
+    defaultTimezone?: string;
 }
 
 export type TimePickerDateProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;

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

@@ -6,10 +6,12 @@ import prepareProps from '../prepare-props';
 import TimePickerBase from '../time-picker-base';
 
 const TimePickerDate = (props) => {
-  const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, WrapperProps, defaultTimezone, ...rest } = useFieldApi(
+    prepareProps(props)
+  );
 
-  const [timezone, selectTimezone] = useState(timezones ? timezones[0]?.value : '');
-  const [format, selectFormat] = useState('AM');
+  const [timezone, selectTimezone] = useState(defaultTimezone || timezones ? timezones[0]?.value : '');
+  const [format, selectFormat] = useState(() => (input.value?.getHours?.() >= 12 ? 'PM' : 'AM'));
   const isMounted = useRef(false);
 
   const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
@@ -75,6 +77,8 @@ const TimePickerDate = (props) => {
       warnText={warnText}
       selectFormat={selectFormat}
       selectTimezone={selectTimezone}
+      format={format}
+      timezone={timezone}
       {...rest}
     />
   );
@@ -96,6 +100,7 @@ TimePickerDate.propTypes = {
     })
   ),
   WrapperProps: PropTypes.object,
+  defaultTimezone: PropTypes.string,
 };
 
 export default TimePickerDate;

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

@@ -42,6 +42,8 @@ const TimePickerString = (props) => {
       warnText={warnText}
       selectFormat={selectFormat}
       selectTimezone={selectTimezone}
+      format={format}
+      timezone={timezone}
       {...rest}
     />
   );

packages/react-renderer-demo/src/doc-components/examples-texts/carbon/time-picker.md

@@ -4,6 +4,7 @@ This component also accepts all other original props, please see [here](https://
 
 |Props|Description|default|
 |-----|-----------|-------|
+|defaultTimezone|string - a value of default timezone, use only in Date varian|undefined|
 |useStringFormat|boolean - save value as string|false|
 |twelveHoursFormat|boolean - if true an AM/PM selector is shown|false|
 |timezones|array of timezones - if not empty, an timezone selector is shown|undefined|