feat(carbon): add string variant of timepicker

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

@@ -0,0 +1,241 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
+
+import FormTemplate from '../form-template';
+import { act } from 'react-dom/test-utils';
+import TimePicker from '../time-picker';
+
+describe('TimePicker<String>', () => {
+  let initialProps;
+  let onSubmit;
+  let wrapper;
+  let schema;
+
+  beforeEach(() => {
+    onSubmit = jest.fn();
+    initialProps = {
+      onSubmit: (values) => onSubmit(values),
+      componentMapper: {
+        [componentTypes.TIME_PICKER]: {
+          component: TimePicker,
+          useStringFormat: true,
+        },
+      },
+      FormTemplate,
+    };
+  });
+
+  it('change AM/PM', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+          twelveHoursFormat: true,
+        },
+      ],
+    };
+
+    wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '00:35' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'PM' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('00:35');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 PM' });
+
+    onSubmit.mockReset();
+
+    await act(async () => {
+      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'AM' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('00:35');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 AM' });
+  });
+
+  it('does not handle invalid date', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+        },
+      ],
+    };
+
+    wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: 'aa:BB' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('input').simulate('blur');
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('aa:BB');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': 'aa:BB' });
+  });
+
+  it('handle change', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+        },
+      ],
+    };
+
+    wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '13:87' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('input').simulate('blur');
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('13:87');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '13:87' });
+    onSubmit.mockReset();
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '25:16' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('input').simulate('blur');
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('25:16');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '25:16' });
+  });
+
+  it('change timezone', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+          twelveHoursFormat: true,
+          timezones: [
+            { label: 'UTC', value: 'UTC' },
+            { label: 'EST', value: 'EAST' },
+          ],
+        },
+      ],
+    };
+
+    wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '00:35' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'EST' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('00:35');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 AM EST' });
+
+    onSubmit.mockReset();
+
+    await act(async () => {
+      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('00:35');
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 UTC EST' });
+  });
+
+  it('handles initial value', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+          initialValue: '12:57 PM EAST',
+          twelveHoursFormat: true,
+          timezones: [
+            { label: 'UTC', value: 'UTC' },
+            { label: 'EST', value: 'EAST' },
+          ],
+        },
+      ],
+    };
+
+    wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+
+    expect(wrapper.find('input').props().value).toEqual('12:57');
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '00:35' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 PM EAST' });
+  });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './time-picker-base';
+export * from './time-picker-base';

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

@@ -0,0 +1,2 @@
+export { default } from './time-picker-base';
+export * from './time-picker-base';

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

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import { AnyObject, Input } from "@data-driven-forms/react-form-renderer";
+
+import { FormGroupProps } from "../form-group";
+
+import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
+
+export interface Timezone extends SelectItemProps {
+    value: string;
+    label?: string;
+}
+
+interface InternalTimePickerBaseProps extends CarbonTimePickerProps, AnyObject {
+    twelveHoursFormat?: boolean;
+    timezones?: Timezone[];
+    input: Input<any>;
+    enhnancedOnBlur?: () => void;
+    enhancedOnChange?: (value: string) => void;
+    finalValue: any;
+    warnText?: ReactNode;
+    selectFormat: (value: 'AM' | 'PM') => void;
+    selectTimezone: (value: string) => void;
+}
+
+export type TimePickerBaseProps = InternalTimePickerBaseProps & FormGroupProps;
+
+declare const TimePickerBase: React.ComponentType<TimePickerBaseProps>;
+
+export default TimePickerBase;

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from 'carbon-components-react';
+
+import HelperTextBlock from '../helper-text-block/helper-text-block';
+
+const TimePickerBase = ({
+  WrapperProps,
+  input,
+  enhnancedOnBlur,
+  enhancedOnChange,
+  finalValue,
+  invalid,
+  twelveHoursFormat,
+  timezones,
+  helperText,
+  warnText,
+  selectFormat,
+  selectTimezone,
+  ...rest
+}) => (
+  <div {...WrapperProps}>
+    <CarbonTimePicker
+      {...input}
+      {...(enhnancedOnBlur && { onBlur: enhnancedOnBlur })}
+      {...(enhancedOnChange && { onChange: (e) => enhancedOnChange(e.target.value) })}
+      onBlur={enhnancedOnBlur}
+      value={finalValue}
+      key={input.name}
+      id={input.name}
+      invalid={Boolean(invalid)}
+      invalidText={invalid || ''}
+      {...rest}
+    >
+      {twelveHoursFormat && (
+        <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 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>
+      )}
+    </CarbonTimePicker>
+    <HelperTextBlock helperText={!invalid && helperText} warnText={warnText} />
+  </div>
+);
+
+TimePickerBase.propTypes = {
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  labelText: PropTypes.node,
+  description: PropTypes.node,
+  twelveHoursFormat: PropTypes.bool,
+  timezones: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.node.isRequired,
+      showAs: PropTypes.string,
+    })
+  ),
+  WrapperProps: PropTypes.object,
+  input: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+  enhnancedOnBlur: PropTypes.func,
+  enhancedOnChange: PropTypes.func,
+  finalValue: PropTypes.any,
+  invalid: PropTypes.node,
+  helperText: PropTypes.node,
+  warnText: PropTypes.node,
+  selectFormat: PropTypes.func.isRequired,
+  selectTimezone: PropTypes.func.isRequired,
+};
+
+export default TimePickerBase;

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

@@ -0,0 +1,2 @@
+export { default } from './time-picker-date';
+export * from './time-picker-date';

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

@@ -0,0 +1,2 @@
+export { default } from './time-picker-date';
+export * from './time-picker-date';

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

@@ -0,0 +1,21 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+import { FormGroupProps } from "../form-group";
+
+import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
+
+export interface Timezone extends SelectItemProps {
+    value: string;
+    label?: string;
+}
+
+interface InternalTimePickerProps extends CarbonTimePickerProps {
+    twelveHoursFormat?: boolean;
+    timezones?: Timezone[];
+}
+
+export type TimePickerDateProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const TimePickerDate: React.ComponentType<TimePickerDateProps>;
+
+export default TimePickerDate;