feat(carbon): add AM/PM, timezones into carbon timepicker

Author: rvsia

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
@@ -9,19 +9,79 @@ import prepareProps from '../common/prepare-props';
 const TimePicker = (props) => {
   const { input, meta, twelveHoursFormat, timezones, validateOnMount, ...rest } = useFieldApi(prepareProps(props));
 
+  const [timezone, selectTimezone] = useState(timezones ? timezones[0]?.value : '');
+  const [format, selectFormat] = useState('AM');
+  const isMounted = useRef(false);
+
   const invalid = (meta.touched || validateOnMount) && meta.error;
 
+  let finalValue = input.value;
+  if (input.value instanceof Date) {
+    let [hours = '00', minutes = '00'] = input.value
+      .toLocaleTimeString('en-us', {
+        hour12: !!twelveHoursFormat,
+        timeZone: timezones.find(({ value }) => value === timezone)?.showAs
+      })
+      .split(':');
+
+    finalValue = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+  }
+
+  const enhnancedOnBlur = () => {
+    let [hours = '00', minutes = '00'] = finalValue?.split(':') || [];
+
+    if (!hours || isNaN(hours)) {
+      hours = '00';
+    }
+
+    if (!minutes || isNaN(minutes)) {
+      minutes = '00';
+    }
+
+    if (twelveHoursFormat) {
+      hours = hours % 12;
+      if (format === 'PM') {
+        hours = hours + 12;
+      }
+    } else {
+      hours = hours % 24;
+    }
+
+    minutes = minutes % 59;
+    const enhancedValue = new Date(`Jan 1 2000 ${hours}:${minutes}:00 ${timezone}`);
+
+    input.onChange(enhancedValue);
+    input.onBlur();
+  };
+
+  useEffect(() => {
+    if (isMounted.current === true) {
+      enhnancedOnBlur();
+    } else {
+      isMounted.current = true;
+    }
+  }, [timezone, format]);
+
   return (
-    <CarbonTimePicker {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest}>
+    <CarbonTimePicker
+      {...input}
+      value={finalValue}
+      onBlur={enhnancedOnBlur}
+      key={input.name}
+      id={input.name}
+      invalid={Boolean(invalid)}
+      invalidText={invalid || ''}
+      {...rest}
+    >
       {twelveHoursFormat && (
-        <TimePickerSelect id={`${rest.id || input.name}-12h`}>
+        <TimePickerSelect 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 id={`${rest.id || input.name}-timezones`}>
-          {timezones.map((tz) => (
+        <TimePickerSelect 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} />
           ))}
         </TimePickerSelect>
@@ -40,8 +100,9 @@ TimePicker.propTypes = {
   twelveHoursFormat: PropTypes.bool,
   timezones: PropTypes.arrayOf(
     PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.node
+      value: PropTypes.string.isRequired,
+      label: PropTypes.node.isRequired,
+      showAs: PropTypes.string.isRequired
     })
   )
 };