envoc-form 4.1.0 → 4.3.0

package/src/Input/PhoneNumberInputGroup.tsx

@@ -0,0 +1,49 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+import { phoneNumber } from '../Normalization/normalizers';
+
+export interface PhoneNumberInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {}
+
+function PhoneNumberInputGroup(
+  { className, ...rest }: PhoneNumberInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      autoComplete="tel-national"
+      {...rest}
+      type="text"
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'phone-number-group'
+      )}
+      value={input.value ?? ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(phoneNumber(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+/**A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
+ * The data will get sent in the same format as displayed. Uses `normalizers.phoneNumber`.
+ * @default autoComplete="tel-national"
+ */
+const PhoneNumberInputGroupWithRef = React.forwardRef(
+  PhoneNumberInputGroup
+) as React.ComponentType<PhoneNumberInputGroupProps>;
+
+export default PhoneNumberInputGroupWithRef;

package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import PhoneNumberInputGroup from '../PhoneNumberInputGroup';
+
+describe('PhoneNumberInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PhoneNumberInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="something-here envoc-form-phone-number-group envoc-form-input-group envoc-form-group"
+    >
+      <div
+        id="phonenumber-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="phoneNumber"
+      >
+        Phone Number
+      </label>
+      <input
+        aria-invalid="false"
+        autocomplete="tel-national"
+        class="something-here envoc-form-phone-number-group envoc-form-input-group"
+        id="phoneNumber"
+        name="phoneNumber"
+        type="text"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/__Tests__/FormTestBase.tsx

@@ -57,6 +57,7 @@ export interface PersonDto {
   favoriteColor?: string;
   favoriteColors?: string[];
   favoriteNames?: string[];
+  createdDateTime?: string;
   allowLogin?: boolean;
   userRoles?: number[];
   profileImage?: any;

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+import useFormValue from './useFormValue';
+
+export { useFormValue };

package/src/hooks/useFormValue.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { FormBuilderProp } from 'Form/Form';
+import { useFormikContext } from 'formik';
+
+export default function useFormValue<
+  TForm extends object,
+  TPropKey extends keyof TForm
+>(formBuilder: FormBuilderProp<TForm>, fieldName: TPropKey) {
+  const { values, setFieldValue } = useFormikContext<TForm>();
+  const setValue = useCallback(
+    (value: TForm[TPropKey]) => setFieldValue(fieldName as string, value),
+    [fieldName, setFieldValue]
+  );
+
+  return [values[fieldName], setValue] as const;
+}

package/src/index.ts

@@ -27,6 +27,13 @@ export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGr
 export { default as StringDateOnlyPickerGroup } from './DatePicker/StringDateOnlyPickerGroup';
 export type { StringDateOnlyPickerGroupProps } from './DatePicker/StringDateOnlyPickerGroup';
 
+// DateTime
+export { default as DateTimePickerGroup } from './DateTimePicker/DateTimePickerGroup';
+export type { DateTimePickerGroupProps } from './DateTimePicker/DateTimePickerGroup';
+
+export { default as StringDateTimePickerGroup } from './DateTimePicker/StringDateTimePickerGroup';
+export type { StringDateTimePickerGroupProps } from './DateTimePicker/StringDateTimePickerGroup';
+
 // Field
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';
@@ -92,6 +99,9 @@ export type { MoneyInputGroupProps } from './Input/MoneyInputGroup';
 export { default as NumberInputGroup } from './Input/NumberInputGroup';
 export type { NumberInputGroupProps } from './Input/NumberInputGroup';
 
+export { default as PhoneNumberInputGroup } from './Input/PhoneNumberInputGroup';
+export type { PhoneNumberInputGroupProps } from './Input/PhoneNumberInputGroup';
+
 export { default as StringInputGroup } from './Input/StringInputGroup';
 export type { StringInputGroupProps } from './Input/StringInputGroup';