envoc-form 4.0.1-0 → 4.0.1-3

package/src/TextArea/TextAreaGroup.tsx

@@ -0,0 +1,55 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+export interface TextAreaGroupProps
+  extends InjectedFieldProps<string | undefined>,
+    Omit<
+      React.HTMLProps<HTMLTextAreaElement>,
+      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+  icon?: React.ReactNode;
+}
+
+/** generic controlled <textarea/> wrapped by a Group */
+function TextAreaGroup(
+  {
+    input,
+    meta,
+    label,
+    helpText,
+    className,
+    disabled,
+    icon,
+    ...rest
+  }: TextAreaGroupProps,
+  ref: LegacyRef<HTMLTextAreaElement>
+) {
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      disabled={disabled}
+      label={label}
+      helpText={helpText}
+      className={classNames(className, 'text-area-group')}>
+      {icon}
+      <textarea
+        {...input}
+        {...rest}
+        value={input.value}
+        onChange={(val) => input.onChange(val.target.value)}
+        ref={ref}
+        className={classNames(className, 'text-area-group')}
+      />
+    </Group>
+  );
+}
+
+const TextAreaGroupWithRef = React.forwardRef(
+  TextAreaGroup
+) as React.ComponentType<TextAreaGroupProps>;
+
+export default TextAreaGroupWithRef;

package/src/Validation/validators.ts

@@ -15,11 +15,11 @@ export const length = (len: number) => (value: string | number | undefined) => {
   return !hasError ? undefined : `Length must be ${len}`;
 };
 
-export const integer = (val: string | undefined) => {
+export const integer = (val: string | number | undefined) => {
   if (!val) {
     return undefined;
   }
-  if (!Number.isInteger(parseFloat(val))) {
+  if (!Number.isInteger(typeof val === 'number' ? val : parseFloat(val))) {
     return 'Must be a whole number';
   }
 };

package/src/index.ts

@@ -15,19 +15,38 @@ export { default as ConfirmDeleteForm } from './ConfirmDeleteForm/ConfirmDeleteF
 export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteForm';
 
 // Date
-export { default as DatePickerInput } from './DatePickerInput/DatePickerInput';
-export type { DatePickerInputProps, DateOnly } from './DatePickerInput/DatePickerInput';
+export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
+export type { DatePickerGroupProps as DatePickerGroupProps } from './DatePicker/DatePickerGroup';
+export { convertToTimeZoneInsensitiveISOString } from './DatePicker/DatePickerGroup';
+
+export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
+
+export { default as DateOnlyDatePickerGroup } from './DatePicker/DateOnlyDatePickerGroup';
+export type {
+  DateOnly,
+  DateOnlyDatePickerGroupProps,
+} from './DatePicker/DateOnlyDatePickerGroup';
+
+export { default as StringDatePickerGroup } from './DatePicker/StringDatePickerGroup';
+export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGroup';
 
 // Field
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';
 
+export type { RenderComponent } from './Field/Field';
+export type { RenderComponentProps } from './Field/Field';
+
 export { default as FieldErrorScrollTarget } from './Field/FieldErrorScrollTarget';
 
 export { FieldNameContext } from './Field/FieldNameContext';
 
 export type { InjectedFieldProps } from './Field/InjectedFieldProps';
 
+export { default as StandAloneInput } from './Field/StandAloneInput';
+
+export type { StandAloneInputProps } from './Field/StandAloneInput';
+
 export { default as useStandardField } from './Field/useStandardField';
 export type { useStandardFieldProps } from './Field/useStandardField';
 
@@ -54,6 +73,9 @@ export type {
 export { default as FormActions } from './FormActions';
 export type { FormActionsProps as FormActionsProps } from './FormActions';
 
+export { default as StandardFormActions } from './StandardFormActions';
+export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
+
 // Input
 export { default as Group } from './Group';
 export type { GroupProps as GroupProps } from './Group';
@@ -79,7 +101,7 @@ export * as normalizers from './Normalization/normalizers';
 
 // Select
 export { default as SelectGroup } from './Select/SelectGroup';
-export type { SelectGroupProps } from './Select/SelectGroup';
+export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
 
 export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
 export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
@@ -88,13 +110,27 @@ export {
   MultiNumberSelectGroup,
   SingleNumberSelectGroup,
 } from './Select/NumberSelectGroup';
-export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps } from './Select/NumberSelectGroup';
+export type {
+  MultiNumberSelectGroupProps,
+  SingleNumberSelectGroupProps,
+} from './Select/NumberSelectGroup';
+
+export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
 
 export {
   MultiStringSelectGroup,
   SingleStringSelectGroup,
 } from './Select/StringSelectGroup';
-export type { MultiStringSelectGroupProps, SingleStringSelectGroupProps } from './Select/StringSelectGroup';
+export type {
+  MultiStringSelectGroupProps,
+  SingleStringSelectGroupProps,
+} from './Select/StringSelectGroup';
+
+// Text Area
+
+export { default as TextAreaGroup } from './TextArea/TextAreaGroup';
+
+export type { TextAreaGroupProps } from './TextArea/TextAreaGroup';
 
 // Utils
 export { default as objectContainsNonSerializableProperty } from './utils/objectContainsNonSerializableProperty';

package/es/DatePickerInput/DatePickerInput.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { DatePickerProps } from 'react-date-picker';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { GroupProps } from '../Group';
-export interface DateOnly {
-    year?: number;
-    month?: number;
-    day?: number;
-}
-declare type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
-export interface DatePickerInputProps extends InjectedDate, Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>, Omit<GroupProps, keyof InjectedDate | 'children'> {
-}
-export default function DatePickerInput({ input, meta, label, helpText, className, disabled, ...rest }: DatePickerInputProps): JSX.Element;
-export {};

package/lib/DatePickerInput/DatePickerInput.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { DatePickerProps } from 'react-date-picker';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { GroupProps } from '../Group';
-export interface DateOnly {
-    year?: number;
-    month?: number;
-    day?: number;
-}
-declare type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
-export interface DatePickerInputProps extends InjectedDate, Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>, Omit<GroupProps, keyof InjectedDate | 'children'> {
-}
-export default function DatePickerInput({ input, meta, label, helpText, className, disabled, ...rest }: DatePickerInputProps): JSX.Element;
-export {};

package/src/DatePickerInput/DatePickerInput.tsx

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import DatePicker, { DatePickerProps } from 'react-date-picker';
-import classnames from 'classnames';
-import parseISO from 'date-fns/parseISO';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import Group, { GroupProps } from '../Group';
-
-// Docs for react-date-picker https://www.npmjs.com/package/react-date-picker
-
-// TODO: pick better home for this
-export interface DateOnly {
-  year?: number;
-  month?: number;
-  day?: number;
-}
-
-type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
-
-export interface DatePickerInputProps
-  extends InjectedDate,
-    Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>,
-    Omit<GroupProps, keyof InjectedDate | 'children'> {}
-
-export default function DatePickerInput({
-  input,
-  meta,
-  label,
-  helpText,
-  className,
-  disabled,
-  ...rest
-}: DatePickerInputProps) {
-  const [displayDate, setDisplayDate] = useState<Date | null>(null);
-
-  function handleChange(e: DatePickerProps['value'] | undefined) {
-    const { onChange } = input;
-    if (onChange == null) {
-      return;
-    }
-
-    if (!e) {
-      onChange(undefined);
-      setDisplayDate(null);
-      return;
-    }
-
-    if (e instanceof Date) {
-      const parsedValue = parseISO(e.toISOString().split('T')[0]);
-
-      setDisplayDate(parsedValue);
-      onChange({
-        year: e.getFullYear(),
-        month: e.getMonth() + 1,
-        day: e.getDate(),
-      });
-    } else {
-      // e is instanceof Date[]
-      const parsedValue = parseISO(e[0].toISOString().split('T')[0]);
-
-      setDisplayDate(parsedValue);
-      onChange({
-        year: e[0].getFullYear(),
-        month: e[0].getMonth() + 1,
-        day: e[0].getDate(),
-      });
-    }
-  }
-
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      className={classnames(className, 'date-picker')}
-      disabled={disabled}>
-      <DatePicker
-        {...rest}
-        className={classnames('date-picker', className)}
-        value={displayDate}
-        onChange={handleChange}
-      />
-    </Group>
-  );
-}